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

package/lib/list/ListView.d.ts

@@ -1,4 +1,4 @@
-import type { ListProps, TableProps } from 'antd';
+import type { TableProps } from 'antd';
 import type { AnyObject } from 'antd/lib/_util/type';
 import type { PaginationConfig } from 'antd/lib/pagination';
 import type { GetRowKey, TableRowSelection } from 'antd/lib/table/interface';
@@ -7,15 +7,16 @@ import type { CheckCardProps } from '../card';
 import type { ActionType } from '../table';
 import type { GetComponentProps } from './index';
 import type { ItemProps } from './Item';
+import type { ListProps } from './ProListBase';
 type AntdListProps<RecordType> = Omit<ListProps<RecordType>, 'rowKey'>;
+/** 自定义列表项渲染，defaultDom 为 ProList 默认渲染的列表项元素 */
+export type ProListItemRender<RecordType> = (item: RecordType, index: number, defaultDom: React.ReactElement) => React.ReactNode;
 export type ListViewProps<RecordType> = Omit<AntdListProps<RecordType>, 'renderItem'> & Pick<TableProps<RecordType>, 'columns' | 'dataSource' | 'expandable' | 'pagination'> & {
     rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
-    showActions?: 'hover' | 'always';
-    showExtra?: 'hover' | 'always';
     rowSelection?: TableRowSelection<RecordType>;
     prefixCls?: string;
     dataSource: readonly RecordType[];
-    renderItem?: (item: RecordType, index: number, defaultDom: JSX.Element) => React.ReactNode;
+    itemRender?: ProListItemRender<RecordType>;
     actionRef: React.MutableRefObject<ActionType | undefined>;
     onRow?: GetComponentProps<RecordType>;
     onItem?: GetComponentProps<RecordType>;
@@ -25,6 +26,7 @@ export type ListViewProps<RecordType> = Omit<AntdListProps<RecordType>, 'renderI
     itemTitleRender?: ItemProps<RecordType>['itemTitleRender'];
     itemCardProps?: CheckCardProps;
     pagination?: PaginationConfig;
+    hashId?: string;
 };
 declare function ListView<RecordType extends AnyObject>(props: ListViewProps<RecordType>): import("react/jsx-runtime").JSX.Element;
 export default ListView;

package/lib/list/ListView.js

@@ -16,18 +16,19 @@ var _usePagination = _interopRequireDefault(require("../utils/usePagination"));
 var _useSelection = _interopRequireDefault(require("../utils/useSelection"));
 var _constants = require("./constants");
 var _Item = _interopRequireDefault(require("./Item"));
+var _ProListBase = require("./ProListBase");
 var _jsxRuntime = require("react/jsx-runtime");
