@ant-design/pro-components 2.8.10 → 3.0.0-beta.2

package/es/utils/useEditableArray/index.js

@@ -0,0 +1,891 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _toArray from "@babel/runtime/helpers/esm/toArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+var _excluded = ["map_row_parentKey"],
+  _excluded2 = ["map_row_parentKey", "map_row_key"],
+  _excluded3 = ["map_row_key"];
+/* eslint-disable react-hooks/exhaustive-deps */import { LoadingOutlined } from '@ant-design/icons';
+import { Form, Popconfirm, message } from 'antd';
+import useLazyKVMap from 'antd/lib/table/hooks/useLazyKVMap';
+import { get, warning as rcWarning, set, useMergedState } from 'rc-util';
+import React, { createRef, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useDebounceFn, useRefFunction } from '..';
+import { useIntl } from "../../provider";
+import { ProFormContext } from "../components/ProFormContext";
+import { useDeepCompareEffectDebounce } from "../hooks/useDeepCompareEffect";
+import { usePrevious } from "../hooks/usePrevious";
+import { merge } from "../merge";
+import { useMountMergeState } from "../useMountMergeState";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var noteOnce = rcWarning.noteOnce;
+
+/**
+ * 显示警告信息
+ * @param messageStr
+ */
+var warning = function warning(messageStr) {
+  return message.warning(messageStr);
+};
+export var recordKeyToString = function recordKeyToString(rowKey) {
+  if (Array.isArray(rowKey)) return rowKey.join(',');
+  return rowKey;
+};
+/**
+ * 使用map 来删除数据，性能一般 但是准确率比较高
+ *
+ * @param keyProps
+ * @param action
+ */
+export function editableRowByKey(keyProps, action) {
+  var _recordKeyToString;
+  var getRowKey = keyProps.getRowKey,
+    row = keyProps.row,
+    data = keyProps.data,
+    _keyProps$childrenCol = keyProps.childrenColumnName,
+    childrenColumnName = _keyProps$childrenCol === void 0 ? 'children' : _keyProps$childrenCol;
+  var key = (_recordKeyToString = recordKeyToString(keyProps.key)) === null || _recordKeyToString === void 0 ? void 0 : _recordKeyToString.toString();
+  var kvMap = new Map();
+
+  /**
+   * 打平这个数组
+   *
+   * @param records
+   * @param parentKey
+   */
+  function dig(records, map_row_parentKey, map_row_index) {
+    records.forEach(function (record, index) {
+      var eachIndex = (map_row_index || 0) * 10 + index;
+      var recordKey = getRowKey(record, eachIndex).toString();
+      // children 取在前面方便拼的时候按照反顺序放回去
+      if (record && _typeof(record) === 'object' && childrenColumnName in record) {
+        dig(record[childrenColumnName] || [], recordKey, eachIndex);
+      }
+      var newRecord = _objectSpread(_objectSpread({}, record), {}, {
+        map_row_key: recordKey,
+        children: undefined,
+        map_row_parentKey: map_row_parentKey
+      });
+      delete newRecord.children;
+      if (!map_row_parentKey) {
+        delete newRecord.map_row_parentKey;
+      }
+      kvMap.set(recordKey, newRecord);
+    });
+  }
+  if (action === 'top') {
+    kvMap.set(key, _objectSpread(_objectSpread({}, kvMap.get(key)), row));
+  }
+  dig(data);
+  if (action === 'update') {
+    kvMap.set(key, _objectSpread(_objectSpread({}, kvMap.get(key)), row));
+  }
+  if (action === 'delete') {
+    kvMap.delete(key);
+  }
+  var fill = function fill(map) {
+    var kvArrayMap = new Map();
+    var kvSource = [];
+    var fillNewRecord = function fillNewRecord() {
+      var fillChildren = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      map.forEach(function (value) {
+        if (value.map_row_parentKey && !value.map_row_key) {
+          var map_row_parentKey = value.map_row_parentKey,
+            rest = _objectWithoutProperties(value, _excluded);
+          if (!kvArrayMap.has(map_row_parentKey)) {
+            kvArrayMap.set(map_row_parentKey, []);
+          }
+          if (fillChildren) {
+            var _kvArrayMap$get;
+            (_kvArrayMap$get = kvArrayMap.get(map_row_parentKey)) === null || _kvArrayMap$get === void 0 || _kvArrayMap$get.push(rest);
+          }
+        }
+      });
+    };
+    fillNewRecord(action === 'top');
+    map.forEach(function (value) {
+      if (value.map_row_parentKey && value.map_row_key) {
+        var _kvArrayMap$get2;
+        var map_row_parentKey = value.map_row_parentKey,
+          map_row_key = value.map_row_key,
+          rest = _objectWithoutProperties(value, _excluded2);
+        if (kvArrayMap.has(map_row_key)) {
+          rest[childrenColumnName] = kvArrayMap.get(map_row_key);
+        }
+        if (!kvArrayMap.has(map_row_parentKey)) {
+          kvArrayMap.set(map_row_parentKey, []);
+        }
+        (_kvArrayMap$get2 = kvArrayMap.get(map_row_parentKey)) === null || _kvArrayMap$get2 === void 0 || _kvArrayMap$get2.push(rest);
+      }
+    });
+    fillNewRecord(action === 'update');
+    map.forEach(function (value) {
+      if (!value.map_row_parentKey) {
+        var map_row_key = value.map_row_key,
+          rest = _objectWithoutProperties(value, _excluded3);
+        if (map_row_key && kvArrayMap.has(map_row_key)) {
+          var item = _objectSpread(_objectSpread({}, rest), {}, _defineProperty({}, childrenColumnName, kvArrayMap.get(map_row_key)));
+          kvSource.push(item);
+          return;
+        }
+        kvSource.push(rest);
+      }
+    });
+    return kvSource;
+  };
+  return fill(kvMap);
+}
+
+/**
+ * 保存按钮的dom
+ *
+ * @param ActionRenderConfig
+ */
+export function SaveEditableAction(_ref, ref) {
+  var recordKey = _ref.recordKey,
+    onSave = _ref.onSave,
+    row = _ref.row,
+    children = _ref.children,
+    newLineConfig = _ref.newLineConfig,
+    editorType = _ref.editorType,
+    tableName = _ref.tableName;
+  var context = useContext(ProFormContext);
+  var form = Form.useFormInstance();
+  var _useMountMergeState = useMountMergeState(false),
+    _useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
+    loading = _useMountMergeState2[0],
+    setLoading = _useMountMergeState2[1];
+  var save = useRefFunction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _context$getFieldForm, isMapEditor, namePath, fields, _recordKey, recordKeyPath, curValue, data, res;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          isMapEditor = editorType === 'Map'; // 为了兼容类型为 array 的 dataIndex,当 recordKey 是一个数组时，用于获取表单值的 key 只取第一项，
+          // 从表单中获取回来之后，再根据 namepath 获取具体的某个字段并设置
+          namePath = [tableName, Array.isArray(recordKey) ? recordKey[0] : recordKey].map(function (key) {
+            return key === null || key === void 0 ? void 0 : key.toString();
+          }).flat(1).filter(Boolean);
+          setLoading(true);
+          _context.next = 6;
+          return form.validateFields(namePath, {
+            recursive: true
+          });
+        case 6:
+          fields = (context === null || context === void 0 || (_context$getFieldForm = context.getFieldFormatValue) === null || _context$getFieldForm === void 0 ? void 0 : _context$getFieldForm.call(context, namePath)) || form.getFieldValue(namePath); // 处理 dataIndex 为数组的情况
+          if (Array.isArray(recordKey) && recordKey.length > 1) {
+            // 获取 namepath
+            _recordKey = _toArray(recordKey), recordKeyPath = _recordKey.slice(1); // 将目标值获取出来并设置到 fields 当中
+            curValue = get(fields, recordKeyPath);
+            set(fields, recordKeyPath, curValue);
+          }
+          data = isMapEditor ? set({}, namePath, fields) : fields; // 获取数据并保存
+          _context.next = 11;
+          return onSave === null || onSave === void 0 ? void 0 : onSave(recordKey,
+          // 如果是 map 模式，fields 就是一个值，所以需要set 到对象中
+          // 数据模式 fields 是一个对象，所以不需要
+          merge({}, row, data), row, newLineConfig);
+        case 11:
+          res = _context.sent;
+          setLoading(false);
+          return _context.abrupt("return", res);
+        case 16:
+          _context.prev = 16;
+          _context.t0 = _context["catch"](0);
+          setLoading(false);
+          throw _context.t0;
+        case 20:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 16]]);
+  })));
+
+  // 保存数据
+  useImperativeHandle(ref, function () {
+    return {
+      save: save
+    };
+  }, [save]);
+  return /*#__PURE__*/_jsxs("a", {
+    onClick: ( /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              e.stopPropagation();
+              e.preventDefault();
+              _context2.prev = 2;
+              _context2.next = 5;
+              return save();
+            case 5:
+              _context2.next = 9;
+              break;
+            case 7:
+              _context2.prev = 7;
+              _context2.t0 = _context2["catch"](2);
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[2, 7]]);
+      }));
+      return function (_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }()),
+    children: [loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
+      style: {
+        marginInlineEnd: 8
+      }
+    }) : null, children || '保存']
+  }, "save");
+}
+/**
+ * 删除按钮 dom
+ *
+ * @param ActionRenderConfig
+ */
+export var DeleteEditableAction = function DeleteEditableAction(_ref4) {
+  var recordKey = _ref4.recordKey,
+    onDelete = _ref4.onDelete,
+    preEditRowRef = _ref4.preEditRowRef,
+    row = _ref4.row,
+    children = _ref4.children,
+    deletePopconfirmMessage = _ref4.deletePopconfirmMessage;
+  var _useMountMergeState3 = useMountMergeState(function () {
+      return false;
+    }),
+    _useMountMergeState4 = _slicedToArray(_useMountMergeState3, 2),
+    loading = _useMountMergeState4[0],
+    setLoading = _useMountMergeState4[1];
+  var _onConfirm = useRefFunction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var res;
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.prev = 0;
+          setLoading(true);
+          _context3.next = 4;
+          return onDelete === null || onDelete === void 0 ? void 0 : onDelete(recordKey, row);
+        case 4:
+          res = _context3.sent;
+          setLoading(false);
+          return _context3.abrupt("return", res);
+        case 9:
+          _context3.prev = 9;
+          _context3.t0 = _context3["catch"](0);
+          setLoading(false);
+          return _context3.abrupt("return", null);
+        case 13:
+          _context3.prev = 13;
+          if (preEditRowRef) preEditRowRef.current = null;
+          return _context3.finish(13);
+        case 16:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3, null, [[0, 9, 13, 16]]);
+  })));
+  return children !== false ? /*#__PURE__*/_jsx(Popconfirm, {
+    title: deletePopconfirmMessage,
+    onConfirm: function onConfirm() {
+      return _onConfirm();
+    },
+    children: /*#__PURE__*/_jsxs("a", {
+      children: [loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
+        style: {
+          marginInlineEnd: 8
+        }
+      }) : null, children || '删除']
+    })
+  }, "delete") : null;
+};
+var CancelEditableAction = function CancelEditableAction(props) {
+  var recordKey = props.recordKey,
+    tableName = props.tableName,
+    newLineConfig = props.newLineConfig,
+    editorType = props.editorType,
+    onCancel = props.onCancel,
+    cancelEditable = props.cancelEditable,
+    row = props.row,
+    cancelText = props.cancelText,
+    preEditRowRef = props.preEditRowRef;
+  var context = useContext(ProFormContext);
+  var form = Form.useFormInstance();
+  return /*#__PURE__*/_jsx("a", {
+    onClick: ( /*#__PURE__*/function () {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(e) {
+        var _context$getFieldForm2;
+        var isMapEditor, namePath, fields, record, res, _props$onDelete;
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              e.stopPropagation();
+              e.preventDefault();
+              isMapEditor = editorType === 'Map';
+              namePath = [tableName, recordKey].flat(1).filter(Boolean);
+              fields = (context === null || context === void 0 || (_context$getFieldForm2 = context.getFieldFormatValue) === null || _context$getFieldForm2 === void 0 ? void 0 : _context$getFieldForm2.call(context, namePath)) || (form === null || form === void 0 ? void 0 : form.getFieldValue(namePath));
+              record = isMapEditor ? set({}, namePath, fields) : fields;
+              _context4.next = 8;
+              return onCancel === null || onCancel === void 0 ? void 0 : onCancel(recordKey, record, row, newLineConfig);
+            case 8:
+              res = _context4.sent;
+              _context4.next = 11;
+              return cancelEditable(recordKey);
+            case 11:
+              if (!((preEditRowRef === null || preEditRowRef === void 0 ? void 0 : preEditRowRef.current) !== null)) {
+                _context4.next = 15;
+                break;
+              }
+              form.setFieldsValue(set({}, namePath, preEditRowRef === null || preEditRowRef === void 0 ? void 0 : preEditRowRef.current));
+              _context4.next = 17;
+              break;
+            case 15:
+              _context4.next = 17;
+              return (_props$onDelete = props.onDelete) === null || _props$onDelete === void 0 ? void 0 : _props$onDelete.call(props, recordKey, row);
+            case 17:
+              if (preEditRowRef) preEditRowRef.current = null;
+              return _context4.abrupt("return", res);
+            case 19:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      return function (_x2) {
+        return _ref6.apply(this, arguments);
+      };
+    }()),
+    children: cancelText || '取消'
+  }, "cancel");
+};
+export function defaultActionRender(row, config) {
+  var recordKey = config.recordKey,
+    newLineConfig = config.newLineConfig,
+    saveText = config.saveText,
+    deleteText = config.deleteText;
+  var SaveEditableActionRef = /*#__PURE__*/forwardRef(SaveEditableAction);
+  var saveRef = /*#__PURE__*/createRef();
+  return {
+    save: /*#__PURE__*/_jsx(SaveEditableActionRef, _objectSpread(_objectSpread({}, config), {}, {
+      row: row,
+      ref: saveRef,
+      children: saveText
+    }), 'save' + recordKey),
+    saveRef: saveRef,
+    delete: (newLineConfig === null || newLineConfig === void 0 ? void 0 : newLineConfig.options.recordKey) !== recordKey ? /*#__PURE__*/_jsx(DeleteEditableAction, _objectSpread(_objectSpread({}, config), {}, {
+      row: row,
+      children: deleteText
+    }), 'delete' + recordKey) : undefined,
+    cancel: /*#__PURE__*/_jsx(CancelEditableAction, _objectSpread(_objectSpread({}, config), {}, {
+      row: row
+    }), 'cancel' + recordKey)
+  };
+}
+
+/**
+ * 一个方便的hooks 用于维护编辑的状态
+ *
+ * @param props
+ */
+export function useEditableArray(props) {
+  // Internationalization
+  var intl = useIntl();
+
+  /**
+   * 点击开始编辑之前的保存数据用的
+   */
+  var preEditRowRef = useRef(null);
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    newLineRecordCache = _useState2[0],
+    setNewLineRecordCache = _useState2[1];
+  var resetMapRef = function resetMapRef() {
+    var map = new Map();
+    //存在children时会覆盖Map的key,导致使用数组索引查找key错误
+    var loopGetKey = function loopGetKey(dataSource, parentKey) {
+      dataSource === null || dataSource === void 0 || dataSource.forEach(function (record, index) {
+        var _recordKeyToString2;
+        var key = parentKey === undefined || parentKey === null ? index.toString() : parentKey + '_' + index.toString();
+        map.set(key, recordKeyToString(props.getRowKey(record, -1)));
+        map.set((_recordKeyToString2 = recordKeyToString(props.getRowKey(record, -1))) === null || _recordKeyToString2 === void 0 ? void 0 : _recordKeyToString2.toString(), key);
+        if (props.childrenColumnName && record !== null && record !== void 0 && record[props.childrenColumnName]) {
+          loopGetKey(record[props.childrenColumnName], key);
+        }
+      });
+    };
+    loopGetKey(props.dataSource);
+    return map;
+  };
+  var initDataSourceKeyIndexMap = useMemo(function () {
+    return resetMapRef();
+  }, []);
+  var dataSourceKeyIndexMapRef = useRef(initDataSourceKeyIndexMap);
+  var newLineRecordRef = useRef(undefined);
+  useDeepCompareEffectDebounce(function () {
+    dataSourceKeyIndexMapRef.current = resetMapRef();
+  }, [props.dataSource]);
+
+  // 这里这么做是为了存上次的状态，不然每次存一下再拿
+  newLineRecordRef.current = newLineRecordCache;
+  var editableType = props.type || 'single';
+  var _useLazyKVMap = useLazyKVMap(props.dataSource, 'children', props.getRowKey),
+    _useLazyKVMap2 = _slicedToArray(_useLazyKVMap, 1),
+    getRecordByKey = _useLazyKVMap2[0];
+  var _useMergedState = useMergedState([], {
+      value: props.editableKeys,
+      onChange: props.onChange ? function (keys) {
+        var _props$onChange, _keys$filter, _keys$map$filter;
+        props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, // 计算编辑的key
+        (_keys$filter = keys === null || keys === void 0 ? void 0 : keys.filter(function (key) {
+          return key !== undefined;
+        })) !== null && _keys$filter !== void 0 ? _keys$filter : [], // 计算编辑的行
+        (_keys$map$filter = keys === null || keys === void 0 ? void 0 : keys.map(function (key) {
+          return getRecordByKey(key);
+        }).filter(function (key) {
+          return key !== undefined;
+        })) !== null && _keys$map$filter !== void 0 ? _keys$map$filter : []);
+      } : undefined
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    editableKeys = _useMergedState2[0],
+    setEditableRowKeys = _useMergedState2[1];
+
+  /** 一个用来标志的set 提供了方便的 api 来去重什么的 */
+  var editableKeysSet = useMemo(function () {
+    var keys = editableType === 'single' ? editableKeys === null || editableKeys === void 0 ? void 0 : editableKeys.slice(0, 1) : editableKeys;
+    return new Set(keys);
+  }, [(editableKeys || []).join(','), editableType]);
+  var editableKeysRef = usePrevious(editableKeys);
+
+  /** 这行是不是编辑状态 */
+  var isEditable = useRefFunction(function (row) {
+    var _props$getRowKey, _props$getRowKey$toSt, _props$getRowKey2, _props$getRowKey2$toS;
+    // 为了兼容一下name 模式的 indexKey，所以需要判断两次，一次是index，一次是没有 index 的
+    var recordKeyOrIndex = (_props$getRowKey = props.getRowKey(row, row.index)) === null || _props$getRowKey === void 0 || (_props$getRowKey$toSt = _props$getRowKey.toString) === null || _props$getRowKey$toSt === void 0 ? void 0 : _props$getRowKey$toSt.call(_props$getRowKey);
+    // 这里是不设置 index 的地方
+    var recordKey = (_props$getRowKey2 = props.getRowKey(row, -1)) === null || _props$getRowKey2 === void 0 || (_props$getRowKey2$toS = _props$getRowKey2.toString) === null || _props$getRowKey2$toS === void 0 ? void 0 : _props$getRowKey2$toS.call(_props$getRowKey2);
+
+    // 都转化为了字符串，不然 number 和 string
+    var stringEditableKeys = editableKeys === null || editableKeys === void 0 ? void 0 : editableKeys.map(function (key) {
+      return key === null || key === void 0 ? void 0 : key.toString();
+    });
+    var stringEditableKeysRef = (editableKeysRef === null || editableKeysRef === void 0 ? void 0 : editableKeysRef.map(function (key) {
+      return key === null || key === void 0 ? void 0 : key.toString();
+    })) || [];
+    var preIsEditable = props.tableName && !!(stringEditableKeysRef !== null && stringEditableKeysRef !== void 0 && stringEditableKeysRef.includes(recordKey)) || !!(stringEditableKeysRef !== null && stringEditableKeysRef !== void 0 && stringEditableKeysRef.includes(recordKeyOrIndex));
+    return {
+      recordKey: recordKey,
+      isEditable: props.tableName && (stringEditableKeys === null || stringEditableKeys === void 0 ? void 0 : stringEditableKeys.includes(recordKey)) || (stringEditableKeys === null || stringEditableKeys === void 0 ? void 0 : stringEditableKeys.includes(recordKeyOrIndex)),
+      preIsEditable: preIsEditable
+    };
+  });
+
+  /**
+   * 进入编辑状态
+   *
+   * @param recordKey
+   */
+  var startEditable = useRefFunction(function (recordKey, record) {
+    var _ref7, _props$dataSource;
+    // 如果是单行的话，不允许多行编辑
+    if (editableKeysSet.size > 0 && editableType === 'single' && props.onlyOneLineEditorAlertMessage !== false) {
+      warning(props.onlyOneLineEditorAlertMessage || intl.getMessage('editableTable.onlyOneLineEditor', '只能同时编辑一行'));
+      return false;
+    }
+    editableKeysSet.add(recordKey);
+    setEditableRowKeys(Array.from(editableKeysSet));
+
+    // 这里是为了存上次的状态,不然取消的时候就丢掉了
+    preEditRowRef.current = (_ref7 = record !== null && record !== void 0 ? record : (_props$dataSource = props.dataSource) === null || _props$dataSource === void 0 ? void 0 : _props$dataSource.find(function (recordData, index) {
+      return props.getRowKey(recordData, index) === recordKey;
+    })) !== null && _ref7 !== void 0 ? _ref7 : null;
+    return true;
+  });
+
+  /**
+   * 退出编辑状态
+   *
+   * @param recordKey
+   */
+  var cancelEditable = useRefFunction( /*#__PURE__*/function () {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(recordKey, needReTry) {
+      var relayKey, key;
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            relayKey = recordKeyToString(recordKey).toString();
+            key = dataSourceKeyIndexMapRef.current.get(relayKey);
+            /** 如果没找到key，转化一下再去找 */
+            if (!(!editableKeysSet.has(relayKey) && key && (needReTry !== null && needReTry !== void 0 ? needReTry : true) && props.tableName)) {
+              _context5.next = 5;
+              break;
+            }
+            cancelEditable(key, false);
+            return _context5.abrupt("return");
+          case 5:
+            /** 如果这个是 new Line 直接删除 */
+            if (newLineRecordCache && newLineRecordCache.options.recordKey === recordKey) {
+              setNewLineRecordCache(undefined);
+            }
+            editableKeysSet.delete(relayKey);
+            editableKeysSet.delete(recordKeyToString(recordKey));
+            setEditableRowKeys(Array.from(editableKeysSet));
+            return _context5.abrupt("return", true);
+          case 10:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return function (_x3, _x4) {
+      return _ref8.apply(this, arguments);
+    };
+  }());
+  var propsOnValuesChange = useDebounceFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+    var _props$onValuesChange;
+    var _len,
+      rest,
+      _key,
+      _args6 = arguments;
+    return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          for (_len = _args6.length, rest = new Array(_len), _key = 0; _key < _len; _key++) {
+            rest[_key] = _args6[_key];
+          }
+          //@ts-ignore
+          (_props$onValuesChange = props.onValuesChange) === null || _props$onValuesChange === void 0 || _props$onValuesChange.call.apply(_props$onValuesChange, [props].concat(rest));
+        case 2:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })), 64);
+  var onValuesChange = useRefFunction(function (value, values) {
+    var _Object$keys$pop;
+    if (!props.onValuesChange) {
+      return;
+    }
+    var dataSource = props.dataSource;
+
+    // 这里是把正在编辑中的所有表单数据都修改掉
+    // 不然会用 props 里面的 dataSource，数据只有正在编辑中的
+    // Object.keys(get(values, [props.tableName || ''].flat(1)) || values).forEach((recordKey) => {
+    editableKeys === null || editableKeys === void 0 || editableKeys.forEach(function (eachRecordKey) {
+      if ((newLineRecordCache === null || newLineRecordCache === void 0 ? void 0 : newLineRecordCache.options.recordKey) === eachRecordKey) return;
+      var recordKey = eachRecordKey.toString();
+      // 如果数据在这个 form 中没有展示，也不显示
+      var editRow = get(values, [props.tableName || '', recordKey].flat(1).filter(function (key) {
+        return key || key === 0;
+      }));
+      if (!editRow) return;
+      dataSource = editableRowByKey({
+        data: dataSource,
+        getRowKey: props.getRowKey,
+        row: editRow,
+        key: recordKey,
+        childrenColumnName: props.childrenColumnName || 'children'
+      }, 'update');
+    });
+    var relayValue = value;
+    var recordKey = (_Object$keys$pop = Object.keys(relayValue || {}).pop()) === null || _Object$keys$pop === void 0 ? void 0 : _Object$keys$pop.toString();
+
+    //从form 和 cache 中取得数据
+    var newLineRecordData = _objectSpread(_objectSpread({}, newLineRecordCache === null || newLineRecordCache === void 0 ? void 0 : newLineRecordCache.defaultValue), get(values, [props.tableName || '', recordKey.toString()].flat(1).filter(function (key) {
+      return key || key === 0;
+    })));
+
+    /** 如果已经在 dataSource 中存在了，直接 find */
+    var editRow = dataSourceKeyIndexMapRef.current.has(recordKeyToString(recordKey)) ? dataSource.find(function (item, index) {
+      var _props$getRowKey3;
+      var key = (_props$getRowKey3 = props.getRowKey(item, index)) === null || _props$getRowKey3 === void 0 ? void 0 : _props$getRowKey3.toString();
+      return key === recordKey;
+    }) : newLineRecordData;
+    propsOnValuesChange.run(editRow || newLineRecordData, dataSource);
+  });
+  var saveRefsMap = useRef(new Map());
+  useEffect(function () {
+    // 确保只保留编辑状态的，其它的都删除掉
+    saveRefsMap.current.forEach(function (ref, key) {
+      if (!editableKeysSet.has(key)) {
+        saveRefsMap.current.delete(key);
+      }
+    });
+  }, [saveRefsMap, editableKeysSet]);
+  /**
+   * 保存编辑行
+   *
+   * @param recordKey
+   * @param needReTry
+   */
+  var saveEditable = useRefFunction( /*#__PURE__*/function () {
+    var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(recordKey, needReTry) {
+      var relayKey, key, saveRef, _saveRef$current;
+      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            relayKey = recordKeyToString(recordKey);
+            key = dataSourceKeyIndexMapRef.current.get(recordKey.toString());
+            /** 如果没找到key，转化一下再去找 */
+            if (!(!editableKeysSet.has(relayKey) && key && (needReTry !== null && needReTry !== void 0 ? needReTry : true) && props.tableName)) {
+              _context7.next = 6;
+              break;
+            }
+            _context7.next = 5;
+            return saveEditable(key, false);
+          case 5:
+            return _context7.abrupt("return", _context7.sent);
+          case 6:
+            saveRef = saveRefsMap.current.get(relayKey) || saveRefsMap.current.get(relayKey.toString());
+            _context7.prev = 7;
+            _context7.next = 10;
+            return saveRef === null || saveRef === void 0 || (_saveRef$current = saveRef.current) === null || _saveRef$current === void 0 ? void 0 : _saveRef$current.save();
+          case 10:
+            _context7.next = 15;
+            break;
+          case 12:
+            _context7.prev = 12;
+            _context7.t0 = _context7["catch"](7);
+            return _context7.abrupt("return", false);
+          case 15:
+            editableKeysSet.delete(relayKey);
+            editableKeysSet.delete(relayKey.toString());
+            setEditableRowKeys(Array.from(editableKeysSet));
+            return _context7.abrupt("return", true);
+          case 19:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7, null, [[7, 12]]);
+    }));
+    return function (_x5, _x6) {
+      return _ref10.apply(this, arguments);
+    };
+  }());
+
+  /**
+   * 同时只能支持一行,取消之后数据消息，不会触发 dataSource
+   *
+   * @param row
+   * @param options
+   * @name 增加新的行
+   */
+  var addEditRecord = useRefFunction(function (row, options) {
+    if (options !== null && options !== void 0 && options.parentKey && !dataSourceKeyIndexMapRef.current.has(recordKeyToString(options === null || options === void 0 ? void 0 : options.parentKey).toString())) {
+      console.warn("can't find record by key", options === null || options === void 0 ? void 0 : options.parentKey);
+      return false;
+    }
+    // 暂时不支持多行新增
+    if (newLineRecordRef.current && props.onlyAddOneLineAlertMessage !== false) {
+      warning(props.onlyAddOneLineAlertMessage || intl.getMessage('editableTable.onlyAddOneLine', '只能新增一行'));
+      return false;
+    }
+    // 如果是单行的话，不允许多行编辑
+    if (editableKeysSet.size > 0 && editableType === 'single' && props.onlyOneLineEditorAlertMessage !== false) {
+      warning(props.onlyOneLineEditorAlertMessage || intl.getMessage('editableTable.onlyOneLineEditor', '只能同时编辑一行'));
+      return false;
+    }
+    // 防止多次渲染
+    var recordKey = props.getRowKey(row, -1);
+    if (!recordKey && recordKey !== 0) {
+      noteOnce(!!recordKey, '请设置 recordCreatorProps.record 并返回一个唯一的key  \n  https://procomponents.ant.design/components/editable-table#editable-%E6%96%B0%E5%BB%BA%E8%A1%8C');
+      throw new Error('请设置 recordCreatorProps.record 并返回一个唯一的key');
+    }
+    editableKeysSet.add(recordKey);
+    setEditableRowKeys(Array.from(editableKeysSet));
+
+    // 如果是dataSource 新增模式的话，取消再开始编辑，
+    // 这样就可以把新增到 dataSource的数据进入编辑模式了
+    // [a,b,cache] => [a,b,c]
+    if ((options === null || options === void 0 ? void 0 : options.newRecordType) === 'dataSource' || props.tableName) {
+      var _recordKeyToString3;
+      var actionProps = {
+        data: props.dataSource,
+        getRowKey: props.getRowKey,
+        row: _objectSpread(_objectSpread({}, row), {}, {
+          map_row_parentKey: options !== null && options !== void 0 && options.parentKey ? (_recordKeyToString3 = recordKeyToString(options === null || options === void 0 ? void 0 : options.parentKey)) === null || _recordKeyToString3 === void 0 ? void 0 : _recordKeyToString3.toString() : undefined
+        }),
+        key: recordKey,
+        childrenColumnName: props.childrenColumnName || 'children'
+      };
+      props.setDataSource(editableRowByKey(actionProps, (options === null || options === void 0 ? void 0 : options.position) === 'top' ? 'top' : 'update'));
+    } else {
+      setNewLineRecordCache({
+        defaultValue: row,
+        options: _objectSpread(_objectSpread({}, options), {}, {
+          recordKey: recordKey
+        })
+      });
+    }
+    return true;
+  });
+  var saveText = (props === null || props === void 0 ? void 0 : props.saveText) || intl.getMessage('editableTable.action.save', '保存');
+  var deleteText = (props === null || props === void 0 ? void 0 : props.deleteText) || intl.getMessage('editableTable.action.delete', '删除');
+  var cancelText = (props === null || props === void 0 ? void 0 : props.cancelText) || intl.getMessage('editableTable.action.cancel', '取消');
+  var actionSaveRef = useRefFunction( /*#__PURE__*/function () {
+    var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(recordKey, editRow, originRow, newLine) {
+      var _props$onSave, _recordKeyToString4, _options$parentKey;
+      var res, _ref12, options, actionProps;
+      return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            _context8.next = 2;
+            return props === null || props === void 0 || (_props$onSave = props.onSave) === null || _props$onSave === void 0 ? void 0 : _props$onSave.call(props, recordKey, editRow, originRow, newLine);
+          case 2:
+            res = _context8.sent;
+            _context8.next = 5;
+            return cancelEditable(recordKey);
+          case 5:
+            _ref12 = newLine || newLineRecordRef.current || {}, options = _ref12.options;
+            if (!(!(options !== null && options !== void 0 && options.parentKey) && (options === null || options === void 0 ? void 0 : options.recordKey) === recordKey)) {
+              _context8.next = 9;
+              break;
+            }
+            if ((options === null || options === void 0 ? void 0 : options.position) === 'top') {
+              props.setDataSource([editRow].concat(_toConsumableArray(props.dataSource)));
+            } else {
+              props.setDataSource([].concat(_toConsumableArray(props.dataSource), [editRow]));
+            }
+            return _context8.abrupt("return", res);
+          case 9:
+            actionProps = {
+              data: props.dataSource,
+              getRowKey: props.getRowKey,
+              row: options ? _objectSpread(_objectSpread({}, editRow), {}, {
+                map_row_parentKey: (_recordKeyToString4 = recordKeyToString((_options$parentKey = options === null || options === void 0 ? void 0 : options.parentKey) !== null && _options$parentKey !== void 0 ? _options$parentKey : '')) === null || _recordKeyToString4 === void 0 ? void 0 : _recordKeyToString4.toString()
+              }) : editRow,
+              key: recordKey,
+              childrenColumnName: props.childrenColumnName || 'children'
+            };
+            props.setDataSource(editableRowByKey(actionProps, (options === null || options === void 0 ? void 0 : options.position) === 'top' ? 'top' : 'update'));
+            _context8.next = 13;
+            return cancelEditable(recordKey);
+          case 13:
+            return _context8.abrupt("return", res);
+          case 14:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee8);
+    }));
+    return function (_x7, _x8, _x9, _x10) {
+      return _ref11.apply(this, arguments);
+    };
+  }());
+  var actionDeleteRef = useRefFunction( /*#__PURE__*/function () {
+    var _ref13 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(recordKey, editRow) {
+      var _props$onDelete2;
+      var actionProps, res;
+      return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
+          case 0:
+            actionProps = {
+              data: props.dataSource,
+              getRowKey: props.getRowKey,
+              row: editRow,
+              key: recordKey,
+              childrenColumnName: props.childrenColumnName || 'children'
+            };
+            _context9.next = 3;
+            return props === null || props === void 0 || (_props$onDelete2 = props.onDelete) === null || _props$onDelete2 === void 0 ? void 0 : _props$onDelete2.call(props, recordKey, editRow);
+          case 3:
+            res = _context9.sent;
+            _context9.next = 6;
+            return cancelEditable(recordKey, false);
+          case 6:
+            props.setDataSource(editableRowByKey(actionProps, 'delete'));
+            return _context9.abrupt("return", res);
+          case 8:
+          case "end":
+            return _context9.stop();
+        }
+      }, _callee9);
+    }));
+    return function (_x11, _x12) {
+      return _ref13.apply(this, arguments);
+    };
+  }());
+  var actionCancelRef = useRefFunction( /*#__PURE__*/function () {
+    var _ref14 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10(recordKey, editRow, originRow, newLine) {
+      var _props$onCancel;
+      var res;
+      return _regeneratorRuntime().wrap(function _callee10$(_context10) {
+        while (1) switch (_context10.prev = _context10.next) {
+          case 0:
+            _context10.next = 2;
+            return props === null || props === void 0 || (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 ? void 0 : _props$onCancel.call(props, recordKey, editRow, originRow, newLine);
+          case 2:
+            res = _context10.sent;
+            return _context10.abrupt("return", res);
+          case 4:
+          case "end":
+            return _context10.stop();
+        }
+      }, _callee10);
+    }));
+    return function (_x13, _x14, _x15, _x16) {
+      return _ref14.apply(this, arguments);
+    };
+  }());
+
+  // 如果传入了自定义的actionRender，使用useRefFunction以确保内部的事件处理函数可以访问最新的state
+  var existCustomActionRender = props.actionRender && typeof props.actionRender === 'function';
+  var customActionRender = existCustomActionRender ? props.actionRender : function () {};
+  var customActionRenderRef = useRefFunction(customActionRender);
+  var actionRender = function actionRender(row) {
+    var key = props.getRowKey(row, row.index);
+    var config = {
+      saveText: saveText,
+      cancelText: cancelText,
+      deleteText: deleteText,
+      addEditRecord: addEditRecord,
+      recordKey: key,
+      cancelEditable: cancelEditable,
+      index: row.index,
+      tableName: props.tableName,
+      newLineConfig: newLineRecordCache,
+      onCancel: actionCancelRef,
+      onDelete: actionDeleteRef,
+      onSave: actionSaveRef,
+      editableKeys: editableKeys,
+      setEditableRowKeys: setEditableRowKeys,
+      preEditRowRef: preEditRowRef,
+      deletePopconfirmMessage: props.deletePopconfirmMessage || "".concat(intl.getMessage('deleteThisLine', '删除此项'), "?")
+    };
+    var renderResult = defaultActionRender(row, config);
+    // 缓存一下saveRef
+    if (props.tableName) {
+      saveRefsMap.current.set(dataSourceKeyIndexMapRef.current.get(recordKeyToString(key)) || recordKeyToString(key), renderResult.saveRef);
+    } else {
+      saveRefsMap.current.set(recordKeyToString(key), renderResult.saveRef);
+    }
+    if (existCustomActionRender) return customActionRenderRef(row, config, {
+      save: renderResult.save,
+      delete: renderResult.delete,
+      cancel: renderResult.cancel
+    });
+    return [renderResult.save, renderResult.delete, renderResult.cancel];
+  };
+  return {
+    editableKeys: editableKeys,
+    setEditableRowKeys: setEditableRowKeys,
+    isEditable: isEditable,
+    actionRender: actionRender,
+    startEditable: startEditable,
+    cancelEditable: cancelEditable,
+    addEditRecord: addEditRecord,
+    saveEditable: saveEditable,
+    newLineRecord: newLineRecordCache,
+    preEditableKeys: editableKeysRef,
+    onValuesChange: onValuesChange,
+    getRealIndex: props.getRealIndex
+  };
+}