@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/es/table/components/EditableTable/index.js

@@ -1,67 +1,227 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _excluded = ["onTableChange", "maxLength", "formItemProps", "recordCreatorProps", "rowKey", "controlled", "defaultValue", "onChange", "editableFormRef"],
-  _excluded2 = ["record", "position", "creatorButtonText", "newRecordType", "parentKey", "style"];
 import { PlusOutlined } from '@ant-design/icons';
-import { get, set, useMergedState } from '@rc-component/util';
+import { get, set, useControlledState } from '@rc-component/util';
 import { Button, Form } from 'antd';
-import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import ProForm, { ProFormDependency } from "../../../form";
 import { useIntl } from "../../../provider";
-import { isDeepEqualReact, runFunction, stringify, useRefFunction } from "../../../utils";
+import { isDeepEqualReact, runFunction, useDeepCompareEffect, useRefFunction } from "../../../utils";
+import { editableRowByKey, recordKeyToString } from "../../../utils/useEditableArray";
 import ProTable from "../../Table";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var EditableTableActionContext = /*#__PURE__*/React.createContext(undefined);
+const EditableTableActionContext = /*#__PURE__*/React.createContext(undefined);
 
 /** 可编辑表格的按钮 */
 function RecordCreator(props) {
-  var children = props.children,
-    record = props.record,
-    position = props.position,
-    newRecordType = props.newRecordType,
-    parentKey = props.parentKey;
-  var actionRef = useContext(EditableTableActionContext);
-  return /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), {}, {
-    onClick: function () {
-      var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
-        var _children$props$onCli, _children$props, _actionRef$current;
-        var isOk;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return (_children$props$onCli = (_children$props = children.props).onClick) === null || _children$props$onCli === void 0 ? void 0 : _children$props$onCli.call(_children$props, e);
-            case 2:
-              isOk = _context.sent;
-              if (!(isOk === false)) {
-                _context.next = 5;
-                break;
-              }
-              return _context.abrupt("return");
-            case 5:
-              actionRef === null || actionRef === void 0 || (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 || _actionRef$current.addEditRecord(record, {
-                position: position,
-                newRecordType: newRecordType,
-                parentKey: parentKey
-              });
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      function onClick(_x) {
-        return _onClick.apply(this, arguments);
+  const {
+    children,
+    record,
+    position,
+    newRecordType,
+    parentKey
+  } = props;
+  const actionRef = useContext(EditableTableActionContext);
+  return /*#__PURE__*/React.cloneElement(children, {
+    ...children.props,
+    onClick: async e => {
+      // 如果返回了false，接触掉默认行为
+      const isOk = await children.props.onClick?.(e);
+      if (isOk === false) return;
+      if (actionRef?.current) {
+        actionRef.current.addEditRecord(record, {
+          position,
+          newRecordType,
+          parentKey: parentKey
+        });
       }
-      return onClick;
-    }()
-  }));
+    }
+  });
+}
+
+/**
+ * 处理嵌套行的新增
+ */
+function handleNestedRowInsert(baseData, defaultValue, newLineOptions, getRowKey, childrenColumnName) {
+  if (!newLineOptions.recordKey) {
+    return baseData;
+  }
+  const actionProps = {
+    data: baseData,
+    getRowKey,
+    row: {
+      ...defaultValue,
+      map_row_parentKey: recordKeyToString(newLineOptions.parentKey)?.toString()
+    },
+    key: newLineOptions.recordKey,
+    childrenColumnName
+  };
+  return editableRowByKey(actionProps, newLineOptions.position === 'top' ? 'top' : 'update');
+}
+
+/**
+ * 处理分页场景下的新增
+ */
+function handlePaginationInsert(baseData, defaultValue, pageConfig) {
+  if (pageConfig.pageSize > baseData.length) {
+    return [...baseData, defaultValue];
+  }
+  const insertIndex = pageConfig.current * pageConfig.pageSize - 1;
+  const result = [...baseData];
+  result.splice(insertIndex, 0, defaultValue);
+  return result;
+}
+function useEditableDataSource({
+  actionDataSource,
+  editableUtils,
+  pagination,
+  getRowKey,
+  childrenColumnName
+}) {
+  return useMemo(() => {
+    const newLineConfig = editableUtils?.newLineRecord;
+    const baseData = Array.isArray(actionDataSource) ? [...actionDataSource] : [];
+    if (!newLineConfig?.defaultValue) {
+      return baseData;
+    }
+    const {
+      options: newLineOptions,
+      defaultValue
+    } = newLineConfig;
+    if (newLineOptions?.parentKey) {
+      return handleNestedRowInsert(baseData, defaultValue, newLineOptions, getRowKey, childrenColumnName || 'children');
+    }
+    if (newLineOptions?.position === 'top') {
+      return [defaultValue, ...baseData];
+    }
+    const pageConfig = pagination && typeof pagination === 'object' ? pagination : undefined;
+    if (pageConfig?.current && pageConfig?.pageSize) {
+      return handlePaginationInsert(baseData, defaultValue, pageConfig);
+    }
+    return [...baseData, defaultValue];
+  }, [actionDataSource, childrenColumnName, editableUtils?.newLineRecord, getRowKey, pagination]);
+}
+
+/**
+ * 检查是否应该显示创建按钮
+ */
+function shouldShowCreatorButton(maxLength, valueLength, recordCreatorProps) {
+  if (typeof maxLength === 'number' && maxLength <= valueLength) {
+    return false;
+  }
+  return recordCreatorProps !== false;
+}
+
+/**
+ * 创建按钮 DOM
+ */
+function createButtonDom(recordCreatorProps, value, intl) {
+  const {
+    record,
+    position,
+    creatorButtonText,
+    newRecordType,
+    parentKey,
+    style,
+    ...restButtonProps
+  } = recordCreatorProps;
+  return /*#__PURE__*/_jsx(RecordCreator, {
+    record: runFunction(record, value?.length, value) || {},
+    position: position,
+    parentKey: runFunction(parentKey, value?.length, value),
+    newRecordType: newRecordType,
+    children: /*#__PURE__*/_jsx(Button, {
+      type: "dashed",
+      style: {
+        display: 'block',
+        margin: '10px 0',
+        width: '100%',
+        ...style
+      },
+      icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
+      ...restButtonProps,
+      children: creatorButtonText || intl.getMessage('editableTable.action.add', '添加一行数据')
+    })
+  });
+}
+
+/**
+ * 创建顶部按钮的渲染属性
+ */
+function createTopButtonProps(creatorButtonDom, columnsLength) {
+  return {
+    components: {
+      header: {
+        wrapper: ({
+          className,
+          children
+        }) => /*#__PURE__*/_jsxs("thead", {
+          className: className,
+          children: [children, /*#__PURE__*/_jsxs("tr", {
+            style: {
+              position: 'relative'
+            },
+            children: [/*#__PURE__*/_jsx("td", {
+              colSpan: 0,
+              style: {
+                visibility: 'hidden'
+              },
+              children: creatorButtonDom
+            }), /*#__PURE__*/_jsx("td", {
+              style: {
+                position: 'absolute',
+                left: 0,
+                width: '100%'
+              },
+              colSpan: columnsLength,
+              children: creatorButtonDom
+            })]
+          })]
+        })
+      }
+    }
+  };
+}
+
+/**
+ * 创建底部按钮的渲染属性
+ */
+function createBottomButtonProps(creatorButtonDom, tableViewRender) {
+  return {
+    tableViewRender: (_, dom) => /*#__PURE__*/_jsxs(_Fragment, {
+      children: [tableViewRender?.(_, dom) ?? dom, creatorButtonDom]
+    })
+  };
+}
+function useCreatorButton({
+  recordCreatorProps,
+  maxLength,
+  value,
+  intl,
+  isTop,
+  columnsLength,
+  tableViewRender
+}) {
+  const creatorButtonDom = useMemo(() => {
+    if (!shouldShowCreatorButton(maxLength, value?.length || 0, recordCreatorProps)) {
+      return false;
+    }
+    if (!recordCreatorProps) {
+      return false;
+    }
+    return createButtonDom(recordCreatorProps, value, intl);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maxLength, recordCreatorProps, value?.length, intl]);
+  const buttonRenderProps = useMemo(() => {
+    if (!creatorButtonDom) {
+      return {};
+    }
+    return isTop ? createTopButtonProps(creatorButtonDom, columnsLength) : createBottomButtonProps(creatorButtonDom, tableViewRender);
+  }, [columnsLength, creatorButtonDom, isTop, tableViewRender]);
+  return {
+    creatorButtonDom,
+    buttonRenderProps
+  };
 }
 
 /**
@@ -70,294 +230,431 @@ function RecordCreator(props) {
  * @param props
  */
 function EditableTable(props) {
-  var _props$editable2, _props$editable4;
-  var intl = useIntl();
-  var onTableChange = props.onTableChange,
-    maxLength = props.maxLength,
-    formItemProps = props.formItemProps,
-    recordCreatorProps = props.recordCreatorProps,
-    rowKey = props.rowKey,
-    controlled = props.controlled,
-    defaultValue = props.defaultValue,
-    onChange = props.onChange,
-    editableFormRef = props.editableFormRef,
-    rest = _objectWithoutProperties(props, _excluded);
-  var preData = useRef(undefined);
-  var actionRef = useRef();
-  var formRef = useRef();
+  const intl = useIntl();
+  const {
+    onTableChange,
+    maxLength,
+    formItemProps,
+    recordCreatorProps,
+    rowKey,
+    controlled,
+    defaultValue,
+    onChange,
+    editableFormRef,
+    // @ts-ignore
+    autoFocus,
+    ...rest
+  } = props;
+  const preData = useRef(undefined);
+  const actionRef = useRef();
+  const formRef = useRef();
+  const form = Form.useFormInstance();
 
   // 设置 ref
-  useImperativeHandle(rest.actionRef, function () {
-    return actionRef.current;
-  }, [actionRef.current]);
-  var _useMergedState = useMergedState(function () {
-      return props.value || defaultValue || [];
-    }, {
-      value: props.value,
-      onChange: props.onChange
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    value = _useMergedState2[0],
-    setValue = _useMergedState2[1];
-  var getRowKey = React.useMemo(function () {
+  useImperativeHandle(rest.actionRef, () => actionRef.current, [actionRef.current]);
+
+  // 在 name 模式下，如果没有传递 value prop，尝试从表单值中获取初始值
+  const getInitialValue = () => {
+    if (props.value) {
+      return props.value;
+    }
+    if (defaultValue) {
+      return defaultValue;
+    }
+    // 如果使用了 name 且没有 value，尝试从表单获取初始值
+    if (props.name && form) {
+      const namePath = [props.name].flat(1).filter(Boolean);
+      const formValue = form.getFieldValue(namePath);
+      if (Array.isArray(formValue)) {
+        return formValue;
+      }
+    }
+    return [];
+  };
+  const [value, setValueInner] = useControlledState(getInitialValue, props.value);
+  const onChangeFn = props.controlled ? props.onChange : undefined;
+  const setValue = useCallback(updater => {
+    setValueInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      // 在非受控模式下，onChange 应该在 onDataSourceChange 中触发
+      onChangeFn?.(next);
+      return next;
+    });
+  }, [onChangeFn]);
+  const getRowKey = React.useMemo(() => {
     if (typeof rowKey === 'function') {
       return rowKey;
     }
-    return function (record, index) {
-      return record[rowKey] || index;
-    };
+    return (record, index) => record[rowKey] || index;
   }, [rowKey]);
 
   /**
-   * 根据不同的情况返回不同的 rowKey
-   * @param finlayRowKey
-   * @returns string | number
+   * 创建编辑 keys 的 Set，用于快速查找
    */
-  var coverRowKey = useRefFunction(function (finlayRowKey) {
-    /**
-     * 如果是 prop.name 的模式，就需要把行号转化成具体的rowKey。
-     */
-    if (typeof finlayRowKey === 'number' && !props.name) {
-      if (finlayRowKey >= value.length) return finlayRowKey;
-      var rowData = value && value[finlayRowKey];
-      return getRowKey === null || getRowKey === void 0 ? void 0 : getRowKey(rowData, finlayRowKey);
+  const createEditingKeysSet = useRefFunction(editingKeys => {
+    return new Set((editingKeys || []).map(key => String(key)));
+  });
+
+  /**
+   * 同步表单值，排除正在编辑的行
+   */
+  const syncFormValuesExcludingEditing = useRefFunction((dataSource, editingKeysSet, namePath) => {
+    if (!formRef.current) return;
+    try {
+      if (namePath && namePath.length > 0) {
+        // name 模式：需要保留正在编辑的行
+        const currentFormValues = formRef.current.getFieldsValue() || {};
+        const currentList = get(currentFormValues, namePath);
+        if (currentList && Array.isArray(currentList)) {
+          // 构建新的表单值，保留正在编辑的行
+          // 使用 Map 优化查找性能，将 O(n²) 降低到 O(n)
+          const currentListMap = new Map();
+          currentList.forEach((item, idx) => {
+            const key = getRowKey(item, idx);
+            currentListMap.set(String(key), item);
+          });
+          const newList = dataSource.map((item, index) => {
+            const key = getRowKey(item, index);
+            const keyStr = String(key);
+
+            // 如果该行正在编辑，保留表单中的值
+            if (editingKeysSet.has(keyStr)) {
+              return currentListMap.get(keyStr) || item;
+            }
+            return item;
+          });
+          const newValue = set({}, namePath, newList);
+          formRef.current.setFieldsValue(newValue);
+        } else {
+          const newValue = set({}, namePath, dataSource);
+          formRef.current.setFieldsValue(newValue);
+        }
+      } else {
+        // 非 name 模式：直接设置值
+        const formValues = {};
+        dataSource.forEach((current, index) => {
+          const key = getRowKey(current, index);
+          const keyStr = String(key);
+          if (!editingKeysSet.has(keyStr)) {
+            formValues[keyStr] = current;
+          }
+        });
+        if (Object.keys(formValues).length > 0) {
+          formRef.current.setFieldsValue(formValues);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to sync form values:', error);
     }
+  });
 
-    /**
-     * 如果是 prop.name 的模式，就直接返回行号
-     */
-    if ((typeof finlayRowKey === 'string' || finlayRowKey >= value.length) && props.name) {
-      var _rowIndex = value.findIndex(function (item, index) {
-        var _getRowKey;
-        return (getRowKey === null || getRowKey === void 0 || (_getRowKey = getRowKey(item, index)) === null || _getRowKey === void 0 ? void 0 : _getRowKey.toString()) === (finlayRowKey === null || finlayRowKey === void 0 ? void 0 : finlayRowKey.toString());
+  /**
+   * 将数字索引转换为实际的 rowKey（非 name 模式）
+   */
+  const convertIndexToRowKey = useRefFunction(index => {
+    const dataLength = value?.length ?? 0;
+    if (index >= dataLength) return index;
+    const rowData = value?.[index];
+    return getRowKey?.(rowData, index);
+  });
+
+  /**
+   * 将 rowKey 转换为数字索引（name 模式）
+   */
+  const convertRowKeyToIndex = useRefFunction(rowKey => {
+    const dataLength = value?.length ?? 0;
+    if (typeof rowKey === 'string' || rowKey >= dataLength) {
+      const rowIndex = value.findIndex((item, index) => {
+        return getRowKey?.(item, index)?.toString() === rowKey?.toString();
       });
-      if (_rowIndex !== -1) return _rowIndex;
+      if (rowIndex !== -1) return rowIndex;
+    }
+    return rowKey;
+  });
+
+  /**
+   * 根据不同的情况返回不同的 rowKey
+   */
+  const coverRowKey = useRefFunction(finlayRowKey => {
+    if (typeof finlayRowKey === 'number' && !props.name) {
+      return convertIndexToRowKey(finlayRowKey);
+    }
+    if (props.name) {
+      return convertRowKeyToIndex(finlayRowKey);
     }
     return finlayRowKey;
   });
 
-  // 设置 editableFormRef
-  useImperativeHandle(editableFormRef, function () {
-    /**
-     * 获取一行数据的
-     * @param rowIndex
-     * @returns T | undefined
-     */
-    var getRowData = function getRowData(rowIndex) {
-      var _finlayRowKey$toStrin, _formRef$current;
-      if (rowIndex == undefined) {
-        throw new Error('rowIndex is required');
-      }
-      var finlayRowKey = coverRowKey(rowIndex);
-      var rowKeyName = [props.name, (_finlayRowKey$toStrin = finlayRowKey === null || finlayRowKey === void 0 ? void 0 : finlayRowKey.toString()) !== null && _finlayRowKey$toStrin !== void 0 ? _finlayRowKey$toStrin : ''].flat(1).filter(Boolean);
-      return (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getFieldValue(rowKeyName);
-    };
+  /**
+   * 构建表单字段路径
+   */
+  const buildFormFieldPath = useRefFunction(rowKey => {
+    return [props.name, rowKey?.toString() ?? ''].flat(1).filter(Boolean);
+  });
 
-    /**
-     * 获取整个 table 的数据
-     * @returns T[] | undefined
-     */
-    var getRowsData = function getRowsData() {
-      var _formRef$current3;
-      var rowKeyName = [props.name].flat(1).filter(Boolean);
-      if (Array.isArray(rowKeyName) && rowKeyName.length === 0) {
-        var _formRef$current2;
-        var rowData = (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
-        if (Array.isArray(rowData)) return rowData;
-        return Object.keys(rowData).map(function (key) {
-          return rowData[key];
-        });
-      }
-      return (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.getFieldValue(rowKeyName);
-    };
-    return _objectSpread(_objectSpread({}, formRef.current), {}, {
-      getRowData: getRowData,
-      getRowsData: getRowsData,
-      /**
-       * 设置一行的数据，会将数据进行简单的 merge
-       * @param rowIndex
-       * @param data
-       * @returns void
-       */
-      setRowData: function setRowData(rowIndex, data) {
-        var _finlayRowKey$toStrin2, _formRef$current4;
-        if (rowIndex == undefined) {
-          throw new Error('rowIndex is required');
-        }
-        var finlayRowKey = coverRowKey(rowIndex);
-        var rowKeyName = [props.name, (_finlayRowKey$toStrin2 = finlayRowKey === null || finlayRowKey === void 0 ? void 0 : finlayRowKey.toString()) !== null && _finlayRowKey$toStrin2 !== void 0 ? _finlayRowKey$toStrin2 : ''].flat(1).filter(Boolean);
-        var newRowData = Object.assign({}, _objectSpread(_objectSpread({}, getRowData(rowIndex)), data || {}));
-        var updateValues = set({}, rowKeyName, newRowData);
-        (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 || _formRef$current4.setFieldsValue(updateValues);
-        return true;
-      }
-    });
-  }, [coverRowKey, props.name, formRef.current]);
-  useEffect(function () {
-    if (!props.controlled) return;
-    (value || []).forEach(function (current, index) {
-      var _formRef$current5;
-      (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 || _formRef$current5.setFieldsValue(_defineProperty({}, "".concat(getRowKey(current, index)), current));
-    }, {});
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stringify(value), props.controlled]);
-  useEffect(function () {
-    if (props.name) {
-      var _props$editable;
-      formRef.current = props === null || props === void 0 || (_props$editable = props.editable) === null || _props$editable === void 0 ? void 0 : _props$editable.form;
+  /**
+   * 获取一行数据
+   */
+  const getRowData = useRefFunction(rowIndex => {
+    if (rowIndex == null) {
+      throw new Error('rowIndex is required');
     }
-  }, [(_props$editable2 = props.editable) === null || _props$editable2 === void 0 ? void 0 : _props$editable2.form, props.name]);
-  var _ref = recordCreatorProps || {},
-    record = _ref.record,
-    position = _ref.position,
-    creatorButtonText = _ref.creatorButtonText,
-    newRecordType = _ref.newRecordType,
-    parentKey = _ref.parentKey,
-    style = _ref.style,
-    restButtonProps = _objectWithoutProperties(_ref, _excluded2);
-  var isTop = position === 'top';
-  var creatorButtonDom = useMemo(function () {
-    if (typeof maxLength === 'number' && maxLength <= (value === null || value === void 0 ? void 0 : value.length)) {
-      return false;
+    const finlayRowKey = coverRowKey(rowIndex);
+    const rowKeyName = buildFormFieldPath(finlayRowKey);
+    return formRef.current?.getFieldValue(rowKeyName);
+  });
+
+  /**
+   * 获取整个表格的数据
+   */
+  const getRowsData = useRefFunction(() => {
+    const rowKeyName = [props.name].flat(1).filter(Boolean);
+    if (Array.isArray(rowKeyName) && rowKeyName.length === 0) {
+      const rowData = formRef.current?.getFieldsValue();
+      if (Array.isArray(rowData)) return rowData;
+      return Object.keys(rowData).map(key => rowData[key]);
     }
-    return recordCreatorProps !== false && /*#__PURE__*/_jsx(RecordCreator, {
-      record: runFunction(record, value === null || value === void 0 ? void 0 : value.length, value) || {},
-      position: position,
-      parentKey: runFunction(parentKey, value === null || value === void 0 ? void 0 : value.length, value),
-      newRecordType: newRecordType,
-      children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
-        type: "dashed",
-        style: _objectSpread({
-          display: 'block',
-          margin: '10px 0',
-          width: '100%'
-        }, style),
-        icon: /*#__PURE__*/_jsx(PlusOutlined, {})
-      }, restButtonProps), {}, {
-        children: creatorButtonText || intl.getMessage('editableTable.action.add', '添加一行数据')
-      }))
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recordCreatorProps, maxLength, value === null || value === void 0 ? void 0 : value.length]);
-  var buttonRenderProps = useMemo(function () {
-    if (!creatorButtonDom) {
-      return {};
+    return formRef.current?.getFieldValue(rowKeyName);
+  });
+
+  /**
+   * 设置一行数据
+   */
+  const setRowData = useRefFunction((rowIndex, data) => {
+    if (rowIndex == null) {
+      throw new Error('rowIndex is required');
     }
-    if (isTop) {
-      return {
-        components: {
-          header: {
-            wrapper: function wrapper(_ref2) {
-              var _rest$columns;
-              var className = _ref2.className,
-                children = _ref2.children;
-              return /*#__PURE__*/_jsxs("thead", {
-                className: className,
-                children: [children, /*#__PURE__*/_jsxs("tr", {
-                  style: {
-                    position: 'relative'
-                  },
-                  children: [/*#__PURE__*/_jsx("td", {
-                    colSpan: 0,
-                    style: {
-                      visibility: 'hidden'
-                    },
-                    children: creatorButtonDom
-                  }), /*#__PURE__*/_jsx("td", {
-                    style: {
-                      position: 'absolute',
-                      left: 0,
-                      width: '100%'
-                    },
-                    colSpan: (_rest$columns = rest.columns) === null || _rest$columns === void 0 ? void 0 : _rest$columns.length,
-                    children: creatorButtonDom
-                  })]
-                })]
-              });
-            }
+    const finlayRowKey = coverRowKey(rowIndex);
+    const rowKeyName = buildFormFieldPath(finlayRowKey);
+    const currentRowData = getRowData(rowIndex);
+    const newRowData = {
+      ...currentRowData,
+      ...(data || {})
+    };
+
+    // 在 name 模式下，需要更新整个数组
+    if (props.name) {
+      const tableName = [props.name].flat(1).filter(Boolean);
+      // 优先从 value prop 获取数据（受控模式），否则从表单值获取
+      let currentTableData = props.value || formRef.current?.getFieldValue(tableName);
+      if (Array.isArray(currentTableData)) {
+        // 找到要更新的行的索引
+        const rowIndexToUpdate = typeof finlayRowKey === 'number' ? finlayRowKey : currentTableData.findIndex((row, index) => {
+          const rowKey = getRowKey?.(row, index);
+          return rowKey === finlayRowKey || rowKey?.toString() === finlayRowKey?.toString();
+        });
+        if (rowIndexToUpdate >= 0 && rowIndexToUpdate < currentTableData.length) {
+          // 更新数组中的对应行
+          const updatedTableData = [...currentTableData];
+          updatedTableData[rowIndexToUpdate] = newRowData;
+
+          // 设置整个数组，使用 set 来构建正确的路径
+          // 使用与 syncFormValuesExcludingEditing 相同的路径格式（数组路径）
+          // 这样可以确保 getFieldValue 能正确获取值
+          const updateValues = set({}, tableName, updatedTableData);
+          formRef.current?.setFieldsValue(updateValues);
+
+          // 在受控模式下，触发 onChange
+          if (props.controlled && props.onChange) {
+            props.onChange(updatedTableData);
           }
         }
-      };
+      } else {
+        // 如果当前没有数据，直接设置单个字段
+        const updateValues = set({}, rowKeyName, newRowData);
+        formRef.current?.setFieldsValue(updateValues);
+      }
+    } else {
+      // 非 name 模式下，直接设置单个字段
+      const updateValues = set({}, rowKeyName, newRowData);
+      formRef.current?.setFieldsValue(updateValues);
     }
+    return true;
+  });
+
+  // 设置 editableFormRef
+  useImperativeHandle(editableFormRef, () => {
     return {
-      tableViewRender: function tableViewRender(_, dom) {
-        var _props$tableViewRende, _props$tableViewRende2;
-        return /*#__PURE__*/_jsxs(_Fragment, {
-          children: [(_props$tableViewRende = (_props$tableViewRende2 = props.tableViewRender) === null || _props$tableViewRende2 === void 0 ? void 0 : _props$tableViewRende2.call(props, _, dom)) !== null && _props$tableViewRende !== void 0 ? _props$tableViewRende : dom, creatorButtonDom]
+      ...formRef.current,
+      getRowData,
+      getRowsData,
+      setRowData
+    };
+  }, [coverRowKey, props.name, getRowData, getRowsData, setRowData]);
+
+  /**
+   * 受控模式下同步表单值
+   * 在受控模式下，即使正在编辑的行也要同步更新，因为数据由外部完全控制
+   * 使用深度比较优化性能，避免频繁的序列化操作
+   * 注意：只有当 value 明确传递时才同步，避免覆盖表单中的初始值
+   */
+  useDeepCompareEffect(() => {
+    if (!props.controlled || !formRef.current) return;
+
+    // 在受控模式下，只有当 value 明确传递时才同步
+    // 避免在 value 为 undefined 时覆盖表单中的初始值
+    if (value === undefined) return;
+
+    // 在受控模式下，同步所有值（包括正在编辑的行）
+    // 因为数据由外部完全控制，应该同步更新
+    try {
+      if (props.name) {
+        // name 模式：直接设置整个数组
+        const namePath = [props.name].flat(1);
+        const newValue = set({}, namePath, value);
+        formRef.current.setFieldsValue(newValue);
+      } else {
+        // 非 name 模式：直接设置值
+        const formValues = {};
+        value.forEach((item, index) => {
+          const key = getRowKey(item, index);
+          const keyStr = String(key);
+          formValues[keyStr] = item;
         });
+        if (Object.keys(formValues).length > 0) {
+          formRef.current.setFieldsValue(formValues);
+        }
       }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTop, creatorButtonDom]);
-  var editableProps = _objectSpread({}, props.editable);
+    } catch (error) {
+      console.warn('Failed to sync form values in controlled mode:', error);
+    }
+  }, [value, props.controlled, props.name, getRowKey]);
 
   /**
-   * 防止闭包的onchange
-   *
-   * >>>>>>为了性能好辛苦
+   * 同步表单实例引用
+   * 只在 name 模式下且 form 存在时更新
    */
-  var newOnValueChange = useRefFunction(function (r, dataSource) {
-    var _props$editable3, _props$editable3$onVa, _props$onValuesChange;
-    (_props$editable3 = props.editable) === null || _props$editable3 === void 0 || (_props$editable3$onVa = _props$editable3.onValuesChange) === null || _props$editable3$onVa === void 0 || _props$editable3$onVa.call(_props$editable3, r, dataSource);
-    (_props$onValuesChange = props.onValuesChange) === null || _props$onValuesChange === void 0 || _props$onValuesChange.call(props, dataSource, r);
-    if (props.controlled) {
-      var _props$onChange;
-      props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, dataSource);
+  useEffect(() => {
+    if (props.name && props?.editable?.form) {
+      formRef.current = props.editable.form;
     }
+  }, [props.editable?.form, props.name]);
+  const {
+    position
+  } = recordCreatorProps || {};
+  const isTop = position === 'top';
+  const {
+    creatorButtonDom,
+    buttonRenderProps
+  } = useCreatorButton({
+    recordCreatorProps,
+    maxLength,
+    value,
+    intl,
+    isTop,
+    columnsLength: rest.columns?.length,
+    tableViewRender: props.tableViewRender
   });
-  if (props !== null && props !== void 0 && props.onValuesChange || (_props$editable4 = props.editable) !== null && _props$editable4 !== void 0 && _props$editable4.onValuesChange ||
-  // 受控模式需要触发 onchange
-  props.controlled && props !== null && props !== void 0 && props.onChange) {
-    editableProps.onValuesChange = newOnValueChange;
-  }
+
+  /**
+   * 处理值变化回调
+   * 注意：受控模式下不调用 onChange，避免循环更新
+   * onChange 应该由外部控制，而不是在内部触发
+   */
+  const handleValuesChange = useRefFunction((r, dataSource) => {
+    props.editable?.onValuesChange?.(r, dataSource);
+    props.onValuesChange?.(dataSource, r);
+
+    // 在受控模式下，当表单值变化时也应该触发 onChange
+    // 这样外部可以同步更新 value，实现真正的受控
+    if (props.controlled && props?.onChange) {
+      props.onChange(dataSource);
+    }
+    // 非受控模式下，onChange 应该在 onDataSourceChange 中触发
+    // 这样可以确保数据已经正确更新
+  });
+
+  /**
+   * 构建可编辑属性
+   * 使用 useMemo 优化性能，避免不必要的重新创建
+   */
+  const editableProps = useMemo(() => {
+    const baseProps = {
+      ...props.editable
+    };
+    const hasOnValuesChange = Boolean(props?.onValuesChange) || Boolean(props.editable?.onValuesChange) || Boolean(props.controlled && props?.onChange);
+    if (hasOnValuesChange) {
+      baseProps.onValuesChange = handleValuesChange;
+    }
+    return baseProps;
+  }, [props.editable, props.onValuesChange, props.controlled, props.onChange, handleValuesChange]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(EditableTableActionContext.Provider, {
       value: actionRef,
-      children: /*#__PURE__*/_jsx(ProTable, _objectSpread(_objectSpread(_objectSpread({
+      children: /*#__PURE__*/_jsx(ProTable, {
         search: false,
         options: false,
         pagination: false,
         rowKey: rowKey,
-        revalidateOnFocus: false
-      }, rest), buttonRenderProps), {}, {
+        revalidateOnFocus: false,
+        ...rest,
+        ...buttonRenderProps,
         tableLayout: "fixed",
         actionRef: actionRef,
         onChange: onTableChange,
-        editable: _objectSpread(_objectSpread({}, editableProps), {}, {
-          formProps: _objectSpread({
-            formRef: formRef
-          }, editableProps.formProps)
-        }),
+        editable: {
+          ...editableProps,
+          formProps: {
+            formRef,
+            ...editableProps.formProps
+          }
+        },
         dataSource: value,
-        onDataSourceChange: function onDataSourceChange(dataSource) {
+        onDataSourceChange: dataSource => {
+          // setValue 会触发 onChange，但我们需要确保数据已经正确更新
+          // 所以先设置数据，然后手动触发 onChange
           setValue(dataSource);
+
           /**
-           * 如果是top，需要重新设置一下 form，不然会导致 id 相同数据混淆
+           * 如果是 name 模式，需要同步表单值
+           * 避免表单值和数据源不一致
+           * 注意：不会覆盖正在编辑的行
            */
-          if (props.name && position === 'top') {
-            var _formRef$current6;
-            var newValue = set({}, [props.name].flat(1).filter(Boolean), dataSource);
-            (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 || _formRef$current6.setFieldsValue(newValue);
+          if (props.name && formRef.current) {
+            const editingKeys = props.editable?.editableKeys;
+            const editingKeysSet = createEditingKeysSet(editingKeys);
+            const namePath = [props.name].flat(1).filter(Boolean);
+            syncFormValuesExcludingEditing(dataSource, editingKeysSet, namePath);
+          }
+
+          // 在非受控模式下，通过 onDataSourceChange 触发 onChange
+          // 这样可以确保数据已经正确更新
+          if (!props.controlled && props.onChange) {
+            props.onChange(dataSource);
           }
         }
-      }))
+      })
     }), props.name ? /*#__PURE__*/_jsx(ProFormDependency, {
       name: [props.name],
-      children: function children(changeValue) {
-        var _props$editable5, _props$editable5$onVa;
+      children: changeValue => {
+        // 初始化 preData
         if (!preData.current) {
           preData.current = value;
           return null;
         }
-        var list = get(changeValue, [props.name].flat(1));
-        var changeItem = list === null || list === void 0 ? void 0 : list.find(function (item, index) {
-          var _preData$current;
-          return !isDeepEqualReact(item, (_preData$current = preData.current) === null || _preData$current === void 0 ? void 0 : _preData$current[index]);
+        const namePath = [props.name].flat(1);
+        const list = get(changeValue, namePath);
+
+        // 添加空值检查，避免后续操作出错
+        if (!list || !Array.isArray(list)) {
+          preData.current = value;
+          return null;
+        }
+
+        // 在更新 preData 之前找到变化的项
+        // 使用 findIndex 可以同时获取变化的项和索引
+        const changeIndex = list.findIndex((item, index) => {
+          return !isDeepEqualReact(item, preData.current?.[index]);
         });
-        preData.current = value;
-        if (!changeItem) return null;
-        // 如果不存在 preData 说明是初始化，此时不需要触发 onValuesChange
-        props === null || props === void 0 || (_props$editable5 = props.editable) === null || _props$editable5 === void 0 || (_props$editable5$onVa = _props$editable5.onValuesChange) === null || _props$editable5$onVa === void 0 || _props$editable5$onVa.call(_props$editable5, changeItem, list);
+
+        // 只有在找到变化项时才触发回调
+        if (changeIndex !== -1) {
+          const changeItem = list[changeIndex];
+          props?.editable?.onValuesChange?.(changeItem, list);
+        }
+
+        // 在找到 changeItem 之后再更新 preData，确保后续比较正确
+        preData.current = list;
         return null;
       }
     }) : null]
@@ -370,38 +667,40 @@ function EditableTable(props) {
  * @param props
  */
 function FieldEditableTable(props) {
-  var form = ProForm.useFormInstance();
-  if (!props.name) return /*#__PURE__*/_jsx(EditableTable, _objectSpread({
+  const form = ProForm.useFormInstance();
+  if (!props.name) return /*#__PURE__*/_jsx(EditableTable, {
     tableLayout: "fixed",
     scroll: {
       x: 'max-content'
-    }
-  }, props));
-  return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({
+    },
+    ...props
+  });
+  return /*#__PURE__*/_jsx(Form.Item, {
     style: {
       maxWidth: '100%'
     },
-    shouldUpdate: function shouldUpdate(prev, next) {
-      var name = [props.name].flat(1);
+    shouldUpdate: (prev, next) => {
+      const name = [props.name].flat(1);
       try {
         return JSON.stringify(get(prev, name)) !== JSON.stringify(get(next, name));
       } catch (error) {
         return true;
       }
-    }
-  }, props === null || props === void 0 ? void 0 : props.formItemProps), {}, {
+    },
+    ...props?.formItemProps,
     name: props.name,
-    children: /*#__PURE__*/_jsx(EditableTable, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(EditableTable, {
       tableLayout: "fixed",
       scroll: {
         x: 'max-content'
-      }
-    }, props), {}, {
-      editable: _objectSpread(_objectSpread({}, props.editable), {}, {
+      },
+      ...props,
+      editable: {
+        ...props.editable,
         form: form
-      })
-    }))
-  }));
+      }
+    })
+  });
 }
 FieldEditableTable.RecordCreator = RecordCreator;
 export default FieldEditableTable;