+/** 自定义列表项渲染，defaultDom 为 ProList 默认渲染的列表项元素 */
+
 function ListView(props) {
   const {
     dataSource,
     columns,
     rowKey,
-    showActions,
-    showExtra,
     prefixCls: customizePrefixCls,
     actionRef,
     itemTitleRender,
-    renderItem,
+    itemRender,
     itemCardProps,
     itemHeaderRender,
     expandable: expandableConfig,
@@ -37,11 +38,13 @@ function ListView(props) {
     onRow,
     onItem,
     rowClassName,
+    hashId: propHashId,
     ...rest
   } = props;
   const {
-    hashId
+    hashId: contextHashId
   } = (0, _react.useContext)(_provider.ProProvider);
+  const hashId = propHashId ?? contextHashId;
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
@@ -52,10 +55,9 @@ function ListView(props) {
     return (record, index) => record[rowKey] || index;
   }, [rowKey]);
   const [getRecordByKey] = (0, _useLazyKVMap.default)(dataSource, 'children', getRowKey);
-  const usePaginationArgs = [() => {}, pagination];
 
-  // 合并分页的的配置，这里是为了兼容 antd 的分页
-  const [mergedPagination] = (0, _usePagination.default)(dataSource.length, usePaginationArgs[0], usePaginationArgs[1]);
+  // 合并分页配置，兼容 antd 的分页
+  const [mergedPagination] = (0, _usePagination.default)(dataSource.length, () => {}, pagination);
   /** 根据分页来返回不同的数据，模拟 table */
   const pageData = _react.default.useMemo(() => {
     if (pagination === false || !mergedPagination.pageSize || dataSource.length < mergedPagination.total) {
@@ -71,7 +73,7 @@ function ListView(props) {
   const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
 
   /** 提供和 table 一样的 rowSelection 配置 */
-  const useSelectionArgs = [{
+  const [selectItemRender, selectedKeySet] = (0, _useSelection.default)({
     getRowKey,
     getRecordByKey,
     prefixCls,
@@ -80,10 +82,7 @@ function ListView(props) {
     expandType: 'row',
     childrenColumnName: 'children',
     locale: {}
-  }, rowSelection
-  // 这个 API 用的不好，先 any 一下
-  ];
-  const [selectItemRender, selectedKeySet] = (0, _useSelection.default)(...useSelectionArgs);
+  }, rowSelection);
 
   // 提供和 Table 一样的 expand 支持
   const {
@@ -129,8 +128,9 @@ function ListView(props) {
 
   /** 这个是 选择框的 render 方法 为了兼容 antd 的 table,用了同样的渲染逻辑 所以看起来有点奇怪 */
   const selectItemDom = selectItemRender([])[0];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProListBase.ProListContainer, {
     ...rest,
+    hashId: hashId,
     className: (0, _clsx.clsx)(getPrefixCls('pro-list-container', customizePrefixCls), hashId, rest.className),
     dataSource: pageData,
     pagination: pagination && mergedPagination,
@@ -140,27 +140,21 @@ function ListView(props) {
       };
       columns?.forEach(column => {
         const {
-          listKey,
-          cardActionProps
+          listSlot
         } = column;
-        if (!_constants.PRO_LIST_KEYS_MAP.has(listKey)) {
+        if (!_constants.PRO_LIST_KEYS_MAP.has(listSlot)) {
           return;
         }
-        const dataIndex = column.dataIndex || listKey || column.key;
+        const dataIndex = column.dataIndex || listSlot || column.key;
         const rawData = Array.isArray(dataIndex) ? (0, _util.get)(item, dataIndex) : item[dataIndex];
 
-        /** 如果cardActionProps 需要直接使用源数组，因为 action 必须要源数组 */
-        if (cardActionProps === 'actions' && listKey === 'actions') {
-          listItemProps.cardActionProps = cardActionProps;
-        }
         // 调用protable的列配置渲染数据
         const data = column.render ? column.render(rawData, item, index) : rawData;
-        if (data !== '-') listItemProps[column.listKey] = data;
+        // aside 是 extra 的新名称，映射到 Item 的 extra 属性
+        const propKey = column.listSlot === 'aside' ? 'extra' : column.listSlot;
+        if (data !== '-') listItemProps[propKey] = data;
       });
-      let checkboxDom;
-      if (selectItemDom && selectItemDom.render) {
-        checkboxDom = selectItemDom.render(item, item, index);
-      }
+      const checkboxDom = selectItemDom?.render?.(item, item, index);
       const {
         isEditable,
         recordKey
@@ -169,46 +163,40 @@ function ListView(props) {
         index
       }) || {};
       const isChecked = selectedKeySet.has(recordKey || index);
+      const itemKey = getRowKey(item, index);
+      const cardProps = rest.grid ? {
+        ...itemCardProps,
+        ...rest.grid,
+        checked: isChecked,
+        onChange: /*#__PURE__*/_react.default.isValidElement(checkboxDom) ? changeChecked => checkboxDom?.props?.onChange({
+          nativeEvent: {},
+          target: {
+            checked: changeChecked
+          },
+          changeChecked
+        }) : undefined
+      } : undefined;
       const defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
-        cardProps: rest.grid ? {
-          ...itemCardProps,
-          ...rest.grid,
-          checked: isChecked,
-          onChange: /*#__PURE__*/_react.default.isValidElement(checkboxDom) ? changeChecked => {
-            return checkboxDom?.props?.onChange({
-              nativeEvent: {},
-              target: {
-                checked: changeChecked
-              },
-              changeChecked
-            });
-          } : undefined
-        } : undefined,
+        cardProps: cardProps,
         ...listItemProps,
         recordKey: recordKey,
         isEditable: isEditable || false,
         expandable: expandableConfig,
-        expand: mergedExpandedKeys.has(getRowKey(item, index)),
-        onExpand: () => {
-          onTriggerExpand(item);
-        },
+        expand: mergedExpandedKeys.has(itemKey),
+        onExpand: () => onTriggerExpand(item),
         index: index,
         record: item,
         item: item,
-        showActions: showActions,
-        showExtra: showExtra,
         itemTitleRender: itemTitleRender,
         itemHeaderRender: itemHeaderRender,
-        rowSupportExpand: !rowExpandable || rowExpandable && rowExpandable(item),
-        selected: selectedKeySet.has(getRowKey(item, index)),
+        rowSupportExpand: !rowExpandable || rowExpandable(item),
+        selected: selectedKeySet.has(itemKey),
         checkbox: checkboxDom,
         onRow: onRow,
         onItem: onItem
       }, recordKey);
-      if (renderItem) {
-        return renderItem(item, index, defaultDom);
-      }
-      return defaultDom;
+      const renderedContent = itemRender ? itemRender(item, index, defaultDom) : defaultDom;
+      return renderedContent;
     }
   });
 }

package/lib/list/ProListBase.d.ts

@@ -0,0 +1,74 @@
+import type { PaginationConfig } from 'antd/lib/pagination';
+import React from 'react';
+export type ColumnCount = number;
+export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export interface ListGridType {
+    gutter?: number | [number, number];
+    column?: ColumnCount;
+    xs?: ColumnCount;
+    sm?: ColumnCount;
+    md?: ColumnCount;
+    lg?: ColumnCount;
+    xl?: ColumnCount;
+    xxl?: ColumnCount;
+}
+export type ListSize = 'small' | 'default' | 'large';
+export type ListItemLayout = 'horizontal' | 'vertical';
+export interface ListLocale {
+    emptyText?: React.ReactNode;
+}
+export interface ListProps<T = any> {
+    variant?: 'outlined' | 'borderless' | 'filled';
+    className?: string;
+    rootClassName?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    dataSource?: T[];
+    extra?: React.ReactNode;
+    grid?: ListGridType;
+    id?: string;
+    itemLayout?: ListItemLayout;
+    loading?: boolean | {
+        spinning?: boolean;
+    };
+    loadMore?: React.ReactNode;
+    pagination?: PaginationConfig | false;
+    prefixCls?: string;
+    rowKey?: ((item: T) => React.Key) | keyof T;
+    renderItem?: (item: T, index: number, defaultDom: JSX.Element | null) => React.ReactNode;
+    size?: ListSize;
+    split?: boolean;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    locale?: ListLocale;
+    hashId?: string;
+}
+export declare const ProListContext: React.Context<{
+    grid?: ListGridType | undefined;
+    itemLayout?: ListItemLayout | undefined;
+}>;
+export interface ListItemMetaProps {
+    avatar?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+    description?: React.ReactNode;
+    prefixCls?: string;
+    style?: React.CSSProperties;
+    title?: React.ReactNode;
+}
+export declare const ProListItemMeta: React.FC<ListItemMetaProps>;
+export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: React.ReactNode;
+    prefixCls?: string;
+    style?: React.CSSProperties;
+    extra?: React.ReactNode;
+    actions?: React.ReactNode[];
+    colStyle?: React.CSSProperties;
+}
+export declare const ProListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>> & {
+    Meta: typeof ProListItemMeta;
+};
+export declare const ProListContainer: <T>(props: ListProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement;

package/lib/list/ProListBase.js

@@ -0,0 +1,357 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProListItemMeta = exports.ProListItem = exports.ProListContext = exports.ProListContainer = void 0;
+var _antd = require("antd");
+var _clsx = require("clsx");
+var _react = _interopRequireWildcard(require("react"));
+var _useMediaQuery = require("../utils/useMediaQuery");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 内部 List 容器与 List.Item / List.Item.Meta 实现，用于替代 antd List（antd List 已停止维护）
+ * 保持与 antd List 相同的 DOM 结构及类名，以便复用 antd 的 list 样式
+ */
+
+const ProListContext = exports.ProListContext = /*#__PURE__*/_react.default.createContext({});
+const ProListItemMeta = ({
+  prefixCls: customizePrefixCls,
+  className,
+  avatar,
+  title,
+  description,
+  ...rest
+}) => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
+  const classString = (0, _clsx.clsx)(`${prefixCls}-item-meta`, className);
+  const content = title || description ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: `${prefixCls}-item-meta-content`,
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
+      className: `${prefixCls}-item-meta-title`,
+      children: title
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${prefixCls}-item-meta-description`,
+      children: description
+    })]
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ...rest,
+    className: classString,
+    children: [avatar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${prefixCls}-item-meta-avatar`,
+      children: avatar
+    }), content]
+  });
+};
+exports.ProListItemMeta = ProListItemMeta;
+const InternalProListItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    children,
+    actions,
+    extra,
+    className,
+    colStyle,
+    ...rest
+  } = props;
+  const {
+    grid,
+    itemLayout
+  } = (0, _react.useContext)(ProListContext);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
+  const actionsContent = actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${prefixCls}-item-action`,
+    onClick: e => e.stopPropagation(),
+    children: actions.map((action, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${prefixCls}-item-action-item`,
+      children: action
+    }, i))
+  }, "actions") : null;
+  const itemChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...rest,
+    className: (0, _clsx.clsx)(`${prefixCls}-item`, className),
+    children: itemLayout === 'vertical' && extra ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: `${prefixCls}-item-main`,
+        children: [children, actionsContent]
+      }, "content"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefixCls}-item-extra`,
+        children: extra
+      }, "extra")]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [children, actionsContent, extra != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+        children: extra
+      }, "extra")]
+    })
+  });
+  if (grid) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
+      style: {
+        width: '100%',
+        ...colStyle
+      },
+      children: itemChildren
+    });
+  }
+  return itemChildren;
+});
+InternalProListItem.displayName = 'ProListItem';
+const ProListItem = exports.ProListItem = InternalProListItem;
+ProListItem.Meta = ProListItemMeta;
+function getRowKey(item, index, rowKey) {
+  if (typeof rowKey === 'function') {
+    return rowKey(item);
+  }
+  if (rowKey && typeof item === 'object' && item !== null && rowKey in item) {
+    return item[rowKey];
+  }
+  if (typeof item === 'object' && item !== null && 'key' in item) {
+    return item.key;
+  }
+  return `list-item-${index}`;
+}
+const defaultPaginationProps = {
+  current: 1,
+  total: 0,
+  position: 'bottom'
+};
+const ProListContainerInner = /*#__PURE__*/_react.default.forwardRef(function ProListContainerInner(props, ref) {
+  const {
+    pagination = false,
+    prefixCls: customizePrefixCls,
+    variant = 'borderless',
+    split = true,
+    className,
+    rootClassName,
+    style,
+    children,
+    itemLayout,
+    loadMore,
+    grid,
+    dataSource = [],
+    size: customizeSize = 'default',
+    header,
+    footer,
+    loading = false,
+    rowKey,
+    renderItem,
+    locale,
+    hashId: propHashId,
+    ...rest
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
+  const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
+  const [paginationCurrent, setPaginationCurrent] = _react.default.useState(paginationObj.defaultCurrent ?? 1);
+  const [paginationSize, setPaginationSize] = _react.default.useState(paginationObj.defaultPageSize ?? 10);
+  const sizeCls = customizeSize === 'large' ? 'lg' : customizeSize === 'small' ? 'sm' : '';
+  const isSomethingAfterLastItem = !!(loadMore || pagination || footer);
+  const paginationProps = (0, _react.useMemo)(() => ({
+    ...defaultPaginationProps,
+    total: dataSource.length,
+    current: paginationCurrent,
+    pageSize: paginationSize,
+    ...(pagination && typeof pagination === 'object' ? pagination : {})
+  }), [dataSource.length, pagination, paginationCurrent, paginationSize]);
+  const largestPage = Math.ceil(paginationProps.total / (paginationProps.pageSize || 10));
+  const currentPage = Math.min(paginationProps.current ?? 1, Math.max(1, largestPage));
+  const splitDataSource = (0, _react.useMemo)(() => {
+    if (!pagination || !dataSource.length) {
+      return dataSource;
+    }
+    const pageSize = paginationProps.pageSize ?? 10;
+    const total = paginationProps.total ?? 0;
+    // 父组件已分页（如 ListView 传入 pageData）时不再二次 slice
+    if (total > 0 && dataSource.length <= pageSize && total > dataSource.length) {
+      return dataSource;
+    }
+    const start = (currentPage - 1) * pageSize;
+    return dataSource.slice(start, start + pageSize);
+  }, [dataSource, pagination, currentPage, paginationProps.pageSize, paginationProps.total]);
+  const renderInternalItem = (item, index) => {
+    if (!renderItem) return null;
+    const key = getRowKey(item, index, rowKey);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+      children: renderItem(item, index, null)
+    }, key);
+  };
+  const breakpoint = (0, _useMediaQuery.useBreakpoint)();
+
+  /**
+   * 根据当前断点获取列数
+   */
+  const getResponsiveColumn = (0, _react.useMemo)(() => {
+    if (!grid) return 1;
+    const breakpoints = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+    const currentBreakpoint = breakpoint || 'md';
+    const startIndex = breakpoints.indexOf(currentBreakpoint);
+
+    // 从当前断点开始，向下查找第一个已定义的列数
+    for (let i = startIndex; i < breakpoints.length; i++) {
+      const bp = breakpoints[i];
+      const colCount = grid[bp];
+      if (colCount !== undefined) {
+        return colCount;
+      }
+    }
+
+    // 最后使用 column 默认值，确保不为 0（避免除以零）
+    return grid.column || 1;
+  }, [grid, breakpoint]);
+
+  /**
+   * 计算 grid 容器样式（flex 布局）
+   */
+  const gridContainerStyle = (0, _react.useMemo)(() => {
+    if (!grid) return undefined;
+    const style = {
+      display: 'flex',
+      flexWrap: 'wrap'
+    };
+
+    // 处理 gutter
+    if (grid.gutter) {
+      const [horizontal, vertical] = Array.isArray(grid.gutter) ? grid.gutter : [grid.gutter, 0];
+      const h = Number(horizontal) || 0;
+      const v = Number(vertical) || 0;
+
+      // flex 容器使用负 margin 来抵消子元素的 padding
+      style.marginLeft = -h / 2;
+      style.marginRight = -h / 2;
+      style.marginTop = -v / 2;
+      style.marginBottom = -v / 2;
+    }
+    return style;
+  }, [grid?.gutter]);
+
+  /**
+   * 计算每个 item 的样式（flex 子项）
+   */
+  const colStyle = (0, _react.useMemo)(() => {
+    if (!grid) return undefined;
+    const {
+      gutter
+    } = grid;
+    const column = getResponsiveColumn;
+    const style = {
+      display: 'flex'
+    };
+
+    // 处理 gutter
+    if (gutter) {
+      const [horizontal, vertical] = Array.isArray(gutter) ? gutter : [gutter, 0];
+      const h = Number(horizontal) || 0;
+      const v = Number(vertical) || 0;
+      style.paddingLeft = h / 2;
+      style.paddingRight = h / 2;
+      style.paddingTop = v / 2;
+      style.paddingBottom = v / 2;
+    }
+
+    // 计算每列的宽度（确保 column 有效，避免除以零）
+    if (column > 0) {
+      // 使用 flex-basis 和 max-width 确保准确的宽度
+      const percentage = 100 / column;
+      style.flexBasis = `${percentage}%`;
+      style.maxWidth = `${percentage}%`;
+    }
+    return style;
+  }, [grid?.gutter, getResponsiveColumn]);
+  const {
+    renderEmpty
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  let childrenContent;
+  const isLoading = typeof loading === 'boolean' ? loading : !!loading?.spinning;
+  if (splitDataSource.length > 0) {
+    const items = splitDataSource.map((item, idx) => renderInternalItem(item, idx));
+    childrenContent = grid ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: gridContainerStyle,
+      children: items.map((child, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: colStyle,
+        children: child
+      }, child?.key ?? idx))
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      className: `${prefixCls}-items`,
+      children: items
+    });
+  } else if (!children && !isLoading) {
+    const emptyContent = locale?.emptyText ?? (typeof renderEmpty === 'function' ? renderEmpty('List') : null) ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Empty, {
+      description: "\u6682\u65E0\u6570\u636E"
+    });
+    childrenContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${prefixCls}-empty-text`,
+      children: emptyContent
+    });
+  } else if (isLoading) {
+    childrenContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        minHeight: 53
+      }
+    });
+  } else {
+    childrenContent = children;
+  }
+  const paginationPosition = paginationProps.position ?? 'bottom';
+  const showPaginationTop = pagination && (paginationPosition === 'top' || paginationPosition === 'both');
+  const showPaginationBottom = pagination && (paginationPosition === 'bottom' || paginationPosition === 'both');
+  const paginationNode = pagination && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${prefixCls}-pagination`,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Pagination, {
+      align: "end",
+      ...paginationProps,
+      current: currentPage,
+      onChange: (page, pageSize) => {
+        setPaginationCurrent(page);
+        setPaginationSize(pageSize ?? 10);
+        pagination?.onChange?.(page, pageSize ?? 10);
+      },
+      onShowSizeChange: (current, size) => {
+        setPaginationCurrent(current);
+        setPaginationSize(size);
+        pagination?.onShowSizeChange?.(current, size);
+      }
+    })
+  });
+  const contextValue = (0, _react.useMemo)(() => ({
+    grid,
+    itemLayout
+  }), [JSON.stringify(grid), itemLayout]);
+  const classString = (0, _clsx.clsx)(prefixCls, {
+    [`${prefixCls}-vertical`]: itemLayout === 'vertical',
+    [`${prefixCls}-${sizeCls}`]: sizeCls,
+    [`${prefixCls}-split`]: split,
+    [`${prefixCls}-${variant}`]: variant,
+    [`${prefixCls}-loading`]: isLoading,
+    [`${prefixCls}-grid`]: !!grid,
+    [`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem
+  }, propHashId, className, rootClassName);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProListContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: ref,
+      style: style,
+      className: classString,
+      ...rest,
+      children: [showPaginationTop && paginationNode, header && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefixCls}-header`,
+        children: header
+      }), childrenContent, children, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefixCls}-footer`,
+        children: footer
+      }), loadMore, showPaginationBottom && paginationNode]
+    })
+  });
+});
+ProListContainerInner.displayName = 'ProListContainer';
+const ProListContainer = exports.ProListContainer = ProListContainerInner;

