@ant-design/pro-components 3.1.3-1 → 3.1.5-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/pro-components.min.js +1 -1
- package/es/card/ProCard.js +15 -7
- package/es/card/components/Actions/index.js +1 -4
- package/es/card/components/Card/index.js +60 -28
- package/es/card/components/Card/style.js +46 -9
- package/es/card/components/CheckCard/Group.js +1 -3
- package/es/card/components/CheckCard/index.js +0 -1
- package/es/card/components/Divider/index.d.ts +1 -1
- package/es/card/components/Divider/index.js +2 -2
- package/es/card/components/Divider/style.d.ts +4 -1
- package/es/card/components/Divider/style.js +6 -39
- package/es/card/components/Statistic/index.js +3 -3
- package/es/card/components/StatisticCard/index.js +1 -1
- package/es/card/typing.d.ts +29 -14
- package/es/descriptions/index.d.ts +3 -5
- package/es/descriptions/index.js +6 -6
- package/es/descriptions/useFetchData.js +0 -1
- package/es/field/AllProField.d.ts +2 -0
- package/es/field/AllProField.js +3 -4
- package/es/field/PureProField.d.ts +2 -0
- package/es/field/PureProField.js +2 -5
- package/es/field/components/Cascader/index.js +8 -1
- package/es/field/components/Checkbox/index.js +7 -6
- package/es/field/components/DatePicker/index.d.ts +1 -1
- package/es/field/components/DatePicker/index.js +13 -1
- package/es/field/components/Digit/index.js +20 -3
- package/es/field/components/DigitRange/index.js +1 -0
- package/es/field/components/Money/index.js +51 -3
- package/es/field/components/Options/index.js +0 -3
- package/es/field/components/Password/index.js +12 -11
- package/es/field/components/Percent/util.d.ts +1 -1
- package/es/field/components/Radio/index.js +5 -1
- package/es/field/components/RangePicker/index.d.ts +1 -1
- package/es/field/components/Segmented/index.js +2 -1
- package/es/field/components/Select/SearchSelect/index.js +0 -1
- package/es/field/components/Select/index.d.ts +1 -1
- package/es/field/components/Select/index.js +1 -1
- package/es/field/components/Switch/index.js +10 -3
- package/es/field/components/Text/index.js +11 -2
- package/es/field/components/TextArea/index.js +6 -3
- package/es/field/components/TimePicker/index.js +10 -1
- package/es/field/components/TreeSelect/index.d.ts +2 -12
- package/es/field/components/TreeSelect/index.js +31 -17
- package/es/form/BaseForm/BaseForm.js +4 -6
- package/es/form/BaseForm/LightWrapper/index.d.ts +2 -1
- package/es/form/BaseForm/Submitter/index.d.ts +1 -1
- package/es/form/components/Captcha/index.js +0 -3
- package/es/form/components/Checkbox/index.js +5 -1
- package/es/form/components/DatePicker/index.js +0 -2
- package/es/form/components/Digit/DigitRange.js +5 -2
- package/es/form/components/Digit/index.js +7 -2
- package/es/form/components/FieldSet/index.js +16 -6
- package/es/form/components/FormItem/FormItemRender/index.d.ts +1 -1
- package/es/form/components/FormItem/FormItemRender/index.js +10 -2
- package/es/form/components/FormItem/Group/index.js +1 -1
- package/es/form/components/FormItem/index.js +9 -7
- package/es/form/components/FormItem/warpField.js +3 -15
- package/es/form/components/List/ListContainer.js +2 -1
- package/es/form/components/List/index.d.ts +1 -1
- package/es/form/components/List/index.js +0 -2
- package/es/form/components/Radio/index.js +5 -4
- package/es/form/components/SchemaForm/index.js +0 -1
- package/es/form/components/SchemaForm/layoutType/StepsForm.js +0 -1
- package/es/form/components/Select/index.js +11 -2
- package/es/form/components/Text/index.js +0 -3
- package/es/form/components/UploadButton/index.js +4 -2
- package/es/form/components/UploadDragger/index.js +0 -1
- package/es/form/helpers/grid.js +1 -5
- package/es/form/layouts/DrawerForm/index.d.ts +4 -4
- package/es/form/layouts/DrawerForm/index.js +2 -6
- package/es/form/layouts/LightFilter/index.js +5 -6
- package/es/form/layouts/LoginForm/index.js +8 -8
- package/es/form/layouts/LoginFormPage/index.js +15 -15
- package/es/form/layouts/ModalForm/index.d.ts +2 -2
- package/es/form/layouts/ModalForm/index.js +1 -4
- package/es/form/layouts/QueryFilter/Actions.js +2 -1
- package/es/form/layouts/QueryFilter/index.js +40 -24
- package/es/form/layouts/StepsForm/StepForm.js +0 -1
- package/es/form/layouts/StepsForm/index.js +5 -14
- package/es/layout/ProLayout.d.ts +1 -1
- package/es/layout/ProLayout.js +2 -7
- package/es/layout/components/AppsLogoComponents/DefaultContent.js +6 -5
- package/es/layout/components/AppsLogoComponents/SimpleContent.js +6 -5
- package/es/layout/components/AppsLogoComponents/style/index.js +4 -0
- package/es/layout/components/FooterToolbar/index.d.ts +1 -1
- package/es/layout/components/FooterToolbar/index.js +2 -5
- package/es/layout/components/GlobalFooter/index.js +3 -3
- package/es/layout/components/GlobalHeader/ActionsContent.js +6 -7
- package/es/layout/components/GlobalHeader/index.js +1 -1
- package/es/layout/components/GridContent/index.js +1 -1
- package/es/layout/components/Header/index.js +1 -3
- package/es/layout/components/Help/ProHelpPanel.js +11 -10
- package/es/layout/components/PageContainer/index.js +9 -10
- package/es/layout/components/PageContainer/style/index.js +4 -0
- package/es/layout/components/PageHeader/index.js +10 -10
- package/es/layout/components/SettingDrawer/BlockCheckbox.js +2 -3
- package/es/layout/components/SettingDrawer/LayoutChange.js +3 -2
- package/es/layout/components/SettingDrawer/RegionalChange.js +3 -2
- package/es/layout/components/SettingDrawer/ThemeColor.js +3 -2
- package/es/layout/components/SettingDrawer/index.js +5 -5
- package/es/layout/components/SettingDrawer/style/index.js +4 -0
- package/es/layout/components/SiderMenu/BaseMenu.js +5 -9
- package/es/layout/components/SiderMenu/SiderMenu.js +6 -8
- package/es/layout/components/SiderMenu/index.js +0 -1
- package/es/layout/components/TopNavHeader/index.js +4 -5
- package/es/layout/style/index.js +4 -0
- package/es/layout/utils/getBreadcrumbProps.js +1 -1
- package/es/layout/utils/getMenuData.js +0 -1
- package/es/list/Item.d.ts +4 -7
- package/es/list/Item.js +82 -104
- package/es/list/ListView.d.ts +6 -4
- package/es/list/ListView.js +42 -55
- package/es/list/ProListBase.d.ts +74 -0
- package/es/list/ProListBase.js +358 -0
- package/es/list/constants.d.ts +2 -2
- package/es/list/constants.js +2 -5
- package/es/list/index.d.ts +23 -13
- package/es/list/index.js +78 -41
- package/es/list/style/index.d.ts +0 -1
- package/es/list/style/index.js +228 -86
- package/es/provider/index.d.ts +2 -2
- package/es/provider/index.js +0 -3
- package/es/provider/useStyle/index.d.ts +1 -21
- package/es/provider/useStyle/index.js +6 -3
- package/es/skeleton/components/Descriptions/index.js +1 -4
- package/es/skeleton/components/List/index.js +1 -4
- package/es/table/Store/Provide.js +0 -2
- package/es/table/Table.js +17 -17
- package/es/table/components/Alert/index.js +6 -5
- package/es/table/components/ColumnSetting/index.js +9 -10
- package/es/table/components/DragSortTable/index.js +8 -4
- package/es/table/components/EditableTable/index.d.ts +1 -1
- package/es/table/components/EditableTable/index.js +6 -8
- package/es/table/components/ListToolBar/HeaderMenu.d.ts +1 -0
- package/es/table/components/ListToolBar/HeaderMenu.js +4 -3
- package/es/table/components/ListToolBar/index.d.ts +1 -1
- package/es/table/components/ListToolBar/index.js +18 -21
- package/es/table/components/ListToolBar/style.js +3 -3
- package/es/table/components/ToolBar/index.d.ts +1 -1
- package/es/table/style/index.js +4 -0
- package/es/table/typing.d.ts +10 -5
- package/es/table/useFetchData.js +4 -4
- package/es/table/utils/cellRenderToFromItem.js +2 -4
- package/es/table/utils/index.js +0 -1
- package/es/table/utils/useDragSort.js +1 -1
- package/es/utils/components/DropdownFooter/index.d.ts +1 -1
- package/es/utils/components/FieldLabel/index.js +1 -1
- package/es/utils/components/FilterDropdown/index.d.ts +1 -1
- package/es/utils/components/FilterDropdown/index.js +1 -1
- package/es/utils/components/InlineErrorFormItem/index.js +5 -4
- package/es/utils/components/LabelIconTip/index.d.ts +3 -4
- package/es/utils/components/LabelIconTip/index.js +2 -2
- package/es/utils/genCopyable/index.d.ts +6 -0
- package/es/utils/genCopyable/index.js +28 -8
- package/es/utils/hooks/useDebounceValue/index.js +1 -3
- package/es/utils/hooks/useDeepCompareEffect/index.js +0 -2
- package/es/utils/hooks/useFetchData/index.js +0 -2
- package/es/utils/index.d.ts +2 -1
- package/es/utils/isDeepEqualReact/index.js +0 -8
- package/es/utils/isUrl/index.js +1 -1
- package/es/utils/merge/index.js +0 -3
- package/es/utils/nanoid/index.d.ts +1 -3
- package/es/utils/nanoid/index.js +2 -10
- package/es/utils/proFieldParsingText/index.d.ts +2 -2
- package/es/utils/proFieldParsingText/index.js +3 -5
- package/es/utils/typing.d.ts +2 -1
- package/es/utils/useEditableArray/index.js +1 -1
- package/es/utils/useEditableMap/index.js +1 -1
- package/guidelines/components/pro-card.md +5 -4
- package/guidelines/overview-components.md +1 -1
- package/lib/card/ProCard.js +15 -7
- package/lib/card/components/Actions/index.js +1 -4
- package/lib/card/components/Card/index.js +60 -28
- package/lib/card/components/Card/style.js +46 -9
- package/lib/card/components/CheckCard/Group.js +1 -3
- package/lib/card/components/CheckCard/index.js +0 -1
- package/lib/card/components/Divider/index.d.ts +1 -1
- package/lib/card/components/Divider/index.js +2 -2
- package/lib/card/components/Divider/style.d.ts +4 -1
- package/lib/card/components/Divider/style.js +5 -39
- package/lib/card/components/Statistic/index.js +3 -3
- package/lib/card/components/StatisticCard/index.js +1 -1
- package/lib/card/typing.d.ts +29 -14
- package/lib/descriptions/index.d.ts +3 -5
- package/lib/descriptions/index.js +6 -6
- package/lib/descriptions/useFetchData.js +0 -1
- package/lib/field/AllProField.d.ts +2 -0
- package/lib/field/AllProField.js +3 -4
- package/lib/field/PureProField.d.ts +2 -0
- package/lib/field/PureProField.js +2 -5
- package/lib/field/components/Cascader/index.js +8 -1
- package/lib/field/components/Checkbox/index.js +7 -6
- package/lib/field/components/DatePicker/index.d.ts +1 -1
- package/lib/field/components/DatePicker/index.js +13 -1
- package/lib/field/components/Digit/index.js +20 -3
- package/lib/field/components/DigitRange/index.js +1 -0
- package/lib/field/components/Money/index.js +50 -2
- package/lib/field/components/Options/index.js +0 -3
- package/lib/field/components/Password/index.js +11 -10
- package/lib/field/components/Percent/util.d.ts +1 -1
- package/lib/field/components/Radio/index.js +5 -1
- package/lib/field/components/RangePicker/index.d.ts +1 -1
- package/lib/field/components/Segmented/index.js +2 -1
- package/lib/field/components/Select/SearchSelect/index.js +0 -1
- package/lib/field/components/Select/index.d.ts +1 -1
- package/lib/field/components/Select/index.js +1 -1
- package/lib/field/components/Switch/index.js +10 -3
- package/lib/field/components/Text/index.js +11 -2
- package/lib/field/components/TextArea/index.js +6 -3
- package/lib/field/components/TimePicker/index.js +10 -1
- package/lib/field/components/TreeSelect/index.d.ts +2 -12
- package/lib/field/components/TreeSelect/index.js +30 -16
- package/lib/form/BaseForm/BaseForm.js +4 -7
- package/lib/form/BaseForm/LightWrapper/index.d.ts +2 -1
- package/lib/form/BaseForm/Submitter/index.d.ts +1 -1
- package/lib/form/components/Captcha/index.js +0 -3
- package/lib/form/components/Checkbox/index.js +5 -1
- package/lib/form/components/DatePicker/index.js +0 -2
- package/lib/form/components/Digit/DigitRange.js +5 -2
- package/lib/form/components/Digit/index.js +7 -2
- package/lib/form/components/FieldSet/index.js +16 -6
- package/lib/form/components/FormItem/FormItemRender/index.d.ts +1 -1
- package/lib/form/components/FormItem/FormItemRender/index.js +10 -2
- package/lib/form/components/FormItem/Group/index.js +1 -1
- package/lib/form/components/FormItem/index.js +9 -7
- package/lib/form/components/FormItem/warpField.js +3 -15
- package/lib/form/components/List/ListContainer.js +2 -1
- package/lib/form/components/List/index.d.ts +1 -1
- package/lib/form/components/List/index.js +0 -2
- package/lib/form/components/Radio/index.js +5 -4
- package/lib/form/components/SchemaForm/index.js +0 -1
- package/lib/form/components/SchemaForm/layoutType/StepsForm.js +0 -1
- package/lib/form/components/Select/index.js +11 -2
- package/lib/form/components/Text/index.js +0 -3
- package/lib/form/components/UploadButton/index.js +4 -2
- package/lib/form/components/UploadDragger/index.js +0 -1
- package/lib/form/helpers/grid.js +1 -5
- package/lib/form/layouts/DrawerForm/index.d.ts +4 -4
- package/lib/form/layouts/DrawerForm/index.js +2 -6
- package/lib/form/layouts/LightFilter/index.js +5 -6
- package/lib/form/layouts/LoginForm/index.js +8 -8
- package/lib/form/layouts/LoginFormPage/index.js +15 -15
- package/lib/form/layouts/ModalForm/index.d.ts +2 -2
- package/lib/form/layouts/ModalForm/index.js +1 -4
- package/lib/form/layouts/QueryFilter/Actions.js +2 -1
- package/lib/form/layouts/QueryFilter/index.js +39 -24
- package/lib/form/layouts/StepsForm/StepForm.js +0 -1
- package/lib/form/layouts/StepsForm/index.js +5 -14
- package/lib/layout/ProLayout.d.ts +1 -1
- package/lib/layout/ProLayout.js +2 -7
- package/lib/layout/components/AppsLogoComponents/DefaultContent.js +6 -5
- package/lib/layout/components/AppsLogoComponents/SimpleContent.js +6 -5
- package/lib/layout/components/AppsLogoComponents/style/index.js +4 -0
- package/lib/layout/components/FooterToolbar/index.d.ts +1 -1
- package/lib/layout/components/FooterToolbar/index.js +2 -6
- package/lib/layout/components/GlobalFooter/index.js +3 -3
- package/lib/layout/components/GlobalHeader/ActionsContent.js +6 -7
- package/lib/layout/components/GlobalHeader/index.js +1 -1
- package/lib/layout/components/GridContent/index.js +1 -1
- package/lib/layout/components/Header/index.js +1 -3
- package/lib/layout/components/Help/ProHelpPanel.js +11 -10
- package/lib/layout/components/PageContainer/index.js +9 -10
- package/lib/layout/components/PageContainer/style/index.js +4 -0
- package/lib/layout/components/PageHeader/index.js +10 -10
- package/lib/layout/components/SettingDrawer/BlockCheckbox.js +2 -3
- package/lib/layout/components/SettingDrawer/LayoutChange.js +3 -2
- package/lib/layout/components/SettingDrawer/RegionalChange.js +3 -2
- package/lib/layout/components/SettingDrawer/ThemeColor.js +3 -2
- package/lib/layout/components/SettingDrawer/index.js +5 -5
- package/lib/layout/components/SettingDrawer/style/index.js +4 -0
- package/lib/layout/components/SiderMenu/BaseMenu.js +5 -9
- package/lib/layout/components/SiderMenu/SiderMenu.js +6 -8
- package/lib/layout/components/SiderMenu/index.js +0 -1
- package/lib/layout/components/TopNavHeader/index.js +4 -5
- package/lib/layout/style/index.js +4 -0
- package/lib/layout/utils/getBreadcrumbProps.js +1 -1
- package/lib/layout/utils/getMenuData.js +0 -1
- package/lib/list/Item.d.ts +4 -7
- package/lib/list/Item.js +81 -103
- package/lib/list/ListView.d.ts +6 -4
- package/lib/list/ListView.js +41 -54
- package/lib/list/ProListBase.d.ts +74 -0
- package/lib/list/ProListBase.js +365 -0
- package/lib/list/constants.d.ts +2 -2
- package/lib/list/constants.js +2 -5
- package/lib/list/index.d.ts +23 -13
- package/lib/list/index.js +77 -40
- package/lib/list/style/index.d.ts +0 -1
- package/lib/list/style/index.js +227 -86
- package/lib/provider/index.d.ts +2 -2
- package/lib/provider/index.js +0 -3
- package/lib/provider/useStyle/index.d.ts +1 -21
- package/lib/provider/useStyle/index.js +6 -3
- package/lib/skeleton/components/Descriptions/index.js +1 -4
- package/lib/skeleton/components/List/index.js +1 -4
- package/lib/table/Store/Provide.js +0 -2
- package/lib/table/Table.js +17 -17
- package/lib/table/components/Alert/index.js +6 -5
- package/lib/table/components/ColumnSetting/index.js +9 -10
- package/lib/table/components/DragSortTable/index.js +8 -4
- package/lib/table/components/EditableTable/index.d.ts +1 -1
- package/lib/table/components/EditableTable/index.js +6 -8
- package/lib/table/components/ListToolBar/HeaderMenu.d.ts +1 -0
- package/lib/table/components/ListToolBar/HeaderMenu.js +4 -3
- package/lib/table/components/ListToolBar/index.d.ts +1 -1
- package/lib/table/components/ListToolBar/index.js +18 -21
- package/lib/table/components/ListToolBar/style.js +3 -3
- package/lib/table/components/ToolBar/index.d.ts +1 -1
- package/lib/table/style/index.js +4 -0
- package/lib/table/typing.d.ts +10 -5
- package/lib/table/useFetchData.js +4 -4
- package/lib/table/utils/cellRenderToFromItem.js +2 -4
- package/lib/table/utils/index.js +0 -1
- package/lib/table/utils/useDragSort.js +1 -1
- package/lib/utils/components/DropdownFooter/index.d.ts +1 -1
- package/lib/utils/components/FieldLabel/index.js +1 -1
- package/lib/utils/components/FilterDropdown/index.d.ts +1 -1
- package/lib/utils/components/FilterDropdown/index.js +1 -1
- package/lib/utils/components/InlineErrorFormItem/index.js +5 -4
- package/lib/utils/components/LabelIconTip/index.d.ts +3 -4
- package/lib/utils/components/LabelIconTip/index.js +2 -2
- package/lib/utils/genCopyable/index.d.ts +6 -0
- package/lib/utils/genCopyable/index.js +28 -8
- package/lib/utils/hooks/useDebounceValue/index.js +1 -3
- package/lib/utils/hooks/useDeepCompareEffect/index.js +0 -2
- package/lib/utils/hooks/useFetchData/index.js +0 -2
- package/lib/utils/index.d.ts +2 -1
- package/lib/utils/isDeepEqualReact/index.js +0 -8
- package/lib/utils/isUrl/index.js +1 -1
- package/lib/utils/merge/index.js +0 -3
- package/lib/utils/nanoid/index.d.ts +1 -3
- package/lib/utils/nanoid/index.js +2 -10
- package/lib/utils/proFieldParsingText/index.d.ts +2 -2
- package/lib/utils/proFieldParsingText/index.js +3 -5
- package/lib/utils/typing.d.ts +2 -1
- package/lib/utils/useEditableArray/index.js +0 -2
- package/lib/utils/useEditableMap/index.js +0 -2
- package/package.json +32 -32
|
@@ -0,0 +1,358 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 内部 List 容器与 List.Item / List.Item.Meta 实现,用于替代 antd List(antd List 已停止维护)
|
|
3
|
+
* 保持与 antd List 相同的 DOM 结构及类名,以便复用 antd 的 list 样式
|
|
4
|
+
*/
|
|
5
|
+
import { ConfigProvider, Empty, Grid, Pagination } from 'antd';
|
|
6
|
+
import { clsx } from 'clsx';
|
|
7
|
+
import React, { useContext, useMemo } from 'react';
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
11
|
+
export const ProListContext = /*#__PURE__*/React.createContext({});
|
|
12
|
+
export const ProListItemMeta = ({
|
|
13
|
+
prefixCls: customizePrefixCls,
|
|
14
|
+
className,
|
|
15
|
+
avatar,
|
|
16
|
+
title,
|
|
17
|
+
description,
|
|
18
|
+
...rest
|
|
19
|
+
}) => {
|
|
20
|
+
const {
|
|
21
|
+
getPrefixCls
|
|
22
|
+
} = useContext(ConfigProvider.ConfigContext);
|
|
23
|
+
const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
|
|
24
|
+
const classString = clsx(`${prefixCls}-item-meta`, className);
|
|
25
|
+
const content = title || description ? /*#__PURE__*/_jsxs("div", {
|
|
26
|
+
className: `${prefixCls}-item-meta-content`,
|
|
27
|
+
children: [title && /*#__PURE__*/_jsx("h4", {
|
|
28
|
+
className: `${prefixCls}-item-meta-title`,
|
|
29
|
+
children: title
|
|
30
|
+
}), description && /*#__PURE__*/_jsx("div", {
|
|
31
|
+
className: `${prefixCls}-item-meta-description`,
|
|
32
|
+
children: description
|
|
33
|
+
})]
|
|
34
|
+
}) : null;
|
|
35
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
36
|
+
...rest,
|
|
37
|
+
className: classString,
|
|
38
|
+
children: [avatar && /*#__PURE__*/_jsx("div", {
|
|
39
|
+
className: `${prefixCls}-item-meta-avatar`,
|
|
40
|
+
children: avatar
|
|
41
|
+
}), content]
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
const InternalProListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
45
|
+
const {
|
|
46
|
+
prefixCls: customizePrefixCls,
|
|
47
|
+
children,
|
|
48
|
+
actions,
|
|
49
|
+
extra,
|
|
50
|
+
className,
|
|
51
|
+
colStyle,
|
|
52
|
+
...rest
|
|
53
|
+
} = props;
|
|
54
|
+
const {
|
|
55
|
+
grid,
|
|
56
|
+
itemLayout
|
|
57
|
+
} = useContext(ProListContext);
|
|
58
|
+
const {
|
|
59
|
+
getPrefixCls
|
|
60
|
+
} = useContext(ConfigProvider.ConfigContext);
|
|
61
|
+
const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
|
|
62
|
+
const actionsContent = actions && actions.length > 0 ? /*#__PURE__*/_jsx("div", {
|
|
63
|
+
className: `${prefixCls}-item-action`,
|
|
64
|
+
onClick: e => e.stopPropagation(),
|
|
65
|
+
children: actions.map((action, i) => /*#__PURE__*/_jsx("div", {
|
|
66
|
+
className: `${prefixCls}-item-action-item`,
|
|
67
|
+
children: action
|
|
68
|
+
}, i))
|
|
69
|
+
}, "actions") : null;
|
|
70
|
+
const itemChildren = /*#__PURE__*/_jsx("div", {
|
|
71
|
+
...rest,
|
|
72
|
+
className: clsx(`${prefixCls}-item`, className),
|
|
73
|
+
children: itemLayout === 'vertical' && extra ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
74
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
75
|
+
className: `${prefixCls}-item-main`,
|
|
76
|
+
children: [children, actionsContent]
|
|
77
|
+
}, "content"), /*#__PURE__*/_jsx("div", {
|
|
78
|
+
className: `${prefixCls}-item-extra`,
|
|
79
|
+
children: extra
|
|
80
|
+
}, "extra")]
|
|
81
|
+
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
82
|
+
children: [children, actionsContent, extra != null && /*#__PURE__*/_jsx(React.Fragment, {
|
|
83
|
+
children: extra
|
|
84
|
+
}, "extra")]
|
|
85
|
+
})
|
|
86
|
+
});
|
|
87
|
+
if (grid) {
|
|
88
|
+
return /*#__PURE__*/_jsx("div", {
|
|
89
|
+
ref: ref,
|
|
90
|
+
style: {
|
|
91
|
+
width: '100%',
|
|
92
|
+
...colStyle
|
|
93
|
+
},
|
|
94
|
+
children: itemChildren
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
return itemChildren;
|
|
98
|
+
});
|
|
99
|
+
InternalProListItem.displayName = 'ProListItem';
|
|
100
|
+
export const ProListItem = InternalProListItem;
|
|
101
|
+
ProListItem.Meta = ProListItemMeta;
|
|
102
|
+
function getRowKey(item, index, rowKey) {
|
|
103
|
+
if (typeof rowKey === 'function') {
|
|
104
|
+
return rowKey(item);
|
|
105
|
+
}
|
|
106
|
+
if (rowKey && typeof item === 'object' && item !== null && rowKey in item) {
|
|
107
|
+
return item[rowKey];
|
|
108
|
+
}
|
|
109
|
+
if (typeof item === 'object' && item !== null && 'key' in item) {
|
|
110
|
+
return item.key;
|
|
111
|
+
}
|
|
112
|
+
return `list-item-${index}`;
|
|
113
|
+
}
|
|
114
|
+
const defaultPaginationProps = {
|
|
115
|
+
current: 1,
|
|
116
|
+
total: 0,
|
|
117
|
+
position: 'bottom'
|
|
118
|
+
};
|
|
119
|
+
const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListContainerInner(props, ref) {
|
|
120
|
+
const {
|
|
121
|
+
pagination = false,
|
|
122
|
+
prefixCls: customizePrefixCls,
|
|
123
|
+
variant = 'borderless',
|
|
124
|
+
split = true,
|
|
125
|
+
className,
|
|
126
|
+
rootClassName,
|
|
127
|
+
style,
|
|
128
|
+
children,
|
|
129
|
+
itemLayout,
|
|
130
|
+
loadMore,
|
|
131
|
+
grid,
|
|
132
|
+
dataSource = [],
|
|
133
|
+
size: customizeSize = 'default',
|
|
134
|
+
header,
|
|
135
|
+
footer,
|
|
136
|
+
loading = false,
|
|
137
|
+
rowKey,
|
|
138
|
+
renderItem,
|
|
139
|
+
locale,
|
|
140
|
+
hashId: propHashId,
|
|
141
|
+
...rest
|
|
142
|
+
} = props;
|
|
143
|
+
const {
|
|
144
|
+
getPrefixCls
|
|
145
|
+
} = useContext(ConfigProvider.ConfigContext);
|
|
146
|
+
const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
|
|
147
|
+
const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
|
|
148
|
+
const [paginationCurrent, setPaginationCurrent] = React.useState(paginationObj.defaultCurrent ?? 1);
|
|
149
|
+
const [paginationSize, setPaginationSize] = React.useState(paginationObj.defaultPageSize ?? 10);
|
|
150
|
+
const sizeCls = customizeSize === 'large' ? 'lg' : customizeSize === 'small' ? 'sm' : '';
|
|
151
|
+
const isSomethingAfterLastItem = !!(loadMore || pagination || footer);
|
|
152
|
+
const paginationProps = useMemo(() => ({
|
|
153
|
+
...defaultPaginationProps,
|
|
154
|
+
total: dataSource.length,
|
|
155
|
+
current: paginationCurrent,
|
|
156
|
+
pageSize: paginationSize,
|
|
157
|
+
...(pagination && typeof pagination === 'object' ? pagination : {})
|
|
158
|
+
}), [dataSource.length, pagination, paginationCurrent, paginationSize]);
|
|
159
|
+
const largestPage = Math.ceil(paginationProps.total / (paginationProps.pageSize || 10));
|
|
160
|
+
const currentPage = Math.min(paginationProps.current ?? 1, Math.max(1, largestPage));
|
|
161
|
+
const splitDataSource = useMemo(() => {
|
|
162
|
+
if (!pagination || !dataSource.length) {
|
|
163
|
+
return dataSource;
|
|
164
|
+
}
|
|
165
|
+
const pageSize = paginationProps.pageSize ?? 10;
|
|
166
|
+
const total = paginationProps.total ?? 0;
|
|
167
|
+
// 父组件已分页(如 ListView 传入 pageData)时不再二次 slice
|
|
168
|
+
if (total > 0 && dataSource.length <= pageSize && total > dataSource.length) {
|
|
169
|
+
return dataSource;
|
|
170
|
+
}
|
|
171
|
+
const start = (currentPage - 1) * pageSize;
|
|
172
|
+
return dataSource.slice(start, start + pageSize);
|
|
173
|
+
}, [dataSource, pagination, currentPage, paginationProps.pageSize, paginationProps.total]);
|
|
174
|
+
const renderInternalItem = (item, index) => {
|
|
175
|
+
if (!renderItem) return null;
|
|
176
|
+
const key = getRowKey(item, index, rowKey);
|
|
177
|
+
return /*#__PURE__*/_jsx(React.Fragment, {
|
|
178
|
+
children: renderItem(item, index, null)
|
|
179
|
+
}, key);
|
|
180
|
+
};
|
|
181
|
+
const rawScreens = Grid.useBreakpoint();
|
|
182
|
+
const defaultScreens = {
|
|
183
|
+
xs: true,
|
|
184
|
+
sm: true,
|
|
185
|
+
md: true,
|
|
186
|
+
lg: false,
|
|
187
|
+
xl: false,
|
|
188
|
+
xxl: false
|
|
189
|
+
};
|
|
190
|
+
const screens = useMemo(() => {
|
|
191
|
+
if (rawScreens == null) return defaultScreens;
|
|
192
|
+
return {
|
|
193
|
+
xxl: rawScreens.xxl ?? defaultScreens.xxl,
|
|
194
|
+
xl: rawScreens.xl ?? defaultScreens.xl,
|
|
195
|
+
lg: rawScreens.lg ?? defaultScreens.lg,
|
|
196
|
+
md: rawScreens.md ?? defaultScreens.md,
|
|
197
|
+
sm: rawScreens.sm ?? defaultScreens.sm,
|
|
198
|
+
xs: rawScreens.xs ?? defaultScreens.xs
|
|
199
|
+
};
|
|
200
|
+
}, [rawScreens]);
|
|
201
|
+
|
|
202
|
+
/**
|
|
203
|
+
* 根据当前断点获取列数,与 antd Grid/Card 响应式逻辑一致
|
|
204
|
+
*/
|
|
205
|
+
const getResponsiveColumn = useMemo(() => {
|
|
206
|
+
if (!grid) return 1;
|
|
207
|
+
const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
|
|
208
|
+
for (let i = 0; i < responsiveArray.length; i += 1) {
|
|
209
|
+
const breakpoint = responsiveArray[i];
|
|
210
|
+
if (screens[breakpoint] && grid[breakpoint] !== undefined) {
|
|
211
|
+
return grid[breakpoint];
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
return grid.column || 1;
|
|
215
|
+
}, [grid, screens]);
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* 计算 grid 容器样式(flex 布局)
|
|
219
|
+
*/
|
|
220
|
+
const gridContainerStyle = useMemo(() => {
|
|
221
|
+
if (!grid) return undefined;
|
|
222
|
+
const style = {
|
|
223
|
+
display: 'flex',
|
|
224
|
+
flexWrap: 'wrap'
|
|
225
|
+
};
|
|
226
|
+
|
|
227
|
+
// 处理 gutter
|
|
228
|
+
if (grid.gutter) {
|
|
229
|
+
const [horizontal, vertical] = Array.isArray(grid.gutter) ? grid.gutter : [grid.gutter, 0];
|
|
230
|
+
const h = Number(horizontal) || 0;
|
|
231
|
+
const v = Number(vertical) || 0;
|
|
232
|
+
|
|
233
|
+
// flex 容器使用负 margin 来抵消子元素的 padding
|
|
234
|
+
style.marginLeft = -h / 2;
|
|
235
|
+
style.marginRight = -h / 2;
|
|
236
|
+
style.marginTop = -v / 2;
|
|
237
|
+
style.marginBottom = -v / 2;
|
|
238
|
+
}
|
|
239
|
+
return style;
|
|
240
|
+
}, [grid?.gutter]);
|
|
241
|
+
|
|
242
|
+
/**
|
|
243
|
+
* 计算每个 item 的样式(flex 子项)
|
|
244
|
+
*/
|
|
245
|
+
const colStyle = useMemo(() => {
|
|
246
|
+
if (!grid) return undefined;
|
|
247
|
+
const {
|
|
248
|
+
gutter
|
|
249
|
+
} = grid;
|
|
250
|
+
const column = getResponsiveColumn;
|
|
251
|
+
const style = {
|
|
252
|
+
display: 'flex'
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
// 处理 gutter
|
|
256
|
+
if (gutter) {
|
|
257
|
+
const [horizontal, vertical] = Array.isArray(gutter) ? gutter : [gutter, 0];
|
|
258
|
+
const h = Number(horizontal) || 0;
|
|
259
|
+
const v = Number(vertical) || 0;
|
|
260
|
+
style.paddingLeft = h / 2;
|
|
261
|
+
style.paddingRight = h / 2;
|
|
262
|
+
style.paddingTop = v / 2;
|
|
263
|
+
style.paddingBottom = v / 2;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
// 计算每列的宽度(确保 column 有效,避免除以零)
|
|
267
|
+
if (column > 0) {
|
|
268
|
+
// 使用 flex-basis 和 max-width 确保准确的宽度
|
|
269
|
+
const percentage = 100 / column;
|
|
270
|
+
style.flexBasis = `${percentage}%`;
|
|
271
|
+
style.maxWidth = `${percentage}%`;
|
|
272
|
+
}
|
|
273
|
+
return style;
|
|
274
|
+
}, [grid?.gutter, getResponsiveColumn]);
|
|
275
|
+
const {
|
|
276
|
+
renderEmpty
|
|
277
|
+
} = useContext(ConfigProvider.ConfigContext);
|
|
278
|
+
let childrenContent;
|
|
279
|
+
const isLoading = typeof loading === 'boolean' ? loading : !!loading?.spinning;
|
|
280
|
+
if (splitDataSource.length > 0) {
|
|
281
|
+
const items = splitDataSource.map((item, idx) => renderInternalItem(item, idx));
|
|
282
|
+
childrenContent = grid ? /*#__PURE__*/_jsx("div", {
|
|
283
|
+
style: gridContainerStyle,
|
|
284
|
+
children: items.map((child, idx) => /*#__PURE__*/_jsx("div", {
|
|
285
|
+
style: colStyle,
|
|
286
|
+
children: child
|
|
287
|
+
}, child?.key ?? idx))
|
|
288
|
+
}) : items;
|
|
289
|
+
} else if (!children && !isLoading) {
|
|
290
|
+
const emptyContent = locale?.emptyText ?? (typeof renderEmpty === 'function' ? renderEmpty('List') : null) ?? /*#__PURE__*/_jsx(Empty, {
|
|
291
|
+
description: "\u6682\u65E0\u6570\u636E"
|
|
292
|
+
});
|
|
293
|
+
childrenContent = /*#__PURE__*/_jsx("div", {
|
|
294
|
+
className: `${prefixCls}-empty-text`,
|
|
295
|
+
children: emptyContent
|
|
296
|
+
});
|
|
297
|
+
} else if (isLoading) {
|
|
298
|
+
childrenContent = /*#__PURE__*/_jsx("div", {
|
|
299
|
+
style: {
|
|
300
|
+
minHeight: 53
|
|
301
|
+
}
|
|
302
|
+
});
|
|
303
|
+
} else {
|
|
304
|
+
childrenContent = children;
|
|
305
|
+
}
|
|
306
|
+
const paginationPosition = paginationProps.position ?? 'bottom';
|
|
307
|
+
const showPaginationTop = pagination && (paginationPosition === 'top' || paginationPosition === 'both');
|
|
308
|
+
const showPaginationBottom = pagination && (paginationPosition === 'bottom' || paginationPosition === 'both');
|
|
309
|
+
const paginationNode = pagination && /*#__PURE__*/_jsx("div", {
|
|
310
|
+
className: `${prefixCls}-pagination`,
|
|
311
|
+
children: /*#__PURE__*/_jsx(Pagination, {
|
|
312
|
+
align: "end",
|
|
313
|
+
...paginationProps,
|
|
314
|
+
current: currentPage,
|
|
315
|
+
onChange: (page, pageSize) => {
|
|
316
|
+
setPaginationCurrent(page);
|
|
317
|
+
setPaginationSize(pageSize ?? 10);
|
|
318
|
+
pagination?.onChange?.(page, pageSize ?? 10);
|
|
319
|
+
},
|
|
320
|
+
onShowSizeChange: (current, size) => {
|
|
321
|
+
setPaginationCurrent(current);
|
|
322
|
+
setPaginationSize(size);
|
|
323
|
+
pagination?.onShowSizeChange?.(current, size);
|
|
324
|
+
}
|
|
325
|
+
})
|
|
326
|
+
});
|
|
327
|
+
const contextValue = useMemo(() => ({
|
|
328
|
+
grid,
|
|
329
|
+
itemLayout
|
|
330
|
+
}), [JSON.stringify(grid), itemLayout]);
|
|
331
|
+
const classString = clsx(prefixCls, {
|
|
332
|
+
[`${prefixCls}-vertical`]: itemLayout === 'vertical',
|
|
333
|
+
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
|
334
|
+
[`${prefixCls}-split`]: split,
|
|
335
|
+
[`${prefixCls}-${variant}`]: variant,
|
|
336
|
+
[`${prefixCls}-loading`]: isLoading,
|
|
337
|
+
[`${prefixCls}-grid`]: !!grid,
|
|
338
|
+
[`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem
|
|
339
|
+
}, propHashId, className, rootClassName);
|
|
340
|
+
return /*#__PURE__*/_jsx(ProListContext.Provider, {
|
|
341
|
+
value: contextValue,
|
|
342
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
343
|
+
ref: ref,
|
|
344
|
+
style: style,
|
|
345
|
+
className: classString,
|
|
346
|
+
...rest,
|
|
347
|
+
children: [showPaginationTop && paginationNode, header && /*#__PURE__*/_jsx("div", {
|
|
348
|
+
className: `${prefixCls}-header`,
|
|
349
|
+
children: header
|
|
350
|
+
}), childrenContent, children, footer && /*#__PURE__*/_jsx("div", {
|
|
351
|
+
className: `${prefixCls}-footer`,
|
|
352
|
+
children: footer
|
|
353
|
+
}), loadMore, showPaginationBottom && paginationNode]
|
|
354
|
+
})
|
|
355
|
+
});
|
|
356
|
+
});
|
|
357
|
+
ProListContainerInner.displayName = 'ProListContainer';
|
|
358
|
+
export const ProListContainer = ProListContainerInner;
|
package/es/list/constants.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
declare const PRO_LIST_KEYS:
|
|
2
|
-
declare const PRO_LIST_KEYS_MAP:
|
|
1
|
+
declare const PRO_LIST_KEYS: readonly ["title", "subTitle", "avatar", "description", "extra", "aside", "content", "actions", "type"];
|
|
2
|
+
declare const PRO_LIST_KEYS_MAP: Set<string>;
|
|
3
3
|
export { PRO_LIST_KEYS, PRO_LIST_KEYS_MAP };
|
package/es/list/constants.js
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const PRO_LIST_KEYS = ['title', 'subTitle', 'avatar', 'description', 'extra', 'content', 'actions', 'type'];
|
|
2
|
-
const PRO_LIST_KEYS_MAP = PRO_LIST_KEYS
|
|
3
|
-
pre.set(next, true);
|
|
4
|
-
return pre;
|
|
5
|
-
}, new Map());
|
|
1
|
+
const PRO_LIST_KEYS = ['title', 'subTitle', 'avatar', 'description', 'extra', 'aside', 'content', 'actions', 'type'];
|
|
2
|
+
const PRO_LIST_KEYS_MAP = new Set(PRO_LIST_KEYS);
|
|
6
3
|
export { PRO_LIST_KEYS, PRO_LIST_KEYS_MAP };
|
package/es/list/index.d.ts
CHANGED
|
@@ -1,22 +1,15 @@
|
|
|
1
|
-
import type { ListProps } from 'antd';
|
|
2
|
-
import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
|
|
3
1
|
import React from 'react';
|
|
4
2
|
import type { CheckCardProps } from '../card';
|
|
5
3
|
import type { ProColumnType, ProTableProps } from '../table';
|
|
4
|
+
import type { LabelTooltipType } from '../utils';
|
|
6
5
|
import type { ItemProps } from './Item';
|
|
6
|
+
import { type ProListItemRender } from './ListView';
|
|
7
|
+
import type { ListProps } from './ProListBase';
|
|
7
8
|
export type AntdListProps<RecordType> = Omit<ListProps<RecordType>, 'rowKey'>;
|
|
8
9
|
export type ProListMeta<T> = Pick<ProColumnType<T>, 'dataIndex' | 'valueType' | 'render' | 'search' | 'title' | 'valueEnum' | 'editable' | 'fieldProps' | 'formItemProps' | 'formItemRender'> & {
|
|
9
10
|
key?: React.Key;
|
|
10
11
|
};
|
|
11
|
-
type ProListMetaAction<T> = ProListMeta<T
|
|
12
|
-
/**
|
|
13
|
-
* @example
|
|
14
|
-
* `cardActionProps = 'actions';`;
|
|
15
|
-
*
|
|
16
|
-
* @name 选择映射到 card 上的 props,默认为extra
|
|
17
|
-
*/
|
|
18
|
-
cardActionProps?: 'extra' | 'actions';
|
|
19
|
-
};
|
|
12
|
+
type ProListMetaAction<T> = ProListMeta<T>;
|
|
20
13
|
type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
|
|
21
14
|
type IsAny<T> = IfAny<T, true, false>;
|
|
22
15
|
export type BaseProListMetas<T = any> = {
|
|
@@ -29,25 +22,42 @@ export type BaseProListMetas<T = any> = {
|
|
|
29
22
|
content?: ProListMeta<T>;
|
|
30
23
|
actions?: ProListMetaAction<T>;
|
|
31
24
|
};
|
|
25
|
+
/**
|
|
26
|
+
* @deprecated 推荐使用 columns + listSlot 的方式,与 ProTable 共用同一套 API
|
|
27
|
+
*/
|
|
32
28
|
export type ProListMetas<T = any> = BaseProListMetas<T> & {
|
|
33
29
|
[key in keyof T]?: IsAny<T> extends true ? ProListMetaAction<T> : ProListMeta<T>;
|
|
34
30
|
};
|
|
35
31
|
export type GetComponentProps<RecordType> = (record: RecordType, index: number) => React.HTMLAttributes<HTMLElement>;
|
|
36
32
|
export type ProListProps<RecordType = any, Params = Record<string, any>, ValueType = 'text'> = Omit<ProTableProps<RecordType, Params, ValueType>, 'size' | 'footer'> & AntdListProps<RecordType> & {
|
|
37
33
|
tooltip?: LabelTooltipType | string;
|
|
34
|
+
/**
|
|
35
|
+
* @deprecated 推荐使用 columns + listSlot 的方式,与 ProTable 共用同一套 API
|
|
36
|
+
*
|
|
37
|
+
* @example 旧 API(metas)
|
|
38
|
+
* metas={{ title: { dataIndex: 'name' }, avatar: { dataIndex: 'avatar' } }}
|
|
39
|
+
*
|
|
40
|
+
* @example 新 API(columns + listSlot)
|
|
41
|
+
* columns={[
|
|
42
|
+
* { title: '名称', dataIndex: 'name', listSlot: 'title' },
|
|
43
|
+
* { dataIndex: 'avatar', listSlot: 'avatar' },
|
|
44
|
+
* ]}
|
|
45
|
+
*/
|
|
38
46
|
metas?: ProListMetas<RecordType>;
|
|
39
|
-
showActions?: 'hover' | 'always';
|
|
40
|
-
showExtra?: 'hover' | 'always';
|
|
41
47
|
onRow?: GetComponentProps<RecordType>;
|
|
42
48
|
onItem?: GetComponentProps<RecordType>;
|
|
43
49
|
itemCardProps?: CheckCardProps;
|
|
44
50
|
rowClassName?: string | ((item: RecordType, index: number) => string);
|
|
45
51
|
itemHeaderRender?: ItemProps<RecordType>['itemHeaderRender'];
|
|
46
52
|
itemTitleRender?: ItemProps<RecordType>['itemTitleRender'];
|
|
53
|
+
/** 自定义列表项渲染,defaultDom 为默认渲染的列表项元素 */
|
|
54
|
+
itemRender?: ProListItemRender<RecordType>;
|
|
47
55
|
};
|
|
48
56
|
export type Key = React.Key;
|
|
49
57
|
export type TriggerEventHandler<RecordType> = (record: RecordType) => void;
|
|
58
|
+
/** BaseProList 默认隐藏卡片、搜索和工具栏 */
|
|
50
59
|
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;
|
|
51
60
|
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;
|
|
61
|
+
export type { ProListItemRender } from './ListView';
|
|
52
62
|
export { BaseProList, ProList };
|
|
53
63
|
export default ProList;
|
package/es/list/index.js
CHANGED
|
@@ -1,15 +1,61 @@
|
|
|
1
|
+
import { warning } from '@rc-component/util';
|
|
1
2
|
import { ConfigProvider } from 'antd';
|
|
2
3
|
import { clsx } from 'clsx';
|
|
3
|
-
import React, { useContext, useImperativeHandle, useMemo, useRef } from 'react';
|
|
4
|
+
import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
|
|
4
5
|
import { ProConfigProvider } from "../provider";
|
|
5
6
|
import ProTable from "../table";
|
|
6
7
|
import ListView from "./ListView";
|
|
7
8
|
import { useStyle } from "./style/index";
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated 推荐使用 columns + listSlot 的方式,与 ProTable 共用同一套 API
|
|
12
|
+
*/
|
|
8
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
|
|
14
|
+
/** 根据 listSlot 推导默认的 valueType */
|
|
15
|
+
const DEFAULT_VALUE_TYPE_MAP = {
|
|
16
|
+
avatar: 'avatar',
|
|
17
|
+
actions: 'option',
|
|
18
|
+
description: 'textarea'
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* 将 metas 对象转换为 columns 数组(向后兼容)
|
|
23
|
+
*/
|
|
24
|
+
function metasToColumns(metas) {
|
|
25
|
+
return Object.keys(metas).map(key => {
|
|
26
|
+
const meta = metas[key] || {};
|
|
27
|
+
const valueType = meta.valueType || DEFAULT_VALUE_TYPE_MAP[key];
|
|
28
|
+
return {
|
|
29
|
+
listSlot: key,
|
|
30
|
+
dataIndex: meta.dataIndex || key,
|
|
31
|
+
...meta,
|
|
32
|
+
valueType
|
|
33
|
+
};
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* 为带有 listSlot 的 columns 填充默认 valueType
|
|
39
|
+
*/
|
|
40
|
+
function enrichColumnsWithDefaults(columns) {
|
|
41
|
+
return columns.map(col => {
|
|
42
|
+
const {
|
|
43
|
+
listSlot
|
|
44
|
+
} = col;
|
|
45
|
+
if (!listSlot) return col;
|
|
46
|
+
const valueType = col.valueType || DEFAULT_VALUE_TYPE_MAP[listSlot];
|
|
47
|
+
return valueType ? {
|
|
48
|
+
...col,
|
|
49
|
+
valueType
|
|
50
|
+
} : col;
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
function InternalProList(props) {
|
|
10
54
|
const {
|
|
11
|
-
metas
|
|
55
|
+
metas,
|
|
56
|
+
columns: propsColumns,
|
|
12
57
|
split,
|
|
58
|
+
variant,
|
|
13
59
|
footer,
|
|
14
60
|
rowKey,
|
|
15
61
|
tooltip,
|
|
@@ -17,12 +63,10 @@ function NoProVideProList(props) {
|
|
|
17
63
|
options = false,
|
|
18
64
|
search = false,
|
|
19
65
|
expandable,
|
|
20
|
-
showActions,
|
|
21
|
-
showExtra,
|
|
22
66
|
rowSelection: propRowSelection = false,
|
|
23
67
|
pagination: propsPagination = false,
|
|
24
68
|
itemLayout,
|
|
25
|
-
|
|
69
|
+
itemRender,
|
|
26
70
|
grid,
|
|
27
71
|
itemCardProps,
|
|
28
72
|
onRow,
|
|
@@ -35,44 +79,35 @@ function NoProVideProList(props) {
|
|
|
35
79
|
} = props;
|
|
36
80
|
const actionRef = useRef();
|
|
37
81
|
useImperativeHandle(rest.actionRef, () => actionRef.current, [actionRef.current]);
|
|
82
|
+
|
|
83
|
+
// metas 废弃提示,仅在开发环境触发一次
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
warning(!metas, '[ProList] `metas` is deprecated. Please use `columns` with `listSlot` instead. ' + 'See: columns={[ { dataIndex: "name", listSlot: "title" } ]}');
|
|
86
|
+
}, []);
|
|
38
87
|
const {
|
|
39
88
|
getPrefixCls
|
|
40
89
|
} = useContext(ConfigProvider.ConfigContext);
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* columns 优先级高于 metas
|
|
93
|
+
* - 如果传入了 columns(且含有 listSlot),直接使用 columns
|
|
94
|
+
* - 如果只传入了 metas,将 metas 转换为 columns(向后兼容)
|
|
95
|
+
*/
|
|
41
96
|
const proTableColumns = useMemo(() => {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
if (!valueType) {
|
|
49
|
-
// 根据 key 给不同的 valueType
|
|
50
|
-
if (key === 'avatar') {
|
|
51
|
-
valueType = 'avatar';
|
|
52
|
-
}
|
|
53
|
-
if (key === 'actions') {
|
|
54
|
-
valueType = 'option';
|
|
55
|
-
}
|
|
56
|
-
if (key === 'description') {
|
|
57
|
-
valueType = 'textarea';
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
columns.push({
|
|
61
|
-
listKey: key,
|
|
62
|
-
dataIndex: meta?.dataIndex || key,
|
|
63
|
-
...meta,
|
|
64
|
-
valueType
|
|
65
|
-
});
|
|
66
|
-
});
|
|
67
|
-
return columns;
|
|
68
|
-
}, [metals]);
|
|
97
|
+
if (propsColumns && propsColumns.length > 0) {
|
|
98
|
+
return enrichColumnsWithDefaults(propsColumns);
|
|
99
|
+
}
|
|
100
|
+
if (!metas) return [];
|
|
101
|
+
return metasToColumns(metas);
|
|
102
|
+
}, [propsColumns, metas]);
|
|
69
103
|
const prefixCls = getPrefixCls('pro-list', props.prefixCls);
|
|
70
104
|
const {
|
|
71
105
|
wrapSSR,
|
|
72
106
|
hashId
|
|
73
107
|
} = useStyle(prefixCls);
|
|
74
108
|
const listClassName = clsx(prefixCls, hashId, {
|
|
75
|
-
[`${prefixCls}-no-split`]: !split
|
|
109
|
+
[`${prefixCls}-no-split`]: !split,
|
|
110
|
+
[`${prefixCls}-${variant}`]: variant
|
|
76
111
|
});
|
|
77
112
|
return wrapSSR( /*#__PURE__*/_jsx(ProTable, {
|
|
78
113
|
tooltip: tooltip,
|
|
@@ -83,7 +118,7 @@ function NoProVideProList(props) {
|
|
|
83
118
|
rowSelection: propRowSelection,
|
|
84
119
|
search: search,
|
|
85
120
|
options: options,
|
|
86
|
-
className: clsx(
|
|
121
|
+
className: clsx(className, listClassName),
|
|
87
122
|
columns: proTableColumns,
|
|
88
123
|
rowKey: rowKey,
|
|
89
124
|
tableViewRender: ({
|
|
@@ -100,17 +135,16 @@ function NoProVideProList(props) {
|
|
|
100
135
|
itemTitleRender: itemTitleRender,
|
|
101
136
|
prefixCls: props.prefixCls,
|
|
102
137
|
columns: columns,
|
|
103
|
-
|
|
138
|
+
itemRender: itemRender,
|
|
104
139
|
actionRef: actionRef,
|
|
105
140
|
dataSource: dataSource || [],
|
|
106
141
|
size: size,
|
|
107
142
|
footer: footer,
|
|
108
143
|
split: split,
|
|
144
|
+
variant: variant,
|
|
109
145
|
rowKey: rowKey,
|
|
110
146
|
expandable: expandable,
|
|
111
147
|
rowSelection: propRowSelection === false ? undefined : rowSelection,
|
|
112
|
-
showActions: showActions,
|
|
113
|
-
showExtra: showExtra,
|
|
114
148
|
pagination: pagination,
|
|
115
149
|
itemLayout: itemLayout,
|
|
116
150
|
loading: loading,
|
|
@@ -118,15 +152,18 @@ function NoProVideProList(props) {
|
|
|
118
152
|
onRow: onRow,
|
|
119
153
|
onItem: onItem,
|
|
120
154
|
rowClassName: rowClassName,
|
|
121
|
-
locale: locale
|
|
155
|
+
locale: locale,
|
|
156
|
+
hashId: hashId
|
|
122
157
|
});
|
|
123
158
|
}
|
|
124
159
|
}));
|
|
125
160
|
}
|
|
161
|
+
|
|
162
|
+
/** BaseProList 默认隐藏卡片、搜索和工具栏 */
|
|
126
163
|
function BaseProList(props) {
|
|
127
164
|
return /*#__PURE__*/_jsx(ProConfigProvider, {
|
|
128
165
|
needDeps: true,
|
|
129
|
-
children: /*#__PURE__*/_jsx(
|
|
166
|
+
children: /*#__PURE__*/_jsx(InternalProList, {
|
|
130
167
|
cardProps: false,
|
|
131
168
|
search: false,
|
|
132
169
|
toolBarRender: false,
|
|
@@ -137,7 +174,7 @@ function BaseProList(props) {
|
|
|
137
174
|
function ProList(props) {
|
|
138
175
|
return /*#__PURE__*/_jsx(ProConfigProvider, {
|
|
139
176
|
needDeps: true,
|
|
140
|
-
children: /*#__PURE__*/_jsx(
|
|
177
|
+
children: /*#__PURE__*/_jsx(InternalProList, {
|
|
141
178
|
...props
|
|
142
179
|
})
|
|
143
180
|
});
|
package/es/list/style/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@ import type { ProAliasToken } from '../../provider';
|
|
|
3
3
|
export interface ProListToken extends ProAliasToken {
|
|
4
4
|
componentCls: string;
|
|
5
5
|
}
|
|
6
|
-
export declare const techUiListActive: any;
|
|
7
6
|
export declare function useStyle(prefixCls: string): {
|
|
8
7
|
wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
9
8
|
hashId: string;
|