@ant-design/pro-components 3.1.4-0 → 3.1.6-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/Card/index.js +43 -19
- package/es/card/components/Card/style.js +12 -1
- package/es/card/components/Statistic/index.js +2 -2
- package/es/card/components/StatisticCard/index.js +1 -1
- package/es/card/typing.d.ts +27 -8
- package/es/field/AllProField.d.ts +2 -0
- package/es/field/AllProField.js +3 -0
- package/es/field/PureProField.d.ts +2 -0
- package/es/field/PureProField.js +2 -0
- package/es/field/components/Cascader/index.js +8 -1
- package/es/field/components/Checkbox/index.js +5 -1
- package/es/field/components/ColorPicker/index.d.ts +1 -1
- 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/Money/index.js +51 -3
- package/es/field/components/Password/index.js +12 -11
- 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 +3 -5
- 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 -2
- package/es/field/components/Text/index.js +7 -1
- 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 -3
- package/es/form/BaseForm/Submitter/index.d.ts +1 -1
- package/es/form/components/Digit/DigitRange.js +5 -2
- package/es/form/components/Digit/index.js +7 -2
- 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 +12 -2
- package/es/form/components/List/ListContainer.js +2 -1
- package/es/form/components/Select/index.js +11 -1
- package/es/form/layouts/DrawerForm/index.d.ts +4 -4
- package/es/form/layouts/DrawerForm/index.js +1 -1
- package/es/form/layouts/LightFilter/index.js +22 -31
- package/es/form/layouts/LoginForm/index.js +10 -9
- package/es/form/layouts/LoginFormPage/index.js +17 -16
- package/es/form/layouts/ModalForm/index.d.ts +2 -2
- package/es/form/layouts/ProForm/index.d.ts +1 -1
- package/es/form/layouts/QueryFilter/Actions.js +2 -1
- package/es/form/layouts/QueryFilter/index.js +40 -23
- package/es/form/layouts/StepsForm/index.js +2 -2
- package/es/layout/ProLayout.d.ts +3 -3
- package/es/layout/ProLayout.js +13 -25
- package/es/layout/components/AppsLogoComponents/DefaultContent.js +6 -5
- package/es/layout/components/AppsLogoComponents/SimpleContent.js +6 -5
- package/es/layout/components/FooterToolbar/index.d.ts +1 -1
- package/es/layout/components/FooterToolbar/index.js +2 -2
- package/es/layout/components/GlobalFooter/index.js +3 -3
- package/es/layout/components/GlobalHeader/ActionsContent.js +6 -6
- package/es/layout/components/GlobalHeader/index.js +1 -1
- package/es/layout/components/GridContent/index.js +1 -1
- package/es/layout/components/Help/ProHelpPanel.js +11 -10
- package/es/layout/components/PageContainer/index.js +9 -9
- package/es/layout/components/PageHeader/index.js +10 -10
- package/es/layout/components/SettingDrawer/BlockCheckbox.js +2 -2
- 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 -4
- package/es/layout/components/SiderMenu/BaseMenu.js +3 -3
- package/es/layout/components/SiderMenu/SiderMenu.js +5 -5
- package/es/layout/components/TopNavHeader/index.js +3 -3
- package/es/layout/utils/getBreadcrumbProps.js +1 -1
- package/es/list/Item.d.ts +3 -3
- package/es/list/Item.js +8 -1
- package/es/list/ListView.js +1 -2
- package/es/list/ProListBase.d.ts +1 -1
- package/es/list/ProListBase.js +43 -37
- package/es/list/style/index.js +13 -0
- package/es/provider/index.d.ts +2 -2
- package/es/table/Table.js +14 -5
- package/es/table/components/Alert/index.js +6 -5
- package/es/table/components/ColumnSetting/index.js +9 -9
- 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 +5 -70
- 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.js +15 -12
- package/es/table/components/ListToolBar/style.js +2 -2
- package/es/table/components/ToolBar/DensityIcon.d.ts +2 -2
- package/es/table/components/ToolBar/DensityIcon.js +6 -3
- package/es/table/components/ToolBar/FullscreenIcon.d.ts +1 -1
- package/es/table/components/ToolBar/FullscreenIcon.js +11 -5
- package/es/table/useFetchData.js +4 -1
- package/es/table/utils/cellRenderToFromItem.js +1 -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.js +2 -2
- package/es/utils/hooks/useFetchData/index.js +0 -2
- package/es/utils/isUrl/index.js +1 -1
- package/es/utils/proFieldParsingText/index.d.ts +2 -2
- package/es/utils/proFieldParsingText/index.js +2 -2
- package/guidelines/components/pro-card.md +5 -4
- package/lib/card/ProCard.js +15 -7
- package/lib/card/components/Card/index.js +43 -19
- package/lib/card/components/Card/style.js +12 -1
- package/lib/card/components/Statistic/index.js +2 -2
- package/lib/card/components/StatisticCard/index.js +1 -1
- package/lib/card/typing.d.ts +27 -8
- package/lib/field/AllProField.d.ts +2 -0
- package/lib/field/AllProField.js +3 -0
- package/lib/field/PureProField.d.ts +2 -0
- package/lib/field/PureProField.js +2 -0
- package/lib/field/components/Cascader/index.js +8 -1
- package/lib/field/components/Checkbox/index.js +5 -1
- package/lib/field/components/ColorPicker/index.d.ts +1 -1
- 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/Money/index.js +50 -2
- 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 +2 -4
- 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 -2
- package/lib/field/components/Text/index.js +7 -1
- 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 -3
- package/lib/form/BaseForm/Submitter/index.d.ts +1 -1
- package/lib/form/components/Digit/DigitRange.js +5 -2
- package/lib/form/components/Digit/index.js +7 -2
- 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 +12 -2
- package/lib/form/components/List/ListContainer.js +2 -1
- package/lib/form/components/Select/index.js +11 -1
- package/lib/form/layouts/DrawerForm/index.d.ts +4 -4
- package/lib/form/layouts/DrawerForm/index.js +1 -1
- package/lib/form/layouts/LightFilter/index.js +21 -30
- package/lib/form/layouts/LoginForm/index.js +10 -9
- package/lib/form/layouts/LoginFormPage/index.js +17 -16
- package/lib/form/layouts/ModalForm/index.d.ts +2 -2
- package/lib/form/layouts/ProForm/index.d.ts +1 -1
- package/lib/form/layouts/QueryFilter/Actions.js +2 -1
- package/lib/form/layouts/QueryFilter/index.js +39 -22
- package/lib/form/layouts/StepsForm/index.js +2 -2
- package/lib/layout/ProLayout.d.ts +3 -3
- package/lib/layout/ProLayout.js +13 -25
- package/lib/layout/components/AppsLogoComponents/DefaultContent.js +6 -5
- package/lib/layout/components/AppsLogoComponents/SimpleContent.js +6 -5
- package/lib/layout/components/FooterToolbar/index.d.ts +1 -1
- package/lib/layout/components/FooterToolbar/index.js +2 -2
- package/lib/layout/components/GlobalFooter/index.js +3 -3
- package/lib/layout/components/GlobalHeader/ActionsContent.js +6 -6
- package/lib/layout/components/GlobalHeader/index.js +1 -1
- package/lib/layout/components/GridContent/index.js +1 -1
- package/lib/layout/components/Help/ProHelpPanel.js +11 -10
- package/lib/layout/components/PageContainer/index.js +9 -9
- package/lib/layout/components/PageHeader/index.js +10 -10
- package/lib/layout/components/SettingDrawer/BlockCheckbox.js +2 -2
- 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 -4
- package/lib/layout/components/SiderMenu/BaseMenu.js +3 -3
- package/lib/layout/components/SiderMenu/SiderMenu.js +5 -5
- package/lib/layout/components/TopNavHeader/index.js +3 -3
- package/lib/layout/utils/getBreadcrumbProps.js +1 -1
- package/lib/list/Item.d.ts +3 -3
- package/lib/list/Item.js +8 -1
- package/lib/list/ListView.js +1 -2
- package/lib/list/ProListBase.d.ts +1 -1
- package/lib/list/ProListBase.js +42 -36
- package/lib/list/style/index.js +13 -0
- package/lib/provider/index.d.ts +2 -2
- package/lib/table/Table.js +14 -5
- package/lib/table/components/Alert/index.js +6 -5
- package/lib/table/components/ColumnSetting/index.js +9 -9
- 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 +5 -70
- 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.js +15 -12
- package/lib/table/components/ListToolBar/style.js +2 -2
- package/lib/table/components/ToolBar/DensityIcon.d.ts +2 -2
- package/lib/table/components/ToolBar/DensityIcon.js +6 -3
- package/lib/table/components/ToolBar/FullscreenIcon.d.ts +1 -1
- package/lib/table/components/ToolBar/FullscreenIcon.js +11 -5
- package/lib/table/useFetchData.js +4 -1
- package/lib/table/utils/cellRenderToFromItem.js +1 -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.js +2 -2
- package/lib/utils/hooks/useFetchData/index.js +0 -2
- package/lib/utils/isUrl/index.js +1 -1
- package/lib/utils/proFieldParsingText/index.d.ts +2 -2
- package/lib/utils/proFieldParsingText/index.js +2 -2
- package/package.json +31 -30
package/es/card/ProCard.js
CHANGED
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
import Card from "./components/Card";
|
|
2
2
|
import Divider from "./components/Divider";
|
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
-
const Group = props =>
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
const Group = props => {
|
|
5
|
+
const {
|
|
6
|
+
styles,
|
|
7
|
+
...rest
|
|
8
|
+
} = props;
|
|
9
|
+
return /*#__PURE__*/_jsx(Card, {
|
|
10
|
+
...rest,
|
|
11
|
+
styles: {
|
|
12
|
+
...styles,
|
|
13
|
+
body: {
|
|
14
|
+
...styles?.body,
|
|
15
|
+
padding: 0
|
|
16
|
+
}
|
|
8
17
|
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
});
|
|
18
|
+
});
|
|
19
|
+
};
|
|
12
20
|
|
|
13
21
|
// 当前不对底层 Card 做封装,仅挂载子组件,直接导出
|
|
14
22
|
const ProCard = Card;
|
|
@@ -15,6 +15,7 @@ const {
|
|
|
15
15
|
const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
16
16
|
const {
|
|
17
17
|
className,
|
|
18
|
+
rootClassName,
|
|
18
19
|
style,
|
|
19
20
|
styles,
|
|
20
21
|
title,
|
|
@@ -27,7 +28,9 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
27
28
|
tooltip,
|
|
28
29
|
split,
|
|
29
30
|
headerBordered = false,
|
|
30
|
-
variant
|
|
31
|
+
variant: customVariant,
|
|
32
|
+
cover,
|
|
33
|
+
classNames,
|
|
31
34
|
boxShadow = false,
|
|
32
35
|
children,
|
|
33
36
|
size,
|
|
@@ -47,6 +50,16 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
47
50
|
type,
|
|
48
51
|
...rest
|
|
49
52
|
} = props;
|
|
53
|
+
const variant = customVariant ?? 'outlined';
|
|
54
|
+
const mergedStyles = {
|
|
55
|
+
header: styles?.header,
|
|
56
|
+
body: styles?.body,
|
|
57
|
+
root: styles?.root,
|
|
58
|
+
extra: styles?.extra,
|
|
59
|
+
title: styles?.title,
|
|
60
|
+
actions: styles?.actions,
|
|
61
|
+
cover: styles?.cover
|
|
62
|
+
};
|
|
50
63
|
const {
|
|
51
64
|
getPrefixCls
|
|
52
65
|
} = useContext(ConfigProvider.ConfigContext);
|
|
@@ -192,7 +205,7 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
192
205
|
}
|
|
193
206
|
return element;
|
|
194
207
|
});
|
|
195
|
-
const cardCls = clsx(`${prefixCls}`, className, hashId, {
|
|
208
|
+
const cardCls = clsx(`${prefixCls}`, className, rootClassName, hashId, classNames?.root, {
|
|
196
209
|
[`${prefixCls}-border`]: variant === 'outlined',
|
|
197
210
|
[`${prefixCls}-box-shadow`]: boxShadow,
|
|
198
211
|
[`${prefixCls}-contain-card`]: containProCard,
|
|
@@ -205,12 +218,12 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
205
218
|
[`${prefixCls}-collapse`]: collapsed,
|
|
206
219
|
[`${prefixCls}-checked`]: checked
|
|
207
220
|
});
|
|
208
|
-
const bodyCls = clsx(`${prefixCls}-body`, hashId, {
|
|
221
|
+
const bodyCls = clsx(`${prefixCls}-body`, hashId, classNames?.body, {
|
|
209
222
|
[`${prefixCls}-body-center`]: layout === 'center',
|
|
210
223
|
[`${prefixCls}-body-direction-column`]: split === 'horizontal' || direction === 'column',
|
|
211
224
|
[`${prefixCls}-body-wrap`]: wrap && containProCard
|
|
212
225
|
});
|
|
213
|
-
const bodyStylePadding =
|
|
226
|
+
const bodyStylePadding = mergedStyles.body?.padding;
|
|
214
227
|
const loadingDOM = /*#__PURE__*/React.isValidElement(loading) ? loading : /*#__PURE__*/_jsx(Loading, {
|
|
215
228
|
prefix: prefixCls,
|
|
216
229
|
style: bodyStylePadding === 0 || bodyStylePadding === '0px' ? {
|
|
@@ -220,12 +233,10 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
220
233
|
const handleCollapsibleIconClick = useCallback(() => {
|
|
221
234
|
if (collapsible === 'icon') setCollapsed(prev => !prev);
|
|
222
235
|
}, [collapsible, setCollapsed]);
|
|
223
|
-
|
|
224
|
-
// 非受控情况下展示
|
|
225
|
-
const collapsibleButton = collapsible && controlCollapsed === undefined && (collapsibleIconRender ? /*#__PURE__*/_jsx("span", {
|
|
236
|
+
const collapsibleButton = collapsible && (collapsibleIconRender ? /*#__PURE__*/_jsx("span", {
|
|
226
237
|
role: "button",
|
|
227
238
|
tabIndex: collapsible === 'icon' ? 0 : undefined,
|
|
228
|
-
className: `${prefixCls}-collapsible-icon
|
|
239
|
+
className: clsx(`${prefixCls}-collapsible-icon`, hashId),
|
|
229
240
|
onClick: collapsible === 'icon' ? handleCollapsibleIconClick : undefined,
|
|
230
241
|
onKeyDown: collapsible === 'icon' ? e => {
|
|
231
242
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -239,11 +250,21 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
239
250
|
}) : /*#__PURE__*/_jsx(RightOutlined, {
|
|
240
251
|
onClick: handleCollapsibleIconClick,
|
|
241
252
|
rotate: !collapsed ? 90 : undefined,
|
|
242
|
-
className: `${prefixCls}-collapsible-icon
|
|
253
|
+
className: clsx(`${prefixCls}-collapsible-icon`, hashId)
|
|
243
254
|
}));
|
|
255
|
+
const headerCls = clsx(`${prefixCls}-header`, hashId, classNames?.header, {
|
|
256
|
+
[`${prefixCls}-header-border`]: headerBordered || type === 'inner',
|
|
257
|
+
[`${prefixCls}-header-collapsible`]: collapsibleButton
|
|
258
|
+
});
|
|
259
|
+
const titleCls = clsx(`${prefixCls}-title`, hashId, classNames?.title);
|
|
260
|
+
const extraCls = clsx(`${prefixCls}-extra`, hashId, classNames?.extra);
|
|
261
|
+
const rootStyle = {
|
|
262
|
+
...mergedStyles.root,
|
|
263
|
+
...style
|
|
264
|
+
};
|
|
244
265
|
return wrapSSR( /*#__PURE__*/_jsxs("div", {
|
|
245
266
|
className: cardCls,
|
|
246
|
-
style:
|
|
267
|
+
style: rootStyle,
|
|
247
268
|
ref: ref,
|
|
248
269
|
onClick: e => {
|
|
249
270
|
onChecked?.(e);
|
|
@@ -251,28 +272,31 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
251
272
|
},
|
|
252
273
|
...omit(rest, ['prefixCls', 'colSpan']),
|
|
253
274
|
children: [(title || extra || collapsibleButton) && /*#__PURE__*/_jsxs("div", {
|
|
254
|
-
className:
|
|
255
|
-
|
|
256
|
-
[`${prefixCls}-header-collapsible`]: collapsibleButton
|
|
257
|
-
}),
|
|
258
|
-
style: styles?.header,
|
|
275
|
+
className: headerCls,
|
|
276
|
+
style: mergedStyles.header,
|
|
259
277
|
onClick: () => {
|
|
260
278
|
if (collapsible === 'header' || collapsible === true) setCollapsed(!collapsed);
|
|
261
279
|
},
|
|
262
280
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
263
|
-
className:
|
|
281
|
+
className: titleCls,
|
|
282
|
+
style: mergedStyles.title,
|
|
264
283
|
children: [collapsibleButton, /*#__PURE__*/_jsx(LabelIconTip, {
|
|
265
284
|
label: title,
|
|
266
285
|
tooltip: tooltip,
|
|
267
286
|
subTitle: subTitle
|
|
268
287
|
})]
|
|
269
288
|
}), extra && /*#__PURE__*/_jsx("div", {
|
|
270
|
-
className:
|
|
289
|
+
className: extraCls,
|
|
290
|
+
style: mergedStyles.extra,
|
|
271
291
|
onClick: e => e.stopPropagation(),
|
|
272
292
|
children: extra
|
|
273
293
|
})]
|
|
294
|
+
}), cover && !collapsed && /*#__PURE__*/_jsx("div", {
|
|
295
|
+
className: clsx(`${prefixCls}-cover`, hashId, classNames?.cover),
|
|
296
|
+
style: mergedStyles.cover,
|
|
297
|
+
children: cover
|
|
274
298
|
}), tabs ? /*#__PURE__*/_jsx("div", {
|
|
275
|
-
className: `${prefixCls}-tabs
|
|
299
|
+
className: clsx(`${prefixCls}-tabs`, hashId),
|
|
276
300
|
children: /*#__PURE__*/_jsx(Tabs, {
|
|
277
301
|
onChange: tabs.onChange,
|
|
278
302
|
...omit(tabs, ['cardProps']),
|
|
@@ -281,7 +305,7 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
281
305
|
})
|
|
282
306
|
}) : /*#__PURE__*/_jsx("div", {
|
|
283
307
|
className: bodyCls,
|
|
284
|
-
style:
|
|
308
|
+
style: mergedStyles.body,
|
|
285
309
|
children: loading ? loadingDOM : childrenModified
|
|
286
310
|
}), actions ? /*#__PURE__*/_jsx(Actions, {
|
|
287
311
|
actions: actions,
|
|
@@ -147,7 +147,7 @@ const genProCardStyle = token => {
|
|
|
147
147
|
},
|
|
148
148
|
[`${componentCls}-title`]: {
|
|
149
149
|
color: token.colorText,
|
|
150
|
-
fontWeight:
|
|
150
|
+
fontWeight: token.fontWeightStrong,
|
|
151
151
|
fontSize: token.fontSizeLG,
|
|
152
152
|
lineHeight: token.lineHeight
|
|
153
153
|
},
|
|
@@ -169,6 +169,17 @@ const genProCardStyle = token => {
|
|
|
169
169
|
transition: `transform ${token.motionDurationMid}`
|
|
170
170
|
}
|
|
171
171
|
},
|
|
172
|
+
[`${componentCls}-cover`]: {
|
|
173
|
+
overflow: 'hidden',
|
|
174
|
+
borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`,
|
|
175
|
+
'& > *': {
|
|
176
|
+
width: '100%',
|
|
177
|
+
display: 'block'
|
|
178
|
+
},
|
|
179
|
+
'& img': {
|
|
180
|
+
verticalAlign: 'middle'
|
|
181
|
+
}
|
|
182
|
+
},
|
|
172
183
|
[`${componentCls}-body`]: {
|
|
173
184
|
display: 'block',
|
|
174
185
|
boxSizing: 'border-box',
|
|
@@ -41,7 +41,7 @@ const Statistic = props => {
|
|
|
41
41
|
const tipDom = tip && /*#__PURE__*/_jsx(Tooltip, {
|
|
42
42
|
title: tip,
|
|
43
43
|
children: /*#__PURE__*/_jsx(QuestionCircleOutlined, {
|
|
44
|
-
className: `${prefixCls}-tip
|
|
44
|
+
className: clsx(`${prefixCls}-tip`, hashId)
|
|
45
45
|
})
|
|
46
46
|
});
|
|
47
47
|
const trendIconClassName = clsx(`${prefixCls}-trend-icon`, hashId, {
|
|
@@ -78,7 +78,7 @@ const Statistic = props => {
|
|
|
78
78
|
className: statisticClassName,
|
|
79
79
|
...others
|
|
80
80
|
}), description && /*#__PURE__*/_jsx("div", {
|
|
81
|
-
className: `${prefixCls}-description
|
|
81
|
+
className: clsx(`${prefixCls}-description`, hashId),
|
|
82
82
|
children: description
|
|
83
83
|
})]
|
|
84
84
|
})]
|
|
@@ -54,7 +54,7 @@ const StatisticCard = props => {
|
|
|
54
54
|
children: [statisticDom, chartDom]
|
|
55
55
|
}));
|
|
56
56
|
const footerDom = footer && /*#__PURE__*/_jsx("div", {
|
|
57
|
-
className: `${prefixCls}-footer
|
|
57
|
+
className: clsx(`${prefixCls}-footer`, hashId),
|
|
58
58
|
children: footer
|
|
59
59
|
});
|
|
60
60
|
return wrapSSR( /*#__PURE__*/_jsxs(Card, {
|
package/es/card/typing.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { TabPaneProps, TabsProps } from 'antd';
|
|
1
|
+
import type { CardProps as AntdCardProps, TabPaneProps, TabsProps } from 'antd';
|
|
2
2
|
import type { ReactNode } from 'react';
|
|
3
3
|
import type { LabelTooltipType } from '../utils';
|
|
4
4
|
export type { LabelTooltipType };
|
|
@@ -6,12 +6,31 @@ export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
|
|
|
6
6
|
export type Gutter = number | Partial<Record<Breakpoint, number>>;
|
|
7
7
|
export type ColSpanType = number | string;
|
|
8
8
|
type CollapsibleType = 'icon' | 'header' | boolean;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
/** 与 antd Card 一致的 styles 结构 */
|
|
10
|
+
export interface ProCardStyles {
|
|
11
|
+
root?: React.CSSProperties;
|
|
12
|
+
header?: React.CSSProperties;
|
|
13
|
+
body?: React.CSSProperties;
|
|
14
|
+
extra?: React.CSSProperties;
|
|
15
|
+
title?: React.CSSProperties;
|
|
16
|
+
actions?: React.CSSProperties;
|
|
17
|
+
cover?: React.CSSProperties;
|
|
18
|
+
}
|
|
19
|
+
/** 与 antd Card 一致的 classNames 结构 */
|
|
20
|
+
export interface ProCardClassNames {
|
|
21
|
+
root?: string;
|
|
22
|
+
header?: string;
|
|
23
|
+
body?: string;
|
|
24
|
+
extra?: string;
|
|
25
|
+
title?: string;
|
|
26
|
+
actions?: string;
|
|
27
|
+
cover?: string;
|
|
28
|
+
}
|
|
29
|
+
type CardPropsBase = Pick<AntdCardProps, 'rootClassName' | 'cover'> & {
|
|
30
|
+
/** 样式配置,与 antd Card styles 结构一致 */
|
|
31
|
+
styles?: ProCardStyles;
|
|
32
|
+
/** 语义化 classNames,与 antd Card classNames 结构一致 */
|
|
33
|
+
classNames?: ProCardClassNames;
|
|
15
34
|
/** 页头是否有分割线 */
|
|
16
35
|
headerBordered?: boolean;
|
|
17
36
|
/** 卡片标题 */
|
|
@@ -43,7 +62,7 @@ type CardPropsBase = {
|
|
|
43
62
|
actions?: React.ReactNode[] | React.ReactNode;
|
|
44
63
|
/** 拆分卡片方式 */
|
|
45
64
|
split?: 'vertical' | 'horizontal';
|
|
46
|
-
/** Card
|
|
65
|
+
/** 卡片变体,与 antd Card variant 一致 */
|
|
47
66
|
variant?: 'outlined' | 'borderless';
|
|
48
67
|
/**
|
|
49
68
|
* 鼠标移过时可浮起
|
|
@@ -27,6 +27,8 @@ type RenderProps = Omit<ProFieldFCRenderProps, 'text' | 'placeholder'> & ProRend
|
|
|
27
27
|
*
|
|
28
28
|
* @param dataValue
|
|
29
29
|
* @param valueType
|
|
30
|
+
* @param props
|
|
31
|
+
* @param valueTypeMap
|
|
30
32
|
*/
|
|
31
33
|
export declare const defaultRenderText: (dataValue: ProFieldTextType, valueType: ProFieldValueType | ProFieldValueObjectType, props: RenderProps, valueTypeMap: Record<string, ProRenderFieldPropsType>) => React.ReactNode;
|
|
32
34
|
export declare const ProField: React.ForwardRefRenderFunction<any, ProFieldPropsType>;
|
package/es/field/AllProField.js
CHANGED
|
@@ -55,6 +55,7 @@ dayjs.extend(weekday);
|
|
|
55
55
|
*
|
|
56
56
|
* @param text String | number
|
|
57
57
|
* @param valueType ProColumnsValueObjectType
|
|
58
|
+
* @param props
|
|
58
59
|
*/
|
|
59
60
|
const defaultRenderTextByObject = (text, valueType, props) => {
|
|
60
61
|
const pickFormItemProps = pickProProps(props.fieldProps);
|
|
@@ -102,6 +103,8 @@ const defaultRenderTextByObject = (text, valueType, props) => {
|
|
|
102
103
|
*
|
|
103
104
|
* @param dataValue
|
|
104
105
|
* @param valueType
|
|
106
|
+
* @param props
|
|
107
|
+
* @param valueTypeMap
|
|
105
108
|
*/
|
|
106
109
|
export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) => {
|
|
107
110
|
const {
|
|
@@ -29,6 +29,8 @@ type RenderProps = Omit<ProFieldFCRenderProps, 'text' | 'placeholder'> & ProRend
|
|
|
29
29
|
*
|
|
30
30
|
* @param dataValue
|
|
31
31
|
* @param valueType
|
|
32
|
+
* @param props
|
|
33
|
+
* @param valueTypeMap
|
|
32
34
|
*/
|
|
33
35
|
export declare const pureRenderText: (dataValue: ProFieldTextType, valueType: ProFieldValueType | ProFieldValueObjectType, props: RenderProps, valueTypeMap: Record<string, ProRenderFieldPropsType>) => React.ReactNode;
|
|
34
36
|
/** ProField 的类型 */
|
package/es/field/PureProField.js
CHANGED
|
@@ -10,7 +10,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
10
10
|
/**
|
|
11
11
|
* 级联选择组件
|
|
12
12
|
*
|
|
13
|
-
* @param
|
|
13
|
+
* @param placeholder
|
|
14
|
+
* @param formItemRender
|
|
15
|
+
* @param mode
|
|
16
|
+
* @param render
|
|
17
|
+
* @param label
|
|
18
|
+
* @param light
|
|
19
|
+
* @param variant
|
|
20
|
+
* @param rest
|
|
14
21
|
* @param ref
|
|
15
22
|
*/
|
|
16
23
|
const FieldCascader = ({
|
|
@@ -3,5 +3,5 @@ import React from 'react';
|
|
|
3
3
|
declare const _default: React.ForwardRefExoticComponent<import("src/provider").BaseProFieldFC & import("src/provider").ProRenderFieldPropsType & {
|
|
4
4
|
text: string;
|
|
5
5
|
mode?: "update" | "read" | "edit" | undefined;
|
|
6
|
-
} & Partial<Omit<ColorPickerProps, "
|
|
6
|
+
} & Partial<Omit<ColorPickerProps, "value" | "mode">> & React.RefAttributes<any>>;
|
|
7
7
|
export default _default;
|
|
@@ -5,6 +5,6 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
|
|
|
5
5
|
format?: string | undefined;
|
|
6
6
|
showTime?: boolean | undefined;
|
|
7
7
|
variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
|
|
8
|
-
picker?: "time" | "date" | "month" | "week" | "
|
|
8
|
+
picker?: "time" | "date" | "month" | "week" | "year" | "quarter" | undefined;
|
|
9
9
|
} & ProFieldLightProps & React.RefAttributes<any>>;
|
|
10
10
|
export default _default;
|
|
@@ -19,7 +19,19 @@ const formatDate = (text, format) => {
|
|
|
19
19
|
/**
|
|
20
20
|
* 日期选择组件
|
|
21
21
|
*
|
|
22
|
-
* @param
|
|
22
|
+
* @param text
|
|
23
|
+
* @param mode
|
|
24
|
+
* @param format
|
|
25
|
+
* @param label
|
|
26
|
+
* @param light
|
|
27
|
+
* @param render
|
|
28
|
+
* @param formItemRender
|
|
29
|
+
* @param showTime
|
|
30
|
+
* @param fieldProps
|
|
31
|
+
* @param picker
|
|
32
|
+
* @param lightLabel
|
|
33
|
+
* @param variant
|
|
34
|
+
* @param ref
|
|
23
35
|
*/
|
|
24
36
|
const FieldDatePicker = ({
|
|
25
37
|
text,
|
|
@@ -4,12 +4,25 @@ import React, { useCallback } from 'react';
|
|
|
4
4
|
import { useIntl } from "../../../provider";
|
|
5
5
|
import { isNil } from "../../../utils";
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
/**
|
|
8
|
+
* 判断字符串是否为空或仅包含空白字符
|
|
9
|
+
* @param {string} str - 要检查的字符串
|
|
10
|
+
* @returns {boolean} - 如果为空或仅包含空白字符返回 true,否则返回 false
|
|
11
|
+
*/
|
|
12
|
+
function isEmptyOrWhitespace(str) {
|
|
13
|
+
return isNil(str) || str === '' || str?.trim() === '';
|
|
14
|
+
}
|
|
15
|
+
|
|
7
16
|
/**
|
|
8
17
|
* 数字组件
|
|
9
18
|
*
|
|
10
|
-
* @param
|
|
11
|
-
*
|
|
12
|
-
*
|
|
19
|
+
* @param text
|
|
20
|
+
* @param type
|
|
21
|
+
* @param render
|
|
22
|
+
* @param placeholder
|
|
23
|
+
* @param formItemRender
|
|
24
|
+
* @param fieldProps
|
|
25
|
+
* @param ref
|
|
13
26
|
*/
|
|
14
27
|
const FieldDigit = ({
|
|
15
28
|
text,
|
|
@@ -80,6 +93,10 @@ const FieldDigit = ({
|
|
|
80
93
|
onChange: e => fieldProps?.onChange?.(proxyChange(e)),
|
|
81
94
|
onBlur: e => {
|
|
82
95
|
const value = e.target.value;
|
|
96
|
+
if (isEmptyOrWhitespace(value)) {
|
|
97
|
+
fieldProps?.onBlur?.(e);
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
83
100
|
const processedValue = proxyChange(value);
|
|
84
101
|
// 更新输入框的值
|
|
85
102
|
if (e.target && typeof processedValue === 'number') {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { omit, useControlledState } from '@rc-component/util';
|
|
2
2
|
import { InputNumber, Popover } from 'antd';
|
|
3
|
-
import React, { useCallback, useMemo } from 'react';
|
|
3
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
4
|
import { intlMap as allIntlMap, useIntl } from "../../../provider";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
const defaultMoneyIntl = new Intl.NumberFormat('zh-Hans-CN', {
|
|
@@ -116,16 +116,53 @@ const InputNumberPopover = /*#__PURE__*/React.forwardRef(({
|
|
|
116
116
|
numberFormatOptions,
|
|
117
117
|
numberPopoverRender,
|
|
118
118
|
open,
|
|
119
|
+
onOpenChange,
|
|
119
120
|
...rest
|
|
120
121
|
}, ref) => {
|
|
121
122
|
const [value, setValueInner] = useControlledState(() => rest.defaultValue, rest.value);
|
|
123
|
+
|
|
124
|
+
// 使用本地状态管理 Popover 显示,同时支持受控模式
|
|
125
|
+
const [localOpen, setLocalOpen] = useState(open ?? false);
|
|
126
|
+
|
|
127
|
+
// 跟踪组件挂载状态,防止在卸载后执行状态更新
|
|
128
|
+
const mountedRef = useRef(true);
|
|
129
|
+
useEffect(() => {
|
|
130
|
+
mountedRef.current = true;
|
|
131
|
+
return () => {
|
|
132
|
+
mountedRef.current = false;
|
|
133
|
+
};
|
|
134
|
+
}, []);
|
|
135
|
+
|
|
136
|
+
// 同步外部 open 属性到本地状态,支持受控模式
|
|
137
|
+
useEffect(() => {
|
|
138
|
+
if (open !== undefined) {
|
|
139
|
+
setLocalOpen(open);
|
|
140
|
+
}
|
|
141
|
+
}, [open]);
|
|
122
142
|
const onChange = useCallback(updater => {
|
|
123
143
|
setValueInner(prev => {
|
|
124
144
|
const next = typeof updater === 'function' ? updater(prev) : updater;
|
|
125
145
|
rest.onChange?.(next);
|
|
126
146
|
return next;
|
|
127
147
|
});
|
|
128
|
-
}, [rest.onChange]);
|
|
148
|
+
}, [rest.onChange, setValueInner]);
|
|
149
|
+
|
|
150
|
+
// 优化的 onOpenChange 处理器
|
|
151
|
+
const handleOpenChange = useCallback(visible => {
|
|
152
|
+
// 通知父组件状态变化
|
|
153
|
+
onOpenChange?.(visible);
|
|
154
|
+
|
|
155
|
+
// 如果是受控模式(传入了 open prop),不更新本地状态
|
|
156
|
+
if (open === undefined) {
|
|
157
|
+
// 使用 queueMicrotask 延迟状态更新,避免在渲染期间触发 flushSync
|
|
158
|
+
queueMicrotask(() => {
|
|
159
|
+
// 检查组件是否仍然挂载,避免在卸载后更新状态
|
|
160
|
+
if (mountedRef.current) {
|
|
161
|
+
setLocalOpen(visible);
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
}, [open, onOpenChange]);
|
|
129
166
|
|
|
130
167
|
/**
|
|
131
168
|
* 如果content 存在要根据 content 渲染一下
|
|
@@ -134,9 +171,20 @@ const InputNumberPopover = /*#__PURE__*/React.forwardRef(({
|
|
|
134
171
|
...rest,
|
|
135
172
|
value
|
|
136
173
|
});
|
|
174
|
+
|
|
175
|
+
// 没有 dom 时不显示 Popover
|
|
176
|
+
if (!dom) {
|
|
177
|
+
return /*#__PURE__*/_jsx(InputNumber, {
|
|
178
|
+
ref: ref,
|
|
179
|
+
...rest,
|
|
180
|
+
value: value,
|
|
181
|
+
onChange: onChange
|
|
182
|
+
});
|
|
183
|
+
}
|
|
137
184
|
return /*#__PURE__*/_jsx(Popover, {
|
|
138
185
|
placement: "topLeft",
|
|
139
|
-
open:
|
|
186
|
+
open: localOpen,
|
|
187
|
+
onOpenChange: handleOpenChange,
|
|
140
188
|
trigger: ['focus', 'click'],
|
|
141
189
|
content: dom,
|
|
142
190
|
getPopupContainer: triggerNode => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
|
|
2
|
-
import { useControlledState } from '@rc-component/util';
|
|
2
|
+
import { omit, useControlledState } from '@rc-component/util';
|
|
3
3
|
import { Input, Space } from 'antd';
|
|
4
4
|
import React, { useCallback } from 'react';
|
|
5
5
|
import { useIntl } from "../../../provider";
|
|
@@ -9,18 +9,19 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
9
9
|
/**
|
|
10
10
|
* 最基本的组件,就是个普通的 Input.Password
|
|
11
11
|
*
|
|
12
|
-
* @param
|
|
12
|
+
* @param props
|
|
13
|
+
* @param ref
|
|
13
14
|
*/
|
|
14
|
-
const FieldPassword = ({
|
|
15
|
-
text,
|
|
16
|
-
mode,
|
|
17
|
-
render,
|
|
18
|
-
formItemRender,
|
|
19
|
-
fieldProps,
|
|
20
|
-
proFieldKey,
|
|
21
|
-
...rest
|
|
22
|
-
}, ref) => {
|
|
15
|
+
const FieldPassword = (props, ref) => {
|
|
23
16
|
const intl = useIntl();
|
|
17
|
+
const {
|
|
18
|
+
text,
|
|
19
|
+
mode,
|
|
20
|
+
render,
|
|
21
|
+
formItemRender,
|
|
22
|
+
fieldProps,
|
|
23
|
+
...rest
|
|
24
|
+
} = omit(props, ['proFieldKey']);
|
|
24
25
|
const [open, setOpenInner] = useControlledState(() => rest.open || false, rest.open);
|
|
25
26
|
const setOpen = useCallback(updater => {
|
|
26
27
|
setOpenInner(prev => {
|
|
@@ -5,6 +5,6 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
|
|
|
5
5
|
format?: string | undefined;
|
|
6
6
|
variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
|
|
7
7
|
showTime?: boolean | undefined;
|
|
8
|
-
picker?: "time" | "date" | "month" | "week" | "
|
|
8
|
+
picker?: "time" | "date" | "month" | "week" | "year" | "quarter" | undefined;
|
|
9
9
|
} & ProFieldLightProps & React.RefAttributes<any>>;
|
|
10
10
|
export default _default;
|
|
@@ -7,7 +7,8 @@ import { useFieldFetchData } from "../Select";
|
|
|
7
7
|
/**
|
|
8
8
|
* Segmented https://ant.design/components/segmented-cn/
|
|
9
9
|
*
|
|
10
|
-
* @param
|
|
10
|
+
* @param props
|
|
11
|
+
* @param ref
|
|
11
12
|
*/
|
|
12
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
14
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { useControlledState } from '@rc-component/util';
|
|
1
2
|
import { ConfigProvider, Select } from 'antd';
|
|
2
3
|
import { clsx } from 'clsx';
|
|
3
|
-
import React, { useContext, useEffect, useImperativeHandle, useRef
|
|
4
|
+
import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';
|
|
4
5
|
import { nanoid } from "../../../../utils";
|
|
5
6
|
|
|
6
7
|
// 支持 key, value, label,兼容 UserSearch 中只填写了 key 的情况。
|
|
@@ -41,7 +42,7 @@ const SearchSelect = (props, ref) => {
|
|
|
41
42
|
value: valuePropsName = 'value',
|
|
42
43
|
options: optionsPropsName = 'options'
|
|
43
44
|
} = fieldNames || {};
|
|
44
|
-
const [searchValue, setSearchValue] =
|
|
45
|
+
const [searchValue, setSearchValue] = useControlledState(defaultSearchValue, propsSearchValue);
|
|
45
46
|
const selectRef = useRef();
|
|
46
47
|
useImperativeHandle(ref, () => selectRef.current);
|
|
47
48
|
useEffect(() => {
|
|
@@ -49,9 +50,6 @@ const SearchSelect = (props, ref) => {
|
|
|
49
50
|
selectRef?.current?.focus();
|
|
50
51
|
}
|
|
51
52
|
}, [restProps.autoFocus]);
|
|
52
|
-
useEffect(() => {
|
|
53
|
-
setSearchValue(propsSearchValue);
|
|
54
|
-
}, [propsSearchValue]);
|
|
55
53
|
const {
|
|
56
54
|
getPrefixCls
|
|
57
55
|
} = useContext(ConfigProvider.ConfigContext);
|
|
@@ -23,7 +23,7 @@ export type FieldSelectProps<FieldProps = any> = {
|
|
|
23
23
|
/**
|
|
24
24
|
* 把 value 的枚举转化为数组
|
|
25
25
|
*
|
|
26
|
-
* @param
|
|
26
|
+
* @param valueEnumParams
|
|
27
27
|
*/
|
|
28
28
|
export declare const proFieldParsingValueEnumToArray: (valueEnumParams: ProFieldValueEnumType) => SelectOptionType;
|
|
29
29
|
export declare const useFieldFetchData: (props: FieldSelectProps & {
|
|
@@ -6,9 +6,17 @@ import { FieldLabel } from "../../../utils";
|
|
|
6
6
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* 开关组件
|
|
10
10
|
*
|
|
11
|
-
* @param
|
|
11
|
+
* @param text
|
|
12
|
+
* @param mode
|
|
13
|
+
* @param render
|
|
14
|
+
* @param light
|
|
15
|
+
* @param label
|
|
16
|
+
* @param formItemRender
|
|
17
|
+
* @param fieldProps
|
|
18
|
+
* @param propsVariant
|
|
19
|
+
* @param ref
|
|
12
20
|
*/
|
|
13
21
|
const FieldSwitch = ({
|
|
14
22
|
text,
|