@ant-design/pro-components 3.1.0-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,9 +1,4 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-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 '..';
@@ -14,7 +9,7 @@ import { defaultActionRender, recordKeyToString } from "../useEditableArray";
  * 显示警告信息
  * @param messageStr
  */
-var warning = function warning(messageStr) {
+const warning = messageStr => {
   return message.warning(messageStr);
 };
 /**
@@ -23,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 用于维护编辑的状态
@@ -37,50 +36,45 @@ 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.map(function (key) {
-      return String(key);
-    }));
+  const editableKeysSet = useMemo(() => {
+    const keys = editableType === 'single' ? editableKeys?.slice(0, 1) || [] : editableKeys || [];
+    return new Set(keys.map(key => String(key)));
   }, [editableKeys, editableType]);
 
   /**
    * 检查 key 是否在编辑列表中
    * 使用 editableKeysSet 进行快速查找，性能更好
    */
-  var checkKeyInEditableList = useRefFunction(function (recordKey) {
-    var keyStr = String(recordKeyToString(recordKey));
+  const checkKeyInEditableList = useRefFunction(recordKey => {
+    const keyStr = String(recordKeyToString(recordKey));
     return editableKeysSet.has(keyStr);
   });
 
   /** 这行是不是编辑状态 */
-  var isEditable = useCallback(function (recordKey) {
+  const isEditable = useCallback(recordKey => {
     return checkKeyInEditableList(recordKey);
   }, [checkKeyInEditableList]);
 
   /**
    * 验证是否可以开始编辑
    */
-  var validateCanStartEdit = useRefFunction(function () {
+  const validateCanStartEdit = useRefFunction(() => {
     // 如果是单行模式，检查是否已有编辑中的行
     if (editableType === 'single' && editableKeys && editableKeys.length > 0) {
       warning(props.onlyOneLineEditorAlertMessage || intl.getMessage('editableTable.onlyOneLineEditor', '只能同时编辑一行'));
@@ -95,13 +89,12 @@ export function useEditableMap(props) {
    * @param recordKey
    * @param recordValue
    */
-  var startEditable = useRefFunction(function (recordKey, recordValue) {
-    var _ref2;
+  const startEditable = useRefFunction((recordKey, recordValue) => {
     // 验证是否可以开始编辑
     if (!validateCanStartEdit()) {
       return false;
     }
-    var keyStr = String(recordKeyToString(recordKey));
+    const keyStr = String(recordKeyToString(recordKey));
 
     // 检查是否已经在编辑列表中，避免重复添加
     if (checkKeyInEditableList(recordKey)) {
@@ -109,10 +102,11 @@ export function useEditableMap(props) {
     }
 
     // 保存编辑前的数据
-    preEditRowRef.current = (_ref2 = recordValue !== null && recordValue !== void 0 ? recordValue : get(props.dataSource, Array.isArray(recordKey) ? recordKey : [recordKey])) !== null && _ref2 !== void 0 ? _ref2 : null;
+    preEditRowRef.current = recordValue ?? get(props.dataSource, Array.isArray(recordKey) ? recordKey : [recordKey]) ?? null;
+    preEditRowRefs.current.set(String(recordKeyToString(recordKey)), preEditRowRef.current);
 
     // 更新编辑 keys（不直接修改 editableKeysSet）
-    var newKeys = editableType === 'single' ? [keyStr] : [].concat(_toConsumableArray(editableKeys || []), [keyStr]);
+    const newKeys = editableType === 'single' ? [keyStr] : [...(editableKeys || []), keyStr];
     setEditableRowKeys(newKeys);
     return true;
   });
@@ -122,8 +116,8 @@ export function useEditableMap(props) {
    *
    * @param recordKey
    */
-  var cancelEditable = useRefFunction(function (recordKey) {
-    var keyStr = String(recordKeyToString(recordKey));
+  const cancelEditable = useRefFunction(recordKey => {
+    const keyStr = String(recordKeyToString(recordKey));
 
     // 检查是否在编辑列表中
     if (!checkKeyInEditableList(recordKey)) {
@@ -131,9 +125,7 @@ export function useEditableMap(props) {
     }
 
     // 更新编辑 keys（不直接修改 editableKeysSet）
-    var newKeys = (editableKeys || []).filter(function (key) {
-      return String(key) !== keyStr;
-    });
+    const newKeys = (editableKeys || []).filter(key => String(key) !== keyStr);
     setEditableRowKeys(newKeys);
     return true;
   });
@@ -141,100 +133,62 @@ export function useEditableMap(props) {
   /**
    * 取消编辑的回调
    */
-  var onCancel = useRefFunction( /*#__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 (_x, _x2, _x3, _x4) {
-      return _ref3.apply(this, arguments);
-    };
-  }());
+  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 onSave = useRefFunction( /*#__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 (_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', '取消');
+    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', '取消');
 
   /**
    * 渲染操作按钮
    */
-  var actionRender = useCallback(function (key, config) {
-    var renderConfig = _objectSpread({
+  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,
@@ -245,11 +199,11 @@ export function useEditableMap(props) {
     return [renderResult.save, renderResult.delete, renderResult.cancel];
   }, [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,31 +1,21 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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];
+  const isSsr = typeof window === 'undefined';
+  const [matches, setMatches] = useState(() => isSsr ? false : window.matchMedia(mediaQuery).matches);
 
   // 在 SSR 环境中使用 useEffect，在客户端使用 useLayoutEffect
   // 这样可以避免 SSR 警告，同时在客户端保持同步更新
   // 使用条件表达式确保 hooks 调用顺序一致
-  var EffectHook = isSsr ? useEffect : useLayoutEffect;
-  EffectHook(function () {
+  const EffectHook = isSsr ? useEffect : useLayoutEffect;
+  EffectHook(() => {
     if (isSsr) {
       return;
     }
-    var mediaQueryList = window.matchMedia(mediaQuery);
-    var listener = function listener(e) {
-      return setMatches(e.matches);
-    };
+    const mediaQueryList = window.matchMedia(mediaQuery);
+    const listener = e => setMatches(e.matches);
     // 使用最新的 addEventListener API
     mediaQueryList.addEventListener('change', listener);
-    return function () {
-      return mediaQueryList.removeEventListener('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,22 +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)({
-    styles: {
-      body: {
-        padding: 0
-      }
+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
   }));
 };