@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

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

@@ -1,285 +1,251 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
+"use strict";
 
-// src/table/components/EditableTable/index.tsx
-var EditableTable_exports = {};
-__export(EditableTable_exports, {
-  default: () => EditableTable_default
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(EditableTable_exports);
-var import_icons = require("@ant-design/icons");
-var import_antd = require("antd");
-var import_useMergedState = __toESM(require("rc-util/lib/hooks/useMergedState"));
-var import_get = __toESM(require("rc-util/lib/utils/get"));
-var import_set = __toESM(require("rc-util/lib/utils/set"));
-var import_react = __toESM(require("react"));
-var import_form = __toESM(require("../../../form"));
-var import_provider = require("../../../provider");
-var import_utils = require("../../../utils");
-var import_Table = __toESM(require("../../Table"));
-var EditableTableActionContext = import_react.default.createContext(void 0);
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _icons = require("@ant-design/icons");
+var _util = require("@rc-component/util");
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _form = _interopRequireWildcard(require("../../../form"));
+var _provider = require("../../../provider");
+var _utils = require("../../../utils");
+var _Table = _interopRequireDefault(require("../../Table"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["onTableChange", "maxLength", "formItemProps", "recordCreatorProps", "rowKey", "controlled", "defaultValue", "onChange", "editableFormRef"],
+  _excluded2 = ["record", "position", "creatorButtonText", "newRecordType", "parentKey", "style"];
+var EditableTableActionContext = /*#__PURE__*/_react.default.createContext(undefined);
+
+/** 可编辑表格的按钮 */
 function RecordCreator(props) {
-  const { children, record, position, newRecordType, parentKey } = props;
-  const actionRef = (0, import_react.useContext)(EditableTableActionContext);
-  return import_react.default.cloneElement(children, __spreadProps(__spreadValues({}, children.props), {
-    onClick: (e) => __async(this, null, function* () {
-      var _a, _b, _c;
-      const isOk = yield (_b = (_a = children.props).onClick) == null ? void 0 : _b.call(_a, e);
-      if (isOk === false)
-        return;
-      (_c = actionRef == null ? void 0 : actionRef.current) == null ? void 0 : _c.addEditRecord(record, {
-        position,
-        newRecordType,
-        parentKey
-      });
-    })
+  var children = props.children,
+    record = props.record,
+    position = props.position,
+    newRecordType = props.newRecordType,
+    parentKey = props.parentKey;
+  var actionRef = (0, _react.useContext)(EditableTableActionContext);
+  return /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), {}, {
+    onClick: function () {
+      var _onClick = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
+        var _children$props$onCli, _children$props, _actionRef$current;
+        var isOk;
+        return (0, _regeneratorRuntime2.default)().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);
+      }
+      return onClick;
+    }()
   }));
 }
+
+/**
+ * 可以直接放到 Form 中的可编辑表格
+ * A React component that is used to create a table.
+ * @param props
+ */
 function EditableTable(props) {
-  var _b, _d;
-  const intl = (0, import_provider.useIntl)();
-  const _a = props, {
-    onTableChange,
-    maxLength,
-    formItemProps,
-    recordCreatorProps,
-    rowKey,
-    controlled,
-    defaultValue,
-    onChange,
-    editableFormRef
-  } = _a, rest = __objRest(_a, [
-    "onTableChange",
-    "maxLength",
-    "formItemProps",
-    "recordCreatorProps",
-    "rowKey",
-    "controlled",
-    "defaultValue",
-    "onChange",
-    "editableFormRef"
-  ]);
-  const preData = (0, import_react.useRef)(void 0);
-  const actionRef = (0, import_react.useRef)();
-  const formRef = (0, import_react.useRef)();
-  (0, import_react.useImperativeHandle)(rest.actionRef, () => actionRef.current, [
-    actionRef.current
-  ]);
-  const [value, setValue] = (0, import_useMergedState.default)(
-    () => props.value || defaultValue || [],
-    {
+  var _props$editable2, _props$editable4;
+  var intl = (0, _provider.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var preData = (0, _react.useRef)(undefined);
+  var actionRef = (0, _react.useRef)();
+  var formRef = (0, _react.useRef)();
+
+  // 设置 ref
+  (0, _react.useImperativeHandle)(rest.actionRef, function () {
+    return actionRef.current;
+  }, [actionRef.current]);
+  var _useMergedState = (0, _util.useMergedState)(function () {
+      return props.value || defaultValue || [];
+    }, {
       value: props.value,
       onChange: props.onChange
-    }
-  );
-  const getRowKey = import_react.default.useMemo(() => {
-    if (typeof rowKey === "function") {
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    value = _useMergedState2[0],
+    setValue = _useMergedState2[1];
+  var getRowKey = _react.default.useMemo(function () {
+    if (typeof rowKey === 'function') {
       return rowKey;
     }
-    return (record2, index) => record2[rowKey] || index;
+    return function (record, index) {
+      return record[rowKey] || index;
+    };
   }, [rowKey]);
-  const coverRowKey = (0, import_utils.useRefFunction)(
-    (finlayRowKey) => {
-      if (typeof finlayRowKey === "number" && !props.name) {
-        if (finlayRowKey >= value.length)
-          return finlayRowKey;
-        const rowData = value && value[finlayRowKey];
-        return getRowKey == null ? void 0 : getRowKey(rowData, finlayRowKey);
-      }
-      if ((typeof finlayRowKey === "string" || finlayRowKey >= value.length) && props.name) {
-        const rowIndex = value.findIndex((item, index) => {
-          var _a2;
-          return ((_a2 = getRowKey == null ? void 0 : getRowKey(item, index)) == null ? void 0 : _a2.toString()) === (finlayRowKey == null ? void 0 : finlayRowKey.toString());
-        });
-        if (rowIndex !== -1)
-          return rowIndex;
-      }
-      return finlayRowKey;
+
+  /**
+   * 根据不同的情况返回不同的 rowKey
+   * @param finlayRowKey
+   * @returns string | number
+   */
+  var coverRowKey = (0, _utils.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);
+    }
+
+    /**
+     * 如果是 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());
+      });
+      if (_rowIndex !== -1) return _rowIndex;
     }
-  );
-  (0, import_react.useImperativeHandle)(editableFormRef, () => {
-    const getRowData = (rowIndex) => {
-      var _a2, _b2;
-      if (rowIndex == void 0) {
-        throw new Error("rowIndex is required");
+    return finlayRowKey;
+  });
+
+  // 设置 editableFormRef
+  (0, _react.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');
       }
-      const finlayRowKey = coverRowKey(rowIndex);
-      const rowKeyName = [props.name, (_a2 = finlayRowKey == null ? void 0 : finlayRowKey.toString()) != null ? _a2 : ""].flat(1).filter(Boolean);
-      return (_b2 = formRef.current) == null ? void 0 : _b2.getFieldValue(rowKeyName);
+      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 getRowsData = () => {
-      var _a2, _b2;
-      const rowKeyName = [props.name].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) {
-        const rowData = (_a2 = formRef.current) == null ? void 0 : _a2.getFieldsValue();
-        if (Array.isArray(rowData))
-          return rowData;
-        return Object.keys(rowData).map((key) => {
+        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 (_b2 = formRef.current) == null ? void 0 : _b2.getFieldValue(rowKeyName);
+      return (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.getFieldValue(rowKeyName);
     };
-    return __spreadProps(__spreadValues({}, formRef.current), {
-      getRowData,
-      getRowsData,
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formRef.current), {}, {
+      getRowData: getRowData,
+      getRowsData: getRowsData,
       /**
        * 设置一行的数据，会将数据进行简单的 merge
        * @param rowIndex
        * @param data
        * @returns void
        */
-      setRowData: (rowIndex, data) => {
-        var _a2, _b2;
-        if (rowIndex == void 0) {
-          throw new Error("rowIndex is required");
+      setRowData: function setRowData(rowIndex, data) {
+        var _finlayRowKey$toStrin2, _formRef$current4;
+        if (rowIndex == undefined) {
+          throw new Error('rowIndex is required');
         }
-        const finlayRowKey = coverRowKey(rowIndex);
-        const rowKeyName = [props.name, (_a2 = finlayRowKey == null ? void 0 : finlayRowKey.toString()) != null ? _a2 : ""].flat(1).filter(Boolean);
-        const newRowData = Object.assign(
-          {},
-          __spreadValues(__spreadValues({}, getRowData(rowIndex)), data || {})
-        );
-        const updateValues = (0, import_set.default)({}, rowKeyName, newRowData);
-        (_b2 = formRef.current) == null ? void 0 : _b2.setFieldsValue(updateValues);
+        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({}, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRowData(rowIndex)), data || {}));
+        var updateValues = (0, _util.set)({}, rowKeyName, newRowData);
+        (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 || _formRef$current4.setFieldsValue(updateValues);
         return true;
       }
     });
   }, [coverRowKey, props.name, formRef.current]);
-  (0, import_react.useEffect)(() => {
-    if (!props.controlled)
-      return;
-    (value || []).forEach((current, index) => {
-      var _a2;
-      (_a2 = formRef.current) == null ? void 0 : _a2.setFieldsValue({
-        [`${getRowKey(current, index)}`]: current
-      });
+  (0, _react.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((0, _defineProperty2.default)({}, "".concat(getRowKey(current, index)), current));
     }, {});
-  }, [(0, import_utils.stringify)(value), props.controlled]);
-  (0, import_react.useEffect)(() => {
-    var _a2;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(0, _utils.stringify)(value), props.controlled]);
+  (0, _react.useEffect)(function () {
     if (props.name) {
-      formRef.current = (_a2 = props == null ? void 0 : props.editable) == null ? void 0 : _a2.form;
+      var _props$editable;
+      formRef.current = props === null || props === void 0 || (_props$editable = props.editable) === null || _props$editable === void 0 ? void 0 : _props$editable.form;
     }
-  }, [(_b = props.editable) == null ? void 0 : _b.form, props.name]);
-  const _c = recordCreatorProps || {}, {
-    record,
-    position,
-    creatorButtonText,
-    newRecordType,
-    parentKey,
-    style
-  } = _c, restButtonProps = __objRest(_c, [
-    "record",
-    "position",
-    "creatorButtonText",
-    "newRecordType",
-    "parentKey",
-    "style"
-  ]);
-  const isTop = position === "top";
-  const creatorButtonDom = (0, import_react.useMemo)(() => {
-    if (typeof maxLength === "number" && maxLength <= (value == null ? void 0 : value.length)) {
+  }, [(_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 = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
+  var isTop = position === 'top';
+  var creatorButtonDom = (0, _react.useMemo)(function () {
+    if (typeof maxLength === 'number' && maxLength <= (value === null || value === void 0 ? void 0 : value.length)) {
       return false;
     }
-    return recordCreatorProps !== false && /* @__PURE__ */ import_react.default.createElement(
-      RecordCreator,
-      {
-        record: (0, import_utils.runFunction)(record, value == null ? void 0 : value.length, value) || {},
-        position,
-        parentKey: (0, import_utils.runFunction)(parentKey, value == null ? void 0 : value.length, value),
-        newRecordType
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Button,
-        __spreadValues({
-          type: "dashed",
-          style: __spreadValues({
-            display: "block",
-            margin: "10px 0",
-            width: "100%"
-          }, style),
-          icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
-        }, restButtonProps),
-        creatorButtonText || intl.getMessage("editableTable.action.add", "添加一行数据")
-      )
-    );
-  }, [recordCreatorProps, maxLength, value == null ? void 0 : value.length]);
-  const buttonRenderProps = (0, import_react.useMemo)(() => {
+    return recordCreatorProps !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(RecordCreator, {
+      record: (0, _utils.runFunction)(record, value === null || value === void 0 ? void 0 : value.length, value) || {},
+      position: position,
+      parentKey: (0, _utils.runFunction)(parentKey, value === null || value === void 0 ? void 0 : value.length, value),
+      newRecordType: newRecordType,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        type: "dashed",
+        style: (0, _objectSpread2.default)({
+          display: 'block',
+          margin: '10px 0',
+          width: '100%'
+        }, style),
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.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 = (0, _react.useMemo)(function () {
     if (!creatorButtonDom) {
       return {};
     }
@@ -287,141 +253,161 @@ function EditableTable(props) {
       return {
         components: {
           header: {
-            wrapper: ({
-              className,
-              children
-            }) => {
-              var _a2;
-              return /* @__PURE__ */ import_react.default.createElement("thead", { className }, children, /* @__PURE__ */ import_react.default.createElement("tr", { style: { position: "relative" } }, /* @__PURE__ */ import_react.default.createElement("td", { colSpan: 0, style: { visibility: "hidden" } }, creatorButtonDom), /* @__PURE__ */ import_react.default.createElement(
-                "td",
-                {
-                  style: { position: "absolute", left: 0, width: "100%" },
-                  colSpan: (_a2 = rest.columns) == null ? void 0 : _a2.length
-                },
-                creatorButtonDom
-              )));
+            wrapper: function wrapper(_ref2) {
+              var _rest$columns;
+              var className = _ref2.className,
+                children = _ref2.children;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("thead", {
+                className: className,
+                children: [children, /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+                  style: {
+                    position: 'relative'
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                    colSpan: 0,
+                    style: {
+                      visibility: 'hidden'
+                    },
+                    children: creatorButtonDom
+                  }), /*#__PURE__*/(0, _jsxRuntime.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
+                  })]
+                })]
+              });
             }
           }
         }
       };
     }
     return {
-      tableViewRender: (_, dom) => {
-        var _a2, _b2;
-        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (_b2 = (_a2 = props.tableViewRender) == null ? void 0 : _a2.call(props, _, dom)) != null ? _b2 : dom, creatorButtonDom);
+      tableViewRender: function tableViewRender(_, dom) {
+        var _props$tableViewRende, _props$tableViewRende2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.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]
+        });
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isTop, creatorButtonDom]);
-  const editableProps = __spreadValues({}, props.editable);
-  const newOnValueChange = (0, import_utils.useRefFunction)(
-    (r, dataSource) => {
-      var _a2, _b2, _c2, _d2;
-      (_b2 = (_a2 = props.editable) == null ? void 0 : _a2.onValuesChange) == null ? void 0 : _b2.call(_a2, r, dataSource);
-      (_c2 = props.onValuesChange) == null ? void 0 : _c2.call(props, dataSource, r);
-      if (props.controlled) {
-        (_d2 = props == null ? void 0 : props.onChange) == null ? void 0 : _d2.call(props, dataSource);
-      }
+  var editableProps = (0, _objectSpread2.default)({}, props.editable);
+
+  /**
+   * 防止闭包的onchange
+   *
+   * >>>>>>为了性能好辛苦
+   */
+  var newOnValueChange = (0, _utils.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);
     }
-  );
-  if ((props == null ? void 0 : props.onValuesChange) || ((_d = props.editable) == null ? void 0 : _d.onValuesChange) || // 受控模式需要触发 onchange
-  props.controlled && (props == null ? void 0 : props.onChange)) {
+  });
+  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;
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(EditableTableActionContext.Provider, { value: actionRef }, /* @__PURE__ */ import_react.default.createElement(
-    import_Table.default,
-    __spreadProps(__spreadValues(__spreadValues({
-      search: false,
-      options: false,
-      pagination: false,
-      rowKey,
-      revalidateOnFocus: false
-    }, rest), buttonRenderProps), {
-      tableLayout: "fixed",
-      actionRef,
-      onChange: onTableChange,
-      editable: __spreadProps(__spreadValues({}, editableProps), {
-        formProps: __spreadValues({
-          formRef
-        }, editableProps.formProps)
-      }),
-      dataSource: value,
-      onDataSourceChange: (dataSource) => {
-        var _a2;
-        setValue(dataSource);
-        if (props.name && position === "top") {
-          const newValue = (0, import_set.default)(
-            {},
-            [props.name].flat(1).filter(Boolean),
-            dataSource
-          );
-          (_a2 = formRef.current) == null ? void 0 : _a2.setFieldsValue(newValue);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(EditableTableActionContext.Provider, {
+      value: actionRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+        search: false,
+        options: false,
+        pagination: false,
+        rowKey: rowKey,
+        revalidateOnFocus: false
+      }, rest), buttonRenderProps), {}, {
+        tableLayout: "fixed",
+        actionRef: actionRef,
+        onChange: onTableChange,
+        editable: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, editableProps), {}, {
+          formProps: (0, _objectSpread2.default)({
+            formRef: formRef
+          }, editableProps.formProps)
+        }),
+        dataSource: value,
+        onDataSourceChange: function onDataSourceChange(dataSource) {
+          setValue(dataSource);
+          /**
+           * 如果是top，需要重新设置一下 form，不然会导致 id 相同数据混淆
+           */
+          if (props.name && position === 'top') {
+            var _formRef$current6;
+            var newValue = (0, _util.set)({}, [props.name].flat(1).filter(Boolean), dataSource);
+            (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 || _formRef$current6.setFieldsValue(newValue);
+          }
         }
+      }))
+    }), props.name ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.ProFormDependency, {
+      name: [props.name],
+      children: function children(changeValue) {
+        var _props$editable5, _props$editable5$onVa;
+        if (!preData.current) {
+          preData.current = value;
+          return null;
+        }
+        var list = (0, _util.get)(changeValue, [props.name].flat(1));
+        var changeItem = list === null || list === void 0 ? void 0 : list.find(function (item, index) {
+          var _preData$current;
+          return !(0, _utils.isDeepEqualReact)(item, (_preData$current = preData.current) === null || _preData$current === void 0 ? void 0 : _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);
+        return null;
       }
-    })
-  )), props.name ? /* @__PURE__ */ import_react.default.createElement(import_form.ProFormDependency, { name: [props.name] }, (changeValue) => {
-    var _a2, _b2;
-    if (!preData.current) {
-      preData.current = value;
-      return null;
-    }
-    const list = (0, import_get.default)(
-      changeValue,
-      [props.name].flat(1)
-    );
-    const changeItem = list == null ? void 0 : list.find((item, index) => {
-      var _a3;
-      return !(0, import_utils.isDeepEqualReact)(item, (_a3 = preData.current) == null ? void 0 : _a3[index]);
-    });
-    preData.current = value;
-    if (!changeItem)
-      return null;
-    (_b2 = (_a2 = props == null ? void 0 : props.editable) == null ? void 0 : _a2.onValuesChange) == null ? void 0 : _b2.call(_a2, changeItem, list);
-    return null;
-  }) : null);
+    }) : null]
+  });
 }
+
+/**
+ * 可以直接放到 Form 中的可编辑表格
+ * A React component that is used to create a table.
+ * @param props
+ */
 function FieldEditableTable(props) {
-  const form = import_form.default.useFormInstance();
-  if (!props.name)
-    return /* @__PURE__ */ import_react.default.createElement(
-      EditableTable,
-      __spreadValues({
-        tableLayout: "fixed",
-        scroll: {
-          x: "max-content"
-        }
-      }, props)
-    );
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Form.Item,
-    __spreadProps(__spreadValues({
-      style: {
-        maxWidth: "100%"
-      },
-      shouldUpdate: (prev, next) => {
-        const name = [props.name].flat(1);
-        try {
-          return JSON.stringify((0, import_get.default)(prev, name)) !== JSON.stringify((0, import_get.default)(next, name));
-        } catch (error) {
-          return true;
-        }
+  var form = _form.default.useFormInstance();
+  if (!props.name) return /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableTable, (0, _objectSpread2.default)({
+    tableLayout: "fixed",
+    scroll: {
+      x: 'max-content'
+    }
+  }, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.Item, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    style: {
+      maxWidth: '100%'
+    },
+    shouldUpdate: function shouldUpdate(prev, next) {
+      var name = [props.name].flat(1);
+      try {
+        return JSON.stringify((0, _util.get)(prev, name)) !== JSON.stringify((0, _util.get)(next, name));
+      } catch (error) {
+        return true;
       }
-    }, props == null ? void 0 : props.formItemProps), {
-      name: props.name
-    }),
-    /* @__PURE__ */ import_react.default.createElement(
-      EditableTable,
-      __spreadProps(__spreadValues({
-        tableLayout: "fixed",
-        scroll: {
-          x: "max-content"
-        }
-      }, props), {
-        editable: __spreadProps(__spreadValues({}, props.editable), {
-          form
-        })
+    }
+  }, props === null || props === void 0 ? void 0 : props.formItemProps), {}, {
+    name: props.name,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableTable, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      tableLayout: "fixed",
+      scroll: {
+        x: 'max-content'
+      }
+    }, props), {}, {
+      editable: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.editable), {}, {
+        form: form
       })
-    )
-  );
+    }))
+  }));
 }
 FieldEditableTable.RecordCreator = RecordCreator;
-var EditableTable_default = FieldEditableTable;
+var _default = exports.default = FieldEditableTable;