@lingxiteam/ebe-utils 0.2.4 → 0.2.5

package/lib/h5public/src/components/factory/src/Description/index.tsx

@@ -0,0 +1,381 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Popover } from 'antd-mobile-5';
+import classnames from 'classnames';
+import React, { useImperativeHandle, useMemo } from 'react';
+import CustomModule from '../utils/CustomModule';
+import { useListenProps } from '../utils/hooks/useListenState';
+import './index.less';
+import getLabelSizeMode from './utils/getLabelSizeMode';
+
+const prefixCls = 'lcdp-description';
+
+export interface MyDescriptionProps {
+  visible?: boolean;
+  dataSource?: any;
+  labelWidth?: any;
+  style?: React.CSSProperties | any;
+  className?: any;
+  columns: any[];
+  bordered?: boolean;
+  colon?: boolean;
+  colSpan?: number;
+  labelAlign?: any;
+  textAlign?: any;
+  colServiceData?: any;
+  lineBreak?: string;
+  appId?: string;
+  layout?: 'horizontal' | 'vertical';
+  labelSize?: any;
+}
+
+const Description = LingxiForwardRef<any, MyDescriptionProps>((props, ref) => {
+  const {
+    labelWidth,
+    labelSize,
+    style,
+    className,
+    columns,
+    bordered,
+    colon,
+    colSpan,
+    labelAlign,
+    textAlign,
+    lineBreak,
+    visible = true,
+    layout = 'horizontal',
+    getEngineApis,
+  } = props;
+  const { textPadding, labelColor, labelFontSize, labelFontWeight, textColor, textFontSize, textFontWeight, textLineHeight, ...restStyle } =
+    style || {};
+
+  const [dataSource, setDataSource] = useListenProps(props.dataSource || {});
+  const [colServiceData, setColServiceData] = useListenProps(props.colServiceData);
+
+  useImperativeHandle(ref, () => ({
+    clearData() {
+      setDataSource({});
+    },
+    setDataSource(data: any) {
+      setDataSource(data);
+    },
+    addColServiceData(serviceData: any = {}) {
+      setColServiceData({
+        ...(colServiceData || {}),
+        ...serviceData,
+      });
+    },
+  }));
+
+  const engineApis = getEngineApis?.() || {};
+  const { px2rem, sandBoxSafeRun, renderPopover, sandBoxLoadModule } = engineApis;
+
+  const _dataSource = useMemo(() => {
+    if (dataSource instanceof Object) {
+      if (Array.isArray(dataSource)) {
+        // 如果传进来的是数组，默认取数组第一个对象作为数据源
+        return dataSource.length ? dataSource[0] : {};
+      }
+      return dataSource;
+    }
+    return {};
+  }, [dataSource]);
+
+  const sandBoxSafeRunFun = (content: any, isBoolean: boolean = false) => {
+    let finalContent = content;
+    try {
+      if (finalContent) {
+        if (typeof finalContent === 'string') {
+          if (isBoolean && finalContent === 'false') {
+            return false;
+          }
+          finalContent = sandBoxSafeRun(finalContent, { list: _dataSource });
+        }
+        if (finalContent === undefined && content) {
+          finalContent = content;
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return finalContent;
+  };
+
+  const finalColums = useMemo(() => {
+    // 解析动态列
+    const resolvedDymColumns = columns
+      .map((col: any) => {
+        // 解析动态列配置，根据动态列数据源，得到真正的列配置数组数据
+        if (col.type === 'dynamicCol') {
+          if (col?.dataSource?.length) {
+            return col.dataSource.map((c: any, index: number) => {
+              const realCol = {
+                ...col, // 动态列所有配置行为（排序、固定等）相同
+                dataIndex: c[col.dataIndex],
+                label: c[col.title || col.label],
+              };
+
+              // key增强，拼接index，防止重复
+              realCol.key = `${realCol.key}_${index}`;
+
+              // 移除动态列标识字段，和动态列数据源字段
+              delete realCol.type;
+              delete realCol.dataSource;
+              return realCol;
+            });
+          }
+          return [];
+        }
+        return col;
+      })
+      .reduce((prev: any, curr: any) => {
+        // 将动态列的列配置数组数据打平
+        if (Array.isArray(curr)) {
+          return [...prev, ...curr];
+        }
+        return [...prev, curr];
+      }, []);
+
+    const newColumns = [...resolvedDymColumns];
+    let hiddenCount = 0;
+    resolvedDymColumns.forEach((c: any, i: number) => {
+      try {
+        let isHidden;
+        const colHiddenRule = c?.hiddenRule;
+        if (typeof colHiddenRule === 'string') {
+          isHidden = sandBoxSafeRun(colHiddenRule, {});
+        } else if (typeof colHiddenRule === 'boolean') {
+          isHidden = colHiddenRule;
+        }
+        if (isHidden) {
+          newColumns.splice(i - hiddenCount, 1);
+          hiddenCount += 1;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    });
+    // 记录前一个layout是什么，后一个不一样时需要换行
+    let preLayout: string;
+    const columnRows: any[] = [[]];
+    let currentRows = columnRows[0];
+    newColumns.forEach((c, i) => {
+      const { staticDataSource, staticService, editContent, tagLayout = layout } = c;
+      // 布局方式前后列不同时，换行展示
+      if (preLayout !== tagLayout && preLayout) {
+        const newRows: any[] = [];
+        columnRows.push(newRows);
+        currentRows = newRows;
+      }
+      currentRows.push(newColumns[i]);
+      // 按照条件，初始化生成实际的列定义
+      newColumns[i].render = (text: any, row: any, renderText: any) => {
+        let content = text;
+
+        if (content !== undefined && content !== null) {
+          // 静态数据部分
+          if (Array.isArray(staticDataSource)) {
+            // 支持数组类型值或字符串逗号隔开值翻译
+            content = (Array.isArray(text) ? text : String(text).split(','))
+              .map(n => {
+                // 弱等保证 Number 与 String 可比较
+                // eslint-disable-next-line eqeqeq
+                const obj = staticDataSource.find(o => o.value == n);
+                return obj ? obj.label : n;
+              })
+              .join(',');
+          }
+          // 服务数据翻译
+          if (staticService && colServiceData) {
+            const { labelKey, valueKey } = staticService;
+            const needtranskey = Object.keys(colServiceData).find(k => {
+              if (k === c.dataIndex && Array.isArray(colServiceData[k])) {
+                return true;
+              }
+              return false;
+            });
+            if (needtranskey) {
+              // 支持数组类型值或字符串逗号隔开值翻译
+              content = (Array.isArray(text) ? text : String(text).split(','))
+                .map(n => {
+                  // 弱等保证 Number 与 String 可比较
+                  // eslint-disable-next-line eqeqeq
+                  const obj = colServiceData[needtranskey].find((o: any) => o[valueKey] == n);
+                  return obj ? obj[labelKey] : n;
+                })
+                .join(',');
+            }
+          }
+        }
+
+        // 如果配置了换行符则根据换行符进行切割
+        if (lineBreak && typeof text === 'string') {
+          content = content.split(lineBreak).map((_c: any, _i: any) => <div key={_i}>{_c}</div>);
+        }
+
+        // 自定义渲染函数
+        if (c.jsx) {
+          content = renderText(
+            <div>
+              <CustomModule
+                code={c.customRendering}
+                sandBoxLoadModule={sandBoxLoadModule}
+                compProps={{ text: content, item: row, index: i }}
+                errorInfo={{
+                  id: props.$$componentItem.id,
+                }}
+              />
+            </div>
+          );
+        } else {
+          content = renderText(content);
+        }
+
+        // 内容设置
+        if (editContent) {
+          if (editContent.edittype === 'Popover' && editContent?.selectoption) {
+            const { page, options } = editContent.selectoption;
+
+            // 页面
+            if (page && page.pageId && renderPopover) {
+              if (sandBoxSafeRunFun(page.rule, true)) {
+                return content;
+              }
+              if (page.options) {
+                page.options.forEach((_c: any) => {
+                  _c.stateParam = sandBoxSafeRunFun(_c?.stateParam);
+                });
+              }
+              content = renderPopover({
+                childElement: content,
+                props,
+                popoverSetting: {
+                  page,
+                  options: page.options,
+                },
+                uid: props?.$$componentItem?.uid,
+              });
+            } else if (options.content) {
+              // 自定义
+              const { maxWidth, content: popContent, placement, title: popTitle } = options;
+
+              // 隐藏规则
+              if (sandBoxSafeRunFun(options.rule, true)) {
+                return content;
+              }
+
+              const newPopContent = sandBoxSafeRunFun(popContent);
+              const newPopTitle = sandBoxSafeRunFun(popTitle);
+
+              return (
+                <Popover
+                  content={
+                    <div style={{ maxWidth: maxWidth || 'none' }}>
+                      {newPopTitle && <div className={`${prefixCls}-popover-title`}>{newPopTitle}</div>}
+                      {newPopContent}
+                    </div>
+                  }
+                  trigger="click"
+                  placement={placement}
+                >
+                  {content}
+                </Popover>
+              );
+            }
+          }
+        }
+        return content;
+      };
+      preLayout = tagLayout;
+    });
+    return columnRows;
+  }, [columns, colServiceData, lineBreak, _dataSource, layout, labelWidth, labelSize]);
+
+  const labelStyle = useMemo(() => {
+    return {
+      color: labelColor,
+      fontSize: labelFontSize,
+      fontWeight: labelFontWeight,
+      lineHeight: textLineHeight,
+    };
+  }, [labelColor, labelFontSize, labelFontWeight, textPadding, textLineHeight]);
+  const textStyle = useMemo(() => {
+    return {
+      color: textColor,
+      fontSize: textFontSize,
+      fontWeight: textFontWeight,
+      lineHeight: textLineHeight,
+    };
+  }, [textColor, textFontSize, textFontWeight, textLineHeight]);
+  const textPaddingStyle = useMemo(() => {
+    if (textPadding) {
+      return {
+        '--des-text-padding': textPadding,
+      } as any;
+    }
+    return {};
+  }, [textPadding]);
+
+  return visible ? (
+    <div
+      className={classnames(className, prefixCls)}
+      style={px2rem({
+        ...restStyle,
+        '--des-text-padding': '8px 8px 8px 8px',
+        '--des-border-color': '#e5e5e5',
+        '--des-border-width': '1px',
+      })}
+    >
+      {(finalColums || []).map(cols => (
+        <div
+          className={classnames(`${prefixCls}-wrap`, bordered ? 'border' : '')}
+          style={px2rem({
+            ...textPaddingStyle,
+          })}
+        >
+          {(cols || []).map((c: any) => {
+            // tagSize表示多单位的标签宽度，目前包括px，栅格和以当前列数为基准的占比，修改时旧的tagWidth会被清空
+            const { key, dataIndex, render, span, label, title, tagLayout = layout } = c || {};
+            const value = _dataSource[dataIndex];
+            const { width, contentWidth } = getLabelSizeMode({ ...c, labelSize, labelWidth, colSpan }) || {};
+
+            const renderText = (child: any) => (
+              <div
+                className={`${prefixCls}-text`}
+                style={px2rem({
+                  width: tagLayout === 'vertical' ? undefined : contentWidth,
+                  textAlign,
+                  ...textStyle,
+                })}
+              >
+                {child}
+              </div>
+            );
+
+            return (
+              <div
+                className={classnames(`${prefixCls}-cell`, `${prefixCls}-${tagLayout}-cell`, bordered ? 'border' : '')}
+                style={{ flex: `0 0 ${100 / (24 / (span || colSpan))}%` }}
+                key={key}
+              >
+                <div
+                  className={classnames(`${prefixCls}-label`, bordered ? 'bg' : '')}
+                  title={title}
+                  style={px2rem({
+                    width: tagLayout === 'vertical' ? 'auto' : width,
+                    textAlign: labelAlign,
+                    ...labelStyle,
+                  })}
+                >
+                  {!bordered && colon ? `${label || title}:` : label || title}
+                </div>
+                {render ? render(value, _dataSource, renderText) : value}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  ) : null;
+});
+
+export default Description;

package/lib/h5public/src/components/factory/src/Description/utils/getLabelSizeMode.ts

@@ -0,0 +1,39 @@
+const getLabelSizeMode = (config: any) => {
+  const { tagSize, tagWidth, labelWidth, labelSize, colSpan, span } = config || {};
+  let width = tagSize;
+  if (!width && (tagWidth || labelWidth)) {
+    width = `${tagWidth || labelWidth}px`;
+  }
+  if (!width) {
+    width = labelSize;
+  }
+  if (/^\d+(\.\d+)?px$/.test(width)) {
+    return {
+      mode: 'px',
+      width,
+      contentWidth: 'auto',
+    };
+  }
+  if (/^(1\d|24|[1-9])$/.test(width)) {
+    return {
+      mode: 'grid',
+      width: `${(width / 24) * 100}%`,
+      contentWidth: `${((24 - width) / 24) * 100}%`,
+    };
+  }
+  if (/^(?!0\/0)\d+\/(?!0)\d+$/.test(width)) {
+    const currentSpan = span || colSpan;
+    // 占比值为分数形式
+    // eslint-disable-next-line no-eval
+    width = eval(`${width}*24`);
+    const contentWidth = currentSpan - width;
+    return {
+      mode: 'fraction',
+      width: `${(width / currentSpan) * 100}%`,
+      contentWidth: `${(contentWidth / currentSpan) * 100}%`,
+    };
+  }
+  return undefined;
+};
+
+export default getLabelSizeMode;

package/lib/h5public/src/components/factory/src/DformCustom/Context.tsx

@@ -14,9 +14,7 @@ export interface DFormCustomContextProviderType {
   form: FormInstance;
 }
 
-const DFormCustomContext = React.createContext<
-  DFormCustomContextProviderType | { inCustomForm: false }
->({
+const DFormCustomContext = React.createContext<DFormCustomContextProviderType | { inCustomForm: false }>({
   inCustomForm: false,
 });
 

package/lib/h5public/src/components/factory/src/DformCustom/FormCustomField.tsx

@@ -19,27 +19,18 @@ interface ErrorBlockType {
 }
 
 const ErrorBlock: FC<ErrorBlockType> = ({ error }) => {
-  return error ? (
-    <div className="lcdp-dform-custom-error-text">{error}</div>
-  ) : null;
+  return error ? <div className="lcdp-dform-custom-error-text">{error}</div> : null;
 };
 
-const FormCustomField: FC<FormCustomFieldType> = (props) => {
-  const {
-    children,
-    showError,
-    valuePropName = 'value',
-    trigger = 'onChange',
-    getEngineApis,
-  } = props;
+const FormCustomField: FC<FormCustomFieldType> = props => {
+  const { children, showError, valuePropName = 'value', trigger = 'onChange', getEngineApis } = props;
   const formContext = useDformCustom();
   const { compatConfig } = getEngineApis?.() || {};
   if (!formContext.inCustomForm) {
     return children;
   }
 
-  const { name, error, disabled, onChange, getRules, visible, message, form } =
-    formContext;
+  const { name, error, disabled, onChange, getRules, visible, message, form } = formContext;
 
   // 兼容表单行容器没有放到表单内，拖拽画布出现bug，导致存在这种数据。
   if (!form) {
@@ -67,12 +58,7 @@ const FormCustomField: FC<FormCustomFieldType> = (props) => {
   }, [visible]);
   return (
     <>
-      <Form.DFormField
-        name={name}
-        rules={rules}
-        valuePropName={valuePropName}
-        trigger={trigger}
-      >
+      <Form.DFormField name={name} rules={rules} valuePropName={valuePropName} trigger={trigger}>
         {React.cloneElement(children, {
           [trigger]: (...e: any[]) => {
             if (isFunction(triggerHandle)) {
@@ -87,9 +73,7 @@ const FormCustomField: FC<FormCustomFieldType> = (props) => {
           rules: visible ? getRules() : [],
         })}
       </Form.DFormField>
-      {showError && (
-        <ErrorBlock error={error?.[name] ? message || error?.[name] : ''} />
-      )}
+      {showError && <ErrorBlock error={error?.[name] ? message || error?.[name] : ''} />}
     </>
   );
 };

package/lib/h5public/src/components/factory/src/DformCustom/index.tsx

@@ -2,11 +2,7 @@ import { LingxiForwardRef } from '@lingxiteam/types';
 import React from 'react';
 import { DFormWrapper, FormItem } from '../BasicComponents';
 import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
-import {
-  DFormCustomContextProviderType,
-  DFormCustomProvider,
-  useDformCustom,
-} from './Context';
+import { DFormCustomContextProviderType, DFormCustomProvider, useDformCustom } from './Context';
 import FormCustomField from './FormCustomField';
 
 export interface MyDformCustomProps extends UseFormItemProps {
@@ -29,15 +25,7 @@ const DformCustom = LingxiForwardRef<any, MyDformCustomProps>((props, ref) => {
   } = props;
 
   // 这个禁用可能来自表单
-  const {
-    disabled,
-    visible = true,
-    onInputChange,
-    error,
-    getRules,
-    val,
-    form,
-  } = useFormItem(ref, props);
+  const { disabled, visible = true, onInputChange, error, getRules, val, form } = useFormItem(ref, props);
 
   const values: DFormCustomContextProviderType = {
     inCustomForm: true,
@@ -56,9 +44,7 @@ const DformCustom = LingxiForwardRef<any, MyDformCustomProps>((props, ref) => {
     <FormItem>
       <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
         <div id={`lcdp-form-item-${fieldProps}`} style={style}>
-          <DFormCustomProvider value={values}>
-            {props.children}
-          </DFormCustomProvider>
+          <DFormCustomProvider value={values}>{props.children}</DFormCustomProvider>
         </div>
       </DFormWrapper>
     </FormItem>

package/lib/h5public/src/components/factory/src/DformDate/DatePicker.tsx

@@ -38,29 +38,15 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
 
   const { getLocale, getLocaleEnv } = getEngineApis?.() || {};
   const lanEnv = getLocaleEnv();
-  const { showFormat, valueFormat: finalValueFormat } = useLocaleFormatter(
-    newFormatter,
-    lanEnv,
-    {
-      valueFormat,
-      mode: props.modeType,
-      extendStandardFormat: {
-        time: 'HH:mm',
-      },
+  const { showFormat, valueFormat: finalValueFormat } = useLocaleFormatter(newFormatter, lanEnv, {
+    valueFormat,
+    mode: props.modeType,
+    extendStandardFormat: {
+      time: 'HH:mm',
     },
-  );
+  });
 
-  const {
-    isForm,
-    disabled,
-    form,
-    val,
-    onInputChange,
-    getRules,
-    required,
-    readOnly,
-    visible,
-  } = useFormItem(
+  const { isForm, disabled, form, val, onInputChange, getRules, required, readOnly, visible } = useFormItem(
     ref,
     {
       ...props,
@@ -69,26 +55,18 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
     {
       get value() {
         return isForm
-          ? dateToFormatter(
-              showFormat,
-              form?.getFieldValue(props.fieldProps),
-              finalValueFormat,
-            )
+          ? dateToFormatter(showFormat, form?.getFieldValue(props.fieldProps), finalValueFormat)
           : dateToFormatter(showFormat, val, finalValueFormat);
       },
       setVal: (v: string) => {
         onInputChange(dateToFormatter(showFormat, v, finalValueFormat));
         if (isForm) {
           form?.setFieldsValue({
-            [props.fieldProps]: dateToFormatter(
-              showFormat,
-              v,
-              finalValueFormat,
-            ),
+            [props.fieldProps]: dateToFormatter(showFormat, v, finalValueFormat),
           });
         }
       },
-    },
+    }
   );
   const [afterMinDate, setAfterMinDate] = useState<any>();
   const [afterMaxDate, setAfterMaxDate] = useState<any>();
@@ -122,8 +100,7 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
         required={required}
         replaceName={{
           [`${getLocale('DatePicker.year', '年', { year: '' }) || '年'}`]: '-',
-          [`${getLocale('DatePicker.month', '月', { month: '' }) || '月'}`]:
-            '-',
+          [`${getLocale('DatePicker.month', '月', { month: '' }) || '月'}`]: '-',
           [`${getLocale('DatePicker.day', '日', { day: '' }) || '日'}`]: '',
         }}
         onChange={onDateChange}

package/lib/h5public/src/components/factory/src/DformDate/index.tsx

@@ -33,11 +33,7 @@ const DformDate = LingxiForwardRef<any, MyDformDateProps>((props, ref) => {
   return (
     <FormItem>
       {/* // 统一由AddressPicker组件的hidden校验 */}
-      <Form.DFormField
-        name={fieldProps || fieldName}
-        initialValue={defaultValue}
-        params={{ formFlag: true, hidden: true }}
-      >
+      <Form.DFormField name={fieldProps || fieldName} initialValue={defaultValue} params={{ formFlag: true, hidden: true }}>
         <DatePicker {...props} ref={ref} fieldProps={fieldProps || fieldName} />
       </Form.DFormField>
     </FormItem>

package/lib/h5public/src/components/factory/src/DformDate/transformProps.tsx

@@ -15,16 +15,7 @@ const timeModeMap: any = {
 };
 
 export default function transformProps(props: Props) {
-  const {
-    basicStatus,
-    fieldName,
-    name,
-    format,
-    value,
-    isCurrent,
-    timeMode = 'time',
-    ...restProps
-  } = props;
+  const { basicStatus, fieldName, name, format, value, isCurrent, timeMode = 'time', ...restProps } = props;
   const newProps: Record<string, any> = {
     ...(restProps as any),
     status: `${basicStatus}`,