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

package/es/descriptions/index.d.ts

@@ -9,8 +9,6 @@ export interface DescriptionsItemProps {
     className?: string;
     style?: React.CSSProperties;
     label?: React.ReactNode;
-    labelStyle?: React.CSSProperties;
-    contentStyle?: React.CSSProperties;
     children: React.ReactNode;
     span?: number;
 }

package/es/descriptions/index.js

@@ -9,8 +9,6 @@ import ProSkeleton from "../skeleton";
 import { ErrorBoundary, InlineErrorFormItem, LabelIconTip, genCopyable, getFieldPropsOrFormItemProps, stringify, useEditableMap } from "../utils";
 import useFetchData from "./useFetchData";
 
-// todo remove it
-
 /**
  * 定义列表属性的类型定义，用于定义列表的一列
  * @typedef {Object} ProDescriptionsItemProps
@@ -297,7 +295,6 @@ const ProDescriptions = props => {
     actionRef,
     onRequestError,
     emptyText,
-    contentStyle,
     ...rest
   } = props;
   const proContext = useContext(ProConfigContext);
@@ -415,8 +412,7 @@ const ProDescriptions = props => {
           ...rest,
           styles: {
             content: {
-              minWidth: 0,
-              ...(contentStyle || {})
+              minWidth: 0
             }
           },
           extra: rest.extra ? /*#__PURE__*/_jsxs(Space, {

package/es/field/components/Cascader/index.d.ts

@@ -11,7 +11,7 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     options?: (string | number | import("antd").CheckboxOptionType<any>)[] | undefined;
     radioType?: "button" | "radio" | undefined;
     placeholder?: string | undefined;
-    variant?: "outlined" | "borderless" | "filled" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | undefined;
 } & {
     text: string;
     valueEnum?: import("src/utils/typing").ProFieldValueEnumType | undefined;
@@ -19,7 +19,7 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     request?: import("src/utils/typing").ProFieldRequestData | undefined;
     params?: any;
     fieldProps?: any;
-    variant?: "outlined" | "borderless" | "filled" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | undefined;
     id?: string | undefined;
     defaultKeyWords?: string | undefined;
 } & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;

package/es/field/components/Cascader/index.js

@@ -77,25 +77,26 @@ const FieldCascader = ({
     return dom;
   }
   if (mode === 'edit') {
+    const fieldProps = rest.fieldProps || {};
     let dom = /*#__PURE__*/_jsx(Cascader, {
       variant: !light ? variant : 'borderless',
       ref: cascaderRef,
       open: open,
       suffixIcon: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : undefined,
       placeholder: placeholder || intl.getMessage('tableForm.selectPlaceholder', '请选择'),
-      allowClear: rest.fieldProps?.allowClear !== false,
-      ...rest.fieldProps,
+      allowClear: fieldProps?.allowClear !== false,
+      ...fieldProps,
       onOpenChange: isOpen => {
-        rest?.fieldProps?.onOpenChange?.(isOpen);
+        fieldProps?.onOpenChange?.(isOpen);
         setOpen(isOpen);
       },
-      className: clsx(rest.fieldProps?.className, layoutClassName),
+      className: clsx(fieldProps?.className, layoutClassName),
       options: options
     });
     if (formItemRender) {
       dom = formItemRender(rest.text, {
         mode,
-        ...rest.fieldProps,
+        ...fieldProps,
         options,
         loading
       }, dom) ?? null;
@@ -104,7 +105,7 @@ const FieldCascader = ({
       const {
         disabled,
         value
-      } = rest.fieldProps;
+      } = fieldProps;
       const notEmpty = !!value && value?.length !== 0;
       return /*#__PURE__*/_jsx(FieldLabel, {
         label: label,
@@ -118,7 +119,7 @@ const FieldCascader = ({
         downIcon: notEmpty || open ? false : undefined,
         onClick: () => {
           setOpen(true);
-          rest?.fieldProps?.onOpenChange?.(true);
+          fieldProps?.onOpenChange?.(true);
         }
       });
     }

package/es/field/components/Checkbox/index.d.ts

@@ -15,7 +15,7 @@ declare const _default: React.ForwardRefExoticComponent<import("src/provider").B
     request?: import("src/utils/typing").ProFieldRequestData | undefined;
     params?: any;
     fieldProps?: any;
-    variant?: "outlined" | "borderless" | "filled" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | undefined;
     id?: string | undefined;
     defaultKeyWords?: string | undefined;
 } & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;

package/es/field/components/ColorPicker/index.d.ts

@@ -2,6 +2,6 @@ import type { ColorPickerProps } from 'antd';
 import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("src/provider").BaseProFieldFC & import("src/provider").ProRenderFieldPropsType & {
     text: string;
-    mode?: "read" | "edit" | "update" | undefined;
+    mode?: "update" | "read" | "edit" | undefined;
 } & Partial<Omit<ColorPickerProps, "value" | "mode">> & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/DatePicker/index.d.ts

@@ -4,7 +4,7 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     text: string | number;
     format?: string | undefined;
     showTime?: boolean | undefined;
-    variant?: "outlined" | "borderless" | "filled" | "underlined" | undefined;
-    picker?: "date" | "month" | "time" | "week" | "quarter" | "year" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
+    picker?: "time" | "date" | "month" | "week" | "year" | "quarter" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Percent/util.d.ts

@@ -1,7 +1,7 @@
 /** 获取展示符号 */
 export declare function getSymbolByRealValue(realValue: number): "-" | "+" | null;
 /** 获取颜色 */
-export declare function getColorByRealValue(realValue: number /** ,color: string */): "#52c41a" | "#595959" | "#ff4d4f";
+export declare function getColorByRealValue(realValue: number /** ,color: string */): "#595959" | "#52c41a" | "#ff4d4f";
 /** 获取到最后展示的数字 */
 export declare function getRealTextWithPrecision(realValue: number, precision?: number): string | number;
 /**

package/es/field/components/Radio/index.d.ts

@@ -15,7 +15,7 @@ declare const _default: React.ForwardRefExoticComponent<import("src/provider").B
     request?: import("src/utils/typing").ProFieldRequestData | undefined;
     params?: any;
     fieldProps?: any;
-    variant?: "outlined" | "borderless" | "filled" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | undefined;
     id?: string | undefined;
     defaultKeyWords?: string | undefined;
 } & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;

package/es/field/components/RangePicker/index.d.ts

@@ -3,8 +3,8 @@ import type { ProFieldLightProps } from '../../PureProField';
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: string[];
     format?: string | undefined;
-    variant?: "outlined" | "borderless" | "filled" | "underlined" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
     showTime?: boolean | undefined;
-    picker?: "date" | "month" | "time" | "week" | "quarter" | "year" | undefined;
+    picker?: "time" | "date" | "month" | "week" | "year" | "quarter" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Segmented/index.d.ts

@@ -9,7 +9,7 @@ declare const _default: React.ForwardRefExoticComponent<import("src/provider").B
     request?: import("src/utils/typing").ProFieldRequestData | undefined;
     params?: any;
     fieldProps?: any;
-    variant?: "outlined" | "borderless" | "filled" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | undefined;
     id?: string | undefined;
     defaultKeyWords?: string | undefined;
 } & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;

package/es/field/components/Select/LightSelect/index.d.ts

@@ -30,6 +30,6 @@ declare const _default: React.ForwardRefExoticComponent<SelectProps<any, import(
      */
     fetchDataOnSearch?: boolean | undefined;
     /** 变体类型 */
-    variant?: "outlined" | "borderless" | "filled" | "underlined" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
 } & ProFieldLightProps & SelectProps<any, import("antd/es/select").DefaultOptionType> & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Select/index.d.ts

@@ -43,9 +43,9 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     params?: any;
     /** 组件的全局设置 */
     fieldProps?: any;
-    variant?: "outlined" | "borderless" | "filled" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | undefined;
     id?: string | undefined;
     /** 默认搜素条件 */
     defaultKeyWords?: string | undefined;
-} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "style" | "className" | "fieldNames"> & React.RefAttributes<any>>;
+} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "className" | "style" | "fieldNames"> & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Select/index.js

@@ -182,10 +182,8 @@ export const useFieldFetchData = props => {
     keyWords: kw
   }, props), {
     revalidateIfStale: !cacheForSwr,
-    // 打开 cacheForSwr 的时候才应该支持两个功能
     revalidateOnReconnect: cacheForSwr,
     shouldRetryOnError: false,
-    // @todo 这个功能感觉应该搞个API出来
     revalidateOnFocus: false
   });
   const resOptions = useMemo(() => {

package/es/field/components/Switch/index.d.ts

@@ -3,6 +3,6 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: boolean;
     fieldProps?: SwitchProps | undefined;
-    variant?: "outlined" | "borderless" | "filled" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | undefined;
 } & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/TreeSelect/index.d.ts

@@ -17,7 +17,7 @@ export type TreeSelectFieldProps = TreeSelectProps<any> & {
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     options?: (string | number | import("antd").CheckboxOptionType<any>)[] | undefined;
     radioType?: "button" | "radio" | undefined;
-    variant?: "outlined" | "borderless" | "filled" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | undefined;
 } & {
     text: string;
     valueEnum?: import("src/utils/typing").ProFieldValueEnumType | undefined;
@@ -25,7 +25,7 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     request?: import("src/utils/typing").ProFieldRequestData | undefined;
     params?: any;
     fieldProps?: any;
-    variant?: "outlined" | "borderless" | "filled" | undefined;
+    variant?: "outlined" | "filled" | "borderless" | undefined;
     id?: string | undefined;
     defaultKeyWords?: string | undefined;
 } & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;

package/es/form/components/DateRangePicker/DateTimeRangePicker.d.ts

@@ -1,4 +1,4 @@
-import { RangePickerProps } from 'antd/lib/date-picker';
+import type { RangePickerProps } from 'antd/lib/date-picker';
 import React from 'react';
 import type { ProFormFieldItemProps } from '../../typing';
 /**

package/es/form/components/Digit/DigitRange.d.ts

@@ -13,7 +13,7 @@ export type ProFormDigitRangeProps = ProFormFieldItemProps<RangeInputNumberProps
     separatorWidth?: number;
 };
 declare const ForwardRefProFormDigit: React.ForwardRefExoticComponent<{
-    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "value" | "defaultValue" | "onChange" | "placeholder"> & {
+    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "defaultValue" | "onChange" | "value" | "placeholder"> & {
         value?: ValuePair | undefined;
         defaultValue?: ValuePair | undefined;
         onChange?: ((value?: ValuePair) => void) | undefined;

package/es/form/layouts/ProForm/index.d.ts

@@ -14,7 +14,7 @@ declare namespace ProForm {
     var Provider: React.FC<import("antd/es/form/context").FormProviderProps>;
     var useFormInstance: typeof import("antd/es/form/hooks/useFormInstance").default;
     var EditOrReadOnlyContext: React.Context<{
-        mode: "read" | "edit" | "update";
+        mode: "update" | "read" | "edit";
     }>;
 }
 export { ProForm };

package/es/layout/components/SiderMenu/BaseMenu.js

@@ -8,8 +8,6 @@ import { isImg, isUrl } from "../../../utils";
 import { defaultSettings } from "../../defaultSettings";
 import { getOpenKeysFromMenuData } from "../../utils/utils";
 import { useStyle } from "./style/menu";
-
-// todo
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";

package/es/list/ListView.js

@@ -1,11 +1,11 @@
 import { get } from '@rc-component/util';
 import { ConfigProvider, List } from 'antd';
-import useLazyKVMap from 'antd/lib/table/hooks/useLazyKVMap';
-import usePagination from 'antd/lib/table/hooks/usePagination';
-import useSelection from 'antd/lib/table/hooks/useSelection';
 import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { ProProvider } from "../provider";
+import useLazyKVMap from "../utils/useLazyKVMap";
+import usePagination from "../utils/usePagination";
+import useSelection from "../utils/useSelection";
 import { PRO_LIST_KEYS_MAP } from "./constants";
 import ProListItem from "./Item";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/provider/index.js

@@ -1,6 +1,6 @@
 import { useCacheToken } from '@ant-design/cssinjs';
 import { ConfigProvider as AntdConfigProvider, theme as antdTheme } from 'antd';
-import zh_CN from 'antd/lib/locale/zh_CN';
+import zh_CN from 'antd/es/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import React, { useContext, useEffect, useMemo } from 'react';

package/es/table/Store/Provide.d.ts

@@ -13,7 +13,6 @@ export type ColumnsState = {
 };
 export type ProTableColumn<T> = ColumnsState & TableColumnType<T>;
 export type UseContainerProps<T = any> = {
-    onColumnsStateChange?: (map: Record<string, ColumnsState>) => void;
     size?: DensitySize;
     defaultSize?: DensitySize;
     onSizeChange?: (size: DensitySize) => void;

package/es/table/Store/Provide.js

@@ -69,7 +69,7 @@ function useContainer(props = {}) {
     }
     return props.columnsState?.value || props.columnsState?.defaultValue || defaultColumnKeyMap;
   }, props.columnsState?.value);
-  const onColumnsMapChange = props.columnsState?.onChange || props.onColumnsStateChange;
+  const onColumnsMapChange = props.columnsState?.onChange;
   const setColumnsMap = useCallback(updater => {
     setColumnsMapInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;

package/es/table/Table.js

@@ -786,7 +786,6 @@ const ProviderTableContainer = props => {
       ...props,
       columnsState: props.columnsState,
       columns: props.columns,
-      onColumnsStateChange: props.onColumnsStateChange,
       onSizeChange: props.onSizeChange,
       size: props.size,
       defaultSize: props.defaultSize

package/es/table/typing.d.ts

@@ -162,10 +162,6 @@ export type ProTableProps<DataSource, U, ValueType = 'text'> = {
     params?: U;
     /** @name 列状态的配置，可以用来操作列功能 */
     columnsState?: ColumnStateType;
-    /**
-     * @deprecated 请使用 columnsState.onChange。保留兼容，后续版本将移除。
-     */
-    onColumnsStateChange?: (map: Record<string, ColumnsState>) => void;
     onSizeChange?: (size: DensitySize) => void;
     /**
      * @name table 外面卡片的设置

package/es/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/es/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/es/table/utils/columnRender.js

@@ -17,10 +17,7 @@ export 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__*/_jsx(LabelIconTip, {
-      label: null,
-      tooltip: item.tooltip
-    }));
+    return title(item, 'table', null);
   }
   return /*#__PURE__*/_jsx(LabelIconTip, {
     label: title,

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

@@ -170,12 +170,6 @@ export const isLocalFilter = (filters, onFilter) => {
   return !!filters && !!onFilter;
 };
 
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalFilter` instead
- */
-export const isLocaleFilter = isLocalFilter;
-
 /**
  * 判断是否为本地排序
  * @param sorter 排序配置
@@ -185,12 +179,6 @@ export const isLocalSorter = sorter => {
   return typeof sorter === 'function' || typeof sorter === 'object' && typeof sorter.compare === 'function';
 };
 
-/**
- * @deprecated typo kept for backward compatibility
- * use `isLocalSorter` instead
- */
-export const isLocaleSorter = isLocalSorter;
-
 /**
  * 获取服务端筛选数据
  * @param filters 筛选数据

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

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */import { LoadingOutlined } from '@ant-design/icons';
 import { get, warning as rcWarning, set, useControlledState } from '@rc-component/util';
 import { Form, Popconfirm, message } from 'antd';
-import useLazyKVMap from 'antd/lib/table/hooks/useLazyKVMap';
 import React, { createRef, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useDebounceFn, useRefFunction } from '..';
 import { useIntl } from "../../provider";
@@ -9,6 +8,7 @@ import { ProFormContext } from "../components/ProFormContext";
 import { useDeepCompareEffectDebounce } from "../hooks/useDeepCompareEffect";
 import { usePrevious } from "../hooks/usePrevious";
 import { merge } from "../merge";
+import useLazyKVMap from "../useLazyKVMap";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const {

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

@@ -0,0 +1,28 @@
+import { useRef } from 'react';
+const useLazyKVMap = (data, childrenColumnName, getRowKey) => {
+  const mapCacheRef = 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];
+};
+export default useLazyKVMap;

package/es/utils/useMediaQuery/index.js

@@ -1,33 +1,38 @@
+import { theme } from 'antd';
 import { useEffect, useState } from 'react';
 import useMediaQuery from "./query";
+const {
+  getDesignToken
+} = theme;
+const token = getDesignToken();
 export const MediaQueryEnum = {
   xs: {
-    maxWidth: 575,
-    matchMedia: '(max-width: 575px)'
+    maxWidth: token.screenXSMax,
+    matchMedia: `(max-width: ${token.screenXSMax}px)`
   },
   sm: {
-    minWidth: 576,
-    maxWidth: 767,
-    matchMedia: '(min-width: 576px) and (max-width: 767px)'
+    minWidth: token.screenSMMin,
+    maxWidth: token.screenSMMax,
+    matchMedia: `(min-width: ${token.screenSMMin}px) and (max-width: ${token.screenSMMax}px)`
   },
   md: {
-    minWidth: 768,
-    maxWidth: 991,
-    matchMedia: '(min-width: 768px) and (max-width: 991px)'
+    minWidth: token.screenMDMin,
+    maxWidth: token.screenMDMax,
+    matchMedia: `(min-width: ${token.screenMDMin}px) and (max-width: ${token.screenMDMax}px)`
   },
   lg: {
-    minWidth: 992,
-    maxWidth: 1199,
-    matchMedia: '(min-width: 992px) and (max-width: 1199px)'
+    minWidth: token.screenLGMin,
+    maxWidth: token.screenLGMax,
+    matchMedia: `(min-width: ${token.screenLGMin}px) and (max-width: ${token.screenLGMax}px)`
   },
   xl: {
-    minWidth: 1200,
-    maxWidth: 1599,
-    matchMedia: '(min-width: 1200px) and (max-width: 1599px)'
+    minWidth: token.screenXLMin,
+    maxWidth: token.screenXLMax,
+    matchMedia: `(min-width: ${token.screenXLMin}px) and (max-width: ${token.screenXLMax}px)`
   },
   xxl: {
-    minWidth: 1600,
-    matchMedia: '(min-width: 1600px)'
+    minWidth: token.screenXXLMin,
+    matchMedia: `(min-width: ${token.screenXXLMin}px)`
   }
 };
 /**

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

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+export const DEFAULT_PAGE_SIZE = 10;
+function extendsObject(base, override, extra = {}) {
+  return {
+    ...base,
+    ...override,
+    ...extra
+  };
+}
+export 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] = 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];
+}
+export default usePagination;