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

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

@@ -1,266 +1,245 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-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 __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());
-  });
-};
-
-// src/table/components/EditableTable/index.tsx
-import { PlusOutlined } from "@ant-design/icons";
-import { Button, Form } from "antd";
-import useMergedState from "rc-util/lib/hooks/useMergedState";
-import get from "rc-util/lib/utils/get";
-import set from "rc-util/lib/utils/set";
-import React, {
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef
-} from "react";
+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 { Button, Form } from 'antd';
+import React, { 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, stringify, useRefFunction } from "../../../utils";
 import ProTable from "../../Table";
-var EditableTableActionContext = React.createContext(void 0);
+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);
+
+/** 可编辑表格的按钮 */
 function RecordCreator(props) {
-  const { children, record, position, newRecordType, parentKey } = props;
-  const actionRef = useContext(EditableTableActionContext);
-  return React.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 = 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);
+      }
+      return onClick;
+    }()
   }));
 }
+
+/**
+ * 可以直接放到 Form 中的可编辑表格
+ * A React component that is used to create a table.
+ * @param props
+ */
 function EditableTable(props) {
-  var _b, _d;
-  const intl = 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 = useRef(void 0);
-  const actionRef = useRef();
-  const formRef = useRef();
-  useImperativeHandle(rest.actionRef, () => actionRef.current, [
-    actionRef.current
-  ]);
-  const [value, setValue] = useMergedState(
-    () => props.value || defaultValue || [],
-    {
+  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();
+
+  // 设置 ref
+  useImperativeHandle(rest.actionRef, function () {
+    return actionRef.current;
+  }, [actionRef.current]);
+  var _useMergedState = useMergedState(function () {
+      return props.value || defaultValue || [];
+    }, {
       value: props.value,
       onChange: props.onChange
-    }
-  );
-  const getRowKey = React.useMemo(() => {
-    if (typeof rowKey === "function") {
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    value = _useMergedState2[0],
+    setValue = _useMergedState2[1];
+  var getRowKey = React.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 = 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 = 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;
     }
-  );
-  useImperativeHandle(editableFormRef, () => {
-    const getRowData = (rowIndex) => {
-      var _a2, _b2;
-      if (rowIndex == void 0) {
-        throw new Error("rowIndex is required");
+    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');
       }
-      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 _objectSpread(_objectSpread({}, 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 = set({}, 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({}, _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(() => {
-    if (!props.controlled)
-      return;
-    (value || []).forEach((current, index) => {
-      var _a2;
-      (_a2 = formRef.current) == null ? void 0 : _a2.setFieldsValue({
-        [`${getRowKey(current, index)}`]: 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(() => {
-    var _a2;
+  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 = 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 = _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;
     }
-    return recordCreatorProps !== false && /* @__PURE__ */ React.createElement(
-      RecordCreator,
-      {
-        record: runFunction(record, value == null ? void 0 : value.length, value) || {},
-        position,
-        parentKey: runFunction(parentKey, value == null ? void 0 : value.length, value),
-        newRecordType
-      },
-      /* @__PURE__ */ React.createElement(
-        Button,
-        __spreadValues({
-          type: "dashed",
-          style: __spreadValues({
-            display: "block",
-            margin: "10px 0",
-            width: "100%"
-          }, style),
-          icon: /* @__PURE__ */ React.createElement(PlusOutlined, null)
-        }, restButtonProps),
-        creatorButtonText || intl.getMessage("editableTable.action.add", "添加一行数据")
-      )
-    );
-  }, [recordCreatorProps, maxLength, value == null ? void 0 : value.length]);
-  const buttonRenderProps = useMemo(() => {
+    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 {};
     }
@@ -268,144 +247,161 @@ function EditableTable(props) {
       return {
         components: {
           header: {
-            wrapper: ({
-              className,
-              children
-            }) => {
-              var _a2;
-              return /* @__PURE__ */ React.createElement("thead", { className }, children, /* @__PURE__ */ React.createElement("tr", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement("td", { colSpan: 0, style: { visibility: "hidden" } }, creatorButtonDom), /* @__PURE__ */ React.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__*/_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
+                  })]
+                })]
+              });
             }
           }
         }
       };
     }
     return {
-      tableViewRender: (_, dom) => {
-        var _a2, _b2;
-        return /* @__PURE__ */ React.createElement(React.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__*/_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]
+        });
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isTop, creatorButtonDom]);
-  const editableProps = __spreadValues({}, props.editable);
-  const newOnValueChange = 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 = _objectSpread({}, props.editable);
+
+  /**
+   * 防止闭包的onchange
+   *
+   * >>>>>>为了性能好辛苦
+   */
+  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);
     }
-  );
-  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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditableTableActionContext.Provider, { value: actionRef }, /* @__PURE__ */ React.createElement(
-    ProTable,
-    __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 = set(
-            {},
-            [props.name].flat(1).filter(Boolean),
-            dataSource
-          );
-          (_a2 = formRef.current) == null ? void 0 : _a2.setFieldsValue(newValue);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(EditableTableActionContext.Provider, {
+      value: actionRef,
+      children: /*#__PURE__*/_jsx(ProTable, _objectSpread(_objectSpread(_objectSpread({
+        search: false,
+        options: false,
+        pagination: false,
+        rowKey: rowKey,
+        revalidateOnFocus: false
+      }, rest), buttonRenderProps), {}, {
+        tableLayout: "fixed",
+        actionRef: actionRef,
+        onChange: onTableChange,
+        editable: _objectSpread(_objectSpread({}, editableProps), {}, {
+          formProps: _objectSpread({
+            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 = set({}, [props.name].flat(1).filter(Boolean), dataSource);
+            (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 || _formRef$current6.setFieldsValue(newValue);
+          }
         }
+      }))
+    }), props.name ? /*#__PURE__*/_jsx(ProFormDependency, {
+      name: [props.name],
+      children: function children(changeValue) {
+        var _props$editable5, _props$editable5$onVa;
+        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]);
+        });
+        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__ */ React.createElement(ProFormDependency, { name: [props.name] }, (changeValue) => {
-    var _a2, _b2;
-    if (!preData.current) {
-      preData.current = value;
-      return null;
-    }
-    const list = get(
-      changeValue,
-      [props.name].flat(1)
-    );
-    const changeItem = list == null ? void 0 : list.find((item, index) => {
-      var _a3;
-      return !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 = ProForm.useFormInstance();
-  if (!props.name)
-    return /* @__PURE__ */ React.createElement(
-      EditableTable,
-      __spreadValues({
-        tableLayout: "fixed",
-        scroll: {
-          x: "max-content"
-        }
-      }, props)
-    );
-  return /* @__PURE__ */ React.createElement(
-    Form.Item,
-    __spreadProps(__spreadValues({
-      style: {
-        maxWidth: "100%"
-      },
-      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;
-        }
+  var form = ProForm.useFormInstance();
+  if (!props.name) return /*#__PURE__*/_jsx(EditableTable, _objectSpread({
+    tableLayout: "fixed",
+    scroll: {
+      x: 'max-content'
+    }
+  }, props));
+  return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({
+    style: {
+      maxWidth: '100%'
+    },
+    shouldUpdate: function shouldUpdate(prev, next) {
+      var name = [props.name].flat(1);
+      try {
+        return JSON.stringify(get(prev, name)) !== JSON.stringify(get(next, name));
+      } catch (error) {
+        return true;
       }
-    }, props == null ? void 0 : props.formItemProps), {
-      name: props.name
-    }),
-    /* @__PURE__ */ React.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__*/_jsx(EditableTable, _objectSpread(_objectSpread({
+      tableLayout: "fixed",
+      scroll: {
+        x: 'max-content'
+      }
+    }, props), {}, {
+      editable: _objectSpread(_objectSpread({}, props.editable), {}, {
+        form: form
       })
-    )
-  );
+    }))
+  }));
 }
 FieldEditableTable.RecordCreator = RecordCreator;
-var EditableTable_default = FieldEditableTable;
-export {
-  EditableTable_default as default
-};
+export default FieldEditableTable;