@zat-design/sisyphus-react 4.5.9 → 4.5.10-beta.2

package/es/ProEditTable/utils/index.js

@@ -1,29 +1,34 @@
-import _isFunction from "lodash/isFunction";
-import _isBoolean from "lodash/isBoolean";
-import _isArray from "lodash/isArray";
-import _cloneDeepWith from "lodash/cloneDeepWith";
-import React from 'react';
-import { Tooltip, Space } from 'antd';
-import classnames from 'classnames';
-import { tools } from '@zat-design/utils';
-import { QuestionCircleOutlined } from '@ant-design/icons';
-import { actions, defaultBtnNameMap, defaultSingleActionKeys, defaultMultipleActionKeys, defaultEditingActionKeys } from "./config";
-import { customValidate, getNamePath, splitNames, handleScrollToError, cloneDeepFilterNode, isRecordShallowEqual } from "./tools";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import cloneDeepWith from "lodash/cloneDeepWith";
+import isArray from "lodash/isArray";
+import isBoolean from "lodash/isBoolean";
+import isFunction from "lodash/isFunction";
+import { Tooltip, Space } from "antd";
+import classnames from "classnames";
+import { tools } from "@zat-design/utils";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import {
+  actions,
+  defaultBtnNameMap,
+  defaultSingleActionKeys,
+  defaultMultipleActionKeys,
+  defaultEditingActionKeys
+} from "./config";
+import {
+  customValidate,
+  getNamePath,
+  splitNames,
+  handleScrollToError,
+  cloneDeepFilterNode,
+  isRecordShallowEqual
+} from "./tools";
 import { filterInternalFields } from "../../ProForm/utils";
 import ProTooltip from "../../ProTooltip";
 import { RenderField, ActionButton } from "../components";
 import { hasRowFunctionDependency } from "../components/RenderField/tools";
 import locale from "../../locale";
-
-/**
- * shouldCellUpdate 缓存容器：跟踪 dataSource/component 引用与 filterInList 列表长度。
- * 调用方（ProEditTable 顶层）通过 useRef 持有按实例隔离的容器，避免 module-level Map
- * 在多实例场景下交叉污染；实例卸载后缓存随宿主一起释放。
- * 未传 caches 时退化为单次内联 Map（不缓存历史，shouldCellUpdate 始终首次比较）。
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// 渲染操作栏
-const getActionColumn = config => {
+const getActionColumn = (config) => {
   const {
     disabled,
     name,
@@ -36,103 +41,77 @@ const getActionColumn = config => {
     rowDisabled,
     actionDirection,
     editingKeys
-  } = _cloneDeepWith(config, value => {
-    if ( /*#__PURE__*/React.isValidElement(value)) {
+  } = cloneDeepWith(config, (value) => {
+    if (React.isValidElement(value)) {
       return value;
     }
   });
-  const pageNum = tools.calc(page.pageNum, '-', 1);
-  const firstIndex = tools.calc(pageNum, '*', page.pageSize);
-  // actionProps配置为false 默认不插入
+  const pageNum = tools.calc(page.pageNum, "-", 1);
+  const firstIndex = tools.calc(pageNum, "*", page.pageSize);
   if (actionProps === false || disabled) {
     return false;
   }
   const virtualRowName = getNamePath(name, virtualKey);
-
-  // 设置默认操作栏按钮（区分单行与多行编辑场景）
   const defaultActionKeys = virtualKey ? defaultSingleActionKeys : defaultMultipleActionKeys;
   let nextActionsProps = [...actionProps];
