@ant-design/pro-components 3.1.11-0 → 3.1.13-0

package/lib/provider/utils/merge.js

@@ -3,26 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.merge = void 0;
-const merge = (...rest) => {
-  const obj = {};
-  const il = rest.length;
-  let key;
-  let i = 0;
-  for (; i < il; i += 1) {
-    for (key in rest[i]) {
-      if (rest[i].hasOwnProperty(key)) {
-        if (typeof obj[key] === 'object' && typeof rest[i][key] === 'object' && obj[key] !== undefined && obj[key] !== null && !Array.isArray(obj[key]) && !Array.isArray(rest[i][key])) {
-          obj[key] = {
-            ...obj[key],
-            ...rest[i][key]
-          };
-        } else {
-          obj[key] = rest[i][key];
-        }
-      }
+exports.shallowMergeOneLevel = exports.merge = void 0;
+/**
+ * 只合并一层深的对象合并工具。
+ *
+ * 与 lodash.merge 的区别：仅对**顶层同名的普通对象**做一次 `{...a, ...b}` 展开，
+ * 再深一层的嵌套对象会被整体覆盖而不是继续递归合并。数组一律走覆盖语义。
+ *
+ * 在 ProProvider 里用来合并 token 时足够了，因为 layout token 的深合并已经
+ * 在 `getLayoutDesignToken` 里提前做过。
+ *
+ * @example
+ *   shallowMergeOneLevel({ a: { x: 1 } }, { a: { y: 2 } })
+ *   // => { a: { x: 1, y: 2 } }  ← 顶层对象合并
+ *
+ *   shallowMergeOneLevel({ a: { b: { x: 1 } } }, { a: { b: { y: 2 } } })
+ *   // => { a: { b: { y: 2 } } } ← 二层对象被覆盖，不会深合并
+ */
+const shallowMergeOneLevel = (...sources) => {
+  const result = {};
+  for (let i = 0; i < sources.length; i += 1) {
+    const source = sources[i];
+    if (!source) continue;
+    for (const key in source) {
+      if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+      const prev = result[key];
+      const next = source[key];
+      const canMerge = typeof prev === 'object' && typeof next === 'object' && prev !== null && next !== null && !Array.isArray(prev) && !Array.isArray(next);
+      result[key] = canMerge ? {
+        ...prev,
+        ...next
+      } : next;
     }
   }
-  return obj;
+  return result;
 };
-exports.merge = merge;
+
+/**
+ * @deprecated 名字误导（会被误以为是 lodash.merge 的递归深合并）。
+ * 请改用语义更明确的 `shallowMergeOneLevel`。本别名仅为兼容老调用点，下个大版本移除。
+ */
+exports.shallowMergeOneLevel = shallowMergeOneLevel;
+const merge = exports.merge = shallowMergeOneLevel;

package/lib/skeleton/components/Descriptions/index.d.ts

@@ -12,7 +12,7 @@ export type DescriptionsPageSkeletonProps = {
 export declare const TableItemSkeleton: ({ active, header, }: {
     active: boolean;
     header?: boolean | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 /**
  * Table 骨架屏
  *
@@ -24,6 +24,6 @@ export declare const TableSkeleton: React.FC<{
 }>;
 export declare const DescriptionsSkeleton: ({ active }: {
     active: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const DescriptionsPageSkeleton: React.FC<DescriptionsPageSkeletonProps>;
 export default DescriptionsPageSkeleton;

package/lib/skeleton/components/List/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 /** 一条分割线 */
 export declare const Line: ({ padding }: {
     padding?: string | number | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const MediaQueryKeyEnum: {
     xs: number;
     sm: number;
@@ -28,7 +28,7 @@ export declare const ListSkeleton: React.FC<{
  */
 export declare const PageHeaderSkeleton: ({ active }: {
     active: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export type ListPageSkeletonProps = {
     active?: boolean;
     pageHeader?: false;
@@ -44,6 +44,6 @@ export type ListPageSkeletonProps = {
  */
 export declare const ListToolbarSkeleton: ({ active }: {
     active: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const ListPageSkeleton: React.FC<ListPageSkeletonProps>;
 export default ListPageSkeleton;

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

@@ -20,46 +20,53 @@ export type UseContainerProps<T = any> = {
     columnsState?: ProTableProps<any, any, any>['columnsState'];
 };
 declare function useContainer(props?: UseContainerProps): {
-    action: ActionType | undefined;
     setAction: (newAction?: ActionType) => void;
-    sortKeyColumns: string[];
     setSortKeyColumns: (keys: string[]) => void;
     propsRef: import("react").MutableRefObject<ProTableProps<any, any, any> | undefined>;
     columnsMap: Record<string, ColumnsState>;
     keyWords: string | undefined;
-    setKeyWords: (k: string | undefined) => void;
+    setKeyWords: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     setTableSize: (updater: DensitySize | ((prev: DensitySize) => DensitySize)) => void;
     tableSize: DensitySize;
-    prefixName: any;
     setPrefixName: (name: any) => void;
     setColumnsMap: (updater: Record<string, ColumnsState> | ((prev: Record<string, ColumnsState>) => Record<string, ColumnsState>)) => void;
-    columns: ProTableColumn<any>[] | ProColumns<any, any>[] | undefined;
     rootDomRef: import("react").RefObject<HTMLDivElement>;
     clearPersistenceStorage: () => void;
     defaultColumnKeyMap: Record<string, any>;
+    readonly action: ActionType | undefined;
+    readonly prefixName: string;
+    readonly sortKeyColumns: string[];
 };
 declare const TableContext: import("react").Context<{
-    action: ActionType | undefined;
     setAction: (newAction?: ActionType) => void;
-    sortKeyColumns: string[];
     setSortKeyColumns: (keys: string[]) => void;
     propsRef: import("react").MutableRefObject<ProTableProps<any, any, any> | undefined>;
     columnsMap: Record<string, ColumnsState>;
     keyWords: string | undefined;
-    setKeyWords: (k: string | undefined) => void;
+    setKeyWords: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     setTableSize: (updater: DensitySize | ((prev: DensitySize) => DensitySize)) => void;
     tableSize: DensitySize;
-    prefixName: any;
     setPrefixName: (name: any) => void;
     setColumnsMap: (updater: Record<string, ColumnsState> | ((prev: Record<string, ColumnsState>) => Record<string, ColumnsState>)) => void;
-    columns: ProTableColumn<any>[] | ProColumns<any, any>[] | undefined;
     rootDomRef: import("react").RefObject<HTMLDivElement>;
     clearPersistenceStorage: () => void;
     defaultColumnKeyMap: Record<string, any>;
+    readonly action: ActionType | undefined;
+    readonly prefixName: string;
+    readonly sortKeyColumns: string[];
 }>;
 export type ContainerType = typeof useContainer;
-declare const Container: React.FC<{
+declare const TableProvider: React.FC<{
     initValue: UseContainerProps<any>;
     children: React.ReactNode;
 }>;
-export { Container, TableContext };
+/**
+ * @deprecated 使用 `TableProvider` 替代。`Container` 命名过于通用，与
+ * antd Card.Container / 各种 IoC Container 重名严重，已重命名为 `TableProvider`。
+ * 本别名仅用于向后兼容，将在后续主版本中移除。
+ */
+declare const Container: import("react").FC<{
+    initValue: UseContainerProps<any>;
+    children: React.ReactNode;
+}>;
+export { Container, TableContext, TableProvider };

package/lib/table/Store/Provide.js

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableContext = exports.Container = void 0;
+exports.TableProvider = exports.TableContext = exports.Container = void 0;
 var _util = require("@rc-component/util");
 var _merge = _interopRequireDefault(require("lodash-es/merge"));
 var _react = require("react");
 var _utils = require("../utils");
+var _utils2 = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function useContainer(props = {}) {
   const actionRef = (0, _react.useRef)();
@@ -24,13 +25,13 @@ function useContainer(props = {}) {
   // 用于排序的数组
   const sortKeyColumns = (0, _react.useRef)([]);
   const [tableSize, setTableSizeInner] = (0, _util.useControlledState)(() => props.size || props.defaultSize || 'middle', props.size);
-  const setTableSize = (0, _react.useCallback)(updater => {
+  const setTableSize = (0, _utils2.useRefFunction)(updater => {
     setTableSizeInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
       props.onSizeChange?.(next);
       return next;
     });
-  }, [props.onSizeChange]);
+  });
 
   /** 默认全选中 */
   const defaultColumnKeyMap = (0, _react.useMemo)(() => {
@@ -77,42 +78,63 @@ function useContainer(props = {}) {
     return props.columnsState?.value || props.columnsState?.defaultValue || defaultColumnKeyMap;
   }, props.columnsState?.value);
   const onColumnsMapChange = props.columnsState?.onChange;
-  const setColumnsMap = (0, _react.useCallback)(updater => {
+  const setColumnsMap = (0, _utils2.useRefFunction)(updater => {
     setColumnsMapInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
       onColumnsMapChange?.(next);
       return next;
     });
-  }, [onColumnsMapChange]);
+  });
 
-  /**  配置或列更改时对columnsMap重新赋值 */
+  /**
+   * 配置或列更改时对 columnsMap 重新赋值。
+   *
+   * 协议（被 `tests/table/dynamic-columns-state.test.tsx#51 columnSetting
+   * columnsState.persistenceKey change` 明确锁定）：
+   *   - persistenceKey / persistenceType 切换到新键时，
+   *     - 新键 storage 中已有数据 → 用 storage 数据（含 defaultValue merge）覆盖；
+   *     - 新键 storage 中无数据 → 必须把 columnsMap 重置回 defaultColumnKeyMap，
+   *       不能保留旧键的修改痕迹。这是「切到新表/新场景应该用默认值打底」
+   *       的有意行为，不是 bug。
+   *   - defaultColumnKeyMap（依赖 props.columns）重算时同样按上述规则同步。
+   *
+   * 历史教训：曾经把 else 分支当成「覆盖用户修改」的 bug 删除，
+   * 立刻击穿上面的测试用例（rerender 切 persistenceKey 后新键应回到默认全选）。
+   * 不要再误判这是 bug。
+   */
   (0, _react.useEffect)(() => {
     const {
       persistenceType,
-      persistenceKey
+      persistenceKey,
+      defaultValue
     } = props.columnsState || {};
-    if (persistenceKey && persistenceType && typeof window !== 'undefined') {
-      /** 从持久化中读取数据 */
-      const storage = window[persistenceType];
-      try {
-        const storageValue = storage?.getItem(persistenceKey);
-        if (storageValue) {
-          if (props?.columnsState?.defaultValue) {
-            setColumnsMap((0, _merge.default)({}, props?.columnsState?.defaultValue, JSON.parse(storageValue)));
-          } else {
-            setColumnsMap(JSON.parse(storageValue));
-          }
-        } else {
-          setColumnsMap(defaultColumnKeyMap);
-        }
-      } catch (error) {
-        console.warn(error);
+    if (!persistenceKey || !persistenceType || typeof window === 'undefined') {
+      return;
+    }
+
+    /** 从持久化中读取数据 */
+    const storage = window[persistenceType];
+    try {
+      const storageValue = storage?.getItem(persistenceKey);
+      if (!storageValue) {
+        // 切到新的 persistenceKey 且 storage 中没有数据时，回退到默认值
+        // （不能保留旧键的修改痕迹，详见上方注释）
+        setColumnsMap(defaultColumnKeyMap);
+        return;
       }
+      if (defaultValue) {
+        // defaultValue 作为系统方默认配置，优先级低于用户在 storage 中的修改
+        setColumnsMap((0, _merge.default)({}, defaultValue, JSON.parse(storageValue)));
+      } else {
+        setColumnsMap(JSON.parse(storageValue));
+      }
+    } catch (error) {
+      console.warn(error);
     }
   }, [props.columnsState?.persistenceKey, props.columnsState?.persistenceType, defaultColumnKeyMap]);
 
   /** 清空一下当前的 key */
-  const clearPersistenceStorage = (0, _react.useCallback)(() => {
+  const clearPersistenceStorage = (0, _utils2.useRefFunction)(() => {
     const {
       persistenceType,
       persistenceKey
@@ -126,7 +148,7 @@ function useContainer(props = {}) {
     } catch (error) {
       console.warn(error);
     }
-  }, [props.columnsState]);
+  });
   (0, _react.useEffect)(() => {
     if (!props.columnsState?.persistenceKey || !props.columnsState?.persistenceType) {
       return;
@@ -145,48 +167,72 @@ function useContainer(props = {}) {
       clearPersistenceStorage();
     }
   }, [props.columnsState?.persistenceKey, columnsMap, props.columnsState?.persistenceType]);
-  const renderValue = {
-    action: actionRef.current,
+  /**
+   * Context value：暴露给所有 useContext(TableContext) 的消费者。
+   *
+   * 注意三点设计：
+   * 1. `action` / `prefixName` / `sortKeyColumns` 用 ES6 getter 暴露 ref 的当前值，
+   *    保证消费者每次读取都能拿到最新值（ref 写入不会触发重渲染，但读取必须实时）。
+   *    使用 getter 语法而非 Object.defineProperty，让 TS 推导出的字段类型与 runtime
+   *    行为一致（避免 IDE 类型提示停留在首次值）。
+   * 2. `setSortKeyColumns` / `setPrefixName` 对外是 mutator 函数 API，内部直接写
+   *    对应 ref，不触发重渲染。这是有意的协议，请勿改成 useState。
+   * 3. 不要把 `props.columns` 放进 context —— 所有消费者都直接从 `props.columns`
+   *    或 `columnsMap` 拿数据，加进来只会让 context value 因 columns 引用频繁变化
+   *    而触发整片消费者无意义重渲染。
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const renderValue = (0, _react.useMemo)(() => ({
     setAction: newAction => {
       actionRef.current = newAction;
     },
-    sortKeyColumns: sortKeyColumns.current,
     setSortKeyColumns: keys => {
       sortKeyColumns.current = keys;
     },
     propsRef,
     columnsMap,
     keyWords,
-    setKeyWords: k => setKeyWords(k),
+    setKeyWords,
     setTableSize,
     tableSize,
-    prefixName: prefixNameRef.current,
     setPrefixName: name => {
       prefixNameRef.current = name;
     },
     setColumnsMap,
-    columns: props.columns,
     rootDomRef,
     clearPersistenceStorage,
-    defaultColumnKeyMap
-  };
-  Object.defineProperty(renderValue, 'prefixName', {
-    get: () => prefixNameRef.current
-  });
-  Object.defineProperty(renderValue, 'sortKeyColumns', {
-    get: () => sortKeyColumns.current
-  });
-  Object.defineProperty(renderValue, 'action', {
-    get: () => actionRef.current
-  });
+    defaultColumnKeyMap,
+    get action() {
+      return actionRef.current;
+    },
+    get prefixName() {
+      return prefixNameRef.current;
+    },
+    get sortKeyColumns() {
+      return sortKeyColumns.current;
+    }
+  }),
+  // setTableSize / setColumnsMap / clearPersistenceStorage 均为 useRefFunction，引用永远稳定
+  // propsRef / rootDomRef 是 useRef，引用永远稳定，不需要加入 deps
+  // setKeyWords 是 useState setter，引用永远稳定
+  // 只有真正的 state 值变化才需要重建 context value
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [columnsMap, keyWords, tableSize, defaultColumnKeyMap]);
   return renderValue;
 }
 const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({});
-const Container = props => {
+const TableProvider = props => {
   const value = useContainer(props.initValue);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
     value: value,
     children: props.children
   });
 };
-exports.Container = Container;
+
+/**
+ * @deprecated 使用 `TableProvider` 替代。`Container` 命名过于通用，与
+ * antd Card.Container / 各种 IoC Container 重名严重，已重命名为 `TableProvider`。
+ * 本别名仅用于向后兼容，将在后续主版本中移除。
+ */
+exports.TableProvider = TableProvider;
+const Container = exports.Container = TableProvider;

package/lib/table/Table.d.ts

@@ -7,7 +7,7 @@ import type { ProTableProps } from './typing';
  * @param props
  */
 declare const ProviderTableContainer: {
-    <DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = "text">(props: ProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;
+    <DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = "text">(props: ProTableProps<DataType, Params, ValueType>): React.JSX.Element;
     Summary: React.FC<React.PropsWithChildren<import("@rc-component/table/lib/Footer/Summary").SummaryProps>> & {
         Row: React.FC<React.PropsWithChildren<import("@rc-component/table/lib/Footer/Row").FooterRowProps>>;
         Cell: React.FC<React.PropsWithChildren<import("@rc-component/table/lib/Footer/Cell").SummaryCellProps>>;