@lingxiteam/ebe-utils 0.5.0 → 0.5.2

package/lib/public/src/components/pcfactory/src/Table/hooks/useCommon.ts

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+
+const TABLE_ZEBRA_STRIPE_TYPE_CODE = 'zebra';
+const TABLE_BORDER_TYPE_CODE = 'border';
+
+const useCommon = (props: any) => {
+  const { rowKeyType, rowKey, bordered } = props;
+
+  const state = props.pageState;
+  const isBordered =
+    typeof bordered === 'boolean'
+      ? bordered
+      : bordered === TABLE_BORDER_TYPE_CODE; // 是否为边框线类型，且兼容带borderd的存量数据
+  const isZebraStripe =
+    typeof bordered === 'boolean'
+      ? bordered
+      : bordered === TABLE_ZEBRA_STRIPE_TYPE_CODE; // 是否为斑马纹类型
+  const [currentRowKey, setCurrentRowKey] = useState<any>(rowKey);
+
+  const innerClassName = classNames('ued-table', {
+    'ued-table-zebra-stripe': isZebraStripe,
+  });
+
+  useEffect(() => {
+    // 行主键自动生成时，替换行主键
+    setCurrentRowKey(rowKeyType === 'auto' ? '__RowId__' : rowKey);
+  }, [rowKeyType, rowKey]);
+
+  return {
+    currentRowKey,
+    isBordered,
+    isZebraStripe,
+    state,
+    innerClassName,
+  };
+};
+
+export default useCommon;

package/lib/public/src/components/pcfactory/src/Table/hooks/useDataSource.ts

