@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/DatePicker/index.tsx

@@ -1,13 +1,14 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import { DatePicker as AntdDatePicker } from 'antd';
-import { Rule } from 'antd/lib/form';
 import moment, { Moment } from 'moment';
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
-import { FormFields, getFieldsProps, useCommonImperativeHandle } from '../utils';
 import { initMomentLocale } from '../utils/common';
-import { generatorDisabledCallback, getRuleCallback, HolidaysLimitType } from '../utils/generatorDisabledCallback';
-import { useLocale } from '../utils/hooks/useLocale';
 import { renderDatePicker } from '../utils/renderReadOnly';
+import { FormFields, getFieldsProps, useCommonImperativeHandle } from '../utils';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Rule } from 'antd/lib/form';
+import { useLocale } from '../utils/hooks/useLocale';
+import { generatorDisabledCallback, getRuleCallback, HolidaysLimitType } from '../utils/generatorDisabledCallback';
+import { parseDateFromFormat } from './Helper';
 
 export interface FormDatePickerProps {
   value?: any;
@@ -118,11 +119,6 @@ const STANDARD_FORMAT: Record<string, string> = {
 //   'DD.MM.YYYY HH:mm:ss',
 // ];
 
-const parseDateFromFormat = (val: string | Moment, format: string | string[]): Moment | null => {
-  // 日期格式严格按照（取值+展示）格式转换，转换失败后再使用内置格式（标准）转换
-  const date = moment(val, format, true)?.isValid() ? moment(val, format) : moment(val);
-  return date.isValid() ? date : null;
-};
 
 const DATEPICKER_WRAPPER_CLASSNAME = 'ued-datePicker-wrap';
 const WrapperDatePicker: React.FC<WrapperDatePickerProps> = ({ children }) =>
@@ -131,33 +127,48 @@ const WrapperDatePicker: React.FC<WrapperDatePickerProps> = ({ children }) =>
   });
 const { RangePicker } = AntdDatePicker;
 const FormDatePicker: React.FC<FormDatePickerProps> = forwardRef((props, ref) => {
-  const { value, onChange, pickerType, format, valueFormat, timeMode, showTime, placeholder, ...restProps } = props;
+  const { value, onChange, pickerType, format, valueFormat, timeMode, showTime, placeholder, ...restProps } =
+    props;
   const [time, setTime] = useState<any>();
   useEffect(() => {
     let v;
     if (pickerType === 'RangePicker') {
       // return Array.isArray(value) ? value.map(c => (moment(c, moment.ISO_8601)._isValid ? moment(c, moment.ISO_8601) : null)) : undefined;
-      v = Array.isArray(value) ? value.map(c => parseDateFromFormat(c, [format, valueFormat])) : undefined;
+      v = Array.isArray(value)
+        ? value.map((c) =>
+          parseDateFromFormat(c, [format, valueFormat]),
+        )
+        : undefined;
       // 时间控件初始化取值顺序  value--> defaultValue
       if (Array.isArray(value)) {
-        v = value.map(c => parseDateFromFormat(c, [format, valueFormat]));
+        v = value.map((c) =>
+          parseDateFromFormat(c, [format, valueFormat])
+        );
       } else {
-        v = Array.isArray(restProps.defaultValue) ? restProps.defaultValue.map(c => parseDateFromFormat(c, [format, valueFormat])) : undefined;
+        v = Array.isArray(restProps.defaultValue)
+          ? restProps.defaultValue.map((c) =>
+            parseDateFromFormat(c, [format, valueFormat])
+          )
+          : undefined;
       }
     } else {
       let _value;
       if (value) {
         _value = parseDateFromFormat(value, [format, valueFormat]);
       } else {
-        _value = restProps.defaultValue ? parseDateFromFormat(restProps.defaultValue, [format, valueFormat]) : undefined;
+        _value = restProps.defaultValue
+          ? parseDateFromFormat(restProps.defaultValue, [format, valueFormat])
+          : undefined;
       }
       // const _value = value ? moment(value, format).format("YYYY-MM-DD HH:mm:ss") : undefined;
       // eslint-disable-next-line no-nested-ternary
-      v = _value ? parseDateFromFormat(_value, [format, valueFormat]) : undefined;
+      v = _value
+        ? parseDateFromFormat(_value, [format, valueFormat])
+        : undefined;
     }
     setTime(v);
   }, [value, format, valueFormat]);
-  const CompPicker = pickerType === 'RangePicker' ? RangePicker : (AntdDatePicker as any);
+  const CompPicker = pickerType === 'RangePicker' ? RangePicker : AntdDatePicker as any;
 
   initMomentLocale();
 
@@ -227,8 +238,17 @@ const FormDatePicker: React.FC<FormDatePickerProps> = forwardRef((props, ref) =>
       onOpenChange={(status: boolean) => {
         setOpen(status);
         // 当时间范围为选择年、月时，偶尔会出现组件渲染限制条件失效情况（开始时间未限制小于结束时间），故手动排序
-        if (!status && pickerType === 'RangePicker' && mode.mode && Array.isArray(time) && (time as []).length > 0) {
-          const diff = moment(time[1]).diff(moment(time[0]), `${mode.mode[0]}s` as moment.unitOfTime.Diff);
+        if (
+          !status &&
+          pickerType === 'RangePicker' &&
+          mode.mode &&
+          Array.isArray(time) &&
+          (time as []).length > 0
+        ) {
+          const diff = moment(time[1]).diff(
+            moment(time[0]),
+            `${mode.mode[0]}s` as moment.unitOfTime.Diff,
+          );
           if (diff < 0) {
             setTime([time[1], time[0]]);
           }
@@ -330,7 +350,7 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
     if (Array.isArray(val)) {
       // 注意这里val里的元素可能不是moment对象而是null
       // _i：moment对象的内置变量，当这个moment对象是使用format解析出来的时候，会用_i存储原始字符串值
-      return val.map(v => (v?.isValid?.() ? v._i : v));
+      return val.map((v) => (v?.isValid?.() ? v._i : v));
     }
     return val?.isValid?.() ? val._i : val; // eslint-disable-line no-underscore-dangle
   };
@@ -340,9 +360,9 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
       let formattedval;
       // string 转 moment 为了 format 数据
       if (pickerType === 'RangePicker') {
-        formattedval = Array.isArray(_val)
-          ? // @ts-ignore
-          _val.map(c => parseDateFromFormat(c, [finalValueFormat, _format])?.format(finalValueFormat))
+        formattedval = Array.isArray(_val) ?
+          // @ts-ignore
+          _val.map((c) => (parseDateFromFormat(c, [finalValueFormat, _format])?.format(finalValueFormat)))
           : undefined;
       } else {
         // @ts-ignore
@@ -355,13 +375,7 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
     }
     return undefined;
   };
-  const {
-    formFieldsRef,
-    required,
-    readOnly,
-    disabled,
-    finalRules: temRules,
-  } = useCommonImperativeHandle(ref, props, {
+  const { formFieldsRef, required, readOnly, disabled, finalRules: temRules } = useCommonImperativeHandle(ref, props, {
     clearValue() {
       if (pickerType === 'RangePicker') {
         onlySyncValue(undefined);
@@ -406,7 +420,9 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
         if (callback) {
           callback(customTip || result);
         }
-        return Promise.reject(new Error(customTip || result));
+        return Promise.reject(
+          new Error(customTip || result),
+        );
       }
       return Promise.resolve();
     };
@@ -416,7 +432,7 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
     }
     return rules;
   }, [temRules, required, name, customTip, endTime, startTime, limitRange, lang, disabledFnResult]);
-
+  
   const value = useMemo(() => {
     return handleFormValue(originValue);
   }, [originValue, finalValueFormat]);
@@ -428,14 +444,13 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
       disabled={disabled}
       required={required}
       ref={formFieldsRef}
-      render={val => {
+      render={(val) => {
         if (val !== undefined) {
           return renderDatePicker(
-            Array.isArray(val)
-              ? val.map(v => parseDateFromFormat(v, [finalValueFormat, _format])?.format(_format))
-              : (parseDateFromFormat(val, [finalValueFormat, _format])?.format(_format) as any),
-            props.separator
-          );
+            Array.isArray(val) ?
+              val.map((v) => parseDateFromFormat(v, [finalValueFormat, _format])?.format(_format))
+              : (parseDateFromFormat(val, [finalValueFormat, _format]))?.format(_format) as any,
+            props.separator);
         }
         return '--';
       }}
@@ -446,10 +461,10 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
       handleFormValue={handleFormValue}
     >
       <FormDatePicker
-        disabledDate={current => {
+        disabledDate={(current) => {
           return disabledDateFn(current);
         }}
-        disabledTime={current => {
+        disabledTime={(current) => {
           if (disabledDateTimeFn) {
             return disabledDateTimeFn(current);
           }
@@ -470,8 +485,7 @@ const DatePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
           }
         }}
       />
-    </FormFields>
-  );
+    </FormFields>);
   // {checkResult ? null : <div className="noFormTip">{checkTip}</div>}
 });
 

package/lib/pcpublic/src/components/pcfactory/src/Description/description.tsx

@@ -0,0 +1,426 @@
+/* eslint-disable no-eval */
+import { Col, Popover, Row } from 'antd';
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import getLabelSizeMode from './utils/getLabelSizeMode';
+import type { ComponentItemType, EngineApisType } from '@lingxiteam/types';
+import { useLocale } from '../utils/hooks/useLocale';
+import CustomModule from '../utils/CustomModule';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { LingxiForwardRef } from '@lingxiteam/types';
+
+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;
+  $$componentItem: ComponentItemType;
+  getEngineApis: () => EngineApisType;
+  layout?: 'horizontal' | 'vertical',
+  labelSize?: any;
+  backgroundType?: any;
+}
+
+// const prefixCls = 'description';
+const descriptionPrefixWrapper = 'ued-description';
+
+const Description = LingxiForwardRef<any, MyDescriptionProps>((props, ref) => {
+  // const api = getApis();
+  const {
+    visible = true,
+    labelWidth,
+    style,
+    className,
+    columns,
+    bordered,
+    colon,
+    colSpan,
+    labelAlign,
+    textAlign,
+    lineBreak,
+    getEngineApis,
+    layout = 'horizontal',
+    labelSize,
+    backgroundType,
+    $$componentItem,
+    appId,
+    dataSource,
+    colServiceData,
+  } = props;
+
+  const {
+    labelColor, labelFontSize, labelFontWeight, textColor, textFontSize, textFontWeight, textLineHeight, ...restStyle
+  } = style || {};
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: appId || $$componentItem?.appId, mode: 'engine' });
+
+  const engineApis = getEngineApis?.() || {};
+  const { getLocale } = useLocale(engineApis);
+  const {
+    sandBoxSafeRun,
+    renderPopover,
+    sandBoxLoadModule,
+  } = engineApis;
+
+  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun, getLocale);
+
+  // eslint-disable-next-line no-underscore-dangle
+  const _dataSource = useMemo(() => {
+    if (dataSource instanceof Object) {
+      if (Array.isArray(dataSource)) {
+        // 如果传进来的是数组，默认取数组第一个对象作为数据源
+        return dataSource.length ? dataSource[0] : {};
+      }
+      return dataSource;
+    }
+    return {};
+  }, [dataSource]);
+
+  const finalColumnsRows = 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, curr) => {
+        // 将动态列的列配置数组数据打平
+        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) => {
+        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') {
+          return content.split(lineBreak).map((_c: any, _i: any) => <div key={_i}>{_c}</div>);
+        }
+        // 自定义渲染函数
+        if (c.jsx) {
+          content = (
+            <div>
+              <CustomModule
+                code={c.customRendering}
+                sandBoxLoadModule={sandBoxLoadModule}
+                compProps={{ text: content, item: row, index: i }}
+                errorInfo={{
+                  id: props.$$componentItem.id,
+                }}
+              />
+            </div>
+          );
+        } else if (c.customRendering) {
+          // 自定义渲染函数
+          content = (
+            <div
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{
+                __html: funcExpExecute(c.customRendering, [
+                  {
+                    key: 'text',
+                    value: content,
+                  },
+                  {
+                    key: 'item',
+                    value: row,
+                  },
+                ]),
+              }}
+            />
+          );
+        }
+
+        // 内容设置
+        if (editContent) {
+          if (editContent.edittype === 'Popover' && editContent?.selectoption) {
+            const { page, options } = editContent.selectoption;
+            const list = _dataSource;
+
+            Object.keys(list).forEach((key) => {
+              // @ts-ignore
+              window[key] = list[key];
+            });
+
+            // 页面
+            if (page && page.pageId && renderPopover) {
+              try {
+                const pageRule = page.rule;
+                if (pageRule) {
+                  if (typeof pageRule === 'string') {
+                    page.rule = (list: any) => sandBoxSafeRun(
+                      pageRule,
+                      { list }
+                    );
+                  }
+
+                  if (typeof page?.rule === 'function') {
+                    return page.rule(list);
+                  }
+                }
+              } catch (e) {
+                console.error(e);
+              }
+              const params: any = {};
+              if (page.options) {
+                page.options.forEach((_c: any) => {
+                  try {
+                    const stateParamRule = _c?.stateParam;
+                    if (stateParamRule) {
+                      if (typeof stateParamRule === 'string') {
+                        _c.stateParam = (list: any) => sandBoxSafeRun(
+                          stateParamRule,
+                          { list }
+                        );
+                      }
+
+                      if (typeof _c.stateParam === 'function') {
+                        params[_c.code] = _c.stateParam(list);
+                      }
+                    }
+                  } catch (e) {
+                    console.error(e);
+                  }
+                });
+              }
+              content = renderPopover({
+                childElement: content,
+                props,
+                popoverSetting: {
+                  page,
+                  options: page.options,
+                  state: params,
+                },
+                uid: props?.$$componentItem?.uid,
+              });
+            } else if (options.content) {
+              // 自定义
+              const { maxWidth, content: popContent, rule: popRule, ...resOptions } = options;
+
+              // 隐藏规则
+              try {
+                if (popRule) {
+                  if (typeof popRule === 'string') {
+                    options.rule = (list: any) => sandBoxSafeRun(
+                      popRule,
+                      { list }
+                    );
+                  }
+
+                  if (
+                    typeof options?.rule === 'function' &&
+                    options.rule(list)
+                  ) {
+                    return content;
+                  }
+                }
+              } catch (e) {
+                console.log(e);
+              }
+
+              let newPopContent = popContent;
+              try {
+                if (popContent) {
+                  if (typeof popContent === 'string') {
+                    options.content = (list: any) => sandBoxSafeRun(
+                      popContent,
+                      { list }
+                    );
+                  }
+
+                  if (typeof options.content === 'function') {
+                    newPopContent = options.content(list);
+                  }
+                }
+              } catch (e) {
+                console.error(e);
+              }
+
+              content = (
+                <Popover
+                  overlayStyle={{ maxWidth: maxWidth || 'none', wordBreak: 'break-word' }}
+                  content={newPopContent}
+                  {...resOptions}
+                  arrowPointAtCenter
+                >
+                  {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, textLineHeight]);
+  const textStyle = useMemo(() => {
+    return { color: textColor, fontSize: textFontSize, fontWeight: textFontWeight, lineHeight: textLineHeight };
+  }, [textColor, textFontSize, textFontWeight, textLineHeight]);
+
+  return visible ? (
+    <div
+      style={{ ...backgroundStyle, ...restStyle }}
+      className={classnames(className, `${descriptionPrefixWrapper}-wrap`)}
+    >
+      {finalColumnsRows.map((cols: any) => (
+        <Row
+          // type="flex"
+          className={classnames(descriptionPrefixWrapper, bordered ? 'border' : '')}
+        >
+          {cols.map((c: any) => {
+            // tagSize表示多单位的标签宽度，目前包括px，栅格和以当前列数为基准的占比，修改时旧的tagWidth会被清空
+            const { key, dataIndex, render, span, label, tagWidth, tagLayout = layout } = c;
+            const value = _dataSource[dataIndex];
+            const { width = 'auto', contentWidth } = getLabelSizeMode({ ...c, labelSize, labelWidth, colSpan }) || {};
+            return (
+              <Col
+                className={classnames(
+                  `${descriptionPrefixWrapper}-cell`,
+                  bordered ? 'border' : '',
+                  `${descriptionPrefixWrapper}-${tagLayout}-cell`,
+                )}
+                span={span || colSpan}
+                key={key}
+              >
+                <div
+                  title={label}
+                  className={classnames(
+                    `${descriptionPrefixWrapper}-label`,
+                    bordered ? 'bg' : '',
+                    tagWidth ? 'minWidth' : '',
+                  )}
+                  style={{
+                    width: tagLayout === 'vertical' ? 'auto' : width,
+                    textAlign: labelAlign,
+                    ...labelStyle,
+                  }}
+                >
+                  {!bordered && colon ? `${label}:` : label}
+                </div>
+                <div
+                  style={{
+                    width: tagLayout === 'vertical' ? undefined : contentWidth,
+                    textAlign,
+                    ...textStyle,
+                  }}
+                  className={`${descriptionPrefixWrapper}-cont`}
+                >
+                  {render ? render(value, _dataSource, c) : value}
+                </div>
+              </Col>
+            );
+          })}
+        </Row>
+      ))}
+    </div>
+  ) : null;
+});
+
+export default Description;