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

package/lib/utils/useEditableMap/index.d.ts

@@ -15,7 +15,7 @@ export declare function useEditableMap<RecordType>(props: RowEditableConfig<Reco
     setDataSource: (dataSource: RecordType) => void;
 }): {
     editableKeys: React.Key[];
-    setEditableRowKeys: (updater: React.Key[] | ((origin: React.Key[]) => React.Key[]), ignoreDestroy?: boolean | undefined) => void;
+    setEditableRowKeys: (updater: React.Key[] | ((prev: React.Key[]) => React.Key[])) => void;
     isEditable: (recordKey: RecordKey) => boolean;
     actionRender: (key: RecordKey, config?: ActionTypeText<RecordType>) => React.ReactNode[] | (import("react/jsx-runtime").JSX.Element | undefined)[];
     startEditable: (recordKey: RecordKey, recordValue?: any) => boolean;

package/lib/utils/useEditableMap/index.js

@@ -1,17 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useEditableMap = useEditableMap;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _util = require("@rc-component/util");
 var _antd = require("antd");
 var _react = require("react");
+var _ = require("..");
 var _provider = require("../../provider");
 var _useEditableArray = require("../useEditableArray");
 /* eslint-disable react-hooks/exhaustive-deps */
@@ -20,7 +16,7 @@ var _useEditableArray = require("../useEditableArray");
  * 显示警告信息
  * @param messageStr
  */
-var warning = function warning(messageStr) {
+const warning = messageStr => {
   return _antd.message.warning(messageStr);
 };
 /**
@@ -29,10 +25,14 @@ var warning = function warning(messageStr) {
  * @param params
  * @param action
  */
-function editableRowByKey(_ref) {
-  var data = _ref.data,
-    row = _ref.row;
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), row);
+function editableRowByKey({
+  data,
+  row
+}) {
+  return {
+    ...data,
+    ...row
+  };
 }
 /**
  * 一个方便的hooks 用于维护编辑的状态
@@ -43,149 +43,159 @@ function useEditableMap(props) {
   /**
    * 点击开始编辑之前的保存数据用的
    */
-  var preEditRowRef = (0, _react.useRef)(null);
-  var editableType = props.type || 'single';
+  const preEditRowRef = (0, _react.useRef)(null);
+  const preEditRowRefs = (0, _react.useRef)(new Map());
+  const editableType = props.type || 'single';
 
   // Internationalization
-  var intl = (0, _provider.useIntl)();
-  var _useMergedState = (0, _util.useMergedState)([], {
-      value: props.editableKeys,
-      onChange: props.onChange ? function (keys) {
-        var _props$onChange;
-        props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props,
-        // 计算编辑的key
-        keys, props.dataSource);
-      } : undefined
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    editableKeys = _useMergedState2[0],
-    setEditableRowKeys = _useMergedState2[1];
+  const intl = (0, _provider.useIntl)();
+  const [editableKeys, setEditableRowKeysInner] = (0, _util.useControlledState)([], props.editableKeys);
+  const setEditableRowKeys = (0, _react.useCallback)(updater => {
+    setEditableRowKeysInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props?.onChange?.(next, props.dataSource);
+      return next;
+    });
+  }, [props.onChange, props.dataSource]);
+
   /** 一个用来标志的set 提供了方便的 api 来去重什么的 */
-  var editableKeysSet = (0, _react.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]);
+  const editableKeysSet = (0, _react.useMemo)(() => {
+    const keys = editableType === 'single' ? editableKeys?.slice(0, 1) || [] : editableKeys || [];
+    return new Set(keys.map(key => String(key)));
+  }, [editableKeys, editableType]);
+
+  /**
+   * 检查 key 是否在编辑列表中
+   * 使用 editableKeysSet 进行快速查找，性能更好
+   */
+  const checkKeyInEditableList = (0, _.useRefFunction)(recordKey => {
+    const keyStr = String((0, _useEditableArray.recordKeyToString)(recordKey));
+    return editableKeysSet.has(keyStr);
+  });
 
   /** 这行是不是编辑状态 */
