@lingxiteam/ebe-utils 0.5.11 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/ED/useColumns.tsx

@@ -0,0 +1,520 @@
+import React, { useMemo } from 'react';
+import { Button, DatePicker, Divider, Input, InputNumber, Select, Switch, Table, Popover } from 'antd';
+import HeaderCellTitle from '../../HeaderCell/HeaderCellTitle';
+import { treeRootName, handleMultiLevelHeader, handleExpandColumn, handleRecursiveParseColumns, handleMergeHeader } from '../../utils';
+import { WrapperInput } from '../../../Input';
+import { WrapperSelect } from '../../../Select';
+import { WrapperTextArea } from '../../../TextArea';
+import { WrapperDatePicker } from '../../../DatePicker';
+import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import { evalMyFunction } from '../../../utils/common';
+import MyIcon from '../../../Icon/IconED';
+import classNames from 'classnames';
+import CustomModule from '../../../utils/CustomModule';
+import { sandBoxLoadModule } from '../../../utils/jsx.editor';
+import { LEVEL_COL_KEY } from '../useColumns';
+
+const useColumns = (props: any) => {
+  const {
+    columns,
+    editMode,
+    size,
+    hiddenAction,
+    colorFormatInfo,
+    isFlexColumn,
+    rowActions,
+    actionWidth,
+    fixedAction,
+    extend,
+    extendNum,
+    expandComponents,
+    expandIconPosition,
+    expandIconPositionRef,
+    tableGroupColorInfo,
+    getEdEngineApi,
+    showLevelGroup = true,
+  } = props;
+
+  const renderBtns = (extendData: any, isPopover = false) => {
+    if (Array.isArray(extendData)) {
+      return extendData.map((c, i) => {
+        const { icon, iconPos, id, isIcon } = c;
+        const iconClassName = iconPos === 'left' ? 'actIcon-left' : 'actIcon-right';
+        const BtnIcon = icon ? (
+          <MyIcon className={iconClassName} icon={icon} rotate={0} getEdEngineApi={getEdEngineApi} />
+        ) : undefined;
+
+        const type = typeof c === 'string' ? c : c?.type;
+        const btnClassName = classNames('ued-table-actions-antBtn', type ? `ued-table-actions-${type}` : undefined);
+
+        return isPopover ?
+          <div>
+            <Button
+              type="link"
+              disabled={c.disabled}
+              className={btnClassName}
+              key={id}
+            >
+              <div className="ued-table-actions-extendBtn">
+                {iconPos && iconPos === 'left' && BtnIcon}
+                {!isIcon && c.title}
+                {iconPos && iconPos === 'right' && BtnIcon}
+              </div>
+            </Button>
+          </div> :
+          <>
+            <Button type="link" disabled={c.disabled} className={btnClassName} key={id}>
+              <div className="ued-table-actions-extendBtn">
+                {iconPos && iconPos === 'left' && BtnIcon}
+                {!isIcon && c.title}
+                {iconPos && iconPos === 'right' && BtnIcon}
+              </div>
+            </Button>
+            {i !== extendData.length - 1 && <Divider type="vertical" />}
+          </>;
+      });
+    }
+    return [];
+  };
+
+  const finalcolumns = useMemo(() => {
+    let newColumns: any[] = [];
+    let finalCols: any[] = [];
+    // 记录每层分组的数量
+    const group = new Map<number, number>();
+    let hasLevelData = false;
+    if (Array.isArray(columns)) {
+      const fixedLeftCols: any[] = [];
+      const fixedRightCols: any[] = [];
+      const normalCols: any[] = [];
+
+      columns.forEach((c, i) => {
+        const newCol = {
+          ...c,
+          originTitle: c.title,
+        };
+
+        if (c.type === LEVEL_COL_KEY) {
+          hasLevelData = true;
+        }
+
+        if (c.fixed) {
+          if (c.fixed === 'left') {
+            fixedLeftCols.push(newCol);
+          } else {
+            fixedRightCols.push(newCol);
+          }
+        } else {
+          normalCols.push(newCol);
+        }
+        if (Array.isArray(newCol?.group)) {
+          newCol.group.forEach((c: string, gi: number) => {
+            if (!group.has(gi)) {
+              group.set(gi, 0);
+            }
+            const len = group.get(gi) || 0;
+            if (c) {
+              group.set(gi, len + 1);
+            }
+          });
+        }
+      });
+
+      newColumns = [...fixedLeftCols, ...normalCols, ...fixedRightCols];
+
+      // 用于表格头分组的数据结构：左树根节点，为第0层
+      const leftTree: any = {
+        title: treeRootName,
+      };
+
+      newColumns.forEach((c, i) => {
+        const { originCustomRendering = [], filter } = c;
+        const isOrderCol = !!(c.type && c.type === 'orderCol'); // 判断是否为内置序号列
+
+        if (c.defaultSortOrder) {
+          newColumns[i].sorter = (a: any, b: any) =>
+            a[c.dataIndex || c.key] - b[c.dataIndex || c.key];
+        }
+
+        if (c.type === LEVEL_COL_KEY) {
+          // 层级列不支持排序功能
+          c.sorter = undefined;
+        }
+
+        if (Array.isArray(c?.group)) {
+          // 过滤掉整层为空的分组
+          c.group = c.group.filter((_: string, gi: number) => group.get(gi) !== 0);
+        }
+
+        if (editMode === 'multiple') {
+          c.render =
+            c.editoption && c.editoption.edittype
+              ? (text: any) => {
+                let formItem = text;
+                switch (c.editoption.edittype) {
+                  case 'Select': {
+                    formItem = (
+                      <WrapperSelect>
+                        <Select placeholder="请选择">
+                          <Select.Option value="1">选项一</Select.Option>
+                        </Select>
+                      </WrapperSelect>
+                    );
+                    break;
+                  }
+                  case 'DatePicker': {
+                    formItem = (
+                      <WrapperDatePicker>
+                        <DatePicker />
+                      </WrapperDatePicker>
+                    );
+                    break;
+                  }
+                  case 'TimePicker': {
+                    formItem = (
+                      <WrapperDatePicker>
+                        <DatePicker showTime />
+                      </WrapperDatePicker>
+                    );
+                    break;
+                  }
+                  case 'InputNumber': {
+                    formItem = <InputNumber />;
+                    break;
+                  }
+                  case 'TextArea': {
+                    formItem = (
+                      <WrapperTextArea>
+                        <Input.TextArea placeholder="请输入" />
+                      </WrapperTextArea>
+                    );
+                    break;
+                  }
+                  case 'Input': {
+                    formItem = (
+                      <WrapperInput>
+                        <Input placeholder="请输入" />
+                      </WrapperInput>
+                    );
+                    break;
+                  }
+                  case 'Switch': {
+                    formItem = <Switch />;
+                    break;
+                  }
+                  default:
+                    break;
+                }
+                return (
+                  <>
+                    {formItem}
+                    <div className="ued-table-edit-space-block " />
+                  </>
+                );
+              }
+              : undefined;
+        } else {
+          c.render = undefined;
+        }
+
+        // 判断是否为内置序号列，若是，则配置态默认为1，因为只有一条
+        if (isOrderCol) {
+          c.render = () => 1;
+        }
+
+        // 开启了过滤的，需要显示过滤图标
+        if (filter) {
+          c.filterDropdown = () => <div>empty</div>;
+          c.filterDropdownVisible = false;
+        }
+
+        // 表格单元格内-行数控制控制
+        let controllLineStyle = {};
+        const isLineNumSet = c.lineNum && typeof c.lineNum === 'number' && c.lineNum > 0;
+        if (isLineNumSet) {
+          const lineHeight = size === 'small' ? 16 : 20;
+          controllLineStyle = {
+            lineHeight: `${lineHeight}px`,
+            maxHeight: `${lineHeight * c.lineNum}px`,
+            WebkitLineClamp: c.lineNum,
+          };
+          c.render = (text: any, row: Record<string, any>) => (
+            <span className="ued-control-line-number" style={controllLineStyle}>
+              {isOrderCol ? 1 : text}
+            </span>
+          );
+        }
+
+        // 自定义渲染
+        if (c.jsx) {
+          c.render = (text: any, row: Record<string, any>, index: number) => {
+            return (
+              <div
+                className={classNames({ 'ued-control-line-number': isLineNumSet })}
+                style={controllLineStyle}
+              >
+                <CustomModule
+                  sandBoxLoadModule={sandBoxLoadModule}
+                  errorInfo={{ id: props.$$componentItem.id }}
+                  code={c.customRendering}
+                  compProps={{
+                    text: isOrderCol ? 1 : text,
+                    item: row,
+                    index,
+                  }}
+                />
+              </div>
+            );
+          };
+        } else if (originCustomRendering.length && Array.isArray(originCustomRendering)) {
+          // eslint-disable-next-line react/no-danger
+          c.render = (text: any, row: Record<string, any>, index: number) => {
+            return (
+              <div
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{
+                  __html: evalMyFunction(originCustomRendering.join(''), [
+                    {
+                      key: 'text',
+                      value: isOrderCol ? 1 : text,
+                    },
+                    {
+                      key: 'row',
+                      value: row,
+                    },
+                    {
+                      key: 'index',
+                      value: index,
+                    },
+                  ]),
+                }}
+                className={classNames({ 'ued-control-line-number': isLineNumSet })}
+                style={controllLineStyle}
+              />
+            );
+          };
+        }
+
+        // 处理表头标题
+        c.title = () => (
+          <HeaderCellTitle
+            size={size}
+            column={{ ...c, title: c.originTitle }}
+            engineApis={getEdEngineApi?.() || {}}
+          />
+        );
+
+        if (hasLevelData && ((showLevelGroup && newColumns[i]?.type !== LEVEL_COL_KEY) || !showLevelGroup)) {
+          newColumns[i].group = [];
+        }
+
+        // 处理分组逻辑
+        handleMultiLevelHeader(leftTree, newColumns[i]);
+      });
+
+      // 存在表格头分组后的数据
+      if (leftTree?.children?.length) {
+        finalCols.push(...leftTree?.children);
+      } else {
+        finalCols.push(...newColumns);
+      }
+
+      if (!hiddenAction && ((rowActions && rowActions.length) || (extend && extend.length))) {
+        let width = actionWidth;
+        if (!width) {
+          // TODO 根据标题字数动态设置操作列宽度
+          const titleArr: any = [];
+          const arr: any = [...(rowActions || []), ...(extend || [])]?.filter(btn => btn?.checked !== false); // 只展示选中的按钮
+          arr.forEach((child: any) => {
+            if (child.title) {
+              titleArr.push(child.title);
+            }
+          });
+          const fontWidth = 14;
+          const smFontWidth = 12;
+          const defaultIconWidth = 14; // 默认图标宽度
+          const space = 4; // 图标与文字间隔
+          const defaultPadding = 20; // 默认左右 padding
+          const mdsmPadding = 16; // 中小尺寸左右 padding
+          const dividerWidth = 17; // 分割线占位宽度（含margin）
+          const realPadding = ['small', 'middle'].includes(size || '')
+            ? mdsmPadding
+            : defaultPadding;
+          const realFontWidth = size === 'small' ? smFontWidth : fontWidth;
+          const length = Math.min(titleArr.length, 3);
+          const realDividerWidth = dividerWidth * (length - 1);
+          width =
+            realDividerWidth +
+            (defaultIconWidth + space) * length +
+            realFontWidth * titleArr.slice(0, 3).join('').length +
+            realPadding;
+        }
+        const actionColumns: Record<string, any> = {
+          title: '操作',
+          key: '_actions',
+          width,
+          editable: false,
+          id: '_actions',
+          render: () => {
+            const allBtns = [
+              ...(
+                (rowActions || []).map((b: any) => {
+                  const bb = {
+                    ...b,
+                  };
+                  bb.btnType = 'builtIn';
+                  return bb;
+                })
+              ),
+              ...(
+                (extend || []).map((b: any) => {
+                  const bb = {
+                    ...b,
+                  };
+                  bb.btnType = 'extend';
+                  return bb;
+                })
+              ),
+            ]?.filter(btn => btn?.checked !== false); // 只展示选中的按钮
+
+            let showBtns: any[] = [];
+            let moreBtns: any[] = [];
+
+            // 当按钮数量超过 设置最大展示的数量两个时，超过的两个及以上部分放到更多中
+            const allBtnsLen = allBtns?.length;
+            if (allBtnsLen > extendNum) {
+              showBtns = allBtns.slice(0, extendNum - 1);
+              moreBtns = allBtns.slice(extendNum - 1, allBtnsLen);
+            } else {
+              showBtns = allBtns;
+            }
+
+            const showBuiltInBtns = showBtns.filter(b => b.btnType === 'builtIn');
+            const showExtendBtns = showBtns.filter(b => b.btnType === 'extend');
+            const moreBuiltInBtns = moreBtns.filter(b => b.btnType === 'builtIn');
+            const moreExtendBtns = moreBtns.filter(b => b.btnType === 'extend');
+
+            return (
+              <div className="ued-table-actions">
+                {renderBtns(showBuiltInBtns, false)}
+                {!!showBuiltInBtns?.length && !!showExtendBtns?.length && <Divider type="vertical" />}
+                {renderBtns(showExtendBtns, false)}
+                {
+                moreBuiltInBtns?.length + moreExtendBtns?.length > 0 && (
+                  <>
+                    {(!!showBuiltInBtns?.length || !!showExtendBtns?.length) && <Divider type="vertical" />}
+                    <Popover
+                      content={(
+                        <div
+                          style={{ maxHeight: '300px', overflow: 'auto' }}
+                        >
+                          {renderBtns([
+                            ...moreBuiltInBtns,
+                            ...moreExtendBtns,
+                          ], true)}
+                        </div>
+                      )}
+                      trigger="click"
+                      placement="topRight"
+                    >
+                      <Button
+                        type="link"
+                        className={classNames('ued-table-actions-antBtn')}
+                        key="more"
+                      >
+                        <div className="ued-table-actions-extendBtn">
+                          更多
+                          <LegacyIcon className="actIcon-left" type="down" />
+                        </div>
+                      </Button>
+                    </Popover>
+                  </>
+                )
+              }
+              </div>);
+          }
+          ,
+        };
+        if (fixedAction) {
+          actionColumns.fixed = 'right';
+        }
+        // newColumns.push(actionColumns);
+        finalCols.push(actionColumns);
+      }
+    }
+
+    finalCols = handleMergeHeader(finalCols as any[]) || finalCols;
+
+
+    handleExpandColumn({
+      expandComponents,
+      expandIconPosition,
+      expandIconPositionRef,
+      columns: finalCols,
+    });
+
+    if (tableGroupColorInfo) {
+      const { colIdMap }: any = tableGroupColorInfo?.colorType === 'single' ? {}
+        : handleRecursiveParseColumns(tableGroupColorInfo?.customColorColumns);
+      handleRecursiveParseColumns(finalCols, 1, {
+        colorType: tableGroupColorInfo?.colorType,
+        customColorSetting: colIdMap,
+        singleColorSetting: tableGroupColorInfo?.singleColorSetting,
+      });
+    }
+
+    const recursiveColumns = (colList: any[]) => colList.map((col) => {
+      if (col === Table.EXPAND_COLUMN) {
+        return col;
+      }
+
+      if (col?.children?.length) {
+        col.children = recursiveColumns(col.children);
+      }
+
+      return {
+        ...col,
+        sortOrder: false, // 注：编辑面板组件禁用排序切换，防止误导为是配置
+        onCell: (record: any) => ({
+          record,
+          row: record,
+          editable: !!col.editoption || col.editable,
+          isExtend: col.isExtend,
+          dataIndex: col.dataIndex,
+          title: record[col.dataIndex],
+          rowText: record[col.dataIndex],
+          colorFormatInfo,
+          width: col.width,
+        }),
+        onHeaderCell: () => ({
+          isFlexColumn,
+          style: col?.style,
+        }),
+      };
+    });
+
+    return recursiveColumns(finalCols);
+  }, [
+    columns,
+    hiddenAction,
+    rowActions,
+    extend,
+    editMode,
+    actionWidth,
+    fixedAction,
+    colorFormatInfo,
+    extendNum,
+    expandComponents,
+    expandIconPosition,
+    expandIconPositionRef,
+    tableGroupColorInfo,
+    showLevelGroup,
+  ]);
+
+
+  return {
+    columns: finalcolumns,
+  };
+};
+
+export default useColumns;

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/ED/useCommon.ts

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+
+const TABLE_BORDER_TYPE_CODE = 'border';
+const TABLE_ZEBRA_STRIPE_TYPE_CODE = 'zebra';
+
+const useCommon = (props: any) => {
+  const {
+    bordered,
+    className,
+    _component,
+    style,
+  } = props;
+
+  const { disabledDnd } = _component || {};
+
+  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 realClassName = classNames('ued-table-wrap', className, { 'ued-table-ed-box': !disabledDnd && style.flex >= 1 });
+
+  return {
+    isBordered,
+    isZebraStripe,
+    className: realClassName,
+  };
+};
+
+export default useCommon;

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/ED/useDataSource.ts

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { LEVEL_COL_KEY } from '../useColumns';
+import { parseLevelStrToKey } from '../../utils';
+
+const useDataSource = (props: any) => {
+  const {
+    columns,
+    dataSource: defaultDataSource,
+  } = props;
+
+  const dataSource = useMemo(() => {
+    if (Array.isArray(defaultDataSource) && defaultDataSource?.length > 0) {
+      return defaultDataSource;
+    }
+    const obj: any = { ___id: '1' };
+    if (Array.isArray(columns)) {
+      columns.forEach((c) => {
+        let value = c.dataIndex;
+        if (c.type === LEVEL_COL_KEY) {
+          // 层级字段按层级展示
+          value = parseLevelStrToKey(value);
+        }
+        obj[c.dataIndex] = value;
+      });
+    }
+    return [obj];
+  }, [columns, defaultDataSource]);
+
+  return {
+    dataSource,
+  };
+};
+
+export default useDataSource;

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/ED/usePagination.ts

