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

package/es/list/Item.js

@@ -1,10 +1,11 @@
 import { RightOutlined } from '@ant-design/icons';
 import { useControlledState } from '@rc-component/util';
-import { ConfigProvider, List, Skeleton } from 'antd';
+import { ConfigProvider, Skeleton } from 'antd';
 import { clsx } from 'clsx';
 import React, { useCallback, useContext, useMemo } from 'react';
 import { CheckCard } from "../card";
 import { ProProvider } from "../provider";
+import { ProListItem as BaseListItem, ProListItemMeta as BaseListItemMeta } from "./ProListBase";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -39,26 +40,26 @@ export function renderExpandIcon({
   });
 }
 function ProListItem(props) {
-  const {
-    prefixCls: customizePrefixCls
-  } = props;
   const {
     getPrefixCls
   } = useContext(ConfigProvider.ConfigContext);
   const {
     hashId
   } = useContext(ProProvider);
-  const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
+  const prefixCls = getPrefixCls('pro-list', props.prefixCls);
   const defaultClassName = `${prefixCls}-row`;
   const {
     title,
     subTitle,
     content,
     itemTitleRender,
-    prefixCls: restPrefixCls,
+    prefixCls: _prefixCls,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     actions,
-    item,
-    recordKey,
+    item: _item,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    recordKey: _recordKey,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     avatar,
     cardProps,
     description,
@@ -71,8 +72,6 @@ function ProListItem(props) {
     onExpand: propsOnExpand,
     expandable: expandableConfig,
     rowSupportExpand,
-    showActions,
-    showExtra,
     type,
     style,
     className: propsClassName = defaultClassName,
@@ -80,7 +79,6 @@ function ProListItem(props) {
     onRow,
     onItem,
     itemHeaderRender,
-    cardActionProps,
     extra,
     ...rest
   } = props;
@@ -101,37 +99,14 @@ function ProListItem(props) {
   }, [propsOnExpand]);
   const className = clsx({
     [`${defaultClassName}-selected`]: !cardProps && selected,
-    [`${defaultClassName}-show-action-hover`]: showActions === 'hover',
     [`${defaultClassName}-type-${type}`]: !!type,
-    [`${defaultClassName}-editable`]: isEditable,
-    [`${defaultClassName}-show-extra-hover`]: showExtra === 'hover'
+    [`${defaultClassName}-editable`]: isEditable
   }, hashId, defaultClassName);
-  const extraClassName = clsx(hashId, {
-    [`${propsClassName}-extra`]: showExtra === 'hover'
-  });
   const needExpanded = expanded || Object.values(expandableConfig || {}).length === 0;
   const expandedRowDom = expandedRowRender && expandedRowRender(record, index, indentSize, expanded);
-  const extraDom = useMemo(() => {
-    if (!actions || cardActionProps === 'actions') {
-      return undefined;
-    }
-    return [/*#__PURE__*/_jsx("div", {
-      onClick: e => e.stopPropagation(),
-      children: actions
-    }, "action")];
-  }, [actions, cardActionProps]);
-  const actionsDom = useMemo(() => {
-    if (!actions || !cardActionProps || cardActionProps === 'extra') {
-      return undefined;
-    }
-    return [/*#__PURE__*/_jsx("div", {
-      className: `${defaultClassName}-actions ${hashId}`.trim(),
-      onClick: e => e.stopPropagation(),
-      children: actions
-    }, "action")];
-  }, [actions, cardActionProps, defaultClassName, hashId]);
+  const actionsArray = useMemo(() => actions ? React.Children.toArray(actions) : undefined, [actions]);
   const titleDom = title || subTitle ? /*#__PURE__*/_jsxs("div", {
-    className: `${defaultClassName}-header-container ${hashId}`.trim(),
+    className: clsx(`${defaultClassName}-header-container`, hashId),
     children: [title && /*#__PURE__*/_jsx("div", {
       className: clsx(`${defaultClassName}-title`, hashId, {
         [`${defaultClassName}-title-editable`]: isEditable
@@ -145,41 +120,77 @@ function ProListItem(props) {
     })]
   }) : null;
   const metaTitle = (itemTitleRender && itemTitleRender?.(record, index, titleDom)) ?? titleDom;
-  const metaDom = metaTitle || avatar || subTitle || description ? /*#__PURE__*/_jsx(List.Item.Meta, {
+  const metaDom = metaTitle || avatar || subTitle || description ? /*#__PURE__*/_jsx(BaseListItemMeta, {
     avatar: avatar,
     title: metaTitle,
     description: description && needExpanded && /*#__PURE__*/_jsx("div", {
-      className: `${className}-description ${hashId}`.trim(),
+      className: clsx(`${className}-description`, hashId),
       children: description
     })
   }) : null;
+  const itemProps = onItem?.(record, index);
+  const hasExpandableConfig = Object.keys(expandableConfig || {}).length > 0;
+  const expandedRowClassStr = typeof expandedRowClassName === 'function' ? expandedRowClassName(record, index, indentSize) : expandedRowClassName;
+  const headerDom = typeof itemHeaderRender === 'function' ? itemHeaderRender(record, index, metaDom) : metaDom;
+
+  // 卡片模式渲染
+  if (cardProps) {
+    const cardTitleDom = avatar || title ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [avatar, /*#__PURE__*/_jsx("span", {
+        className: clsx(`${prefixCls}-item-meta-title`, hashId),
+        children: title
+      })]
+    }) : null;
+    return /*#__PURE__*/_jsx("div", {
+      className: clsx(hashId, `${className}-card-container`, {
+        [propsClassName]: propsClassName !== defaultClassName
+      }),
+      style: style,
+      children: /*#__PURE__*/_jsx(CheckCard, {
+        bordered: true,
+        style: {
+          width: '100%'
+        },
+        className: clsx(`${defaultClassName}-card`, hashId),
+        ...cardProps,
+        title: cardTitleDom,
+        subTitle: subTitle,
+        extra: actionsArray,
+        bodyStyle: {
+          padding: 24,
+          ...cardProps.bodyStyle
+        },
+        ...itemProps,
+        onClick: e => {
+          cardProps?.onClick?.(e);
+          itemProps?.onClick?.(e);
+        },
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          avatar: true,
+          title: false,
+          loading: loading,
+          active: true,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: clsx(`${className}-header`, hashId),
+            children: [typeof itemTitleRender === 'function' && itemTitleRender(record, index, titleDom), content]
+          })
+        })
+      })
+    });
+  }
+
+  // 列表模式渲染
   const rowClassName = clsx(hashId, {
     [`${defaultClassName}-item-has-checkbox`]: checkbox,
     [`${defaultClassName}-item-has-avatar`]: avatar,
     [className]: className
   });
-  const cardTitleDom = useMemo(() => {
-    if (avatar || title) {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [avatar, /*#__PURE__*/_jsx("span", {
-          className: `${getPrefixCls('list-item-meta-title')} ${hashId}`.trim(),
-          children: title
-        })]
-      });
-    }
-    return null;
-  }, [avatar, getPrefixCls, hashId, title]);
-  const itemProps = onItem?.(record, index);
-  const defaultDom = !cardProps ? /*#__PURE__*/_jsx(List.Item, {
+  return /*#__PURE__*/_jsx(BaseListItem, {
     className: clsx(rowClassName, hashId, {
       [propsClassName]: propsClassName !== defaultClassName
     }),
     ...rest,
-    actions: extraDom,
-    extra: !!extra && /*#__PURE__*/_jsx("div", {
-      className: extraClassName,
-      children: extra
-    }),
+    extra: extra,
     ...onRow?.(record, index),
     ...itemProps,
     onClick: e => {
@@ -195,13 +206,13 @@ function ProListItem(props) {
       loading: loading,
       active: true,
       children: [/*#__PURE__*/_jsxs("div", {
-        className: `${className}-header ${hashId}`.trim(),
+        className: clsx(`${className}-header`, hashId),
         children: [/*#__PURE__*/_jsxs("div", {
-          className: `${className}-header-option ${hashId}`.trim(),
+          className: clsx(`${className}-header-option`, hashId),
           children: [!!checkbox && /*#__PURE__*/_jsx("div", {
-            className: `${className}-checkbox ${hashId}`.trim(),
+            className: clsx(`${className}-checkbox`, hashId),
             children: checkbox
-          }), Object.values(expandableConfig || {}).length > 0 && rowSupportExpand && renderExpandIcon({
+          }), hasExpandableConfig && rowSupportExpand && renderExpandIcon({
             prefixCls,
             hashId,
             expandIcon,
@@ -209,55 +220,15 @@ function ProListItem(props) {
             expanded,
             record
           })]
-        }), (itemHeaderRender && itemHeaderRender?.(record, index, metaDom)) ?? metaDom]
+        }), headerDom, actionsArray]
       }), needExpanded && (content || expandedRowDom) && /*#__PURE__*/_jsxs("div", {
-        className: `${className}-content ${hashId}`.trim(),
+        className: clsx(`${className}-content`, hashId),
         children: [content, expandedRowRender && rowSupportExpand && /*#__PURE__*/_jsx("div", {
-          className: expandedRowClassName && typeof expandedRowClassName !== 'string' ? expandedRowClassName(record, index, indentSize) : expandedRowClassName,
+          className: expandedRowClassStr,
           children: expandedRowDom
         })]
       })]
     })
-  }) : /*#__PURE__*/_jsx(CheckCard, {
-    bordered: true,
-    style: {
-      width: '100%'
-    },
-    ...cardProps,
-    title: cardTitleDom,
-    subTitle: subTitle,
-    extra: extraDom,
-    actions: actionsDom,
-    bodyStyle: {
-      padding: 24,
-      ...cardProps.bodyStyle
-    },
-    ...itemProps,
-    onClick: e => {
-      cardProps?.onClick?.(e);
-      itemProps?.onClick?.(e);
-    },
-    children: /*#__PURE__*/_jsx(Skeleton, {
-      avatar: true,
-      title: false,
-      loading: loading,
-      active: true,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: `${className}-header ${hashId}`.trim(),
-        children: [itemTitleRender && itemTitleRender?.(record, index, titleDom), content]
-      })
-    })
-  });
-  if (!cardProps) {
-    return defaultDom;
-  }
-  return /*#__PURE__*/_jsx("div", {
-    className: clsx(hashId, {
-      [`${className}-card`]: cardProps,
-      [propsClassName]: propsClassName !== defaultClassName
-    }),
-    style: style,
-    children: defaultDom
   });
 }
 export default ProListItem;

