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

package/es/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/es/utils/useEditableMap/index.js

@@ -1,10 +1,7 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-/* eslint-disable react-hooks/exhaustive-deps */import { get, useMergedState } from '@rc-component/util';
+/* eslint-disable react-hooks/exhaustive-deps */import { get, useControlledState } from '@rc-component/util';
 import { message } from 'antd';
 import { useCallback, useMemo, useRef } from 'react';
+import { useRefFunction } from '..';
 import { useIntl } from "../../provider";
 import { defaultActionRender, recordKeyToString } from "../useEditableArray";
 
@@ -12,7 +9,7 @@ import { defaultActionRender, recordKeyToString } from "../useEditableArray";
  * 显示警告信息
  * @param messageStr
  */
-var warning = function warning(messageStr) {
+const warning = messageStr => {
   return message.warning(messageStr);
 };
 /**
@@ -21,10 +18,14 @@ var warning = function warning(messageStr) {
  * @param params
  * @param action
  */
-function editableRowByKey(_ref) {
-  var data = _ref.data,
-    row = _ref.row;
-  return _objectSpread(_objectSpread({}, data), row);
+function editableRowByKey({
+  data,
+  row
+}) {
+  return {
+    ...data,
+    ...row
+  };
 }
 /**
  * 一个方便的hooks 用于维护编辑的状态
@@ -35,149 +36,159 @@ export function useEditableMap(props) {
   /**
    * 点击开始编辑之前的保存数据用的
    */
-  var preEditRowRef = useRef(null);
-  var editableType = props.type || 'single';
+  const preEditRowRef = useRef(null);
+  const preEditRowRefs = useRef(new Map());
+  const editableType = props.type || 'single';
 
   // Internationalization
-  var intl = useIntl();
-  var _useMergedState = 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 = _slicedToArray(_useMergedState, 2),
-    editableKeys = _useMergedState2[0],
-    setEditableRowKeys = _useMergedState2[1];
+  const intl = useIntl();
+  const [editableKeys, setEditableRowKeysInner] = useControlledState([], props.editableKeys);
+  const setEditableRowKeys = 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 = 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 = useMemo(() => {
+    const keys = editableType === 'single' ? editableKeys?.slice(0, 1) || [] : editableKeys || [];
+    return new Set(keys.map(key => String(key)));
+  }, [editableKeys, editableType]);
+
+  /**
+   * 检查 key 是否在编辑列表中
+   * 使用 editableKeysSet 进行快速查找，性能更好
+   */
+  const checkKeyInEditableList = useRefFunction(recordKey => {
+    const keyStr = String(recordKeyToString(recordKey));
+    return editableKeysSet.has(keyStr);
+  });
 
   /** 这行是不是编辑状态 */
-  var isEditable = useCallback(function (recordKey) {
-    if (editableKeys !== null && editableKeys !== void 0 && editableKeys.includes(recordKeyToString(recordKey))) return true;
-    return false;
-  }, [(editableKeys || []).join(',')]);
+  const isEditable = useCallback(recordKey => {
+    return checkKeyInEditableList(recordKey);
+  }, [checkKeyInEditableList]);
+
+  /**
+   * 验证是否可以开始编辑
+   */
+  const validateCanStartEdit = 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 = useRefFunction((recordKey, recordValue) => {
+    // 验证是否可以开始编辑
+    if (!validateCanStartEdit()) {
       return false;
     }
-    preEditRowRef.current = (_ref2 = recordValue !== null && recordValue !== void 0 ? recordValue : get(props.dataSource, Array.isArray(recordKey) ? recordKey : [recordKey])) !== null && _ref2 !== void 0 ? _ref2 : null;
-    editableKeysSet.add(recordKeyToString(recordKey));
-    setEditableRowKeys(Array.from(editableKeysSet));
+    const keyStr = String(recordKeyToString(recordKey));
+
+    // 检查是否已经在编辑列表中，避免重复添加
+    if (checkKeyInEditableList(recordKey)) {
+      return true;
+    }
+
+    // 保存编辑前的数据
+    preEditRowRef.current = recordValue ?? get(props.dataSource, Array.isArray(recordKey) ? recordKey : [recordKey]) ?? null;
+    preEditRowRefs.current.set(String(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(recordKeyToString(recordKey));
-    setEditableRowKeys(Array.from(editableKeysSet));
+  const cancelEditable = useRefFunction(recordKey => {
+    const keyStr = String(recordKeyToString(recordKey));
+
+    // 检查是否在编辑列表中
+    if (!checkKeyInEditableList(recordKey)) {
+      return true;
+    }
+
+    // 更新编辑 keys（不直接修改 editableKeysSet）
+    const newKeys = (editableKeys || []).filter(key => String(key) !== keyStr);
+    setEditableRowKeys(newKeys);
+    return true;
+  });
+
+  /**
+   * 取消编辑的回调
+   */
+  const onCancel = 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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(recordKey, editRow, originRow, newLine) {
-      var _props$onCancel;
-      var success;
-      return _regeneratorRuntime().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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(recordKey, editRow, originRow) {
-      var _props$onSave;
-      var success, actionProps;
-      return _regeneratorRuntime().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 = 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(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 = useCallback(function (key, config) {
-    var renderConfig = _objectSpread({
+    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 = 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 = defaultActionRender(props.dataSource, renderConfig);
+      cancelEditable,
+      onCancel,
+      onSave,
+      editableKeys,
+      setEditableRowKeys,
+      saveText,
+      cancelText,
+      preEditRowRef,
+      preEditRowRefs,
+      deleteText,
+      deletePopconfirmMessage: `${intl.getMessage('deleteThisLine', '删除此项')}?`,
+      editorType: 'Map',
+      ...config
+    };
+    const renderResult = defaultActionRender(props.dataSource, renderConfig);
     if (props.actionRender) {
       return props.actionRender(props.dataSource, renderConfig, {
         save: renderResult.save,
@@ -186,13 +197,13 @@ export 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/es/utils/useMediaQuery/index.js

@@ -1,7 +1,6 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useEffect, useState } from 'react';
 import useMediaQuery from "./query";
-export var MediaQueryEnum = {
+export const MediaQueryEnum = {
   xs: {
     maxWidth: 575,
     matchMedia: '(max-width: 575px)'
@@ -37,14 +36,16 @@ export var MediaQueryEnum = {
  * `Rendered more hooks than during the previous render.`
  * So should use Array.forEach
  */
-export var getScreenClassName = function getScreenClassName() {
-  var queryKey = undefined;
+export 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;
     }
@@ -53,18 +54,15 @@ export var getScreenClassName = function getScreenClassName() {
   queryKey = mediaQueryKey;
   return queryKey;
 };
-var useBreakpoint = function useBreakpoint() {
-  var isMd = useMediaQuery(MediaQueryEnum.md.matchMedia);
-  var isLg = useMediaQuery(MediaQueryEnum.lg.matchMedia);
-  var isXxl = useMediaQuery(MediaQueryEnum.xxl.matchMedia);
-  var isXl = useMediaQuery(MediaQueryEnum.xl.matchMedia);
-  var isSm = useMediaQuery(MediaQueryEnum.sm.matchMedia);
-  var isXs = useMediaQuery(MediaQueryEnum.xs.matchMedia);
-  var _useState = useState(getScreenClassName()),
-    _useState2 = _slicedToArray(_useState, 2),
-    colSpan = _useState2[0],
-    setColSpan = _useState2[1];
-  useEffect(function () {
+const useBreakpoint = () => {
+  const isMd = useMediaQuery(MediaQueryEnum.md.matchMedia);
+  const isLg = useMediaQuery(MediaQueryEnum.lg.matchMedia);
+  const isXxl = useMediaQuery(MediaQueryEnum.xxl.matchMedia);
+  const isXl = useMediaQuery(MediaQueryEnum.xl.matchMedia);
+  const isSm = useMediaQuery(MediaQueryEnum.sm.matchMedia);
+  const isXs = useMediaQuery(MediaQueryEnum.xs.matchMedia);
+  const [colSpan, setColSpan] = useState(getScreenClassName());
+  useEffect(() => {
     if (process.env.NODE_ENV === 'TEST') {
       setColSpan(process.env.USE_MEDIA || 'md');
       return;

package/es/utils/useMediaQuery/query.js

@@ -1,25 +1,21 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 export default function useMediaQuery(mediaQuery) {
-  var isSsr = typeof window === 'undefined';
-  var _useState = useState(function () {
-      return isSsr ? false : window.matchMedia(mediaQuery).matches;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    matches = _useState2[0],
-    setMatches = _useState2[1];
-  useLayoutEffect(function () {
+  const isSsr = typeof window === 'undefined';
+  const [matches, setMatches] = useState(() => isSsr ? false : window.matchMedia(mediaQuery).matches);
+
+  // 在 SSR 环境中使用 useEffect，在客户端使用 useLayoutEffect
+  // 这样可以避免 SSR 警告，同时在客户端保持同步更新
+  // 使用条件表达式确保 hooks 调用顺序一致
+  const EffectHook = isSsr ? useEffect : 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/es/version.js

@@ -1,3 +1,3 @@
-export var version = {
+export const version = {
   '@ant-design/pro-components': '3.0.0'
 };

package/lib/card/ProCard.js

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _Card = _interopRequireDefault(require("./components/Card"));
 var _Divider = _interopRequireDefault(require("./components/Divider"));
 var _jsxRuntime = require("react/jsx-runtime");
-var Group = function Group(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, (0, _objectSpread2.default)({
-    bodyStyle: {
+const Group = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+  styles: {
+    body: {
       padding: 0
     }
-  }, props));
-};
+  },
+  ...props
+});
 
 // 当前不对底层 Card 做封装，仅挂载子组件，直接导出
-var ProCard = _Card.default;
+const ProCard = _Card.default;
 ProCard.isProCard = true;
 ProCard.Divider = _Divider.default;
 ProCard.Group = Group;

package/lib/card/components/Actions/index.js

@@ -5,38 +5,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _style = _interopRequireDefault(require("./style"));
 var _jsxRuntime = require("react/jsx-runtime");
-var ProCardActions = function ProCardActions(props) {
-  var actions = props.actions,
-    prefixCls = props.prefixCls;
-  var _useStyle = (0, _style.default)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  if (Array.isArray(actions) && actions !== null && actions !== void 0 && actions.length) {
+const ProCardActions = props => {
+  const {
+    actions,
+    prefixCls
+  } = props;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.default)(prefixCls);
+  if (Array.isArray(actions) && actions?.length) {
     return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-actions"), hashId),
-      children: actions.map(function (action, index) {
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line react/no-array-index-key
-          (0, _jsxRuntime.jsx)("li", {
-            style: {
-              width: "".concat(100 / actions.length, "%"),
-              padding: 0,
-              margin: 0
-            },
-            className: (0, _classnames.default)("".concat(prefixCls, "-actions-item"), hashId),
-            children: action
-          }, "action-".concat(index))
-        );
-      })
+      className: (0, _clsx.clsx)(`${prefixCls}-actions`, hashId),
+      children: actions.map((action, index) =>
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      (0, _jsxRuntime.jsx)("li", {
+        style: {
+          width: `${100 / actions.length}%`,
+          padding: 0,
+          margin: 0
+        },
+        className: (0, _clsx.clsx)(`${prefixCls}-actions-item`, hashId),
+        children: action
+      }, `action-${index}`))
     }));
   }
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-actions"), hashId),
+    className: (0, _clsx.clsx)(`${prefixCls}-actions`, hashId),
     children: actions
   }));
 };

package/lib/card/components/Actions/style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export default function useStyle(prefixCls?: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };