@ant-design/pro-components 3.1.1-1 → 3.1.3-0

package/lib/table/useFetchData.js

@@ -66,13 +66,27 @@ const useFetchData = (getData, defaultData, options) => {
    */
   const tableLoadingValue = typeof options?.loading === 'object' ? options?.loading?.spinning : options?.loading;
   const [tableLoading, setTableLoadingInner] = (0, _util.useControlledState)(false, tableLoadingValue);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onLoadingChange = (0, _utils.useRefFunction)(loading => {
+    options?.onLoadingChange?.(loading);
+  });
+
+  /**
+   * 包装 setTableLoading，使用 queueMicrotask 延迟回调调用
+   * 避免在渲染阶段调用外部回调导致的 React 警告
+   */
   const setTableLoading = (0, _react.useCallback)(updater => {
     setTableLoadingInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      options?.onLoadingChange?.(next);
+      queueMicrotask(() => {
+        onLoadingChange(next);
+      });
       return next;
     });
-  }, [options?.onLoadingChange]);
+  }, [onLoadingChange]);
 
   /**
    * 表示页面信息的类型

package/lib/table/utils/cellRenderToFromItem.d.ts

@@ -1,4 +1,4 @@
-import { AnyObject } from 'antd/lib/_util/type';
+import type { AnyObject } from 'antd/lib/_util/type';
 import React from 'react';
 import type { ProFieldEmptyText } from '../../field';
 import type { ProFormFieldProps } from '../../form';

package/lib/table/utils/columnRender.d.ts

@@ -1,4 +1,4 @@
-import { AnyObject } from 'antd/lib/_util/type';
+import type { AnyObject } from 'antd/lib/_util/type';
 import React from 'react';
 import type { ProFieldEmptyText } from '../../field';
 import type { ProSchemaComponentTypes, UseEditableUtilType } from '../../utils';

package/lib/table/utils/columnRender.js

@@ -25,10 +25,7 @@ const renderColumnsTitle = item => {
   } = item;
   const ellipsis = typeof item?.ellipsis === 'boolean' ? item?.ellipsis : item?.ellipsis?.showTitle;
   if (title && typeof title === 'function') {
-    return title(item, 'table', /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
-      label: null,
-      tooltip: item.tooltip
-    }));
+    return title(item, 'table', null);
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
     label: title,

package/lib/table/utils/genProColumnToColumn.d.ts

@@ -1,6 +1,6 @@
 import type { TableColumnType, TableProps } from 'antd';
-import { AnyObject } from 'antd/lib/_util/type';
-import { SortOrder } from 'antd/lib/table/interface';
+import type { AnyObject } from 'antd/lib/_util/type';
+import type { SortOrder } from 'antd/lib/table/interface';
 import type { ProFieldEmptyText } from '../../field';
 import type { ProSchemaComponentTypes, UseEditableUtilType } from '../../utils';
 import type { ContainerType } from '../Store/Provide';

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

@@ -75,22 +75,12 @@ export declare const flattenColumns: (data: any[]) => any[];
  * @returns 是否为本地筛选
  */
 export declare const isLocalFilter: <T>(filters: ProColumnType<T>['filters'], onFilter: ProColumnType<T>['onFilter']) => boolean;
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalFilter` instead
- */
-export declare const isLocaleFilter: <T>(filters: ProColumnType<T>['filters'], onFilter: ProColumnType<T>['onFilter']) => boolean;
 /**
  * 判断是否为本地排序
  * @param sorter 排序配置
  * @returns 是否为本地排序
  */
 export declare const isLocalSorter: <T>(sorter: ProSorter<T>) => boolean;
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalSorter` instead
- */
-export declare const isLocaleSorter: <T>(sorter: ProSorter<T>) => boolean;
 /**
  * 获取服务端筛选数据
  * @param filters 筛选数据

package/lib/table/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isMergeCell = exports.isLocaleSorter = exports.isLocaleFilter = exports.isLocalSorter = exports.isLocalFilter = exports.isBordered = exports.getServerSorterResult = exports.getServerFilterResult = exports.genColumnKey = exports.flattenColumns = exports.checkUndefinedOrNull = void 0;
+exports.isMergeCell = exports.isLocalSorter = exports.isLocalFilter = exports.isBordered = exports.getServerSorterResult = exports.getServerFilterResult = exports.genColumnKey = exports.flattenColumns = exports.checkUndefinedOrNull = void 0;
 exports.mergePagination = mergePagination;
 exports.parseServerDefaultColumnConfig = exports.parseProSortOrder = exports.parseProFilteredValue = exports.parseDataIndex = void 0;
 exports.postDataPipeline = postDataPipeline;
@@ -186,35 +186,23 @@ const isLocalFilter = (filters, onFilter) => {
   return !!filters && !!onFilter;
 };
 
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalFilter` instead
- */
-exports.isLocalFilter = isLocalFilter;
-const isLocaleFilter = exports.isLocaleFilter = isLocalFilter;
-
 /**
  * 判断是否为本地排序
  * @param sorter 排序配置
  * @returns 是否为本地排序
  */
+exports.isLocalFilter = isLocalFilter;
 const isLocalSorter = sorter => {
   return typeof sorter === 'function' || typeof sorter === 'object' && typeof sorter.compare === 'function';
 };
 
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalSorter` instead
- */
-exports.isLocalSorter = isLocalSorter;
-const isLocaleSorter = exports.isLocaleSorter = isLocalSorter;
-
 /**
  * 获取服务端筛选数据
  * @param filters 筛选数据
  * @param columns 列配置
  * @returns 服务端筛选数据
  */
+exports.isLocalSorter = isLocalSorter;
 const getServerFilterResult = (filters, columns) => {
   // 过滤掉本地筛选的列
   return Object.entries(filters).reduce((acc, [key, value]) => {

package/lib/utils/components/FieldLabel/index.js

@@ -34,7 +34,6 @@ const FieldLabelFunction = (props, ref) => {
   } = _antd.ConfigProvider?.useConfig?.() || {
     componentSize: 'middle'
   };
-  const size = componentSize;
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
@@ -119,10 +118,11 @@ const FieldLabelFunction = (props, ref) => {
     return aLabel || placeholder;
   };
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-    className: (0, _clsx.clsx)(prefixCls, hashId, `${prefixCls}-${props.size ?? size ?? 'middle'}`, {
+    className: (0, _clsx.clsx)(prefixCls, hashId, `${prefixCls}-${props.size ?? componentSize ?? 'middle'}`, {
+      [`${prefixCls}-${variant || 'borderless'}-active`]: (Array.isArray(value) ? value.length > 0 : !!value) || value === 0,
       [`${prefixCls}-active`]: (Array.isArray(value) ? value.length > 0 : !!value) || value === 0,
       [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-bordered`]: variant !== 'borderless',
+      [`${prefixCls}-outlined`]: variant === 'outlined',
       [`${prefixCls}-allow-clear`]: allowClear
     }, className),
     style: style,

package/lib/utils/components/FieldLabel/style.js

@@ -16,7 +16,8 @@ const genProStyle = token => {
       paddingInline: 8,
       fontSize: token.fontSize,
       lineHeight: '30px',
-      borderRadius: '2px',
+      borderRadius: token.borderRadius,
+      cornerShape: 'squircle',
       cursor: 'pointer',
       '&:hover': {
         backgroundColor: token.colorBgTextHover
@@ -24,7 +25,6 @@ const genProStyle = token => {
       '&-active': {
         paddingBlock: 0,
         paddingInline: 8,
-        backgroundColor: token.colorBgTextHover,
         [`&${token.componentCls}-allow-clear:hover:not(${token.componentCls}-disabled)`]: {
           [`${token.componentCls}-arrow`]: {
             display: 'none'
@@ -89,12 +89,31 @@ const genProStyle = token => {
           fontSize: '6px'
         }
       },
-      '&-bordered': {
+      '&-outlined': {
         height: '32px',
         paddingBlock: 0,
         paddingInline: 8,
         border: `${token.lineWidth}px solid ${token.colorBorder}`,
-        borderRadius: '@border-radius-base'
+        borderRadius: token.borderRadius,
+        '&-active': {
+          backgroundColor: 'none'
+        }
+      },
+      '&-borderless': {
+        height: '32px',
+        '&-active': {
+          backgroundColor: token.colorBgTextHover
+        }
+      },
+      '&-filled': {
+        height: '32px',
+        paddingBlock: 0,
+        paddingInline: 8,
+        border: 'none',
+        borderRadius: token.borderRadius,
+        '&-active': {
+          backgroundColor: token.colorBgContainer
+        }
       },
       '&-bordered&-small': {
         height: '24px',

package/lib/utils/components/FilterDropdown/index.js

@@ -67,7 +67,7 @@ const FilterDropdown = props => {
       })]
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: `${prefixCls}-label ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-label`, hashId),
       children: label
     })
   }));

package/lib/utils/components/FilterDropdown/style.js

@@ -10,6 +10,16 @@ const genProStyle = token => {
     [`${token.componentCls}-label`]: {
       cursor: 'pointer'
     },
+    [`${token.componentCls}-label-bordered`]: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      height: token.controlHeight,
+      paddingBlock: 0,
+      paddingInline: token.paddingSM,
+      border: `${token.lineWidth}px solid ${token.colorBorder}`,
+      borderRadius: token.borderRadius,
+      boxSizing: 'border-box'
+    },
     [`${token.componentCls}-overlay`]: {
       minWidth: '200px',
       marginBlockStart: '4px'

package/lib/utils/pickProProps/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pickProProps = pickProProps;
-const proFieldProps = `valueType request plain formItemRender render text formItemProps valueEnum`;
+const proFieldProps = `valueType request formItemRender render text formItemProps valueEnum`;
 const proFormProps = `fieldProps isDefaultDom groupProps contentRender submitterProps submitter`;
 function pickProProps(props, customValueType = false) {
   const propList = `${proFieldProps} ${proFormProps}`.split(/[\s\n]+/);

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

@@ -1,5 +1,5 @@
 import type { FormInstance, FormProps } from 'antd';
-import { AnyObject } from 'antd/lib/_util/type';
+import type { AnyObject } from 'antd/lib/_util/type';
 import type { NamePath } from 'antd/lib/form/interface';
 import type { GetRowKey } from 'antd/lib/table/interface';
 import React from 'react';

package/lib/utils/useEditableArray/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,7 +14,6 @@ exports.useEditableArray = useEditableArray;
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
-var _useLazyKVMap = _interopRequireDefault(require("antd/lib/table/hooks/useLazyKVMap"));
 var _react = _interopRequireWildcard(require("react"));
 var _ = require("..");
 var _provider = require("../../provider");
@@ -22,6 +21,7 @@ var _ProFormContext = require("../components/ProFormContext");
 var _useDeepCompareEffect = require("../hooks/useDeepCompareEffect");
 var _usePrevious = require("../hooks/usePrevious");
 var _merge = require("../merge");
+var _useLazyKVMap = _interopRequireDefault(require("../useLazyKVMap"));
 var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react-hooks/exhaustive-deps */
 

package/lib/utils/useLazyKVMap.d.ts

@@ -0,0 +1,5 @@
+import type { AnyObject } from 'antd/lib/_util/type';
+import type { GetRowKey } from 'antd/lib/table/interface';
+import React from 'react';
+declare const useLazyKVMap: <RecordType extends AnyObject = AnyObject>(data: readonly RecordType[], childrenColumnName: string, getRowKey: GetRowKey<RecordType>) => readonly [(key: React.Key) => RecordType | undefined];
+export default useLazyKVMap;

package/lib/utils/useLazyKVMap.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useLazyKVMap = (data, childrenColumnName, getRowKey) => {
+  const mapCacheRef = (0, _react.useRef)({});
+  function getRecordByKey(key) {
+    function dig(records, kv) {
+      records.forEach((record, index) => {
+        const rowKey = getRowKey(record, index);
+        kv.set(rowKey, record);
+        if (record && typeof record === 'object' && childrenColumnName in record) {
+          dig(record[childrenColumnName] || [], kv);
+        }
+      });
+    }
+    if (!mapCacheRef.current || mapCacheRef.current.data !== data || mapCacheRef.current.childrenColumnName !== childrenColumnName || mapCacheRef.current.getRowKey !== getRowKey) {
+      const kvMap = new Map();
+      dig(data, kvMap);
+      mapCacheRef.current = {
+        data,
+        childrenColumnName,
+        kvMap,
+        getRowKey
+      };
+    }
+    return mapCacheRef.current.kvMap?.get(key);
+  }
+  return [getRecordByKey];
+};
+var _default = exports.default = useLazyKVMap;

package/lib/utils/usePagination.d.ts

@@ -0,0 +1,8 @@
+import type { TablePaginationConfig } from 'antd/es/table/interface';
+export declare const DEFAULT_PAGE_SIZE = 10;
+export declare function getPaginationParam(mergedPagination: TablePaginationConfig, pagination?: TablePaginationConfig | boolean): any;
+declare function usePagination(total: number, onChange: (current: number, pageSize: number) => void, pagination?: TablePaginationConfig | false): readonly [
+    TablePaginationConfig,
+    (current?: number, pageSize?: number) => void
+];
+export default usePagination;

package/lib/utils/usePagination.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_PAGE_SIZE = void 0;
+exports.getPaginationParam = getPaginationParam;
+var _react = require("react");
+const DEFAULT_PAGE_SIZE = exports.DEFAULT_PAGE_SIZE = 10;
+function extendsObject(base, override, extra = {}) {
+  return {
+    ...base,
+    ...override,
+    ...extra
+  };
+}
+function getPaginationParam(mergedPagination, pagination) {
+  const param = {
+    current: mergedPagination.current,
+    pageSize: mergedPagination.pageSize
+  };
+  const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
+  Object.keys(paginationObj).forEach(pageProp => {
+    const value = mergedPagination[pageProp];
+    if (typeof value !== 'function') {
+      param[pageProp] = value;
+    }
+  });
+  return param;
+}
+function usePagination(total, onChange, pagination) {
+  const {
+    total: paginationTotal = 0,
+    ...paginationObj
+  } = pagination && typeof pagination === 'object' ? pagination : {};
+  const [innerPagination, setInnerPagination] = (0, _react.useState)(() => ({
+    current: 'defaultCurrent' in paginationObj ? paginationObj.defaultCurrent : 1,
+    pageSize: 'defaultPageSize' in paginationObj ? paginationObj.defaultPageSize : DEFAULT_PAGE_SIZE
+  }));
+
+  // ============ Basic Pagination Config ============
+  const mergedPagination = extendsObject(innerPagination, paginationObj, {
+    total: paginationTotal > 0 ? paginationTotal : total
+  });
+
+  // Reset `current` if data length or pageSize changed
+  const pageSize = mergedPagination.pageSize || DEFAULT_PAGE_SIZE;
+  const maxPage = Math.ceil((paginationTotal || total) / pageSize);
+  if ((mergedPagination.current || 1) > maxPage) {
+    // Prevent a maximum page count of 0
+    mergedPagination.current = maxPage || 1;
+  }
+  const refreshPagination = (current, pageSizeArg) => {
+    setInnerPagination({
+      current: current ?? 1,
+      pageSize: pageSizeArg || mergedPagination.pageSize
+    });
+  };
+  const onInternalChange = (current, pageSizeArg) => {
+    if (pagination && typeof pagination === 'object') {
+      pagination.onChange?.(current, pageSizeArg);
+    }
+    refreshPagination(current, pageSizeArg);
+    onChange(current, pageSizeArg || mergedPagination.pageSize);
+  };
+  if (pagination === false) {
+    return [{}, () => {}];
+  }
+  return [{
+    ...mergedPagination,
+    onChange: onInternalChange
+  }, refreshPagination];
+}
+var _default = exports.default = usePagination;

package/lib/utils/useSelection.d.ts

@@ -0,0 +1,19 @@
+import type { GetRowKey, TableRowSelection } from 'antd/lib/table/interface';
+import React from 'react';
+type UseSelectionConfig<RecordType> = {
+    getRowKey: GetRowKey<RecordType>;
+    getRecordByKey: (key: React.Key) => RecordType | undefined;
+    prefixCls?: string;
+    data: RecordType[];
+    pageData: RecordType[];
+    expandType?: 'row' | 'nest';
+    childrenColumnName?: string;
+    locale?: any;
+};
+declare function useSelection<RecordType>(config: UseSelectionConfig<RecordType>, rowSelection?: TableRowSelection<RecordType>): readonly [
+    (columns?: any[]) => Array<{
+        render: (text: any, record: RecordType, index: number) => React.ReactElement;
+    }>,
+    Set<React.Key>
+];
+export default useSelection;

package/lib/utils/useSelection.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function useSelection(config, rowSelection) {
+  const {
+    getRowKey,
+    data
+  } = config;
+  const controlledKeys = rowSelection?.selectedRowKeys;
+  const [innerKeys, setInnerKeys] = _react.default.useState(controlledKeys || []);
+
+  // Keep in sync with controlled keys
+  _react.default.useEffect(() => {
+    if (controlledKeys) {
+      setInnerKeys(controlledKeys);
+    }
+  }, [controlledKeys && controlledKeys.join(';')]);
+  const selectedKeySet = _react.default.useMemo(() => new Set(innerKeys), [innerKeys]);
+  const toggleKey = _react.default.useCallback((key, record, checked) => {
+    setInnerKeys(prevKeys => {
+      if (rowSelection?.type === 'radio') {
+        const nextKeys = [key];
+        const selectedRows = [record];
+        rowSelection?.onChange?.(nextKeys, selectedRows, {
+          type: 'single',
+          selectedRows,
+          selectedRowKeys: nextKeys
+        });
+        rowSelection?.onSelect?.(record, checked, selectedRows, {});
+        if (!controlledKeys) {
+          return nextKeys;
+        }
+        return prevKeys;
+      }
+      const prevSet = new Set(prevKeys);
+      const next = new Set(prevSet);
+      if (checked) {
+        next.add(key);
+      } else {
+        next.delete(key);
+      }
+      const nextKeys = Array.from(next);
+
+      // Fire callbacks similar to antd rowSelection
+      const selectedRows = data.filter((item, idx) => next.has(getRowKey(item, idx)));
+      rowSelection?.onChange?.(nextKeys, selectedRows, {
+        type: 'multiple',
+        selectedRows,
+        selectedRowKeys: nextKeys
+      });
+      rowSelection?.onSelect?.(record, checked, data.filter((item, idx) => next.has(getRowKey(item, idx))), {});
+      if (!controlledKeys) {
+        return nextKeys;
+      }
+      return prevKeys;
+    });
+  }, [data, getRowKey, rowSelection, controlledKeys]);
+  const selectItemRender = _react.default.useCallback(columns => {
+    void columns;
+    if (!rowSelection) {
+      return [];
+    }
+    return [{
+      render: (_text, record, index) => {
+        const key = getRowKey(record, index);
+        const checked = selectedKeySet.has(key);
+        if (rowSelection?.type === 'radio') {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Radio, {
+            checked: checked,
+            onChange: e => {
+              toggleKey(key, record, e.target.checked);
+            }
+          });
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Checkbox, {
+          checked: checked,
+          onChange: e => {
+            toggleKey(key, record, e.target.checked);
+          }
+        });
+      }
+    }];
+  }, [getRowKey, selectedKeySet, toggleKey, rowSelection?.type]);
+  return [selectItemRender, selectedKeySet];
+}
+var _default = exports.default = useSelection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/pro-components",
-  "version": "3.1.1-1",
+  "version": "3.1.3-0",
   "type": "module",
   "description": "All-in-one package of @ant-design/pro-components",
   "keywords": [
@@ -41,6 +41,7 @@
     "docs:preview": "pnpm docs preview",
     "docs:create": "pnpm docs create",
     "docs:check": "pnpm docs check",
+    "prepublishOnly": "pnpm run test && pnpm run build",
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx  --fix ./ && npm run tsc",
     "prettier": "prettier --write \"**/**.{js,jsx,tsx,ts,less,md,yaml,json}\" --log-level warn",
     "createRelease": "node ./scripts/createRelease.mjs",