package/lib/list/constants.d.ts

@@ -1,3 +1,3 @@
-declare const PRO_LIST_KEYS: string[];
-declare const PRO_LIST_KEYS_MAP: Map<any, any>;
+declare const PRO_LIST_KEYS: readonly ["title", "subTitle", "avatar", "description", "extra", "aside", "content", "actions", "type"];
+declare const PRO_LIST_KEYS_MAP: Set<string>;
 export { PRO_LIST_KEYS, PRO_LIST_KEYS_MAP };

package/lib/list/constants.js

@@ -4,8 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PRO_LIST_KEYS_MAP = exports.PRO_LIST_KEYS = void 0;
-const PRO_LIST_KEYS = exports.PRO_LIST_KEYS = ['title', 'subTitle', 'avatar', 'description', 'extra', 'content', 'actions', 'type'];
-const PRO_LIST_KEYS_MAP = exports.PRO_LIST_KEYS_MAP = PRO_LIST_KEYS.reduce((pre, next) => {
-  pre.set(next, true);
-  return pre;
-}, new Map());
+const PRO_LIST_KEYS = exports.PRO_LIST_KEYS = ['title', 'subTitle', 'avatar', 'description', 'extra', 'aside', 'content', 'actions', 'type'];
+const PRO_LIST_KEYS_MAP = exports.PRO_LIST_KEYS_MAP = new Set(PRO_LIST_KEYS);