-
-  // 不设置actionProps
-  if (_isArray(actionProps) && !actionProps?.length) {
-    nextActionsProps = defaultActionKeys.map(key => {
-      return {
-        type: key
-      };
+  if (isArray(actionProps) && !(actionProps == null ? void 0 : actionProps.length)) {
+    nextActionsProps = defaultActionKeys.map((key) => {
+      return { type: key };
     });
   } else {
-    // 设置部分actionProps 内置的必选按钮会集成进去，可以手动开启show: false来隐藏对应类型的按钮
-    defaultActionKeys.forEach(key => {
-      if (_isArray(actionProps) && !actionProps.find(action => action.type === key)) {
+    defaultActionKeys.forEach((key) => {
+      if (isArray(actionProps) && !actionProps.find((action) => action.type === key)) {
         nextActionsProps.push({
           type: key
         });
       }
     });
   }
-
-  // 渲染操作按钮前处理下默认数据
-  const actionBtns = nextActionsProps.map(action => {
-    const {
-      type,
-      label,
-      show,
-      needConfirm,
-      onHandle,
-      onClick,
-      isSelectModal,
-      ...buttonProps
-    } = action;
+  const actionBtns = nextActionsProps.map((action) => {
+    const { type, label, show, needConfirm, onHandle, onClick, isSelectModal, ...buttonProps } = action;
     action.isEditable = defaultEditingActionKeys.includes(type);
     action.label = label ?? defaultBtnNameMap[type];
     action.show = show ?? true;
     action.needConfirm = needConfirm ?? true;
-    action.onEvent = async (record, {
-      index,
-      form,
-      name,
-      namePath,
-      tableLength,
-      selectedRows
-    }) => {
-      index = tools.calc(firstIndex, '+', index);
+    action.onEvent = async (record, { index, form: form2, name: name2, namePath, tableLength, selectedRows }) => {
+      index = tools.calc(firstIndex, "+", index);
       const rowName = [...virtualRowName, index];
-      if (type === 'save') {
-        // 判断该行是否处于编辑状态
+      if (type === "save") {
         const _isEditing = !virtualKey || editingKeys.includes(record.rowKey) || record._addFlag;
-
-        // 只有编辑中的行才需要校验
         if (_isEditing) {
           try {
-            await customValidate(validateKeys, form, rowName);
+            await customValidate(validateKeys, form2, rowName);
           } catch (error) {
             handleScrollToError();
             return Promise.reject(error);
           }
         }
       }
-      // 编辑状态使用自定义form值，非编辑状态直接使用行数据
-      const lastRecord = filterInternalFields(form.getFieldValue(rowName) ?? record);
-      // 新增事件可以设置初始默认值，当做函数的出参导出
+      const fieldRecord = filterInternalFields(form2.getFieldValue(rowName));
+      const lastRecord = {
+        ...record,
+        ...fieldRecord && typeof fieldRecord === "object" ? fieldRecord : {},
+        rowKey: record.rowKey
+      };
       const onEvent = onClick || onHandle;
       let result;
       if (!onEvent) {
         result = true;
       } else {
-        result = await onEvent?.(lastRecord, {
-          form,
+        result = await (onEvent == null ? void 0 : onEvent(lastRecord, {
+          form: form2,
           index,
           tableLength,
-          name,
+          name: name2,
           namePath,
           selectedRows
-        });
+        }));
       }
-      if (result !== false && type !== 'custom') {
+      if (result !== false && type !== "custom") {
         const actionHandler = actions[type];
         actionHandler({
           ...config,
-          rowName: [...name, index],
+          rowName: [...name2, index],
           virtualRowName: rowName,
           record: lastRecord,
           result,
@@ -145,43 +124,32 @@ const getActionColumn = config => {
   });
   return {
     title: locale.ProEditTable.operation,
-    key: 'action',
-    fixed: 'right',
-    className: 'pro-edit-table-action-column',
-    width: actionWidth || (actionDirection === 'vertical' ? 60 : virtualKey ? 120 : 60),
+    key: "action",
+    fixed: "right",
+    className: "pro-edit-table-action-column",
+    width: actionWidth || (actionDirection === "vertical" ? 60 : virtualKey ? 120 : 60),
     render: (text, record, index) => {
-      const _disabled = rowDisabled?.(record) ?? false;
+      const _disabled = (rowDisabled == null ? void 0 : rowDisabled(record)) ?? false;
       if (_disabled) {
-        return '';
+        return "";
       }
-      return /*#__PURE__*/_jsx(Space, {
-        size: "small",
-        orientation: actionDirection,
-        children: actionBtns.map(btnConfig => {
-          return /*#__PURE__*/_jsx(React.Fragment, {
-            children: /*#__PURE__*/_jsx(ActionButton, {
+      return /* @__PURE__ */ jsx(Space, { size: "small", orientation: actionDirection, children: actionBtns.map((btnConfig) => {
+        return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            ...{
               record,
               index,
               config,
               btnConfig
-            })
-          }, `${record.rowKey}-${btnConfig?.type}`);
-        })
-      });
+            }
+          }
+        ) }, `${record.rowKey}-${btnConfig == null ? void 0 : btnConfig.type}`);
+      }) });
     }
   };
 };
-
-/**
- * 编辑模式分为 多行和单行两种
- * 单行模式下，render 分为component和viewRender两种，对应编辑和非编辑状态下，edit状态不对外
- * 多行模式下component设置即可
- * render不对外暴露formItem，能自定渲染的尽是输入组件或者显示组件本身
- * @param columns 表格配置数据
- * @param config
- */
-
-export const transformColumns = (columns = [], config, caches) => {
+const transformColumns = (columns = [], config, caches) => {
   const {
     mode,
     form,
@@ -194,17 +162,16 @@ export const transformColumns = (columns = [], config, caches) => {
     setState,
     page
   } = config;
-
-  // 未传 caches 时退化为单次内联 Map（每次 transform 新建，不持久化）
   const cellCaches = caches ?? {
-    dataSourceRef: new Map(),
-    componentRef: new Map(),
-    listLength: new Map()
+    dataSourceRef: /* @__PURE__ */ new Map(),
+    componentRef: /* @__PURE__ */ new Map(),
+    listLength: /* @__PURE__ */ new Map()
   };
-  let nextColumns = columns.map(item => cloneDeepFilterNode(item));
-  const pageNum = tools.calc(page.pageNum, '-', 1);
-  const firstIndex = tools.calc(pageNum, '*', page.pageSize);
+  let nextColumns = columns.map((item) => cloneDeepFilterNode(item));
+  const pageNum = tools.calc(page.pageNum, "-", 1);
+  const firstIndex = tools.calc(pageNum, "*", page.pageSize);
   nextColumns.forEach((item, index) => {
+    var _a, _b;
     const {
       label,
       names,
@@ -220,147 +187,104 @@ export const transformColumns = (columns = [], config, caches) => {
       before,
       after
     } = item;
-
-    // column设置label时，权重最高
     const columnTitle = label || title;
     item.title = columnTitle;
-    if (typeof columnTitle === 'string') {
+    if (typeof columnTitle === "string") {
       item.originTitle = columnTitle;
       if (tooltip) {
-        const {
-          title: tooltipTitle,
-          icon,
-          ...resetProps
-        } = tooltip || {};
-        item.title = /*#__PURE__*/_jsxs("span", {
-          className: "pro-edit-table-title pro-edit-table-tooltip",
-          children: [before, columnTitle, /*#__PURE__*/_jsx(Tooltip, {
-            title: tooltipTitle ?? tooltip,
-            ...resetProps,
-            children: icon ? ( /*#__PURE__*/React.cloneElement(icon, {
-              className: 'icon-tip'
-            })) : /*#__PURE__*/_jsx(QuestionCircleOutlined, {
-              className: "icon-tip"
-            })
-          }), suffix || after]
-        });
+        const { title: tooltipTitle, icon, ...resetProps } = tooltip || {};
+        item.title = /* @__PURE__ */ jsxs("span", { className: "pro-edit-table-title pro-edit-table-tooltip", children: [
+          before,
+          columnTitle,
+          /* @__PURE__ */ jsx(Tooltip, { title: tooltipTitle ?? tooltip, ...resetProps, children: icon ? React.cloneElement(icon, {
+            className: "icon-tip"
+          }) : /* @__PURE__ */ jsx(QuestionCircleOutlined, { className: "icon-tip" }) }),
+          suffix || after
+        ] });
       } else {
-        item.title = /*#__PURE__*/_jsxs("span", {
-          className: "pro-edit-table-title",
-          children: [before, columnTitle, suffix || after]
-        });
+        item.title = /* @__PURE__ */ jsxs("span", { className: "pro-edit-table-title", children: [
+          before,
+          columnTitle,
+          suffix || after
+        ] });
       }
     }
-
-    // width转为数字，兼容虚拟滚动场景
-    if (typeof item.width === 'string' && item.width.includes('px')) {
+    if (typeof item.width === "string" && item.width.includes("px")) {
       item.width = parseInt(item.width, 10);
     }
-
-    // column设置name时，权重最高
-    const columnName = item?.name || dataIndex || key;
+    const columnName = (item == null ? void 0 : item.name) || dataIndex || key;
     item.dataIndex = columnName;
     item.key = columnName;
-    // item.shouldCellUpdate = item.shouldCellUpdate || ((record, perRecord) => !isEqual(record, perRecord));
-
-    let required = _isBoolean(item.required) ? item.required : false;
-    if (_isFunction(item.required)) {
-      // 列配置预处理阶段没有稳定行上下文，required 函数交给 RenderField 内按行计算
+    let required = isBoolean(item.required) ? item.required : false;
+    if (isFunction(item.required)) {
       required = false;
     }
-
-    // 列隐藏使用 antd 原生 column.hidden（antd 5.13+ 支持），不再依赖 is-hidden 错位定位 hack
     if (hidden) {
       item.hidden = true;
     }
-
-    // 样式处理（不再写 is-hidden className）
     item.className = classnames({
-      'is-required': required || labelRequired,
-      'is-required-left': requiredAlign === 'left',
-      'is-required-right': requiredAlign === 'right',
+      "is-required": required || labelRequired,
+      "is-required-left": requiredAlign === "left",
+      "is-required-right": requiredAlign === "right",
       [className]: className
     });
-
-    // 防止重复渲染导致className重复添加
     if (item.className) {
-      item.className = [...new Set(item.className.split(' '))].join(' ');
+      item.className = [...new Set(item.className.split(" "))].join(" ");
     }
-    const _render = (text, record, index) => {
+    const _render = (text, record, index2) => {
       const _isEditing = !virtualKey || editingKeys.includes(record.rowKey) || record._addFlag;
-      let namePath = _isArray(name) ? name : [name];
+      let namePath = isArray(name) ? name : [name];
       if (virtualKey && editingKeys.includes(record.rowKey)) {
         namePath = getNamePath(name, virtualKey);
       }
       const namePathArray = Array.isArray(namePath) ? namePath : [namePath];
-      const columnNamePath = _isArray(columnName) ? columnName : [columnName];
-      index = tools.calc(firstIndex, '+', index);
-      // 设置单元格formItem的namePath
-      let cellName = columnName ? [...namePathArray, index, ...columnNamePath] : [...namePathArray, index];
+      const columnNamePath = isArray(columnName) ? columnName : [columnName];
+      index2 = tools.calc(firstIndex, "+", index2);
+      let cellName = columnName ? [...namePathArray, index2, ...columnNamePath] : [...namePathArray, index2];
       let _text = text;
-
-      // 当传入组合组件时，name需要重新组合一下，以防names中key与dataIndex重叠
-      if (names?.length) {
+      if (names == null ? void 0 : names.length) {
         const nextDataIndex = splitNames(names);
         item.dataIndex = nextDataIndex;
         item.key = nextDataIndex;
-        cellName = [...namePathArray, index, nextDataIndex];
-        // 给names返回数组值
-        _text = names.map(item => record?.[item]);
+        cellName = [...namePathArray, index2, nextDataIndex];
+        _text = names.map((item2) => record == null ? void 0 : record[item2]);
       }
       if (!_isEditing && ellipsis) {
-        return /*#__PURE__*/_jsx(ProTooltip, {
-          text: _text,
-          line: 1,
-          isResponsiveWidth: true
-        });
+        return /* @__PURE__ */ jsx(ProTooltip, { text: _text, line: 1, isResponsiveWidth: true });
       }
-
-      // 单行多行交互有较大差异
-      return /*#__PURE__*/_jsxs("div", {
-        children: [index === 0 && !item.width ? /*#__PURE__*/_jsx("div", {
-          style: {
-            visibility: 'hidden',
-            height: 0,
-            paddingLeft: item?.required ? 16 : 0
-          },
-          children: columnTitle
-        }) : null, /*#__PURE__*/_jsx(RenderField, {
-          text: _text,
-          record: record,
-          index: index,
-          column: item,
-          config: {
-            ...config,
-            cellName,
-            // 单元格formItem的namePath
-            _isEditing // 是否正在编辑
+      return /* @__PURE__ */ jsxs("div", { children: [
+        index2 === 0 && !item.width ? /* @__PURE__ */ jsx("div", { style: { visibility: "hidden", height: 0, paddingLeft: (item == null ? void 0 : item.required) ? 16 : 0 }, children: columnTitle }) : null,
+        /* @__PURE__ */ jsx(
+          RenderField,
+          {
+            text: _text,
+            record,
+            index: index2,
+            column: item,
+            config: {
+              ...config,
+              cellName,
+              // 单元格formItem的namePath
+              _isEditing
+              // 是否正在编辑
+            }
           }
-        })]
-      });
+        )
+      ] });
     };
     item.render = _render;
-
-    // 精准控制单元格更新，减少不必要的渲染
     if (!item.shouldCellUpdate) {
-      const hasComponent = _isFunction(item.component);
-      // 函数型动态属性会依赖整行数据（可能是当前列之外的兄弟字段），
-      // 这类列在行内任意字段变化时都需重渲染，不能只比对本列 dataIndex
+      const hasComponent = isFunction(item.component);
       const hasFunctionDependency = hasRowFunctionDependency(item);
-      const columnCacheKey = `${Array.isArray(name) ? name.join('.') : String(name)}::${String(columnName)}`;
-
-      // Fix 问题1：用原始列引用（克隆前）比对 dataSource
-      // cloneDeepFilterNode 每次产生新引用，在 shouldCellUpdate 内更新 cache 只会让第一行触发更新，其余行跳过
-      const originalFieldProps = columns[index]?.fieldProps;
-      const originalDataSourceRef = !_isFunction(originalFieldProps) ? originalFieldProps?.dataSource : undefined;
+      const columnCacheKey = `${Array.isArray(name) ? name.join(".") : String(name)}::${String(columnName)}`;
+      const originalFieldProps = (_a = columns[index]) == null ? void 0 : _a.fieldProps;
+      const originalDataSourceRef = !isFunction(originalFieldProps) ? originalFieldProps == null ? void 0 : originalFieldProps.dataSource : void 0;
       const prevDataSourceRef = cellCaches.dataSourceRef.get(columnCacheKey);
-      const dataSourceChanged = originalDataSourceRef !== undefined && prevDataSourceRef !== originalDataSourceRef;
+      const dataSourceChanged = originalDataSourceRef !== void 0 && prevDataSourceRef !== originalDataSourceRef;
       if (dataSourceChanged) {
         cellCaches.dataSourceRef.set(columnCacheKey, originalDataSourceRef);
       }
-
-      // Fix 问题2：检测 filterInList 列的行增删，避免行索引移位时 shouldUpdate 闭包中 index 失效
-      const filterInListEnabled = !_isFunction(item?.fieldProps) && item?.fieldProps?.filterInList;
+      const filterInListEnabled = !isFunction(item == null ? void 0 : item.fieldProps) && ((_b = item == null ? void 0 : item.fieldProps) == null ? void 0 : _b.filterInList);
       let filterListChanged = false;
       if (filterInListEnabled) {
         const currentListLen = config.tableLength ?? 0;
@@ -371,27 +295,22 @@ export const transformColumns = (columns = [], config, caches) => {
         }
       }
       item.shouldCellUpdate = (record, prevRecord) => {
-        // dataSource 变化：所有行均需更新（修复异步加载 dataSource 只更新第一行的问题）
-        if (dataSourceChanged) return true;
-        // filterInList 列的行数变化：强制全量重渲染，避免行索引移位时闭包失效导致显示错误
-        if (filterListChanged) return true;
-        if (record?.rowKey !== prevRecord?.rowKey) {
+        if (dataSourceChanged)
+          return true;
+        if (filterListChanged)
+          return true;
+        if ((record == null ? void 0 : record.rowKey) !== (prevRecord == null ? void 0 : prevRecord.rowKey)) {
           return true;
         }
-        // 行位置变化时（增删其他行导致 index 移位），需强制重渲染以更新 Form.Item name 路径
-        if (record?._rowIndex !== prevRecord?._rowIndex) {
+        if ((record == null ? void 0 : record._rowIndex) !== (prevRecord == null ? void 0 : prevRecord._rowIndex)) {
           return true;
         }
-        // 拖拽排序时，行数据不变但位置（_dragIndex）变化，需强制重渲染以更新 cellName（Form.Item name）
-        if (record?._dragIndex !== prevRecord?._dragIndex) {
+        if ((record == null ? void 0 : record._dragIndex) !== (prevRecord == null ? void 0 : prevRecord._dragIndex)) {
           return true;
         }
-        // 单行编辑模式下，需要检测编辑状态变化
-        if (virtualKey && record?._isEditing !== prevRecord?._isEditing) {
+        if (virtualKey && (record == null ? void 0 : record._isEditing) !== (prevRecord == null ? void 0 : prevRecord._isEditing)) {
           return true;
         }
-        // 动态 component 函数引用变化说明外部依赖（如异步 list）已更新，必须重渲染
-        // 即使行数据未变，旧闭包仍持有过时的外部状态
         if (hasComponent) {
           const prevComponentRef = cellCaches.componentRef.get(columnCacheKey);
           const currentComponentRef = item.component;
@@ -400,28 +319,26 @@ export const transformColumns = (columns = [], config, caches) => {
             return true;
           }
         }
-        // 函数型动态属性（component/fieldProps/rules/required/disabled/isEditable/valueType/viewRender）
-        // 可能依赖行内其他字段（兄弟字段），需比较整行；
-        // 同引用原地修改时 isEqual 恒为 true，无法感知，必须强制重渲染
         if (hasFunctionDependency) {
           if (record === prevRecord) {
             return true;
           }
           return !isRecordShallowEqual(record, prevRecord);
         }
-        const key = item.dataIndex || item.key;
-        if (!key) return true;
-        const keyChanged = record?.[key] !== prevRecord?.[key];
+        const key2 = item.dataIndex || item.key;
+        if (!key2)
+          return true;
+        const keyChanged = (record == null ? void 0 : record[key2]) !== (prevRecord == null ? void 0 : prevRecord[key2]);
         return keyChanged;
       };
     }
   });
   if (disabled || isView) {
-    // 查看模式下过滤操作栏
-    nextColumns = nextColumns.filter(item => item.title !== locale.ProEditTable.operation);
+    nextColumns = nextColumns.filter((item) => item.title !== locale.ProEditTable.operation);
   } else {
-    const validateKeys = nextColumns.filter(i => i.rules || i.required).map(item => {
-      if (item.names?.length) {
+    const validateKeys = nextColumns.filter((i) => i.rules || i.required).map((item) => {
+      var _a;
+      if ((_a = item.names) == null ? void 0 : _a.length) {
         const nextDataIndex = splitNames(item.names);
         item.dataIndex = nextDataIndex;
         item.key = nextDataIndex;
@@ -430,11 +347,13 @@ export const transformColumns = (columns = [], config, caches) => {
     });
     const actionColumn = getActionColumn({
       ...config,
-      validateKeys // 需要校验的单元格的formItem的name
+      validateKeys
+      // 需要校验的单元格的formItem的name
     });
     actionColumn && nextColumns.push(actionColumn);
   }
-
-  // 渲染操作列
   return nextColumns;
-};
+};
+export {
+  transformColumns
+};