@@ -0,0 +1,201 @@
+import { message } from 'antd';
+import { clone } from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCreation } from '../../utils/ahooks';
+import {
+  createAutoKey,
+  createTempRowKey,
+  deleteTempRowProperties,
+  EMPTY_ROW_TEMP_KEY_ATTR,
+} from '../utils';
+import SequenceId from '../utils/SequenceId';
+
+const useDataSource = (props: any) => {
+  const {
+    compId,
+    rowKeyType,
+    currentRowKey,
+    boundDataSource,
+    page,
+    pagination,
+    hasPageChangeEvent,
+    getLocale,
+  } = props;
+
+  const [dataSource, setDataSource] = useState<any[]>([]);
+
+  const [replaceBoundDataSource, setReplaceBoundDataSource] = useState(null);
+  // 优先取 replaceBoundDataSource
+  const outerDataSource = replaceBoundDataSource || boundDataSource;
+
+  const preCloneData = useRef<any>();
+
+  const outerDataSourceRef = useCreation(() => {
+    preCloneData.current = clone(outerDataSource);
+    return {
+      current: outerDataSource,
+    };
+  }, []);
+
+  const preOuterDataSourceRef = outerDataSourceRef.current;
+
+  // 创建id 实例
+  const seqId = useMemo(
+    () =>
+      new SequenceId({
+        type: 'random',
+      }),
+    [],
+  );
+
+  // 若表格源数据源引用发生变更，则进一步判断
+  if (preOuterDataSourceRef !== outerDataSource) {
+    /**
+     * 简单的通过 JSON.stringify 判断值是否变更
+     * 注：正常情况下，表格绑定页面数据数据源，不会走到里面来，理论上不会有多余的 JSON.stringify 性能损耗
+     * 目前只针对表格数据源绑定的表达式是“json字符串数组固定数据”的情况，在每次运行态解析DSL时会是一个新的数组
+     * 导致表格数据重复更新渲染 -> 外部渲染 -> 死循环
+     * 若今后有其他场景被影响到，或者是 表格数据源绑定的表达式是“json字符串数组固定数据” 但数据量巨大的场景，影响到性能，请修正
+     */
+    if (
+      JSON.stringify(preCloneData.current) !== JSON.stringify(outerDataSource)
+    ) {
+      preCloneData.current = clone(outerDataSource);
+      outerDataSourceRef.current = outerDataSource;
+    }
+  }
+
+  // 表格当前页数据
+  const currentPageDataSource = useMemo(() => {
+    // 当 未配置页面回调事件（前端分页） 且 开启分页，需计算当前页的数据有哪些
+    const currentPageData =
+      hasPageChangeEvent || !page
+        ? dataSource
+        : dataSource.slice(
+            (pagination?.current - 1) * pagination?.pageSize,
+            pagination?.current * pagination?.pageSize,
+          );
+
+    return currentPageData;
+  }, [
+    dataSource,
+    hasPageChangeEvent,
+    page,
+    pagination?.current,
+    pagination?.pageSize,
+  ]);
+
+  // 表格自动生成主键时，记录当前使用的index值，不使用数据下标，防止重复报错
+  const rowIdMapRef: any = useRef();
+  if (rowIdMapRef.current === undefined) {
+    rowIdMapRef.current = {
+      index: 0, // 暂时无用
+      replaceIds: {}, // 存放已被替换的主键及新主键，避免重复替换
+    };
+  }
+
+  // 用于表格加载数据动作
+  const setOuterDataSource = (newOuterDataSource: any) => {
+    // 一旦执行过，绑定的数据使用内部维护的 replaceBoundDataSource，boundDataSource 发生任何改变都和内部没关系了
+    setReplaceBoundDataSource(newOuterDataSource || []);
+  };
+
+  useEffect(() => {
+    let fd: any[] = outerDataSource || [];
+    // 处理数据
+    if (!Array.isArray(fd)) {
+      message.warn(
+        getLocale('Table.data.typeError', {
+          type: Object.prototype.toString.call(fd),
+        }),
+      );
+      return;
+    }
+
+    const tempRows = fd.filter((r) => r?.[EMPTY_ROW_TEMP_KEY_ATTR]);
+    const lastTempRow = tempRows[tempRows.length - 1];
+
+    fd = fd.map((i: any, idx) => {
+      if (i) {
+        // 若为新增一行空白行的临时数据
+        if (i[EMPTY_ROW_TEMP_KEY_ATTR]) {
+          i[currentRowKey] = i[EMPTY_ROW_TEMP_KEY_ATTR];
+
+          // TODO: 以下的先注释，尝试重构优化代码，不期望在初始化数据时，引入不必要的逻辑，如：在这里开启行编辑
+          // // 优先取缓存
+          // const cachedKey = rowIdMapRef.current[i._tempKey];
+
+          // // 若无则直接生成主键，并记录
+          // if (!cachedKey) {
+          //   const tempKey = createTempRowKey();
+          //   rowIdMapRef.current[i._tempKey] = tempKey;
+          //   i[currentRowKey] = tempKey;
+          // } else {
+          //   i[currentRowKey] = cachedKey;
+          // }
+
+          // // 是否为最新创建的，且是否开启行编辑
+          // if (i._latestCreation && i._inlineEditNow) {
+          //   // 设置当前行为编辑状态
+          //   setNowInlineEditKey(i[currentRowKey]);
+          //   setNowEditingData({});
+          // }
+
+          /**
+           * 移除空白行的临时属性
+           * 最后一条空白行，不允许自动移除临时属性（交由保存/取消逻辑手动移除）
+           */
+          if (
+            lastTempRow?.[EMPTY_ROW_TEMP_KEY_ATTR] !==
+            i?.[EMPTY_ROW_TEMP_KEY_ATTR]
+          ) {
+            // 移除临时属性
+            deleteTempRowProperties(i);
+          }
+        } else if (rowKeyType === 'auto' && currentRowKey === '__RowId__') {
+          // 行主键自动生成
+          // remark：每页每行的固定标识 作为自动生成主键缓存后，二次渲染时，查找的标识（但如果涉及到数据变更，感觉不是太合理，但先恢复这么处理）
+          // 每页每行的固定标识
+          const rowAutoKeyFlag = `${compId}_${
+            page ? `${pagination.current || 0}_` : ''
+          }${idx}`;
+          // 优先取缓存
+          const cachedKey = rowIdMapRef.current[rowAutoKeyFlag];
+          // 若无则直接生成，并记录
+          if (!cachedKey) {
+            const tempKey = createAutoKey(seqId);
+            i[currentRowKey] = tempKey;
+            rowIdMapRef.current[rowAutoKeyFlag] = tempKey;
+          } else {
+            i[currentRowKey] = cachedKey;
+          }
+        } else if (!i[currentRowKey]) {
+          // 指定字段
+          // 非临时数据，但没有主键
+          // 直接生成(因为无法知道唯一标识是什么，只能每次渲染都生成新的)
+          i[currentRowKey] = createTempRowKey();
+        }
+      }
+
+      /**
+       * 不能直接返回 i，需要返回新对象
+       * 让表格内部的 dataSource 与 boundDataSource 彻底脱钩，不含任何相同引用
+       */
+      return {
+        ...(i || {}),
+      };
+    });
+    setDataSource(fd);
+  }, [outerDataSourceRef.current, currentRowKey, boundDataSource]);
+
+  return {
+    outerDataSource,
+    outerDataSourceRef: outerDataSourceRef.current,
+    setOuterDataSource,
+    innerDataSource: dataSource,
+    setInnerDataSource: setDataSource,
+    currentPageDataSource,
+  };
+};
+
+export default useDataSource;

