@unicom-cloud/ui 0.8.107 → 0.8.108
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/ColorPicker.js +15 -14
- package/Constant.js +4 -0
- package/Copy.js +4 -3
- package/Countdown.js +25 -0
- package/Grid.js +8 -10
- package/LiquidFill.js +4 -3
- package/List.js +7 -6
- package/Marquee.js +4 -3
- package/PageHeader.js +3 -2
- package/QrCode.js +4 -3
- package/RowCol.js +8 -0
- package/Segmented.js +14 -4
- package/Statistic.js +5 -4
- package/Tour.js +4 -3
- package/Transfer.js +4 -2
- package/anchor/Link.js +1 -1
- package/avatar/Group.js +1 -1
- package/button/index.js +52 -51
- package/calendar/Lunar.js +21 -21
- package/cascader/base/node.js +22 -20
- package/cascader/base/store.js +10 -10
- package/cascader/util.js +29 -27
- package/color-picker/Mode.js +8 -7
- package/color-picker/hooks/useColorPicker.js +56 -55
- package/color-picker/index.js +54 -53
- package/color-picker/utils.js +58 -57
- package/components/common/empty/index.js +2 -2
- package/components/common/flex/index.js +64 -55
- package/components/common/flex/interface.js +6 -6
- package/components/common/hooks/useInterval.js +6 -6
- package/components/common/space/index.js +53 -53
- package/components/common/utils/dayjs.js +75 -62
- package/components/common/utils/toArray.js +7 -5
- package/constant/index.js +4 -0
- package/copy/index.js +2 -1
- package/countdown/index.js +113 -0
- package/countdown/interface.js +1 -0
- package/countdown/util.js +29 -0
- package/descriptions/index.js +26 -26
- package/dropdown/Button.js +1 -1
- package/flex/index.js +30 -29
- package/form/FormItem.js +126 -122
- package/grid/Grid.js +40 -41
- package/grid/Item.js +37 -37
- package/grid/context.js +2 -3
- package/grid/index.js +6 -8
- package/hooks/useResponsiveState.js +54 -0
- package/index.js +614 -610
- package/input/InputElement.js +25 -24
- package/layout/Sider.js +1 -1
- package/liquid-fill/index.js +4 -3
- package/list/Item.js +21 -21
- package/list/index.js +53 -52
- package/marquee/index.js +20 -19
- package/marquee-/index.js +4 -3
- package/mentions/util.js +9 -8
- package/package.json +1 -1
- package/page-header/index.js +57 -56
- package/pagination/Pagination.js +89 -92
- package/qr-code/index.js +4 -3
- package/radio/Group.js +1 -1
- package/row-col/Col-.js +88 -0
- package/row-col/Col.js +159 -0
- package/row-col/Row.js +73 -0
- package/row-col/context.js +5 -0
- package/row-col/index.js +11 -0
- package/row-col/interface.js +1 -0
- package/segmented/index.js +257 -206
- package/select/Select.js +191 -191
- package/select/util.js +50 -50
- package/space/index.js +15 -13
- package/statistic/index.js +56 -55
- package/statistic/interface.js +4 -1
- package/style.css +1 -1
- package/table/hook/useColumns.js +27 -26
- package/table/hook/useStickyClassNames.js +9 -8
- package/table/hook/useThResizable.js +4 -3
- package/table/th-resizable/index.js +11 -10
- package/table/thead/index.js +18 -16
- package/timeline/Item.js +1 -1
- package/tour/index.js +4 -3
- package/transfer/index.js +93 -91
- package/trigger/index.js +66 -66
- package/types/common/flex/index.d.ts +3 -9
- package/types/common/flex/interface.d.ts +15 -4
- package/types/common/space/index.d.ts +3 -5
- package/types/common/space/interface.d.ts +2 -0
- package/types/common/utils/dayjs.d.ts +3 -1
- package/types/pc/button/interface.d.ts +2 -2
- package/types/pc/config-provider/interface.d.ts +16 -11
- package/types/pc/constant/index.d.ts +1 -0
- package/types/pc/countdown/interface.d.ts +65 -0
- package/types/pc/countdown/util.d.ts +7 -0
- package/types/pc/flex/index.d.ts +8 -6
- package/types/pc/flex/interface.d.ts +3 -10
- package/types/pc/form/FormItem.d.ts +1 -1
- package/types/pc/form/interface.d.ts +1 -1
- package/types/pc/grid/Grid.d.ts +1 -2
- package/types/pc/grid/Item.d.ts +1 -2
- package/types/pc/grid/context.d.ts +0 -5
- package/types/pc/grid/index.d.ts +4 -6
- package/types/pc/grid/interface.d.ts +7 -125
- package/types/pc/hooks/useResponsiveState.d.ts +3 -0
- package/types/pc/index.d.ts +7 -3
- package/types/pc/list/interface.d.ts +2 -1
- package/types/pc/pagination/PageOption.d.ts +0 -1
- package/types/pc/pagination/interface.d.ts +5 -6
- package/types/pc/{grid → row-col}/Col-.d.ts +1 -1
- package/types/pc/{grid → row-col}/Col.d.ts +1 -2
- package/types/pc/{grid → row-col}/Row.d.ts +1 -2
- package/types/pc/row-col/context.d.ts +6 -0
- package/types/pc/row-col/index.d.ts +7 -0
- package/types/pc/row-col/interface.d.ts +112 -0
- package/types/pc/segmented/index.d.ts +3 -7
- package/types/pc/segmented/interface.d.ts +38 -5
- package/types/pc/space/index.d.ts +5 -7
- package/types/pc/space/interface.d.ts +3 -10
- package/types/pc/statistic/index.d.ts +1 -1
- package/types/pc/statistic/interface.d.ts +1 -49
- package/types/pc/utils/names.d.ts +121 -113
- package/types/pc/utils/responsiveObserve.d.ts +8 -8
- package/typography/Ellipsis.js +5 -4
- package/typography/Operations.js +4 -3
- package/utils/dayjs.js +13 -11
- package/utils/index.js +244 -242
- package/utils/names.js +15 -10
- package/utils/responsiveObserve.js +43 -36
- package/version/index.js +1 -1
- package/grid/Col-.js +0 -86
- package/grid/Col.js +0 -169
- package/grid/Row.js +0 -96
- package/grid/hook/useResponsiveState.js +0 -35
- package/statistic/Countdown.js +0 -56
- package/statistic/util.js +0 -33
- package/types/pc/grid/hook/useResponsiveState.d.ts +0 -2
- package/types/pc/statistic/util.d.ts +0 -1
- /package/types/pc/{statistic/Countdown.d.ts → countdown/index.d.ts} +0 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export type GapProperty = 'gap' | 'rowGap' | 'columnGap';
|
|
3
3
|
export declare const GAP_SIZE_MAP: {
|
|
4
|
-
mini:
|
|
5
|
-
small:
|
|
6
|
-
medium:
|
|
7
|
-
large:
|
|
4
|
+
mini: number;
|
|
5
|
+
small: number;
|
|
6
|
+
medium: number;
|
|
7
|
+
large: number;
|
|
8
8
|
};
|
|
9
9
|
export type SizeType = keyof typeof GAP_SIZE_MAP;
|
|
10
10
|
export type GapType = SizeType | React.CSSProperties['gap'];
|
|
@@ -13,6 +13,10 @@ export type GapType = SizeType | React.CSSProperties['gap'];
|
|
|
13
13
|
* @description Flex布局组件属性
|
|
14
14
|
*/
|
|
15
15
|
export interface FlexProps extends React.HTMLAttributes<HTMLElement> {
|
|
16
|
+
/**
|
|
17
|
+
* @zh 元素的行为类似于行级元素并且它的内容根据弹性盒模型布局。
|
|
18
|
+
*/
|
|
19
|
+
inline?: boolean;
|
|
16
20
|
/**
|
|
17
21
|
* @zh 布局方向
|
|
18
22
|
*/
|
|
@@ -60,3 +64,10 @@ export interface FlexProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
60
64
|
*/
|
|
61
65
|
children: React.ReactNode;
|
|
62
66
|
}
|
|
67
|
+
export interface FlexVerticalProps extends Omit<FlexProps, 'direction'> {
|
|
68
|
+
/**
|
|
69
|
+
* @zh 垂直布局(正序或倒序)
|
|
70
|
+
* @en vertical layout
|
|
71
|
+
*/
|
|
72
|
+
direction?: 'column' | 'column-reverse';
|
|
73
|
+
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare const SpaceVertical: import("react").ForwardRefExoticComponent<
|
|
1
|
+
import { SpaceProps, type SpaceVerticalProps } from './interface';
|
|
2
|
+
declare const SpaceVertical: import("react").ForwardRefExoticComponent<SpaceVerticalProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
3
3
|
declare const Space: import("react").ForwardRefExoticComponent<SpaceProps & import("react").RefAttributes<HTMLDivElement>> & {
|
|
4
|
-
|
|
5
|
-
Vertical: import("react").ForwardRefExoticComponent<SpaceProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
Vertical: import("react").ForwardRefExoticComponent<SpaceVerticalProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
5
|
};
|
|
7
6
|
export { SpaceVertical };
|
|
8
7
|
export default Space;
|
|
9
|
-
export type { SpaceGap, SpaceProps };
|
|
@@ -13,7 +13,9 @@ export declare function getNow(utcOffset?: number, timezone?: string): originDay
|
|
|
13
13
|
export declare function toTimezone(time: Dayjs, utcOffset?: number, timezone?: string, local?: boolean): Dayjs;
|
|
14
14
|
export declare function toLocal(time: Dayjs, utcOffset?: number, timezone?: string): Dayjs;
|
|
15
15
|
export declare function getTimeFormat(format: string): string;
|
|
16
|
-
export declare function
|
|
16
|
+
export declare function formatValue(time: string | Dayjs, format?: string | undefined): originDayjs.Dayjs;
|
|
17
|
+
export declare function getRealTime(time: string | Dayjs, format: string, utcOffset: number | undefined, timezone: string | undefined): originDayjs.Dayjs;
|
|
18
|
+
export declare function getDayjsValue(time: number | string | Date | Dayjs | undefined, format: string | string[], utcOffset?: number, timezone?: string): originDayjs.Dayjs | (originDayjs.Dayjs | undefined)[] | undefined;
|
|
17
19
|
export declare function getValueWithTime(date: Dayjs, time?: Dayjs): Dayjs;
|
|
18
20
|
export declare function getSortedDayjsArray(values?: Dayjs[]): originDayjs.Dayjs[] | undefined;
|
|
19
21
|
export declare function isDayjsChange(prevValue: Dayjs | undefined, currentValue: Dayjs | undefined): boolean | originDayjs.Dayjs;
|
|
@@ -21,9 +21,9 @@ export interface BaseButtonProps {
|
|
|
21
21
|
/**
|
|
22
22
|
* @zh 按钮的尺寸
|
|
23
23
|
* @en Size of the button
|
|
24
|
-
* @defaultValue
|
|
24
|
+
* @defaultValue medium
|
|
25
25
|
*/
|
|
26
|
-
size?: 'mini' | 'small' | '
|
|
26
|
+
size?: 'mini' | 'small' | 'medium' | 'large' | 'default';
|
|
27
27
|
/**
|
|
28
28
|
* @zh 按钮形状,`circle` - 圆形, `round` - 全圆角, `square` - 长方形
|
|
29
29
|
* @en Three button shapes are available: `circle`, `round` and `square`
|
|
@@ -16,6 +16,7 @@ import { CheckboxProps } from '../checkbox/interface';
|
|
|
16
16
|
import { CollapseProps } from '../collapse/interface';
|
|
17
17
|
import { ColorPickerProps } from '../color-picker/interface';
|
|
18
18
|
import { CommentProps } from '../comment/interface';
|
|
19
|
+
import type { CountdownProps } from '../countdown';
|
|
19
20
|
import { PickerProps as DatePickerCommonProps } from '../date-picker/interface';
|
|
20
21
|
import { DescriptionsProps } from '../descriptions/interface';
|
|
21
22
|
import { DetailsProps } from '../details/interface';
|
|
@@ -25,7 +26,7 @@ import { DropdownButtonProps, DropdownProps } from '../dropdown/interface';
|
|
|
25
26
|
import { EmptyProps } from '../empty/interface';
|
|
26
27
|
import type { FlexProps } from '../flex/interface';
|
|
27
28
|
import { FormProps } from '../form/interface';
|
|
28
|
-
import {
|
|
29
|
+
import { GridItemProps, GridProps } from '../grid/interface';
|
|
29
30
|
import { ImageProps } from '../image/interface';
|
|
30
31
|
import { InputNumberProps } from '../input-number/interface';
|
|
31
32
|
import { InputTagProps } from '../input-tag/interface';
|
|
@@ -50,6 +51,7 @@ import { RadioGroupProps, RadioProps } from '../radio/interface';
|
|
|
50
51
|
import { RateProps } from '../rate/interface';
|
|
51
52
|
import { ResizeBoxProps } from '../resize-box/interface';
|
|
52
53
|
import { ResultProps } from '../result/interface';
|
|
54
|
+
import type { ColProps, RowProps } from '../row-col/interface';
|
|
53
55
|
import type { SegmentedProps } from '../segmented/interface';
|
|
54
56
|
import { SelectProps } from '../select/interface';
|
|
55
57
|
import { SkeletonProps } from '../skeleton/interface';
|
|
@@ -82,9 +84,9 @@ export type ComponentConfig = {
|
|
|
82
84
|
Alert?: AlertProps;
|
|
83
85
|
AutoComplete?: AutoCompleteProps;
|
|
84
86
|
Avatar?: AvatarProps;
|
|
85
|
-
|
|
87
|
+
AvatarGroup?: AvatarGroupProps;
|
|
86
88
|
Anchor?: AnchorProps;
|
|
87
|
-
|
|
89
|
+
AnchorLink?: AnchorLinkProps;
|
|
88
90
|
BackTop?: BackTopProps;
|
|
89
91
|
Badge?: BadgeProps;
|
|
90
92
|
Breadcrumb?: BreadcrumbProps;
|
|
@@ -102,15 +104,17 @@ export type ComponentConfig = {
|
|
|
102
104
|
Divider?: DividerProps;
|
|
103
105
|
Drawer?: DrawerProps;
|
|
104
106
|
Dropdown?: DropdownProps;
|
|
105
|
-
|
|
107
|
+
DropdownButton?: DropdownButtonProps;
|
|
106
108
|
Empty?: EmptyProps;
|
|
107
109
|
Typography?: TypographyProps;
|
|
108
|
-
|
|
110
|
+
TypographyEllipsis?: TypographyEllipsisProps;
|
|
109
111
|
Form?: FormProps;
|
|
110
|
-
|
|
111
|
-
|
|
112
|
+
Row?: RowProps;
|
|
113
|
+
Col?: ColProps;
|
|
112
114
|
Grid?: GridProps;
|
|
113
|
-
|
|
115
|
+
GridItem?: GridItemProps;
|
|
116
|
+
GridRow?: RowProps;
|
|
117
|
+
GridCol?: ColProps;
|
|
114
118
|
Image?: ImageProps;
|
|
115
119
|
Input?: InputProps;
|
|
116
120
|
InputNumber?: InputNumberProps;
|
|
@@ -120,7 +124,7 @@ export type ComponentConfig = {
|
|
|
120
124
|
Layout?: LayoutProps;
|
|
121
125
|
Link?: LinkProps;
|
|
122
126
|
List?: ListProps;
|
|
123
|
-
|
|
127
|
+
ListItem?: ListItemProps;
|
|
124
128
|
Mentions?: MentionsProps;
|
|
125
129
|
Menu?: MenuProps;
|
|
126
130
|
Modal?: ModalProps;
|
|
@@ -130,7 +134,7 @@ export type ComponentConfig = {
|
|
|
130
134
|
Popover?: PopoverProps;
|
|
131
135
|
Progress?: ProgressProps;
|
|
132
136
|
Radio?: RadioProps;
|
|
133
|
-
|
|
137
|
+
RadioGroup?: RadioGroupProps;
|
|
134
138
|
Rate?: RateProps;
|
|
135
139
|
ResizeBox?: ResizeBoxProps;
|
|
136
140
|
Result?: ResultProps;
|
|
@@ -140,6 +144,7 @@ export type ComponentConfig = {
|
|
|
140
144
|
Space?: SpaceProps;
|
|
141
145
|
Spin?: SpinProps;
|
|
142
146
|
Statistic?: StatisticProps;
|
|
147
|
+
Countdown?: CountdownProps;
|
|
143
148
|
Steps?: StepsProps;
|
|
144
149
|
Switch?: SwitchProps;
|
|
145
150
|
Table?: TableProps;
|
|
@@ -148,7 +153,7 @@ export type ComponentConfig = {
|
|
|
148
153
|
TriggerProps?: TriggerProps;
|
|
149
154
|
Tag?: TagProps;
|
|
150
155
|
Timeline?: TimelineProps;
|
|
151
|
-
|
|
156
|
+
TimelineItem?: TimelineItemProps;
|
|
152
157
|
TimePicker?: TimePickerCommonProps;
|
|
153
158
|
Tooltip?: TooltipProps;
|
|
154
159
|
Transfer?: TransferProps;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const COLS: 24;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { Dayjs } from 'dayjs';
|
|
2
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* @title Countdown
|
|
5
|
+
*/
|
|
6
|
+
export interface CountdownProps {
|
|
7
|
+
/**
|
|
8
|
+
* @zh 自定义样式
|
|
9
|
+
* @en Custom style
|
|
10
|
+
*/
|
|
11
|
+
style?: CSSProperties;
|
|
12
|
+
/**
|
|
13
|
+
* @zh 自定义类名
|
|
14
|
+
* @en Custom class name
|
|
15
|
+
*/
|
|
16
|
+
className?: string | string[];
|
|
17
|
+
/**
|
|
18
|
+
* @zh 数值的样式
|
|
19
|
+
* @en The css style of statistic's value
|
|
20
|
+
*/
|
|
21
|
+
styleValue?: CSSProperties;
|
|
22
|
+
/**
|
|
23
|
+
* @zh 数值的标题
|
|
24
|
+
* @en The title element
|
|
25
|
+
*/
|
|
26
|
+
title?: string | ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* @zh 倒计时的时间
|
|
29
|
+
* @en To set value
|
|
30
|
+
*/
|
|
31
|
+
value?: number | string | Date | Dayjs;
|
|
32
|
+
/**
|
|
33
|
+
* @zh [dayjs](https://github.com/iamkun/dayjs)'s format
|
|
34
|
+
* @en [dayjs](https://github.com/iamkun/dayjs)'s format
|
|
35
|
+
* @defaultValue HH:mm:ss
|
|
36
|
+
*/
|
|
37
|
+
format?: string;
|
|
38
|
+
/**
|
|
39
|
+
* @zh 自定义 render 函数。`valueDiff` 表示两个时间的时间差,`formattedDiff` 表示格式化后的时间差,
|
|
40
|
+
* @en Custom render function, the input parameter is the result formatted by `dayjs`
|
|
41
|
+
*/
|
|
42
|
+
renderFormat?: (valueDiff: number, formattedDiff: string) => ReactNode;
|
|
43
|
+
/**
|
|
44
|
+
* @zh 倒计时完成后触发的回调
|
|
45
|
+
* @en Callback at the end of the countdown
|
|
46
|
+
*/
|
|
47
|
+
onFinish?: () => void;
|
|
48
|
+
/**
|
|
49
|
+
* @zh 是否开始倒计时,默认为 `true`,可以通过设置该值控制倒计时的时机
|
|
50
|
+
* @en Whether to start the countdown
|
|
51
|
+
* @defaultValue true
|
|
52
|
+
*/
|
|
53
|
+
start?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* @zh 禁用自带样式
|
|
56
|
+
* @en Disable default style
|
|
57
|
+
*/
|
|
58
|
+
noStyle?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* @zh 是否循环倒计时
|
|
61
|
+
* @en Whether to loop the countdown
|
|
62
|
+
* @defaultValue false
|
|
63
|
+
*/
|
|
64
|
+
loop?: boolean;
|
|
65
|
+
}
|
package/types/pc/flex/index.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { FlexProps } from './interface';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
declare const Flex:
|
|
2
|
+
import type { FlexProps, FlexVerticalProps } from './interface';
|
|
3
|
+
/**
|
|
4
|
+
* 垂直布局组件
|
|
5
|
+
*/
|
|
6
|
+
declare const FlexVertical: React.FC<FlexVerticalProps>;
|
|
7
|
+
declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLElement>> & {
|
|
8
|
+
Vertical: React.FC<FlexVerticalProps>;
|
|
9
|
+
};
|
|
8
10
|
export { FlexVertical };
|
|
9
11
|
export default Flex;
|
|
@@ -1,16 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import type { FlexProps as CommonFlexProps, GapType, SizeType } from '../../common/flex/interface';
|
|
1
|
+
import type { FlexProps as CommonFlexProps, FlexVerticalProps as CommonFlexVerticalProps, GapType, SizeType } from '../../common/flex/interface';
|
|
3
2
|
export type { GapType, SizeType };
|
|
4
3
|
/**
|
|
5
4
|
* @title Flex
|
|
6
5
|
*/
|
|
7
6
|
export interface FlexProps extends CommonFlexProps {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
*/
|
|
11
|
-
className?: string;
|
|
12
|
-
/**
|
|
13
|
-
* 自定义样式
|
|
14
|
-
*/
|
|
15
|
-
style?: CSSProperties;
|
|
7
|
+
}
|
|
8
|
+
export interface FlexVerticalProps extends CommonFlexVerticalProps {
|
|
16
9
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import
|
|
2
|
+
import Row from '../row-col';
|
|
3
3
|
import { FormItemProps, KeyType } from './interface';
|
|
4
4
|
declare const _default: <FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData>(props: FormItemProps<FormData, FieldValue, FieldKey> & {
|
|
5
5
|
ref?: React.Ref<(typeof Row)["prototype"]>;
|
|
@@ -2,7 +2,7 @@ import { Options as ScrollIntoViewOptions } from '@unicom-cloud/scroll-into-view
|
|
|
2
2
|
import { ValidateMessagesTemplateType } from '@unicom-cloud/validate/types';
|
|
3
3
|
import React, { CSSProperties, FormHTMLAttributes, HTMLAttributes, ReactElement, ReactNode } from 'react';
|
|
4
4
|
import { JSX } from 'react/jsx-runtime';
|
|
5
|
-
import { ColProps } from '../
|
|
5
|
+
import type { ColProps } from '../row-col/interface';
|
|
6
6
|
import { TooltipProps } from '../tooltip/interface';
|
|
7
7
|
import Store from './store';
|
|
8
8
|
export type IndexedObject = {
|
package/types/pc/grid/Grid.d.ts
CHANGED
package/types/pc/grid/Item.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { GridItemProps } from './interface';
|
|
2
|
-
declare const
|
|
3
|
-
declare const GridItem: typeof GridItemForwardRef;
|
|
2
|
+
declare const GridItem: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<unknown>>;
|
|
4
3
|
export default GridItem;
|
|
5
4
|
export type { GridItemProps };
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
import type { GridProps } from './interface';
|
|
2
|
-
type RowContextType = {
|
|
3
|
-
gutter?: [number, number];
|
|
4
|
-
div?: boolean;
|
|
5
|
-
};
|
|
6
|
-
export declare const RowContext: import("react").Context<RowContextType>;
|
|
7
2
|
type GridContextType = {
|
|
8
3
|
cols?: GridProps['cols'];
|
|
9
4
|
rowGap?: GridProps['rowGap'];
|
package/types/pc/grid/index.d.ts
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import Col from '
|
|
1
|
+
import Row, { Col } from '../row-col';
|
|
2
2
|
import OriginGrid from './Grid';
|
|
3
3
|
import Item from './Item';
|
|
4
|
-
import Row from './Row';
|
|
5
4
|
declare const Grid: typeof OriginGrid & {
|
|
6
|
-
Col: typeof Col;
|
|
7
|
-
Row: typeof Row;
|
|
8
5
|
Item: typeof Item;
|
|
6
|
+
Row: typeof Row;
|
|
7
|
+
Col: typeof Col;
|
|
9
8
|
};
|
|
10
|
-
export { Col
|
|
9
|
+
export { Col as GridCol, Item as GridItem, Row as GridRow };
|
|
11
10
|
export default Grid;
|
|
12
|
-
export type { ColProps, GridProps, ResponsiveValue, RowProps, } from './interface';
|
|
@@ -1,128 +1,7 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
export type GridResponsiveBreakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
|
|
3
|
-
export type
|
|
4
|
-
|
|
5
|
-
* @title Row
|
|
6
|
-
*/
|
|
7
|
-
export interface RowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
8
|
-
style?: CSSProperties;
|
|
9
|
-
className?: string | string[];
|
|
10
|
-
/**
|
|
11
|
-
* @zh
|
|
12
|
-
* 栅格间隔,单位是`px` 栅格间隔。可传入响应式对象写法 { xs: 4, sm: 6, md: 12},传入数组 [ 水平间距, 垂直间距 ] 来设置两个方向。
|
|
13
|
-
* @en
|
|
14
|
-
* Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}.
|
|
15
|
-
* Or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical]
|
|
16
|
-
* @defaultValue 0
|
|
17
|
-
*/
|
|
18
|
-
gutter?: GridRowGutter | Array<GridRowGutter>;
|
|
19
|
-
/**
|
|
20
|
-
* @zh 开启这个选项 `<Row>` 和 `<Col>` 都会被当作 div 而不会附带任何 Grid 相关的类和样式
|
|
21
|
-
* @en If true, `<Row>` and `<Col>` will be treated as a div without any Grid related classes and styles
|
|
22
|
-
*/
|
|
23
|
-
div?: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* @zh 竖直对齐方式 ( `align-items` )
|
|
26
|
-
* @en Vertical alignment, same as css `align-items`
|
|
27
|
-
* @defaultValue start
|
|
28
|
-
*/
|
|
29
|
-
align?: 'start' | 'center' | 'end' | 'stretch';
|
|
30
|
-
/**
|
|
31
|
-
* @zh 水平对齐方式 (`justify-content`)
|
|
32
|
-
* @en Horizontal alignment, same as css `justify-content`
|
|
33
|
-
* @defaultValue start
|
|
34
|
-
*/
|
|
35
|
-
justify?: 'start' | 'center' | 'end' | 'space-around' | 'space-between';
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* @title Col
|
|
39
|
-
*/
|
|
40
|
-
export interface ColProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ref'> {
|
|
41
|
-
style?: CSSProperties;
|
|
42
|
-
className?: string | string[];
|
|
43
|
-
/**
|
|
44
|
-
* @zh 栅格占位格数
|
|
45
|
-
* @en Raster number of cells to occupy
|
|
46
|
-
* @defaultValue 24
|
|
47
|
-
*/
|
|
48
|
-
span?: number;
|
|
49
|
-
/**
|
|
50
|
-
* @zh 栅格左侧的间隔格数,间隔内不可以有栅格
|
|
51
|
-
* @en The number of cells to offset Col from the left
|
|
52
|
-
*/
|
|
53
|
-
offset?: number;
|
|
54
|
-
/**
|
|
55
|
-
* @zh 对元素进行排序
|
|
56
|
-
* @en Raster order
|
|
57
|
-
*/
|
|
58
|
-
order?: number;
|
|
59
|
-
/**
|
|
60
|
-
* @zh 对元素进行排序
|
|
61
|
-
* @en Raster order
|
|
62
|
-
*/
|
|
63
|
-
push?: number;
|
|
64
|
-
/**
|
|
65
|
-
* @zh 对元素进行排序
|
|
66
|
-
* @en Raster order
|
|
67
|
-
*/
|
|
68
|
-
pull?: number;
|
|
69
|
-
/**
|
|
70
|
-
* @zh < 576px 响应式栅格
|
|
71
|
-
* @en `screen < 576px`
|
|
72
|
-
*/
|
|
73
|
-
xs?: number | {
|
|
74
|
-
[key: string]: any;
|
|
75
|
-
};
|
|
76
|
-
/**
|
|
77
|
-
* @zh >= 576px 响应式栅格
|
|
78
|
-
* @en `screen >= 576px`
|
|
79
|
-
*/
|
|
80
|
-
sm?: number | {
|
|
81
|
-
[key: string]: any;
|
|
82
|
-
};
|
|
83
|
-
/**
|
|
84
|
-
* @zh >= 768px 响应式栅格
|
|
85
|
-
* @en `screen >= 768px`
|
|
86
|
-
*/
|
|
87
|
-
md?: number | {
|
|
88
|
-
[key: string]: any;
|
|
89
|
-
};
|
|
90
|
-
/**
|
|
91
|
-
* @zh >= 992px 响应式栅格
|
|
92
|
-
* @en `screen >= 992px`
|
|
93
|
-
*/
|
|
94
|
-
lg?: number | {
|
|
95
|
-
[key: string]: any;
|
|
96
|
-
};
|
|
97
|
-
/**
|
|
98
|
-
* @zh >= 1200px 响应式栅格
|
|
99
|
-
* @en `screen >= 1200px`
|
|
100
|
-
*/
|
|
101
|
-
xl?: number | {
|
|
102
|
-
[key: string]: any;
|
|
103
|
-
};
|
|
104
|
-
/**
|
|
105
|
-
* @zh >= 1600px 响应式栅格
|
|
106
|
-
* @en `screen >= 1600px`
|
|
107
|
-
*/
|
|
108
|
-
xxl?: number | {
|
|
109
|
-
[key: string]: any;
|
|
110
|
-
};
|
|
111
|
-
/**
|
|
112
|
-
* @zh >= 2000px 响应式栅格
|
|
113
|
-
* @en `screen >= 2000px`
|
|
114
|
-
*/
|
|
115
|
-
xxxl?: number | {
|
|
116
|
-
[key: string]: any;
|
|
117
|
-
};
|
|
118
|
-
/**
|
|
119
|
-
* @zh 设置 flex 布局属性
|
|
120
|
-
* @en Set flex layout properties
|
|
121
|
-
*/
|
|
122
|
-
flex?: FlexType;
|
|
123
|
-
}
|
|
124
|
-
export type GridUnitProps = number | ResponsiveValue | undefined;
|
|
125
|
-
export type AutoGridTemplateColumns = {
|
|
3
|
+
export type GridUnitProps = number | string | ResponsiveValue | undefined;
|
|
4
|
+
export type GridTemplateColumnsAuto = {
|
|
126
5
|
type: 'auto-fit' | 'auto-fill';
|
|
127
6
|
max: number | string;
|
|
128
7
|
min: number | string;
|
|
@@ -138,7 +17,7 @@ export interface GridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'classNa
|
|
|
138
17
|
* @en Number of columns displayed in each row
|
|
139
18
|
* @defaultValue 24
|
|
140
19
|
*/
|
|
141
|
-
cols?: GridUnitProps |
|
|
20
|
+
cols?: GridUnitProps | GridTemplateColumnsAuto;
|
|
142
21
|
/**
|
|
143
22
|
* @zh 间距
|
|
144
23
|
* @defaultValue 0
|
|
@@ -175,6 +54,10 @@ export interface GridItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'cla
|
|
|
175
54
|
* @defaultValue 0
|
|
176
55
|
*/
|
|
177
56
|
offset?: GridUnitProps;
|
|
57
|
+
/**
|
|
58
|
+
* @zh 在容器中的排序位置
|
|
59
|
+
*/
|
|
60
|
+
order?: number;
|
|
178
61
|
/**
|
|
179
62
|
* @zh 是否是后缀元素
|
|
180
63
|
* @en Is it a suffix element
|
|
@@ -227,4 +110,3 @@ export interface ResponsiveValue {
|
|
|
227
110
|
*/
|
|
228
111
|
xs?: number;
|
|
229
112
|
}
|
|
230
|
-
export type FlexType = string | number | 'auto' | 'none';
|
package/types/pc/index.d.ts
CHANGED
|
@@ -40,6 +40,8 @@ export { ConfigConsumer, ConfigContext, default as ConfigProvider, ConfigProvide
|
|
|
40
40
|
export type { ConfigProviderProps } from './config-provider/interface';
|
|
41
41
|
export { default as Copy } from './copy';
|
|
42
42
|
export type { CopyProps } from './copy/interface';
|
|
43
|
+
export { default as Countdown } from './countdown';
|
|
44
|
+
export type { CountdownProps } from './countdown/interface';
|
|
43
45
|
export { default as DatePicker, DatePickerMonth, DatePickerQuarter, DatePickerRange, DatePickerWeek, DatePickerYear, } from './date-picker';
|
|
44
46
|
export type { DatePickerProps, MonthPickerProps, QuarterPickerProps, RangePickerProps, WeekPickerProps, YearPickerProps, } from './date-picker/interface';
|
|
45
47
|
export { default as Descriptions } from './descriptions';
|
|
@@ -60,8 +62,8 @@ export { default as Flex, FlexVertical } from './flex';
|
|
|
60
62
|
export type { FlexProps } from './flex/interface';
|
|
61
63
|
export { default as Form, FormControl, FormItem, FormList, FormProvider, useForm, useFormContext, useFormState, useFormWatch, } from './form';
|
|
62
64
|
export type { FormInstance, FormItemProps, FormListProps, FormProps, RulesProps, } from './form/interface';
|
|
63
|
-
export {
|
|
64
|
-
export type {
|
|
65
|
+
export { default as Grid, GridCol, GridItem, GridRow } from './grid';
|
|
66
|
+
export type { GridItemProps, GridProps } from './grid/interface';
|
|
65
67
|
export { addFromIconFontCn, default as Icon, IconContext, useIconProps, } from './icon';
|
|
66
68
|
export { default as IconHover } from './icon-hover';
|
|
67
69
|
export type { IconHoverProps } from './icon-hover/interface';
|
|
@@ -120,6 +122,8 @@ export { default as ResizeBox, ResizeBoxSplit, ResizeBoxSplitGroup, } from './re
|
|
|
120
122
|
export type { ResizeBoxProps } from './resize-box/interface';
|
|
121
123
|
export { default as Result } from './result';
|
|
122
124
|
export type { ResultProps } from './result/interface';
|
|
125
|
+
export { Col, default as Row, RowItem } from './row-col';
|
|
126
|
+
export type { ColProps, RowProps } from './row-col/interface';
|
|
123
127
|
export { default as Segmented } from './segmented';
|
|
124
128
|
export type { SegmentedProps } from './segmented/interface';
|
|
125
129
|
export { default as Select, SelectOption, SelectOptionGroup } from './select';
|
|
@@ -137,7 +141,7 @@ export type { SpinProps } from './spin/interface';
|
|
|
137
141
|
export { default as Splitter, SplitterPanel } from './splitter';
|
|
138
142
|
export type { SplitterProps } from './splitter/interface';
|
|
139
143
|
export { default as Statistic, StatisticCountdown } from './statistic';
|
|
140
|
-
export type {
|
|
144
|
+
export type { StatisticProps } from './statistic/interface';
|
|
141
145
|
export { default as Steps, StepsItem, StepsStep } from './steps';
|
|
142
146
|
export type { StepProps, StepsProps } from './steps/interface';
|
|
143
147
|
export { default as SuspenseFallbackTest } from './suspense-fallback-test';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes, MutableRefObject, ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { GridResponsiveBreakpoint } from '../grid/interface';
|
|
3
3
|
import { PaginationProps } from '../pagination/Pagination';
|
|
4
|
+
import type { ColProps, RowProps } from '../row-col/interface';
|
|
4
5
|
import { AvailableVirtualListProps } from '../virtual-list';
|
|
5
6
|
type ListGridProps = {
|
|
6
7
|
column?: number;
|
|
@@ -66,11 +66,6 @@ export interface PaginationProps {
|
|
|
66
66
|
* @en Whether to display the total number of data
|
|
67
67
|
*/
|
|
68
68
|
showTotal?: boolean | ((total: number, range: number[]) => ReactNode);
|
|
69
|
-
/**
|
|
70
|
-
* @zh 是否可以改变每页条数
|
|
71
|
-
* @en Is it possible to change page size
|
|
72
|
-
*/
|
|
73
|
-
sizeCanChange?: boolean;
|
|
74
69
|
/**
|
|
75
70
|
* @zh 每页可以显示数据条数
|
|
76
71
|
* @en The number of data items that can be displayed per page
|
|
@@ -128,7 +123,11 @@ export interface PaginationProps {
|
|
|
128
123
|
more?: ReactNode;
|
|
129
124
|
};
|
|
130
125
|
mini?: boolean;
|
|
131
|
-
|
|
126
|
+
/**
|
|
127
|
+
* @zh 是否显示每页条数,在 `simple` 模式下默认为 false
|
|
128
|
+
* @en Is it possible to change page size
|
|
129
|
+
*/
|
|
130
|
+
showPageOption?: boolean;
|
|
132
131
|
}
|
|
133
132
|
type itemRenderType = (page: number, type: 'page' | 'more' | 'prev' | 'next', originElement: ReactNode) => ReactNode;
|
|
134
133
|
export interface PagerProps {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import Col from './Col';
|
|
2
|
+
declare const Row: import("react").ForwardRefExoticComponent<import("./interface").RowProps & import("react").RefAttributes<HTMLDivElement>> & {
|
|
3
|
+
Item: import("react").ForwardRefExoticComponent<import("./interface").ColProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
Col: import("react").ForwardRefExoticComponent<import("./interface").ColProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
|
+
};
|
|
6
|
+
export { Col, Col as RowItem };
|
|
7
|
+
export default Row;
|