@lingxiteam/ebe-utils 0.5.10 → 0.6.1

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

@@ -1,58 +1,10 @@
-/* eslint-disable no-eval */
-import type { ComponentItemType, EngineApisType } from '@lingxiteam/types';
-import { Col, Popover, Row } from 'antd';
-import classnames from 'classnames';
-import React, { useImperativeHandle, useMemo } from 'react';
-import { useListenProps } from '../utils';
-import CustomModule from '../utils/CustomModule';
-import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
-import { useLocale } from '../utils/hooks/useLocale';
-import getLabelSizeMode from './utils/getLabelSizeMode';
+import React, { useImperativeHandle } from 'react';
+import DescriptionLoader from './loader';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useListenProps } from '../utils/hooks/useListenState';
 
-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;
-}
 
-// const prefixCls = 'description';
-const descriptionPrefixWrapper = 'ued-description';
-
-const Description = React.forwardRef<any, MyDescriptionProps>((props, ref) => {
-  // const api = getApis();
-  const {
-    visible = true,
-    labelWidth,
-    style,
-    className,
-    columns,
-    bordered,
-    colon,
-    colSpan,
-    labelAlign,
-    textAlign,
-    lineBreak,
-    getEngineApis,
-    layout = 'horizontal',
-    labelSize,
-  } = props;
-
-  const { labelColor, labelFontSize, labelFontWeight, textColor, textFontSize, textFontWeight, textLineHeight, ...restStyle } = style || {};
+const Description = LingxiForwardRef<unknown, any>((props, ref) => {
   const [dataSource, setDataSource] = useListenProps(props.dataSource || {});
   const [colServiceData, setColServiceData] = useListenProps(props.colServiceData);
 
@@ -70,351 +22,7 @@ const Description = React.forwardRef<any, MyDescriptionProps>((props, ref) => {
       });
     },
   }));
-
-  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') {
-          let temlineBreak = lineBreak;
-          if (temlineBreak === '\\n') {
-            temlineBreak = lineBreak.replace(/\\n/g, '\n');
-          }
-          return content.split(temlineBreak).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={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;
+  return <DescriptionLoader {...props} dataSource={dataSource} colServiceData={colServiceData} />;
 });
 
 export default Description;

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

@@ -0,0 +1,14 @@
+// import Loadable from 'react-loadable';
+// import { LoadingComponennt } from '../utils/LoaderHelper';
+
+// const Description = Loadable({
+//   loader: async () => (await import/* webpackChunkName: 'pcFactory-Description' */('./description')) as unknown as React.ComponentType<any>,
+//   loading: LoadingComponennt,
+// });
+
+// export default Description;
+
+
+import Description from './description';
+
+export default Description;

package/lib/pcpublic/src/components/pcfactory/src/Description/utils/getLabelSizeMode.ts

