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

package/lib/list/index.d.ts

@@ -1,22 +1,15 @@
-import type { ListProps } from 'antd';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import React from 'react';
 import type { CheckCardProps } from '../card';
 import type { ProColumnType, ProTableProps } from '../table';
+import type { LabelTooltipType } from '../utils';
 import type { ItemProps } from './Item';
+import { type ProListItemRender } from './ListView';
+import type { ListProps } from './ProListBase';
 export type AntdListProps<RecordType> = Omit<ListProps<RecordType>, 'rowKey'>;
 export type ProListMeta<T> = Pick<ProColumnType<T>, 'dataIndex' | 'valueType' | 'render' | 'search' | 'title' | 'valueEnum' | 'editable' | 'fieldProps' | 'formItemProps' | 'formItemRender'> & {
     key?: React.Key;
 };
-type ProListMetaAction<T> = ProListMeta<T> & {
-    /**
-     * @example
-     *   `cardActionProps = 'actions';`;
-     *
-     * @name 选择映射到 card 上的 props，默认为extra
-     */
-    cardActionProps?: 'extra' | 'actions';
-};
+type ProListMetaAction<T> = ProListMeta<T>;
 type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 type IsAny<T> = IfAny<T, true, false>;
 export type BaseProListMetas<T = any> = {
@@ -29,25 +22,42 @@ export type BaseProListMetas<T = any> = {
     content?: ProListMeta<T>;
     actions?: ProListMetaAction<T>;
 };
+/**
+ * @deprecated 推荐使用 columns + listSlot 的方式，与 ProTable 共用同一套 API
+ */
 export type ProListMetas<T = any> = BaseProListMetas<T> & {
     [key in keyof T]?: IsAny<T> extends true ? ProListMetaAction<T> : ProListMeta<T>;
 };
 export type GetComponentProps<RecordType> = (record: RecordType, index: number) => React.HTMLAttributes<HTMLElement>;
 export type ProListProps<RecordType = any, Params = Record<string, any>, ValueType = 'text'> = Omit<ProTableProps<RecordType, Params, ValueType>, 'size' | 'footer'> & AntdListProps<RecordType> & {
     tooltip?: LabelTooltipType | string;
+    /**
+     * @deprecated 推荐使用 columns + listSlot 的方式，与 ProTable 共用同一套 API
+     *
+     * @example 旧 API（metas）
+     * metas={{ title: { dataIndex: 'name' }, avatar: { dataIndex: 'avatar' } }}
+     *
+     * @example 新 API（columns + listSlot）
+     * columns={[
+     *   { title: '名称', dataIndex: 'name', listSlot: 'title' },
+     *   { dataIndex: 'avatar', listSlot: 'avatar' },
+     * ]}
+     */
     metas?: ProListMetas<RecordType>;
-    showActions?: 'hover' | 'always';
-    showExtra?: 'hover' | 'always';
     onRow?: GetComponentProps<RecordType>;
     onItem?: GetComponentProps<RecordType>;
     itemCardProps?: CheckCardProps;
     rowClassName?: string | ((item: RecordType, index: number) => string);
     itemHeaderRender?: ItemProps<RecordType>['itemHeaderRender'];
     itemTitleRender?: ItemProps<RecordType>['itemTitleRender'];
+    /** 自定义列表项渲染，defaultDom 为默认渲染的列表项元素 */
+    itemRender?: ProListItemRender<RecordType>;
 };
 export type Key = React.Key;
 export type TriggerEventHandler<RecordType> = (record: RecordType) => void;
+/** BaseProList 默认隐藏卡片、搜索和工具栏 */
 declare function BaseProList<RecordType extends Record<string, any>, U extends Record<string, any> = Record<string, any>>(props: ProListProps<RecordType, U>): import("react/jsx-runtime").JSX.Element;
 declare function ProList<RecordType extends Record<string, any>, U extends Record<string, any> = Record<string, any>>(props: ProListProps<RecordType, U>): import("react/jsx-runtime").JSX.Element;
+export type { ProListItemRender } from './ListView';
 export { BaseProList, ProList };
 export default ProList;

package/lib/list/index.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.BaseProList = BaseProList;
 exports.ProList = ProList;
 exports.default = void 0;
+var _util = require("@rc-component/util");
 var _antd = require("antd");
 var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
@@ -16,10 +17,55 @@ var _table = _interopRequireDefault(require("../table"));
 var _ListView = _interopRequireDefault(require("./ListView"));
 var _index = require("./style/index");
 var _jsxRuntime = require("react/jsx-runtime");
-function NoProVideProList(props) {
+/**
+ * @deprecated 推荐使用 columns + listSlot 的方式，与 ProTable 共用同一套 API
+ */
+
+/** 根据 listSlot 推导默认的 valueType */
+const DEFAULT_VALUE_TYPE_MAP = {
+  avatar: 'avatar',
+  actions: 'option',
+  description: 'textarea'
+};
+
+/**
+ * 将 metas 对象转换为 columns 数组（向后兼容）
+ */
+function metasToColumns(metas) {
+  return Object.keys(metas).map(key => {
+    const meta = metas[key] || {};
+    const valueType = meta.valueType || DEFAULT_VALUE_TYPE_MAP[key];
+    return {
+      listSlot: key,
+      dataIndex: meta.dataIndex || key,
+      ...meta,
+      valueType
+    };
+  });
+}
+
+/**
+ * 为带有 listSlot 的 columns 填充默认 valueType
+ */
+function enrichColumnsWithDefaults(columns) {
+  return columns.map(col => {
+    const {
+      listSlot
+    } = col;
+    if (!listSlot) return col;
+    const valueType = col.valueType || DEFAULT_VALUE_TYPE_MAP[listSlot];
+    return valueType ? {
+      ...col,
+      valueType
+    } : col;
+  });
+}
+function InternalProList(props) {
   const {
-    metas: metals,
+    metas,
+    columns: propsColumns,
     split,
+    variant,
     footer,
     rowKey,
     tooltip,
@@ -27,12 +73,10 @@ function NoProVideProList(props) {
     options = false,
     search = false,
     expandable,
-    showActions,
-    showExtra,
     rowSelection: propRowSelection = false,
     pagination: propsPagination = false,
     itemLayout,
-    renderItem,
+    itemRender,
     grid,
     itemCardProps,
     onRow,
@@ -45,44 +89,35 @@ function NoProVideProList(props) {
   } = props;
   const actionRef = (0, _react.useRef)();
   (0, _react.useImperativeHandle)(rest.actionRef, () => actionRef.current, [actionRef.current]);
+
+  // metas 废弃提示，仅在开发环境触发一次
+  (0, _react.useEffect)(() => {
+    (0, _util.warning)(!metas, '[ProList] `metas` is deprecated. Please use `columns` with `listSlot` instead. ' + 'See: columns={[ { dataIndex: "name", listSlot: "title" } ]}');
+  }, []);
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+
+  /**
+   * columns 优先级高于 metas
+   * - 如果传入了 columns（且含有 listSlot），直接使用 columns
+   * - 如果只传入了 metas，将 metas 转换为 columns（向后兼容）
+   */
   const proTableColumns = (0, _react.useMemo)(() => {
-    const columns = [];
-    Object.keys(metals || {}).forEach(key => {
-      const meta = metals[key] || {};
-      let {
-        valueType
-      } = meta;
-      if (!valueType) {
-        // 根据 key 给不同的 valueType
-        if (key === 'avatar') {
-          valueType = 'avatar';
-        }
-        if (key === 'actions') {
-          valueType = 'option';
-        }
-        if (key === 'description') {
-          valueType = 'textarea';
-        }
-      }
-      columns.push({
-        listKey: key,
-        dataIndex: meta?.dataIndex || key,
-        ...meta,
-        valueType
-      });
-    });
-    return columns;
-  }, [metals]);
+    if (propsColumns && propsColumns.length > 0) {
+      return enrichColumnsWithDefaults(propsColumns);
+    }
+    if (!metas) return [];
+    return metasToColumns(metas);
+  }, [propsColumns, metas]);
   const prefixCls = getPrefixCls('pro-list', props.prefixCls);
   const {
     wrapSSR,
     hashId
   } = (0, _index.useStyle)(prefixCls);
   const listClassName = (0, _clsx.clsx)(prefixCls, hashId, {
-    [`${prefixCls}-no-split`]: !split
+    [`${prefixCls}-no-split`]: !split,
+    [`${prefixCls}-${variant}`]: variant
   });
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_table.default, {
     tooltip: tooltip,
@@ -93,7 +128,7 @@ function NoProVideProList(props) {
     rowSelection: propRowSelection,
     search: search,
     options: options,
-    className: (0, _clsx.clsx)(prefixCls, className, listClassName),
+    className: (0, _clsx.clsx)(className, listClassName),
     columns: proTableColumns,
     rowKey: rowKey,
     tableViewRender: ({
@@ -110,17 +145,16 @@ function NoProVideProList(props) {
         itemTitleRender: itemTitleRender,
         prefixCls: props.prefixCls,
         columns: columns,
-        renderItem: renderItem,
+        itemRender: itemRender,
         actionRef: actionRef,
         dataSource: dataSource || [],
         size: size,
         footer: footer,
         split: split,
+        variant: variant,
         rowKey: rowKey,
         expandable: expandable,
         rowSelection: propRowSelection === false ? undefined : rowSelection,
-        showActions: showActions,
-        showExtra: showExtra,
         pagination: pagination,
         itemLayout: itemLayout,
         loading: loading,
@@ -128,15 +162,18 @@ function NoProVideProList(props) {
         onRow: onRow,
         onItem: onItem,
         rowClassName: rowClassName,
-        locale: locale
+        locale: locale,
+        hashId: hashId
       });
     }
   }));
 }
+
+/** BaseProList 默认隐藏卡片、搜索和工具栏 */
 function BaseProList(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
     needDeps: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NoProVideProList, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalProList, {
       cardProps: false,
       search: false,
       toolBarRender: false,
@@ -147,7 +184,7 @@ function BaseProList(props) {
 function ProList(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
     needDeps: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NoProVideProList, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalProList, {
       ...props
     })
   });

package/lib/list/style/index.d.ts

@@ -3,7 +3,6 @@ import type { ProAliasToken } from '../../provider';
 export interface ProListToken extends ProAliasToken {
     componentCls: string;
 }
-export declare const techUiListActive: any;
 export declare function useStyle(prefixCls: string): {
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;