@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+
+const usePagination = (props: any) => {
+  const {
+    page,
+    pageSizeOptions,
+    pageSize,
+    showQuickJumper,
+    showSizeChanger,
+    showTotal,
+    size,
+  } = props;
+
+  const isManualPageSize = typeof pageSize === 'number'; // 判断页码是否是手工数值
+  const tempPageSize = isManualPageSize ? pageSize : 10;
+  // 设置临时 total 总数，以保证 total > pageSize，默认显示两页，才会显示快速跳转
+  // （https://github.com/react-component/pagination/blob/dbddb763b24b8ce02c17acc664b042897bf73202/src/Pagination.jsx#L189-L191）
+  const [total, setTotal] = useState(tempPageSize + 1);
+  
+  const parsedPageSizeOptions = useMemo(() => {
+    if (pageSizeOptions) {
+      try {
+        const arr = JSON.parse(pageSizeOptions);
+        if (Array.isArray(arr) && arr.length) {
+          // 页码不是手工数值，则默认取每页条数第一项，再则默认 10
+          if (!isManualPageSize) {
+            setTotal(arr[0] + 1);
+          }
+          return arr.map((s) => String(s));
+        }
+        return [];
+      } catch (e) {
+        console.error('条数可选值 pageSizeOptions 必须配置为数字数组字符串'); // eslint-disable-line no-console
+      }
+    }
+    return [];
+  }, [pageSizeOptions]);
+
+  const pagination = page && {
+    total,
+    showTotal: showTotal ? () => '共 1 条' : null,
+    current: 1,
+    defaultCurrent: 1,
+    pageSize: total - 1,
+    showQuickJumper,
+    showSizeChanger,
+    pageSizeOptions: parsedPageSizeOptions,
+    size: 'default',
+    className: classNames('ued-table-page', `ued-table-page-${size}`),
+  };
+  
+  useEffect(() => {
+    setTotal(tempPageSize + 1);
+  }, [tempPageSize]);
+
+  return {
+    pagination,
+  };
+};
+
+export default usePagination;

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/ED/useScroll.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+
+const useScroll = (props: any) => {
+  const {
+    columns,
+    tableScroll,
+  } = props;
+
+  /**
+   * 适配 scroll，主要是 scroll.x
+   * antd 4.x 在设置横向滚动时，表格宽度最好大于列宽度（如果有设置的话）总和，否则会出现列被挤压的情况
+   */
+  const realScroll = useMemo(() => {
+    if (tableScroll && typeof tableScroll === 'object' && !Array.isArray(tableScroll)) {
+      if (columns && columns.length) {
+        const colWidths = columns.reduce(
+          (prev: any, next: any) => Number(prev) + Number(next.width || 0),
+          [0],
+        );
+        const tableScrollX = tableScroll.x || 0;
+
+        return {
+          ...tableScroll,
+          x: colWidths > tableScrollX ? colWidths : tableScrollX,
+        };
+      }
+
+      return tableScroll;
+    }
+    return undefined;
+  }, [columns, tableScroll]);
+
+  return {
+    scroll: realScroll,
+  };
+};
+
+export default useScroll;