package/es/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/es/list/ListView.js

@@ -1,5 +1,5 @@
 import { get } from '@rc-component/util';
-import { ConfigProvider, List } from 'antd';
+import { ConfigProvider } from 'antd';
 import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { ProProvider } from "../provider";
@@ -8,18 +8,19 @@ import usePagination from "../utils/usePagination";
 import useSelection from "../utils/useSelection";
 import { PRO_LIST_KEYS_MAP } from "./constants";
 import ProListItem from "./Item";
+import { ProListContainer } from "./ProListBase";
+
+/** 自定义列表项渲染，defaultDom 为 ProList 默认渲染的列表项元素 */
 import { jsx as _jsx } from "react/jsx-runtime";
 function ListView(props) {
   const {
     dataSource,
     columns,
     rowKey,
-    showActions,
-    showExtra,
     prefixCls: customizePrefixCls,
     actionRef,
     itemTitleRender,
-    renderItem,
+    itemRender,
     itemCardProps,
     itemHeaderRender,
     expandable: expandableConfig,
@@ -29,11 +30,13 @@ function ListView(props) {
     onRow,
     onItem,
     rowClassName,
+    hashId: propHashId,
     ...rest
   } = props;
   const {
-    hashId
+    hashId: contextHashId
   } = useContext(ProProvider);
+  const hashId = propHashId ?? contextHashId;
   const {
     getPrefixCls
   } = useContext(ConfigProvider.ConfigContext);
@@ -44,10 +47,9 @@ function ListView(props) {
     return (record, index) => record[rowKey] || index;
   }, [rowKey]);
   const [getRecordByKey] = useLazyKVMap(dataSource, 'children', getRowKey);
-  const usePaginationArgs = [() => {}, pagination];
 
-  // 合并分页的的配置，这里是为了兼容 antd 的分页
-  const [mergedPagination] = usePagination(dataSource.length, usePaginationArgs[0], usePaginationArgs[1]);
+  // 合并分页配置，兼容 antd 的分页
+  const [mergedPagination] = usePagination(dataSource.length, () => {}, pagination);
   /** 根据分页来返回不同的数据，模拟 table */
   const pageData = React.useMemo(() => {
     if (pagination === false || !mergedPagination.pageSize || dataSource.length < mergedPagination.total) {
@@ -63,7 +65,7 @@ function ListView(props) {
   const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
 
   /** 提供和 table 一样的 rowSelection 配置 */
-  const useSelectionArgs = [{
+  const [selectItemRender, selectedKeySet] = useSelection({
     getRowKey,
     getRecordByKey,
     prefixCls,
@@ -72,10 +74,7 @@ function ListView(props) {
     expandType: 'row',
     childrenColumnName: 'children',
     locale: {}
-  }, rowSelection
-  // 这个 API 用的不好，先 any 一下
-  ];
-  const [selectItemRender, selectedKeySet] = useSelection(...useSelectionArgs);
+  }, rowSelection);
 
   // 提供和 Table 一样的 expand 支持
   const {
@@ -121,8 +120,9 @@ function ListView(props) {
 
   /** 这个是 选择框的 render 方法 为了兼容 antd 的 table,用了同样的渲染逻辑 所以看起来有点奇怪 */
   const selectItemDom = selectItemRender([])[0];
-  return /*#__PURE__*/_jsx(List, {
+  return /*#__PURE__*/_jsx(ProListContainer, {
     ...rest,
+    hashId: hashId,
     className: clsx(getPrefixCls('pro-list-container', customizePrefixCls), hashId, rest.className),
     dataSource: pageData,
     pagination: pagination && mergedPagination,
@@ -132,27 +132,21 @@ function ListView(props) {
       };
       columns?.forEach(column => {
         const {
-          listKey,
-          cardActionProps
+          listSlot
         } = column;
-        if (!PRO_LIST_KEYS_MAP.has(listKey)) {
+        if (!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) ? 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
@@ -161,46 +155,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.isValidElement(checkboxDom) ? changeChecked => checkboxDom?.props?.onChange({
+          nativeEvent: {},
+          target: {
+            checked: changeChecked
+          },
+          changeChecked
+        }) : undefined
+      } : undefined;
       const defaultDom = /*#__PURE__*/_jsx(ProListItem, {
-        cardProps: rest.grid ? {
-          ...itemCardProps,
-          ...rest.grid,
-          checked: isChecked,
-          onChange: /*#__PURE__*/React.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/es/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;