-  var isEditable = (0, _react.useCallback)(function (recordKey) {
-    if (editableKeys !== null && editableKeys !== void 0 && editableKeys.includes((0, _useEditableArray.recordKeyToString)(recordKey))) return true;
-    return false;
-  }, [(editableKeys || []).join(',')]);
+  const isEditable = (0, _react.useCallback)(recordKey => {
+    return checkKeyInEditableList(recordKey);
+  }, [checkKeyInEditableList]);
+
+  /**
+   * 验证是否可以开始编辑
+   */
+  const validateCanStartEdit = (0, _.useRefFunction)(() => {
+    // 如果是单行模式，检查是否已有编辑中的行
+    if (editableType === 'single' && editableKeys && editableKeys.length > 0) {
+      warning(props.onlyOneLineEditorAlertMessage || intl.getMessage('editableTable.onlyOneLineEditor', '只能同时编辑一行'));
+      return false;
+    }
+    return true;
+  });
 
   /**
    * 进入编辑状态
    *
    * @param recordKey
+   * @param recordValue
    */
-  var startEditable = function startEditable(recordKey, recordValue) {
-    var _ref2;
-    // 如果是单行的话，不允许多行编辑
-    if (editableKeysSet.size > 0 && editableType === 'single') {
-      warning(props.onlyOneLineEditorAlertMessage || intl.getMessage('editableTable.onlyOneLineEditor', '只能同时编辑一行'));
+  const startEditable = (0, _.useRefFunction)((recordKey, recordValue) => {
+    // 验证是否可以开始编辑
+    if (!validateCanStartEdit()) {
       return false;
     }
-    preEditRowRef.current = (_ref2 = recordValue !== null && recordValue !== void 0 ? recordValue : (0, _util.get)(props.dataSource, Array.isArray(recordKey) ? recordKey : [recordKey])) !== null && _ref2 !== void 0 ? _ref2 : null;
-    editableKeysSet.add((0, _useEditableArray.recordKeyToString)(recordKey));
-    setEditableRowKeys(Array.from(editableKeysSet));
+    const keyStr = String((0, _useEditableArray.recordKeyToString)(recordKey));
+
+    // 检查是否已经在编辑列表中，避免重复添加
+    if (checkKeyInEditableList(recordKey)) {
+      return true;
+    }
+
+    // 保存编辑前的数据
+    preEditRowRef.current = recordValue ?? (0, _util.get)(props.dataSource, Array.isArray(recordKey) ? recordKey : [recordKey]) ?? null;
+    preEditRowRefs.current.set(String((0, _useEditableArray.recordKeyToString)(recordKey)), preEditRowRef.current);
+
+    // 更新编辑 keys（不直接修改 editableKeysSet）
+    const newKeys = editableType === 'single' ? [keyStr] : [...(editableKeys || []), keyStr];
+    setEditableRowKeys(newKeys);
     return true;
-  };
+  });
 
   /**
    * 退出编辑状态
    *
    * @param recordKey
    */
-  var cancelEditable = function cancelEditable(recordKey) {
-    // 防止多次渲染
-    editableKeysSet.delete((0, _useEditableArray.recordKeyToString)(recordKey));
-    setEditableRowKeys(Array.from(editableKeysSet));
+  const cancelEditable = (0, _.useRefFunction)(recordKey => {
+    const keyStr = String((0, _useEditableArray.recordKeyToString)(recordKey));
+
+    // 检查是否在编辑列表中
+    if (!checkKeyInEditableList(recordKey)) {
+      return true;
+    }
+
+    // 更新编辑 keys（不直接修改 editableKeysSet）
+    const newKeys = (editableKeys || []).filter(key => String(key) !== keyStr);
+    setEditableRowKeys(newKeys);
+    return true;
+  });
+
+  /**
+   * 取消编辑的回调
+   */
+  const onCancel = (0, _.useRefFunction)(async (recordKey, editRow, originRow, newLine) => {
+    const success = await props?.onCancel?.(recordKey, editRow, originRow, newLine);
+    if (success === false) {
+      return false;
+    }
     return true;
-  };
-  var onCancel = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(recordKey, editRow, originRow, newLine) {
-      var _props$onCancel;
-      var success;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.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:
-            success = _context.sent;
-            if (!(success === false)) {
-              _context.next = 5;
-              break;
-            }
-            return _context.abrupt("return", false);
-          case 5:
-            return _context.abrupt("return", true);
-          case 6:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function onCancel(_x, _x2, _x3, _x4) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  var onSave = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(recordKey, editRow, originRow) {
-      var _props$onSave;
-      var success, actionProps;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.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);
-          case 2:
-            success = _context2.sent;
-            if (!(success === false)) {
-              _context2.next = 5;
-              break;
-            }
-            return _context2.abrupt("return", false);
-          case 5:
-            _context2.next = 7;
-            return cancelEditable(recordKey);
-          case 7:
-            actionProps = {
-              data: props.dataSource,
-              row: editRow,
-              key: recordKey,
-              childrenColumnName: props.childrenColumnName || 'children'
-            };
-            props.setDataSource(editableRowByKey(actionProps));
-            return _context2.abrupt("return", true);
-          case 10:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function onSave(_x5, _x6, _x7) {
-      return _ref4.apply(this, arguments);
+  });
+
+  /**
+   * 保存编辑的回调
+   */
+  const onSave = (0, _.useRefFunction)(async (recordKey, editRow, originRow) => {
+    const success = await props?.onSave?.(recordKey, editRow, originRow);
+    if (success === false) {
+      return false;
+    }
+
+    // 先退出编辑状态
+    await cancelEditable(recordKey);
+    preEditRowRefs.current.delete(String((0, _useEditableArray.recordKeyToString)(recordKey)));
+
+    // 更新数据源
+    const actionProps = {
+      data: props.dataSource,
+      row: editRow,
+      key: recordKey,
+      childrenColumnName: props.childrenColumnName || 'children'
     };
-  }();
-  var saveText = intl.getMessage('editableTable.action.save', '保存');
-  var deleteText = intl.getMessage('editableTable.action.delete', '删除');
-  var cancelText = intl.getMessage('editableTable.action.cancel', '取消');
-  var actionRender = (0, _react.useCallback)(function (key, config) {
-    var renderConfig = (0, _objectSpread2.default)({
+    props.setDataSource(editableRowByKey(actionProps));
+    return true;
+  });
+  const saveText = intl.getMessage('editableTable.action.save', '保存');
+  const deleteText = intl.getMessage('editableTable.action.delete', '删除');
+  const cancelText = intl.getMessage('editableTable.action.cancel', '取消');
+
+  /**
+   * 渲染操作按钮
+   */
+  const actionRender = (0, _react.useCallback)((key, config) => {
+    const renderConfig = {
       recordKey: key,
-      cancelEditable: cancelEditable,
-      onCancel: onCancel,
-      onSave: onSave,
-      editableKeys: editableKeys,
-      setEditableRowKeys: setEditableRowKeys,
-      saveText: saveText,
-      cancelText: cancelText,
-      preEditRowRef: preEditRowRef,
-      deleteText: deleteText,
-      deletePopconfirmMessage: "".concat(intl.getMessage('deleteThisLine', '删除此项'), "?"),
-      editorType: 'Map'
-    }, config);
-    var renderResult = (0, _useEditableArray.defaultActionRender)(props.dataSource, renderConfig);
+      cancelEditable,
+      onCancel,
+      onSave,
+      editableKeys,
+      setEditableRowKeys,
+      saveText,
+      cancelText,
+      preEditRowRef,
+      preEditRowRefs,
+      deleteText,
+      deletePopconfirmMessage: `${intl.getMessage('deleteThisLine', '删除此项')}?`,
+      editorType: 'Map',
+      ...config
+    };
+    const renderResult = (0, _useEditableArray.defaultActionRender)(props.dataSource, renderConfig);
     if (props.actionRender) {
       return props.actionRender(props.dataSource, renderConfig, {
         save: renderResult.save,
@@ -194,13 +204,13 @@ function useEditableMap(props) {
       });
     }
     return [renderResult.save, renderResult.delete, renderResult.cancel];
-  }, [editableKeys && editableKeys.join(','), props.dataSource]);
+  }, [editableKeys, props.dataSource, cancelEditable, onCancel, onSave]);
   return {
-    editableKeys: editableKeys,
-    setEditableRowKeys: setEditableRowKeys,
-    isEditable: isEditable,
-    actionRender: actionRender,
-    startEditable: startEditable,
-    cancelEditable: cancelEditable
+    editableKeys,
+    setEditableRowKeys,
+    isEditable,
+    actionRender,
+    startEditable,
+    cancelEditable
   };
 }

package/lib/utils/useMediaQuery/index.js

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useBreakpoint = exports.getScreenClassName = exports.MediaQueryEnum = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _query = _interopRequireDefault(require("./query"));
-var MediaQueryEnum = exports.MediaQueryEnum = {
+const MediaQueryEnum = exports.MediaQueryEnum = {
   xs: {
     maxWidth: 575,
     matchMedia: '(max-width: 575px)'
@@ -44,14 +43,16 @@ var MediaQueryEnum = exports.MediaQueryEnum = {
  * `Rendered more hooks than during the previous render.`
  * So should use Array.forEach
  */
-var getScreenClassName = exports.getScreenClassName = function getScreenClassName() {
-  var queryKey = undefined;
+const getScreenClassName = () => {
+  let queryKey = undefined;
   // support ssr
   if (typeof window === 'undefined') {
     return queryKey;
   }
-  var mediaQueryKey = Object.keys(MediaQueryEnum).find(function (key) {
-    var matchMedia = MediaQueryEnum[key].matchMedia;
+  const mediaQueryKey = Object.keys(MediaQueryEnum).find(key => {
+    const {
+      matchMedia
+    } = MediaQueryEnum[key];
     if (window.matchMedia(matchMedia).matches) {
       return true;
     }
@@ -60,18 +61,16 @@ var getScreenClassName = exports.getScreenClassName = function getScreenClassNam
   queryKey = mediaQueryKey;
   return queryKey;
 };
-var useBreakpoint = exports.useBreakpoint = function useBreakpoint() {
-  var isMd = (0, _query.default)(MediaQueryEnum.md.matchMedia);
-  var isLg = (0, _query.default)(MediaQueryEnum.lg.matchMedia);
-  var isXxl = (0, _query.default)(MediaQueryEnum.xxl.matchMedia);
-  var isXl = (0, _query.default)(MediaQueryEnum.xl.matchMedia);
-  var isSm = (0, _query.default)(MediaQueryEnum.sm.matchMedia);
-  var isXs = (0, _query.default)(MediaQueryEnum.xs.matchMedia);
-  var _useState = (0, _react.useState)(getScreenClassName()),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    colSpan = _useState2[0],
-    setColSpan = _useState2[1];
-  (0, _react.useEffect)(function () {
+exports.getScreenClassName = getScreenClassName;
+const useBreakpoint = () => {
+  const isMd = (0, _query.default)(MediaQueryEnum.md.matchMedia);
+  const isLg = (0, _query.default)(MediaQueryEnum.lg.matchMedia);
+  const isXxl = (0, _query.default)(MediaQueryEnum.xxl.matchMedia);
+  const isXl = (0, _query.default)(MediaQueryEnum.xl.matchMedia);
+  const isSm = (0, _query.default)(MediaQueryEnum.sm.matchMedia);
+  const isXs = (0, _query.default)(MediaQueryEnum.xs.matchMedia);
+  const [colSpan, setColSpan] = (0, _react.useState)(getScreenClassName());
+  (0, _react.useEffect)(() => {
     if (process.env.NODE_ENV === 'TEST') {
       setColSpan(process.env.USE_MEDIA || 'md');
       return;
@@ -103,4 +102,5 @@ var useBreakpoint = exports.useBreakpoint = function useBreakpoint() {
     setColSpan('md');
   }, [isMd, isLg, isXxl, isXl, isSm, isXs]);
   return colSpan;
-};
+};
+exports.useBreakpoint = useBreakpoint;

package/lib/utils/useMediaQuery/query.js

@@ -1,32 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useMediaQuery;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 function useMediaQuery(mediaQuery) {
-  var isSsr = typeof window === 'undefined';
-  var _useState = (0, _react.useState)(function () {
-      return isSsr ? false : window.matchMedia(mediaQuery).matches;
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    matches = _useState2[0],
-    setMatches = _useState2[1];
-  (0, _react.useLayoutEffect)(function () {
+  const isSsr = typeof window === 'undefined';
+  const [matches, setMatches] = (0, _react.useState)(() => isSsr ? false : window.matchMedia(mediaQuery).matches);
+
+  // 在 SSR 环境中使用 useEffect，在客户端使用 useLayoutEffect
+  // 这样可以避免 SSR 警告，同时在客户端保持同步更新
+  // 使用条件表达式确保 hooks 调用顺序一致
+  const EffectHook = isSsr ? _react.useEffect : _react.useLayoutEffect;
+  EffectHook(() => {
     if (isSsr) {
       return;
     }
-    var mediaQueryList = window.matchMedia(mediaQuery);
-    var listener = function listener(e) {
-      return setMatches(e.matches);
-    };
-    mediaQueryList.addListener(listener);
-    return function () {
-      return mediaQueryList.removeListener(listener);
-    };
-  }, [mediaQuery]);
+    const mediaQueryList = window.matchMedia(mediaQuery);
+    const listener = e => setMatches(e.matches);
+    // 使用最新的 addEventListener API
+    mediaQueryList.addEventListener('change', listener);
+    return () => mediaQueryList.removeEventListener('change', listener);
+  }, [mediaQuery, isSsr]);
   return matches;
 }

package/lib/version.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = void 0;
-var version = exports.version = {
+const version = exports.version = {
   '@ant-design/pro-components': '3.0.0'
 };