package/lib/public/src/components/pcfactory/src/Table/hooks/useExpandable.tsx

@@ -0,0 +1,324 @@
+import { useEffect, useState } from 'react';
+import CommIconEG from '../../Icon';
+import { handleIsValidIconCfg } from '../../Icon/hooks';
+import CommIconED from '../../Icon/IconED';
+import { useLocale } from '../../utils/hooks/useLocale';
+
+const useExpandable = (expandCfg: any, isED?: boolean) => {
+  const {
+    innerDataSource = [],
+    currentRowKey,
+    rowExpandable,
+    expandOpenIcon,
+    expandCloseIcon,
+    defaultExpandAllRows,
+    defaultExpandedRowKeys,
+    expandRowByClick,
+    expandComponents,
+    renderExpandComponents,
+    onExpand,
+    onExpandedRowsChange,
+    sandBoxSafeRun,
+    funcExpExecute,
+    engineApis,
+    isTree = false,
+    getEngineApis,
+  } = expandCfg || {};
+
+  const CommIcon = isED ? CommIconED : CommIconEG;
+
+  const { getLocale } = useLocale(engineApis);
+
+  const [childrenColumnName, setChildrenColumnName] = useState<string>('');
+  const realChildrenColumnName = childrenColumnName || 'children'; // 默认为 children
+
+  const hasExpandContent =
+    Array.isArray(expandComponents) && expandComponents.length;
+  const [expandedRowKeys, setExpandedRowKeys] = useState(() => {
+    if (!defaultExpandAllRows && defaultExpandedRowKeys) {
+      try {
+        const arr = JSON.parse(defaultExpandedRowKeys);
+        if (Array.isArray(arr) && arr.length) {
+          return arr;
+        }
+        return [];
+      } catch (e) {
+        console.error(
+          '默认展开行 defaultExpandedRowKeys 必须配置为合理的数组字符串',
+          e,
+        ); // eslint-disable-line no-console
+      }
+    }
+    return [];
+  });
+
+  const expandable: any = {
+    childrenColumnName: realChildrenColumnName,
+    expandRowByClick,
+    expandedRowKeys,
+    // 配置了扩展图标才进行自定义渲染处理，否则走表格默认的扩展图标逻辑
+    expandIcon: (props: any) => {
+      const { prefixCls, expanded, onExpand, record, expandable } = props;
+      let { isLeaf } = props;
+
+      const iconClassName = `${prefixCls}-row-expand-icon`;
+
+      // 非树形表格调用时，isLeaf 为 undefined
+      if (!isTree) {
+        // 需要兼容表格存量树形数据判断
+        isLeaf =
+          !Array.isArray(record?.[realChildrenColumnName]) ||
+          (Array.isArray(record?.[realChildrenColumnName]) &&
+            record?.[realChildrenColumnName]?.length === 0);
+      }
+
+      // 若没有下级
+      if (isLeaf) {
+        const expandIconSpaceCls = `${iconClassName} ${prefixCls}-row-expand-icon-spaced`;
+        const space = <span className={expandIconSpaceCls} />;
+        // 树形结构数据，要保留空白
+        if (isTree || record?.[realChildrenColumnName]) {
+          return space;
+        }
+
+        // 如果没有行扩展内容，则没有图标, 要保留缩进前缀
+        if (!hasExpandContent) {
+          return null;
+        }
+
+        // 如果有行扩展内容，但不满足行扩展内容展开条件，则没有图标
+        if (!expandable) {
+          return null;
+        }
+      }
+
+      const handleIconClick = (e: any) => {
+        e.stopPropagation();
+        // 如果没有行扩展内容，且设置点击行展开时，不能加 onClick，会导致点击图标关闭不了
+        if (!hasExpandContent && expandRowByClick && expanded) {
+          return undefined;
+        }
+        return onExpand(record, e);
+      };
+
+      // 还原树形表格原生的展开/收缩按钮
+      const iconExpandCls = `${prefixCls}-row-expand-icon-${
+        expanded ? 'expanded' : 'collapsed'
+      }`;
+      const iconClsConnect = `${iconClassName} ${iconExpandCls}`;
+      const customIconCls = `${iconClsConnect} ued-table-row-expand-custom-icon`;
+
+      if (!expanded) {
+        let openIcon = (
+          <button
+            type="button"
+            className={iconClsConnect}
+            onClick={handleIconClick}
+          />
+        );
+
+        if (handleIsValidIconCfg(expandOpenIcon)) {
+          openIcon = (
+            // @ts-ignore
+            <CommIcon
+              icon={expandOpenIcon}
+              className={customIconCls}
+              engineApis={engineApis}
+              onClick={handleIconClick}
+            />
+          );
+        }
+
+        return openIcon;
+      }
+
+      let closeIcon = (
+        <button
+          type="button"
+          className={iconClsConnect}
+          onClick={handleIconClick}
+        />
+      );
+
+      if (handleIsValidIconCfg(expandCloseIcon)) {
+        closeIcon = (
+          // @ts-ignore
+          <CommIcon
+            icon={expandCloseIcon}
+            className={customIconCls}
+            engineApis={engineApis}
+            onClick={handleIconClick}
+          />
+        );
+      }
+
+      return closeIcon;
+    },
+    onExpand: (expanded: boolean, record: any) => {
+      if (typeof onExpand === 'function') {
+        onExpand(expanded, record[currentRowKey], record);
+      }
+    },
+    onExpandedRowsChange: (newExpanedRowKeys = []) => {
+      if (typeof onExpandedRowsChange === 'function') {
+        onExpandedRowsChange(newExpanedRowKeys);
+      }
+      setExpandedRowKeys(newExpanedRowKeys);
+    },
+  };
+
+  if (hasExpandContent) {
+    // 有内容设置才有(且开启之后，展开的按钮会有个单独的单元格)
+    expandable.expandedRowRender = (
+      record: any,
+      index: number,
+      indent: any,
+      expanded: any,
+    ) => {
+      if (Array.isArray(expandComponents) && expandComponents.length) {
+        let newExpandComponents = [];
+        if (!isED) {
+          newExpandComponents = expandComponents.map((c) => {
+            const busiCompStates = c?.props?.busiCompStates;
+            if (
+              typeof busiCompStates === 'object' &&
+              !Array.isArray(busiCompStates)
+            ) {
+              const busiCompStatesKeys = Object.keys(busiCompStates);
+              const newBusiCompStates: any = {};
+
+              busiCompStatesKeys.forEach((k) => {
+                if (typeof busiCompStates[k] === 'string') {
+                  const originExp = busiCompStates[k];
+                  busiCompStates[k] = (row: any, rowId: any, index: number) =>
+                    sandBoxSafeRun(originExp, {
+                      row,
+                      rowId,
+                      index,
+                    });
+                }
+
+                if (typeof busiCompStates[k] === 'function') {
+                  try {
+                    newBusiCompStates[k] = busiCompStates[k](
+                      record,
+                      record[currentRowKey],
+                      index,
+                    );
+                  } catch (e) {
+                    console.error(e);
+                  }
+                }
+              });
+
+              return {
+                ...c,
+
+                /**
+                 * remark：由于运行态引擎的 renderComponents 对组件属性做了缓存持久化处理
+                 * 所以相同id 会导致非第一次展开的业务组件属性 与 第一次展开的相同，需要对 id 进行特殊处理
+                 */
+                id: `${c.id}_${record[currentRowKey]}`,
+                props: {
+                  ...(c.props || {}),
+                  busiCompStates: newBusiCompStates,
+                },
+              };
+            }
+            return c;
+          });
+
+          if (typeof renderExpandComponents === 'function') {
+            // remark: 目前只支持绑定一个
+            const busiCompSimpleDSL = newExpandComponents[0] || {};
+            const busiComp = renderExpandComponents(
+              busiCompSimpleDSL,
+              getEngineApis,
+            );
+            return busiComp;
+          }
+        } else {
+          let remark = getLocale('Table.expand.component');
+          expandComponents.forEach((c, i) => {
+            remark = `${remark}${c.label || ''}(${c.id || ''})${
+              i !== expandComponents.length - 1 ? '、' : ''
+            }`;
+          });
+          return remark;
+        }
+      }
+      return undefined;
+    };
+
+    // 用于控制行扩展内容展开，根据条件来决定是否有扩展内容
+    expandable.rowExpandable = (record: any) => {
+      // 存量：配置态生成的DSL是对象，code存储函数代码，但不是$$包裹的表达式
+      if (funcExpExecute && rowExpandable?.code) {
+        return funcExpExecute(rowExpandable.code, [
+          {
+            key: 'row',
+            value: record,
+          },
+        ]);
+      }
+      if (funcExpExecute && rowExpandable) {
+        /**
+         * 新版：配置态生成的DSL就是一个$$包含函数的表达式
+         * 但会经过预处理移除 $$
+         */
+        return funcExpExecute(rowExpandable, [
+          {
+            key: 'row',
+            value: record,
+          },
+        ]);
+      }
+
+      return true;
+    };
+  } else {
+    // 没有配置行扩展内容时，设置行内容展开都为false
+    expandable.rowExpandable = () => {
+      return false;
+    };
+  }
+
+  const handleAllExpandRowKeys = (rows: any[]) => {
+    const currPageRowKeys: any[] = rows
+      .map((row: any) => {
+        // 树形数据时，存在多级
+        if (row?.[realChildrenColumnName]) {
+          return [
+            row?.[currentRowKey],
+            ...handleAllExpandRowKeys(row[realChildrenColumnName]),
+          ];
+        }
+
+        return row?.[currentRowKey];
+      })
+      .reduce((prev: any, curr: any) => {
+        // 将数组数据打平
+        if (Array.isArray(curr)) {
+          return [...prev, ...curr];
+        }
+        return [...prev, curr];
+      }, []);
+    return currPageRowKeys || [];
+  };
+
+  useEffect(() => {
+    // 设置了全部展开，则展开当前页所有行
+    if (innerDataSource.length && defaultExpandAllRows) {
+      const currPageRowKeys = handleAllExpandRowKeys(innerDataSource);
+      setExpandedRowKeys(currPageRowKeys);
+    }
+  }, [innerDataSource]);
+
+  return {
+    expandable,
+    childrenColumnName: realChildrenColumnName,
+    setChildrenColumnName,
+  };
+};
+
+export default useExpandable;