bj-web-components 0.2.12 → 0.2.14
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/README.md +38 -0
- package/dist/index.d.ts +585 -4
- package/dist/index.js +1 -1
- package/dist/index.mjs +45 -26
- package/dist/style.css +1 -1
- package/dist/web/BasicInput/BInput.js +1 -0
- package/dist/web/BasicInput/BInput.mjs +177 -0
- package/dist/web/BasicInput/utils.js +1 -0
- package/dist/web/BasicInput/utils.mjs +37 -0
- package/dist/web/CheckBox/BCheckBox.js +1 -0
- package/dist/web/CheckBox/BCheckBox.mjs +101 -0
- package/dist/web/CheckBox/Group.js +1 -0
- package/dist/web/CheckBox/Group.mjs +67 -0
- package/dist/web/CheckBox/context.js +1 -0
- package/dist/web/CheckBox/context.mjs +5 -0
- package/dist/web/CheckBox/index.js +1 -0
- package/dist/web/CheckBox/index.mjs +8 -0
- package/dist/web/Dropdown/BDropdown.js +1 -0
- package/dist/web/Dropdown/BDropdown.mjs +160 -0
- package/dist/web/OverlayScrollbar/BOverlayScrollbar.js +1 -0
- package/dist/web/OverlayScrollbar/BOverlayScrollbar.mjs +152 -0
- package/dist/web/Pagination/Pagination.js +1 -1
- package/dist/web/Pagination/Pagination.mjs +1 -1
- package/dist/web/ProductField/ProductField.mjs +12 -12
- package/dist/web/SkuInputCard/SkuInputCard.mjs +26 -26
- package/dist/web/Table/BTable.js +1 -0
- package/dist/web/Table/BTable.mjs +612 -0
- package/dist/web/Table/Column.js +1 -0
- package/dist/web/Table/Column.mjs +6 -0
- package/dist/web/Table/ColumnGroup.js +1 -0
- package/dist/web/Table/ColumnGroup.mjs +6 -0
- package/dist/web/Table/utils/columns.js +1 -0
- package/dist/web/Table/utils/columns.mjs +43 -0
- package/dist/web/Table/utils/sortFilter.js +1 -0
- package/dist/web/Table/utils/sortFilter.mjs +63 -0
- package/dist/web/Tabs/BTabs.js +1 -0
- package/dist/web/Tabs/BTabs.mjs +130 -0
- package/dist/web/Tabs/TabPane.js +1 -0
- package/dist/web/Tabs/TabPane.mjs +7 -0
- package/dist/web/Tooltip/ContentTooltip.js +1 -1
- package/dist/web/Tooltip/ContentTooltip.mjs +56 -20
- package/dist/web.d.ts +585 -4
- package/dist/web.js +1 -1
- package/dist/web.mjs +45 -26
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -19,6 +19,44 @@ import { SkuInputCard } from 'bu-max-ui';
|
|
|
19
19
|
import 'bu-max-ui/style';
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
+
## Iconfont 图标
|
|
23
|
+
|
|
24
|
+
Web 组件中的图标使用 `BuIcon`(与下方 `Iconfont` 实现等价)。宿主应用或文档站需要先加载项目 iconfont symbol:
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<script src="//at.alicdn.com/t/c/font_5123795_8zzfaepwkju.js"></script>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
随后通过 `type` 传入 symbol id(不包含 `#`):
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { BuIcon } from 'bu-max-ui/web';
|
|
34
|
+
|
|
35
|
+
<BuIcon type="icon-a-dagouxi" style={{ width: 14, height: 14, color: '#333' }} />
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
`BuIcon` 的实现如下:
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import React from 'react';
|
|
42
|
+
|
|
43
|
+
function Iconfont({ type, style, onClick, className, ...rest }) {
|
|
44
|
+
return (
|
|
45
|
+
<svg
|
|
46
|
+
style={style}
|
|
47
|
+
className={className ? `icon ${className}` : 'icon'}
|
|
48
|
+
aria-hidden="true"
|
|
49
|
+
onClick={onClick}
|
|
50
|
+
{...rest}
|
|
51
|
+
>
|
|
52
|
+
<use xlinkHref={`#${type}`} />
|
|
53
|
+
</svg>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default Iconfont;
|
|
58
|
+
```
|
|
59
|
+
|
|
22
60
|
### 基础用法
|
|
23
61
|
|
|
24
62
|
```tsx
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import { FocusEvent as FocusEvent_2 } from 'react';
|
|
3
|
+
import { FocusEventHandler } from 'react';
|
|
3
4
|
import { ForwardRefExoticComponent } from 'react';
|
|
5
|
+
import { HTMLAttributes } from 'react';
|
|
4
6
|
import { InputHTMLAttributes } from 'react';
|
|
5
7
|
import { JSX } from 'react/jsx-runtime';
|
|
8
|
+
import { Key } from 'react';
|
|
6
9
|
import { KeyboardEvent as KeyboardEvent_2 } from 'react';
|
|
10
|
+
import { KeyboardEventHandler } from 'react';
|
|
7
11
|
import { MouseEventHandler } from 'react';
|
|
12
|
+
import { ReactElement } from 'react';
|
|
8
13
|
import { ReactNode } from 'react';
|
|
14
|
+
import { Ref } from 'react';
|
|
9
15
|
import { RefAttributes } from 'react';
|
|
16
|
+
import { RefObject } from 'react';
|
|
10
17
|
import { SVGProps } from 'react';
|
|
18
|
+
import { TdHTMLAttributes } from 'react';
|
|
11
19
|
|
|
12
20
|
declare interface BaseTooltipProps {
|
|
13
21
|
placement?: TooltipPlacement;
|
|
@@ -15,6 +23,105 @@ declare interface BaseTooltipProps {
|
|
|
15
23
|
style?: CSSProperties;
|
|
16
24
|
/** 自定义弹层挂载容器,默认 document.body */
|
|
17
25
|
getPopupContainer?: () => HTMLElement;
|
|
26
|
+
/** Optional element used as the positioning anchor when rendered through a portal. */
|
|
27
|
+
getAnchorElement?: () => HTMLElement | null;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export declare const BCheckBox: typeof BCheckBox_2 & {
|
|
31
|
+
Group: typeof Group;
|
|
32
|
+
__ANT_CHECKBOX: boolean;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
declare const BCheckBox_2: ForwardRefExoticComponent<BCheckBoxProps & RefAttributes<HTMLInputElement>>;
|
|
36
|
+
|
|
37
|
+
export declare interface BCheckBoxGroupProps {
|
|
38
|
+
className?: string;
|
|
39
|
+
style?: CSSProperties;
|
|
40
|
+
name?: string;
|
|
41
|
+
options?: Array<CheckboxOptionType | string | number>;
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
defaultValue?: CheckboxValueType[];
|
|
44
|
+
value?: CheckboxValueType[];
|
|
45
|
+
onChange?: (checkedValues: CheckboxValueType[]) => void;
|
|
46
|
+
children?: ReactNode;
|
|
47
|
+
direction?: 'ltr' | 'rtl';
|
|
48
|
+
variant?: BCheckBoxVariant;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export declare interface BCheckBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'children' | 'defaultChecked' | 'onChange' | 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'style' | 'type' | 'value'> {
|
|
52
|
+
className?: string;
|
|
53
|
+
style?: CSSProperties;
|
|
54
|
+
defaultChecked?: boolean;
|
|
55
|
+
checked?: boolean;
|
|
56
|
+
disabled?: boolean;
|
|
57
|
+
indeterminate?: boolean;
|
|
58
|
+
onChange?: (event: CheckboxChangeEvent) => void;
|
|
59
|
+
onClick?: MouseEventHandler<HTMLInputElement>;
|
|
60
|
+
onMouseEnter?: MouseEventHandler<HTMLLabelElement>;
|
|
61
|
+
onMouseLeave?: MouseEventHandler<HTMLLabelElement>;
|
|
62
|
+
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
63
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
64
|
+
onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
|
|
65
|
+
onKeyPress?: KeyboardEventHandler<HTMLInputElement>;
|
|
66
|
+
onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
|
|
67
|
+
value?: CheckboxValueType;
|
|
68
|
+
children?: ReactNode;
|
|
69
|
+
skipGroup?: boolean;
|
|
70
|
+
direction?: 'ltr' | 'rtl';
|
|
71
|
+
variant?: BCheckBoxVariant;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
export declare type BCheckBoxVariant = 'dark' | 'white';
|
|
75
|
+
|
|
76
|
+
export declare function BDropdown({ className, style, options, value, defaultValue, multiple, optionMode, searchable, searchValue, searchPlaceholder, onSearch, filterOption, emptyText, labels, t, optionRender, onChange, footer, showReset, showConfirm, resetText, confirmText, onReset, onConfirm, }: BDropdownProps): JSX.Element;
|
|
77
|
+
|
|
78
|
+
export declare interface BDropdownOption {
|
|
79
|
+
label: ReactNode;
|
|
80
|
+
/** Secondary text displayed when optionMode is "double-line". */
|
|
81
|
+
description?: ReactNode;
|
|
82
|
+
value: BDropdownValue;
|
|
83
|
+
disabled?: boolean;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
export declare interface BDropdownProps {
|
|
87
|
+
className?: string;
|
|
88
|
+
style?: CSSProperties;
|
|
89
|
+
options: BDropdownOption[];
|
|
90
|
+
value?: BDropdownValue[];
|
|
91
|
+
defaultValue?: BDropdownValue[];
|
|
92
|
+
multiple?: boolean;
|
|
93
|
+
/** Option layout. Double-line options display label and description. */
|
|
94
|
+
optionMode?: 'single-line' | 'double-line';
|
|
95
|
+
searchable?: boolean;
|
|
96
|
+
searchValue?: string;
|
|
97
|
+
searchPlaceholder?: string;
|
|
98
|
+
onSearch?: (value: string) => void;
|
|
99
|
+
filterOption?: boolean | ((input: string, option: BDropdownOption) => boolean);
|
|
100
|
+
/** Empty-state content. Takes precedence over labels.emptyText. */
|
|
101
|
+
emptyText?: ReactNode;
|
|
102
|
+
/** Override default labels for i18n support. */
|
|
103
|
+
labels?: {
|
|
104
|
+
emptyText?: ReactNode;
|
|
105
|
+
};
|
|
106
|
+
/** Internationalization function. Defaults to returning the original text. */
|
|
107
|
+
t?: (text: string) => string;
|
|
108
|
+
optionRender?: (option: BDropdownOption) => ReactNode;
|
|
109
|
+
onChange?: (value: BDropdownValue[], option: BDropdownOption) => void;
|
|
110
|
+
footer?: boolean | ReactNode;
|
|
111
|
+
showReset?: boolean;
|
|
112
|
+
showConfirm?: boolean;
|
|
113
|
+
resetText?: ReactNode;
|
|
114
|
+
confirmText?: ReactNode;
|
|
115
|
+
onReset?: () => void;
|
|
116
|
+
onConfirm?: (value: BDropdownValue[]) => void;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export declare type BDropdownValue = string | number | boolean;
|
|
120
|
+
|
|
121
|
+
export declare const BInput: ForwardRefExoticComponent<BInputProps & RefAttributes<BInputRef>>;
|
|
122
|
+
|
|
123
|
+
export declare interface BInputFocusOptions extends FocusOptions {
|
|
124
|
+
cursor?: 'start' | 'end' | 'all';
|
|
18
125
|
}
|
|
19
126
|
|
|
20
127
|
export declare const BInputNumber: ForwardRefExoticComponent<BInputNumberProps & RefAttributes<HTMLInputElement>>;
|
|
@@ -81,6 +188,112 @@ export declare type BInputNumberSize = 'small' | 'middle' | 'large';
|
|
|
81
188
|
|
|
82
189
|
export declare type BInputNumberStatus = 'error' | 'warning';
|
|
83
190
|
|
|
191
|
+
export declare interface BInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'value'> {
|
|
192
|
+
value?: InputHTMLAttributes<HTMLInputElement>['value'] | bigint;
|
|
193
|
+
prefix?: ReactNode;
|
|
194
|
+
suffix?: ReactNode;
|
|
195
|
+
addonBefore?: ReactNode;
|
|
196
|
+
addonAfter?: ReactNode;
|
|
197
|
+
allowClear?: boolean | {
|
|
198
|
+
clearIcon?: ReactNode;
|
|
199
|
+
};
|
|
200
|
+
size?: BInputSize;
|
|
201
|
+
status?: BInputStatus;
|
|
202
|
+
bordered?: boolean;
|
|
203
|
+
htmlSize?: number;
|
|
204
|
+
onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
|
|
205
|
+
onClear?: () => void;
|
|
206
|
+
className?: string;
|
|
207
|
+
style?: CSSProperties;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
export declare interface BInputRef {
|
|
211
|
+
focus: (options?: BInputFocusOptions) => void;
|
|
212
|
+
blur: () => void;
|
|
213
|
+
setSelectionRange: HTMLInputElement['setSelectionRange'];
|
|
214
|
+
select: () => void;
|
|
215
|
+
input: HTMLInputElement | null;
|
|
216
|
+
nativeElement: HTMLElement | null;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
export declare type BInputSize = 'small' | 'middle' | 'large';
|
|
220
|
+
|
|
221
|
+
export declare type BInputStatus = 'error' | 'warning';
|
|
222
|
+
|
|
223
|
+
export declare function BOverlayScrollbar({ containerRef, targetRef, selector, direction, size, gap, background, showOnHover, showOnScroll, hoverSelector, horizontalInsetStart, horizontalInsetEnd, horizontalThumbLength, className, }: BOverlayScrollbarProps): JSX.Element;
|
|
224
|
+
|
|
225
|
+
export declare interface BOverlayScrollbarProps {
|
|
226
|
+
containerRef: RefObject<HTMLElement | null>;
|
|
227
|
+
targetRef?: RefObject<HTMLElement | null>;
|
|
228
|
+
selector?: string;
|
|
229
|
+
direction?: OverlayScrollbarDirection;
|
|
230
|
+
size?: number;
|
|
231
|
+
gap?: number;
|
|
232
|
+
background?: CSSProperties['backgroundColor'];
|
|
233
|
+
showOnHover?: boolean;
|
|
234
|
+
showOnScroll?: boolean;
|
|
235
|
+
hoverSelector?: string;
|
|
236
|
+
horizontalInsetStart?: number;
|
|
237
|
+
horizontalInsetEnd?: number;
|
|
238
|
+
horizontalThumbLength?: number;
|
|
239
|
+
className?: string;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
export declare type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
243
|
+
|
|
244
|
+
export declare const BTable: typeof BTable_2 & {
|
|
245
|
+
Column: typeof Column;
|
|
246
|
+
ColumnGroup: typeof ColumnGroup;
|
|
247
|
+
};
|
|
248
|
+
|
|
249
|
+
declare function BTable_2<RecordType extends object>({ columns, dataSource, rowKey, rowSelection, pagination, loading, bordered, size, showHeader, emptyText, emptyImage, emptyHeight, t, className, style, rowClassName, sortDirections, onChange, children, title, footer, summary, tableLayout, components, onRow, onHeaderRow, id, scroll, locale, }: TableProps<RecordType>): JSX.Element;
|
|
250
|
+
|
|
251
|
+
export declare function BTabs({ activeKey, children, centered, className, defaultActiveKey, id, items, onChange, onTabClick, style, tabBarGutter, tabBarStyle, tabPosition, type, }: BTabsProps): JSX.Element;
|
|
252
|
+
|
|
253
|
+
export declare namespace BTabs {
|
|
254
|
+
var TabPane: TabPane;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
export declare interface BTabsItem {
|
|
258
|
+
key: string;
|
|
259
|
+
label: ReactNode;
|
|
260
|
+
children?: ReactNode;
|
|
261
|
+
disabled?: boolean;
|
|
262
|
+
forceRender?: boolean;
|
|
263
|
+
className?: string;
|
|
264
|
+
style?: CSSProperties;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
export declare type BTabsPosition = 'top' | 'right' | 'bottom' | 'left';
|
|
268
|
+
|
|
269
|
+
export declare interface BTabsProps {
|
|
270
|
+
activeKey?: string;
|
|
271
|
+
defaultActiveKey?: string;
|
|
272
|
+
items?: BTabsItem[];
|
|
273
|
+
children?: ReactNode;
|
|
274
|
+
className?: string;
|
|
275
|
+
style?: CSSProperties;
|
|
276
|
+
id?: string;
|
|
277
|
+
tabPosition?: BTabsPosition;
|
|
278
|
+
type?: BTabsType;
|
|
279
|
+
centered?: boolean;
|
|
280
|
+
tabBarGutter?: number;
|
|
281
|
+
tabBarStyle?: CSSProperties;
|
|
282
|
+
onChange?: (activeKey: string) => void;
|
|
283
|
+
onTabClick?: (activeKey: string, event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
export declare interface BTabsTabPaneProps extends Omit<BTabsItem, 'key' | 'label'> {
|
|
287
|
+
tab: ReactNode;
|
|
288
|
+
tabKey?: Key;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
export declare type BTabsType = 'line' | 'card';
|
|
292
|
+
|
|
293
|
+
declare function BTooltip({ placement, content, variant, className, style, getPopupContainer, getAnchorElement, color, fontColor, }: ContentTooltipProps): JSX.Element;
|
|
294
|
+
export { BTooltip }
|
|
295
|
+
export { BTooltip as ContentTooltip }
|
|
296
|
+
|
|
84
297
|
export declare function BuCategoryDropdown({ data, value, onChange, placeholder, disabled, maxVisible, className, style, getPopupContainer, dropdownStyle: customDropdownStyle, }: BuCategoryDropdownProps): JSX.Element;
|
|
85
298
|
|
|
86
299
|
export declare interface BuCategoryDropdownProps {
|
|
@@ -342,6 +555,135 @@ export declare interface CategoryItem {
|
|
|
342
555
|
children?: CategoryItem[];
|
|
343
556
|
}
|
|
344
557
|
|
|
558
|
+
export declare interface CellType<RecordType> {
|
|
559
|
+
key?: Key;
|
|
560
|
+
className?: string;
|
|
561
|
+
style?: CSSProperties;
|
|
562
|
+
children?: ReactNode;
|
|
563
|
+
column?: ColumnsType<RecordType>[number];
|
|
564
|
+
colSpan?: number;
|
|
565
|
+
rowSpan?: number;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
export declare interface CheckboxChangeEvent {
|
|
569
|
+
target: CheckboxChangeEventTarget;
|
|
570
|
+
stopPropagation: () => void;
|
|
571
|
+
preventDefault: () => void;
|
|
572
|
+
nativeEvent: Event;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
export declare interface CheckboxChangeEventTarget extends BCheckBoxProps {
|
|
576
|
+
checked: boolean;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
export declare interface CheckboxOptionType {
|
|
580
|
+
label: ReactNode;
|
|
581
|
+
value: CheckboxValueType;
|
|
582
|
+
style?: CSSProperties;
|
|
583
|
+
disabled?: boolean;
|
|
584
|
+
onChange?: (event: CheckboxChangeEvent) => void;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
export declare type CheckboxValueType = string | number | boolean;
|
|
588
|
+
|
|
589
|
+
export declare function Column<RecordType>(_: ColumnProps<RecordType>): null;
|
|
590
|
+
|
|
591
|
+
export declare interface ColumnFilterItem {
|
|
592
|
+
text: ReactNode;
|
|
593
|
+
/** Secondary text forwarded to the built-in BDropdown in double-line mode. */
|
|
594
|
+
description?: ReactNode;
|
|
595
|
+
value: TableKey | boolean;
|
|
596
|
+
children?: ColumnFilterItem[];
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
export declare function ColumnGroup<RecordType>(_: ColumnGroupProps<RecordType>): null;
|
|
600
|
+
|
|
601
|
+
export declare interface ColumnGroupProps<RecordType> extends Omit<ColumnGroupType<RecordType>, 'children'> {
|
|
602
|
+
children: ReactElement<ColumnProps<RecordType>> | Array<ReactElement<ColumnProps<RecordType>>>;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
export declare interface ColumnGroupType<RecordType> extends ColumnSharedType<RecordType> {
|
|
606
|
+
colSpan?: number;
|
|
607
|
+
children: ColumnsType<RecordType>;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
export declare interface ColumnProps<RecordType> extends ColumnType<RecordType> {
|
|
611
|
+
children?: null;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
declare interface ColumnSharedType<RecordType> {
|
|
615
|
+
title?: ColumnTitle<RecordType>;
|
|
616
|
+
/** Hint badge rendered beside the column title. Accepts text, icons, or custom JSX. */
|
|
617
|
+
badge?: ReactNode;
|
|
618
|
+
key?: TableKey;
|
|
619
|
+
className?: string;
|
|
620
|
+
fixed?: FixedType;
|
|
621
|
+
width?: number | string;
|
|
622
|
+
align?: TableAlign;
|
|
623
|
+
ellipsis?: boolean | {
|
|
624
|
+
showTitle?: boolean;
|
|
625
|
+
};
|
|
626
|
+
responsive?: Breakpoint[];
|
|
627
|
+
onHeaderCell?: GetComponentProps<ColumnsType<RecordType>[number]>;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
export declare type ColumnsType<RecordType = unknown> = readonly (ColumnGroupType<RecordType> | ColumnType<RecordType>)[];
|
|
631
|
+
|
|
632
|
+
declare type ColumnTitle<RecordType> = ReactNode | ((props: ColumnTitleProps<RecordType>) => ReactNode);
|
|
633
|
+
|
|
634
|
+
export declare interface ColumnTitleProps<RecordType> {
|
|
635
|
+
sortOrder?: SortOrder;
|
|
636
|
+
sortColumn?: ColumnType<RecordType>;
|
|
637
|
+
sortColumns?: Array<{
|
|
638
|
+
column: ColumnType<RecordType>;
|
|
639
|
+
order: SortOrder;
|
|
640
|
+
}>;
|
|
641
|
+
filters?: Record<string, FilterValue>;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
export declare interface ColumnType<RecordType> extends ColumnSharedType<RecordType> {
|
|
645
|
+
colSpan?: number;
|
|
646
|
+
rowSpan?: number;
|
|
647
|
+
dataIndex?: TableDataIndex;
|
|
648
|
+
render?: (value: unknown, record: RecordType, index: number) => ReactNode | RenderedCell<RecordType>;
|
|
649
|
+
shouldCellUpdate?: (record: RecordType, previousRecord: RecordType) => boolean;
|
|
650
|
+
onCell?: GetComponentProps<RecordType>;
|
|
651
|
+
sorter?: boolean | CompareFn<RecordType> | {
|
|
652
|
+
compare?: CompareFn<RecordType>;
|
|
653
|
+
multiple?: number;
|
|
654
|
+
};
|
|
655
|
+
sortOrder?: SortOrder;
|
|
656
|
+
defaultSortOrder?: SortOrder;
|
|
657
|
+
sortDirections?: SortOrder[];
|
|
658
|
+
showSorterTooltip?: boolean | {
|
|
659
|
+
title?: ReactNode;
|
|
660
|
+
};
|
|
661
|
+
filtered?: boolean;
|
|
662
|
+
filters?: ColumnFilterItem[];
|
|
663
|
+
/** Props forwarded to BDropdown when rendering the built-in filter panel. Table-managed options, value, and callbacks take precedence. */
|
|
664
|
+
filterDropdownProps?: Partial<BDropdownProps>;
|
|
665
|
+
filterDropdown?: ReactNode | ((props: FilterDropdownProps) => ReactNode);
|
|
666
|
+
filterMultiple?: boolean;
|
|
667
|
+
filteredValue?: FilterValue | null;
|
|
668
|
+
defaultFilteredValue?: FilterValue | null;
|
|
669
|
+
filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
|
|
670
|
+
filterMode?: 'menu' | 'tree';
|
|
671
|
+
/** Show a search input. Pass a matcher to search custom option fields. */
|
|
672
|
+
filterSearch?: FilterSearchType;
|
|
673
|
+
/** Load filter options externally after the search input's 300ms debounce. */
|
|
674
|
+
filterRequest?: FilterRequest;
|
|
675
|
+
onFilter?: (value: TableKey | boolean, record: RecordType) => boolean;
|
|
676
|
+
filterDropdownOpen?: boolean;
|
|
677
|
+
onFilterDropdownOpenChange?: (open: boolean) => void;
|
|
678
|
+
filterResetToDefaultFilteredValue?: boolean;
|
|
679
|
+
/** @deprecated Use filterDropdownOpen. */
|
|
680
|
+
filterDropdownVisible?: boolean;
|
|
681
|
+
/** @deprecated Use onFilterDropdownOpenChange. */
|
|
682
|
+
onFilterDropdownVisibleChange?: (visible: boolean) => void;
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
export declare type CompareFn<RecordType> = (first: RecordType, second: RecordType, sortOrder?: SortOrder) => number;
|
|
686
|
+
|
|
345
687
|
export declare function ConfirmTooltip({ placement, title, okText, cancelText, onOk, onCancel, className, style, }: ConfirmTooltipProps): JSX.Element;
|
|
346
688
|
|
|
347
689
|
export declare interface ConfirmTooltipProps extends BaseTooltipProps {
|
|
@@ -352,11 +694,41 @@ export declare interface ConfirmTooltipProps extends BaseTooltipProps {
|
|
|
352
694
|
onCancel?: () => void;
|
|
353
695
|
}
|
|
354
696
|
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
export declare interface ContentTooltipProps extends BaseTooltipProps {
|
|
358
|
-
content?: string;
|
|
697
|
+
declare interface ContentTooltipProps extends BaseTooltipProps {
|
|
698
|
+
content?: ReactNode;
|
|
359
699
|
variant?: TooltipVariant;
|
|
700
|
+
/** Tooltip background color, including the arrow. */
|
|
701
|
+
color?: string;
|
|
702
|
+
/** Tooltip content text color. */
|
|
703
|
+
fontColor?: string;
|
|
704
|
+
}
|
|
705
|
+
export { ContentTooltipProps as BTooltipProps }
|
|
706
|
+
export { ContentTooltipProps }
|
|
707
|
+
|
|
708
|
+
export declare interface ExpandableConfig<RecordType> {
|
|
709
|
+
expandedRowKeys?: readonly TableKey[];
|
|
710
|
+
defaultExpandedRowKeys?: readonly TableKey[];
|
|
711
|
+
expandedRowRender?: (record: RecordType, index: number, indent: number, expanded: boolean) => ReactNode;
|
|
712
|
+
columnTitle?: ReactNode;
|
|
713
|
+
expandRowByClick?: boolean;
|
|
714
|
+
expandIcon?: (props: {
|
|
715
|
+
prefixCls: string;
|
|
716
|
+
expanded: boolean;
|
|
717
|
+
record: RecordType;
|
|
718
|
+
expandable: boolean;
|
|
719
|
+
onExpand: (record: RecordType, event: React.MouseEvent<HTMLElement>) => void;
|
|
720
|
+
}) => ReactNode;
|
|
721
|
+
onExpand?: (expanded: boolean, record: RecordType) => void;
|
|
722
|
+
onExpandedRowsChange?: (expandedKeys: readonly TableKey[]) => void;
|
|
723
|
+
defaultExpandAllRows?: boolean;
|
|
724
|
+
indentSize?: number;
|
|
725
|
+
expandIconColumnIndex?: number;
|
|
726
|
+
showExpandColumn?: boolean;
|
|
727
|
+
expandedRowClassName?: RowClassName<RecordType>;
|
|
728
|
+
childrenColumnName?: string;
|
|
729
|
+
rowExpandable?: (record: RecordType) => boolean;
|
|
730
|
+
columnWidth?: number | string;
|
|
731
|
+
fixed?: FixedType;
|
|
360
732
|
}
|
|
361
733
|
|
|
362
734
|
export declare function FileCard(props: FileCardProps): JSX.Element;
|
|
@@ -382,10 +754,42 @@ export declare interface FileCardProps {
|
|
|
382
754
|
|
|
383
755
|
export declare type FileType = 'pdf' | 'image' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'ppt' | 'pptx' | 'zip' | 'rar' | 'txt' | 'other';
|
|
384
756
|
|
|
757
|
+
export declare interface FilterDropdownProps {
|
|
758
|
+
prefixCls: string;
|
|
759
|
+
setSelectedKeys: (selectedKeys: TableKey[]) => void;
|
|
760
|
+
selectedKeys: TableKey[];
|
|
761
|
+
confirm: (options?: {
|
|
762
|
+
closeDropdown?: boolean;
|
|
763
|
+
}) => void;
|
|
764
|
+
clearFilters?: (options?: {
|
|
765
|
+
confirm?: boolean;
|
|
766
|
+
closeDropdown?: boolean;
|
|
767
|
+
}) => void;
|
|
768
|
+
filters?: ColumnFilterItem[];
|
|
769
|
+
close: () => void;
|
|
770
|
+
visible: boolean;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
export declare type FilterRequest = (input: string) => ColumnFilterItem[] | Promise<ColumnFilterItem[]>;
|
|
774
|
+
|
|
775
|
+
export declare type FilterSearchType<RecordType = ColumnFilterItem> = boolean | ((input: string, item: RecordType) => boolean);
|
|
776
|
+
|
|
777
|
+
export declare type FilterValue = Array<TableKey | boolean>;
|
|
778
|
+
|
|
779
|
+
export declare type FixedType = 'left' | 'right' | boolean;
|
|
780
|
+
|
|
781
|
+
declare type GetComponentProps<DataType> = (data: DataType, index?: number) => HTMLAttributes<HTMLElement> | TdHTMLAttributes<HTMLTableCellElement>;
|
|
782
|
+
|
|
783
|
+
export declare type GetRowKey<RecordType> = (record: RecordType, index?: number) => TableKey;
|
|
784
|
+
|
|
785
|
+
declare const Group: ForwardRefExoticComponent<BCheckBoxGroupProps & RefAttributes<HTMLDivElement>>;
|
|
786
|
+
|
|
385
787
|
export declare type ModalLang = 'zh' | 'en';
|
|
386
788
|
|
|
387
789
|
export declare type ModalMode = 'standard' | 'bilingual' | 'single';
|
|
388
790
|
|
|
791
|
+
export declare type OverlayScrollbarDirection = 'vertical' | 'horizontal' | 'both';
|
|
792
|
+
|
|
389
793
|
export declare const Pagination: (props: PaginationProps) => JSX.Element | null;
|
|
390
794
|
|
|
391
795
|
export declare type PaginationAlign = 'start' | 'center' | 'end';
|
|
@@ -451,6 +855,15 @@ export declare interface ProgressTooltipProps extends BaseTooltipProps {
|
|
|
451
855
|
progress?: number;
|
|
452
856
|
}
|
|
453
857
|
|
|
858
|
+
export declare interface RenderedCell<RecordType> {
|
|
859
|
+
children?: ReactNode;
|
|
860
|
+
props?: CellType<RecordType>;
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
declare type RowClassName<RecordType> = (record: RecordType, index: number, indent: number) => string;
|
|
864
|
+
|
|
865
|
+
declare type RowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
|
|
866
|
+
|
|
454
867
|
export declare function SkuInputCard({ id, name, onNameChange, mode, activeLang, onLangChange, showBody, error, onDelete, onPreviewImage, onDeleteImage, onUpload, onAssociate, images, labels, inputEvents, className, style, options, optionFilterProp, onSelect, onSearch, open: controlledOpen, onDropdownVisibleChange, }: SkuInputCardProps): JSX.Element;
|
|
455
868
|
|
|
456
869
|
export declare interface SkuInputCardProps {
|
|
@@ -519,6 +932,174 @@ export declare interface SkuInputOption {
|
|
|
519
932
|
disabled?: boolean;
|
|
520
933
|
}
|
|
521
934
|
|
|
935
|
+
export declare interface SorterResult<RecordType> {
|
|
936
|
+
column?: ColumnType<RecordType>;
|
|
937
|
+
order?: SortOrder;
|
|
938
|
+
field?: TableKey | readonly TableKey[];
|
|
939
|
+
columnKey?: TableKey;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
export declare type SortOrder = 'ascend' | 'descend' | null;
|
|
943
|
+
|
|
944
|
+
declare type TableAction = 'paginate' | 'sort' | 'filter';
|
|
945
|
+
|
|
946
|
+
export declare type TableAlign = 'left' | 'center' | 'right';
|
|
947
|
+
|
|
948
|
+
export declare interface TableComponents<RecordType> {
|
|
949
|
+
table?: React.ElementType;
|
|
950
|
+
header?: {
|
|
951
|
+
wrapper?: React.ElementType;
|
|
952
|
+
row?: React.ElementType;
|
|
953
|
+
cell?: React.ElementType;
|
|
954
|
+
};
|
|
955
|
+
body?: {
|
|
956
|
+
wrapper?: React.ElementType;
|
|
957
|
+
row?: React.ElementType;
|
|
958
|
+
cell?: React.ElementType;
|
|
959
|
+
} | ((data: readonly RecordType[], info: {
|
|
960
|
+
scrollbarSize: number;
|
|
961
|
+
ref: Ref<{
|
|
962
|
+
scrollLeft: number;
|
|
963
|
+
}>;
|
|
964
|
+
onScroll: (info: {
|
|
965
|
+
currentTarget?: HTMLElement;
|
|
966
|
+
scrollLeft?: number;
|
|
967
|
+
}) => void;
|
|
968
|
+
}) => ReactNode);
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
declare interface TableCurrentDataSource<RecordType> {
|
|
972
|
+
currentDataSource: RecordType[];
|
|
973
|
+
action: TableAction;
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
export declare type TableDataIndex = string | number | readonly (string | number)[];
|
|
977
|
+
|
|
978
|
+
export declare type TableKey = Exclude<Key, bigint>;
|
|
979
|
+
|
|
980
|
+
declare type TableLayout = 'auto' | 'fixed';
|
|
981
|
+
|
|
982
|
+
export declare interface TableLocale {
|
|
983
|
+
filterTitle?: string;
|
|
984
|
+
filterConfirm?: ReactNode;
|
|
985
|
+
filterReset?: ReactNode;
|
|
986
|
+
filterEmptyText?: ReactNode;
|
|
987
|
+
filterCheckall?: ReactNode;
|
|
988
|
+
filterSearchPlaceholder?: string;
|
|
989
|
+
emptyText?: ReactNode | (() => ReactNode);
|
|
990
|
+
selectAll?: ReactNode;
|
|
991
|
+
selectNone?: ReactNode;
|
|
992
|
+
selectInvert?: ReactNode;
|
|
993
|
+
selectionAll?: ReactNode;
|
|
994
|
+
sortTitle?: string;
|
|
995
|
+
expand?: string;
|
|
996
|
+
collapse?: string;
|
|
997
|
+
triggerDesc?: string;
|
|
998
|
+
triggerAsc?: string;
|
|
999
|
+
cancelSort?: string;
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
export declare interface TablePaginationConfig extends PaginationProps {
|
|
1003
|
+
position?: Array<'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'none'>;
|
|
1004
|
+
}
|
|
1005
|
+
|
|
1006
|
+
export declare interface TableProps<RecordType extends object> {
|
|
1007
|
+
columns?: ColumnsType<RecordType>;
|
|
1008
|
+
children?: ReactNode;
|
|
1009
|
+
dataSource?: readonly RecordType[];
|
|
1010
|
+
rowKey?: keyof RecordType | string | GetRowKey<RecordType>;
|
|
1011
|
+
rowSelection?: TableRowSelection<RecordType>;
|
|
1012
|
+
pagination?: false | TablePaginationConfig;
|
|
1013
|
+
loading?: boolean | {
|
|
1014
|
+
spinning?: boolean;
|
|
1015
|
+
tip?: ReactNode;
|
|
1016
|
+
indicator?: ReactNode;
|
|
1017
|
+
};
|
|
1018
|
+
bordered?: boolean;
|
|
1019
|
+
size?: TableSize;
|
|
1020
|
+
showHeader?: boolean;
|
|
1021
|
+
/** Empty-state description. Defaults to `t('暂无数据')`. */
|
|
1022
|
+
emptyText?: ReactNode | (() => ReactNode);
|
|
1023
|
+
/** Empty-state image URL or custom image node. */
|
|
1024
|
+
emptyImage?: string | ReactNode;
|
|
1025
|
+
/** Empty-state body height. Defaults to 454px. */
|
|
1026
|
+
emptyHeight?: number | string;
|
|
1027
|
+
/** Translation function used by built-in Table text. */
|
|
1028
|
+
t?: (text: string) => string;
|
|
1029
|
+
className?: string;
|
|
1030
|
+
style?: CSSProperties;
|
|
1031
|
+
id?: string;
|
|
1032
|
+
rowClassName?: string | RowClassName<RecordType>;
|
|
1033
|
+
tableLayout?: TableLayout;
|
|
1034
|
+
scroll?: {
|
|
1035
|
+
x?: number | true | string;
|
|
1036
|
+
y?: number | string;
|
|
1037
|
+
scrollToFirstRowOnChange?: boolean;
|
|
1038
|
+
};
|
|
1039
|
+
sticky?: boolean | {
|
|
1040
|
+
offsetHeader?: number;
|
|
1041
|
+
offsetSummary?: number;
|
|
1042
|
+
offsetScroll?: number;
|
|
1043
|
+
getContainer?: () => Window | HTMLElement;
|
|
1044
|
+
};
|
|
1045
|
+
direction?: 'ltr' | 'rtl';
|
|
1046
|
+
title?: (data: readonly RecordType[]) => ReactNode;
|
|
1047
|
+
footer?: (data: readonly RecordType[]) => ReactNode;
|
|
1048
|
+
summary?: (data: readonly RecordType[]) => ReactNode;
|
|
1049
|
+
components?: TableComponents<RecordType>;
|
|
1050
|
+
onRow?: GetComponentProps<RecordType>;
|
|
1051
|
+
onHeaderRow?: GetComponentProps<readonly ColumnType<RecordType>[]>;
|
|
1052
|
+
expandable?: ExpandableConfig<RecordType>;
|
|
1053
|
+
locale?: TableLocale;
|
|
1054
|
+
sortDirections?: SortOrder[];
|
|
1055
|
+
showSorterTooltip?: boolean | {
|
|
1056
|
+
title?: ReactNode;
|
|
1057
|
+
};
|
|
1058
|
+
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
|
1059
|
+
onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<RecordType> | SorterResult<RecordType>[], extra: TableCurrentDataSource<RecordType>) => void;
|
|
1060
|
+
ref?: Ref<HTMLDivElement>;
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
export declare interface TableRowSelection<RecordType> {
|
|
1064
|
+
preserveSelectedRowKeys?: boolean;
|
|
1065
|
+
type?: TableSelectionType;
|
|
1066
|
+
selectedRowKeys?: TableKey[];
|
|
1067
|
+
defaultSelectedRowKeys?: TableKey[];
|
|
1068
|
+
getCheckboxProps?: (record: RecordType) => {
|
|
1069
|
+
disabled?: boolean;
|
|
1070
|
+
name?: string;
|
|
1071
|
+
};
|
|
1072
|
+
columnTitle?: ReactNode;
|
|
1073
|
+
columnWidth?: number | string;
|
|
1074
|
+
fixed?: FixedType;
|
|
1075
|
+
hideSelectAll?: boolean;
|
|
1076
|
+
checkStrictly?: boolean;
|
|
1077
|
+
selections?: boolean | Array<{
|
|
1078
|
+
key: string;
|
|
1079
|
+
text: ReactNode;
|
|
1080
|
+
onSelect?: (keys: TableKey[]) => void;
|
|
1081
|
+
}>;
|
|
1082
|
+
renderCell?: (checked: boolean, record: RecordType, index: number, originNode: ReactNode) => ReactNode | RenderedCell<RecordType>;
|
|
1083
|
+
onChange?: (selectedRowKeys: TableKey[], selectedRows: RecordType[], info?: {
|
|
1084
|
+
type: RowSelectMethod;
|
|
1085
|
+
}) => void;
|
|
1086
|
+
onSelect?: (record: RecordType, selected: boolean, selectedRows: RecordType[], nativeEvent?: Event) => void;
|
|
1087
|
+
onSelectAll?: (selected: boolean, selectedRows: RecordType[], changeRows?: RecordType[]) => void;
|
|
1088
|
+
onSelectInvert?: (selectedRowKeys: TableKey[]) => void;
|
|
1089
|
+
onSelectNone?: () => void;
|
|
1090
|
+
onSelectMultiple?: (selected: boolean, selectedRows: RecordType[], changeRows: RecordType[]) => void;
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
export declare type TableSelectionType = 'checkbox' | 'radio';
|
|
1094
|
+
|
|
1095
|
+
export declare type TableSize = 'large' | 'middle' | 'small';
|
|
1096
|
+
|
|
1097
|
+
export declare function TabPane(_: BTabsTabPaneProps): ReactElement | null;
|
|
1098
|
+
|
|
1099
|
+
export declare namespace TabPane {
|
|
1100
|
+
var displayName: string;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
522
1103
|
export declare type TooltipPlacement = 'auto' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
|
|
523
1104
|
|
|
524
1105
|
export declare type TooltipVariant = 'default' | 'light' | 'bordered' | 'tinted';
|