@@ -2,7 +2,7 @@ const getLabelSizeMode = (config: any) => {
   const { tagSize, tagWidth, labelWidth, labelSize, colSpan, span } = config || {};
   let width = tagSize;
   if (!width && (tagWidth || labelWidth)) {
-    width = `${tagWidth || labelWidth}px`;
+    width = `${(tagWidth || labelWidth)}px`;
   }
   if (!width) {
     width = labelSize;
@@ -13,15 +13,13 @@ const getLabelSizeMode = (config: any) => {
       width,
       contentWidth: 'auto',
     };
-  }
-  if (/^(1\d|24|[1-9])$/.test(width)) {
+  } 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)) {
+  } if (/^(?!0\/0)\d+\/(?!0)\d+$/.test(width)) {
     const currentSpan = span || colSpan;
     // 占比值为分数形式
     // eslint-disable-next-line no-eval

package/lib/pcpublic/src/components/pcfactory/src/Divider/Divider.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import LxDashed from './components/LxDashed';
+import LxSolid from './components/LxSolid';
+import LeftTopDivider from './components/LeftTopDivider';
+import LeftTabDivider from './components/LeftTabDivider';
+import LeftLineDivider from './components/LeftLineDivider';
+import LeftCardDivider from './components/LeftCardDivider';
+import CenterTabDivider from './components/CenterTabDivider';
+import CenterLineDivider from './components/CenterLineDivider';
+
+export interface MyDividerProps {
+  visible: any;
+  dividerText?: string;
+  onSelectedRowsRelease?: (e: any[]) => void;
+  onSelectedRowKeysRelease?: (e: any[]) => void;
+  onSelectedKeysRelease?: (e: any[]) => void;
+  onEditingKeyRelease?: (e: any[]) => void;
+  onInlineEditRelease?: (e: any) => void;
+  onInlineSaveRelease?: (e: any) => void;
+  onSelectedDataRelease?: (e: any[]) => void;
+  pageState?: any;
+  pagePublicState?: any;
+  type?: string;
+  width?: number;
+  height?: number;
+  style?: React.CSSProperties;
+  customStyle?: React.CSSProperties;
+  basicStatus?: string;
+  dashed?: boolean;
+  showTitle?: boolean;
+  titleColor?: string;
+  titleFontSize?: string;
+  titleLineHeight?: string;
+  titleFontWeight?: string;
+  dashedWidth?: number;
+  dashedMargin?: number;
+}
+
+const MyDivider: React.FC<MyDividerProps> = (props) => {
+  const {
+    visible = true,
+    dividerText,
+    onSelectedRowsRelease,
+    onSelectedRowKeysRelease,
+    onSelectedKeysRelease,
+    onEditingKeyRelease,
+    onInlineEditRelease,
+    onInlineSaveRelease,
+    onSelectedDataRelease,
+    pageState,
+    pagePublicState,
+    type,
+    style,
+    customStyle,
+    basicStatus,
+    dashed,
+    showTitle,
+    titleColor,
+    titleFontSize,
+    titleLineHeight,
+    titleFontWeight,
+    dashedWidth = 4,
+    dashedMargin = 4,
+    ...restProps
+  } = props;
+
+  if (!visible) {
+    return null;
+  }
+
+  const dividerStyle = () => {
+    let s = { ...style, ...customStyle };
+    if (type === 'vertical') { // 设置默认值
+      s = { width: '1px', height: '12px', ...s };// 垂直
+    } else {
+      s = { width: '100%', height: '1px', ...s };// 水平
+    }
+    return s;
+  };
+  const titleStyle = () => {
+    // 兼容旧数据，新的字体去掉该属性
+    if (titleLineHeight) {
+      return {
+        color: titleColor,
+        fontSize: titleFontSize,
+        lineHeight: titleLineHeight,
+        fontWeight: titleFontWeight,
+      };
+    }
+    return {
+      color: titleColor,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+    };
+  };
+  const dividerView = () => {
+    if (`${basicStatus}` === '2') {
+      return null;
+    }
+    switch (`${dashed}`) {
+      case 'true':
+        if (type === 'horizontal') {
+          return <LxDashed
+            showTitle={showTitle}
+            dividerText={dividerText}
+            titleStyle={titleStyle()}
+            dashedWidth={dashedWidth}
+            dashedMargin={dashedMargin}
+            customStyle={customStyle}
+            style={dividerStyle()}
+            {...restProps}
+          />;
+        }
+        return <LxSolid
+          showTitle={showTitle}
+          dividerText={dividerText}
+          style={dividerStyle()}
+          type={type}
+          titleStyle={titleStyle()}
+          {...restProps}
+        />;
+          
+      case 'leftTop':
+        return <LeftTopDivider
+          titleStyle={titleStyle()}
+          showTitle={showTitle}
+          dividerText={dividerText}
+          style={style}
+          customStyle={customStyle}
+          {...restProps}
+        />;
+      case 'leftTab':
+        return <LeftTabDivider
+          titleStyle={titleStyle()}
+          showTitle={showTitle}
+          dividerText={dividerText}
+          style={style}
+          customStyle={customStyle}
+          {...restProps}
+        />;
+      case 'leftCard':
+        return <LeftCardDivider
+          titleStyle={titleStyle()}
+          showTitle={showTitle}
+          dividerText={dividerText}
+          style={style}
+          customStyle={customStyle}
+          {...restProps}
+        />;
+      case 'leftLine':
+        return <LeftLineDivider
+          titleStyle={titleStyle()}
+          showTitle={showTitle}
+          dividerText={dividerText}
+          style={style}
+          customStyle={customStyle}
+          {...restProps}
+        />;
+      case 'centerTab':
+        return <CenterTabDivider
+          titleStyle={titleStyle()}
+          showTitle={showTitle}
+          dividerText={dividerText}
+          style={style}
+          customStyle={customStyle}
+          {...restProps}
+        />;
+      case 'centerLine':
+        return <CenterLineDivider
+          titleStyle={titleStyle()}
+          showTitle={showTitle}
+          dividerText={dividerText}
+          style={style}
+          customStyle={customStyle}
+          {...restProps}
+        />;
+      default:
+        return <LxSolid
+          showTitle={showTitle}
+          dividerText={dividerText}
+          style={dividerStyle()}
+          type={type}
+          titleStyle={titleStyle()}
+          {...restProps}
+        />;
+    }
+  };
+  return <>{dividerView()}</>;
+};
+
+export default MyDivider;