@douyinfe/semi-ui 2.26.0-beta.0 → 2.27.0-alpha.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/css/semi.css +207 -0
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +392 -201
- package/dist/umd/semi-ui.js.map +1 -1
- package/dist/umd/semi-ui.min.js +1 -1
- package/dist/umd/semi-ui.min.js.map +1 -1
- package/lib/cjs/anchor/index.d.ts +1 -1
- package/lib/cjs/autoComplete/index.d.ts +1 -1
- package/lib/cjs/button/Button.d.ts +1 -1
- package/lib/cjs/button/buttonGroup.d.ts +1 -1
- package/lib/cjs/button/index.d.ts +1 -1
- package/lib/cjs/carousel/CarouselIndicator.d.ts +1 -1
- package/lib/cjs/carousel/index.d.ts +1 -1
- package/lib/cjs/cascader/index.d.ts +1 -1
- package/lib/cjs/cascader/item.d.ts +1 -1
- package/lib/cjs/datePicker/dateInput.d.ts +1 -1
- package/lib/cjs/datePicker/datePicker.d.ts +2 -2
- package/lib/cjs/datePicker/monthsGrid.d.ts +1 -1
- package/lib/cjs/form/baseForm.d.ts +1 -1
- package/lib/cjs/form/field.d.ts +1 -1
- package/lib/cjs/input/index.d.ts +1 -1
- package/lib/cjs/input/inputGroup.d.ts +1 -1
- package/lib/cjs/popover/index.d.ts +1 -1
- package/lib/cjs/rating/index.d.ts +1 -1
- package/lib/cjs/rating/item.d.ts +1 -1
- package/lib/cjs/switch/index.d.ts +1 -1
- package/lib/cjs/table/Table.d.ts +2 -2
- package/lib/cjs/table/index.d.ts +1 -1
- package/lib/cjs/tabs/TabBar.d.ts +1 -0
- package/lib/cjs/tabs/TabBar.js +28 -2
- package/lib/cjs/tabs/TabItem.d.ts +38 -0
- package/lib/cjs/tabs/TabItem.js +104 -0
- package/lib/cjs/tabs/index.d.ts +2 -0
- package/lib/cjs/tabs/index.js +3 -0
- package/lib/cjs/tagInput/index.d.ts +4 -1
- package/lib/cjs/tagInput/index.js +18 -2
- package/lib/cjs/timePicker/TimePicker.d.ts +1 -1
- package/lib/cjs/timePicker/index.d.ts +1 -1
- package/lib/cjs/tooltip/index.d.ts +1 -1
- package/lib/es/anchor/index.d.ts +1 -1
- package/lib/es/autoComplete/index.d.ts +1 -1
- package/lib/es/button/Button.d.ts +1 -1
- package/lib/es/button/buttonGroup.d.ts +1 -1
- package/lib/es/button/index.d.ts +1 -1
- package/lib/es/carousel/CarouselIndicator.d.ts +1 -1
- package/lib/es/carousel/index.d.ts +1 -1
- package/lib/es/cascader/index.d.ts +1 -1
- package/lib/es/cascader/item.d.ts +1 -1
- package/lib/es/datePicker/dateInput.d.ts +1 -1
- package/lib/es/datePicker/datePicker.d.ts +2 -2
- package/lib/es/datePicker/monthsGrid.d.ts +1 -1
- package/lib/es/form/baseForm.d.ts +1 -1
- package/lib/es/form/field.d.ts +1 -1
- package/lib/es/input/index.d.ts +1 -1
- package/lib/es/input/inputGroup.d.ts +1 -1
- package/lib/es/popover/index.d.ts +1 -1
- package/lib/es/rating/index.d.ts +1 -1
- package/lib/es/rating/item.d.ts +1 -1
- package/lib/es/switch/index.d.ts +1 -1
- package/lib/es/table/Table.d.ts +2 -2
- package/lib/es/table/index.d.ts +1 -1
- package/lib/es/tabs/TabBar.d.ts +1 -0
- package/lib/es/tabs/TabBar.js +27 -2
- package/lib/es/tabs/TabItem.d.ts +38 -0
- package/lib/es/tabs/TabItem.js +88 -0
- package/lib/es/tabs/index.d.ts +2 -0
- package/lib/es/tabs/index.js +2 -0
- package/lib/es/tagInput/index.d.ts +4 -1
- package/lib/es/tagInput/index.js +18 -2
- package/lib/es/timePicker/TimePicker.d.ts +1 -1
- package/lib/es/timePicker/index.d.ts +1 -1
- package/lib/es/tooltip/index.d.ts +1 -1
- package/package.json +8 -8
|
@@ -18,7 +18,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
|
|
|
18
18
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
19
19
|
disabled: PropTypes.Requireable<boolean>;
|
|
20
20
|
type: PropTypes.Requireable<string>;
|
|
21
|
-
size: PropTypes.Requireable<"
|
|
21
|
+
size: PropTypes.Requireable<"small" | "default" | "large">;
|
|
22
22
|
theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
|
|
23
23
|
'aria-label': PropTypes.Requireable<string>;
|
|
24
24
|
};
|
package/lib/es/button/index.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
|
|
|
22
22
|
onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
23
23
|
onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
24
24
|
disabled: import("prop-types").Requireable<boolean>;
|
|
25
|
-
size: import("prop-types").Requireable<"
|
|
25
|
+
size: import("prop-types").Requireable<"small" | "default" | "large">;
|
|
26
26
|
type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
|
|
27
27
|
block: import("prop-types").Requireable<boolean>;
|
|
28
28
|
onClick: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
@@ -12,7 +12,7 @@ declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorPro
|
|
|
12
12
|
total: PropTypes.Requireable<number>;
|
|
13
13
|
onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
14
14
|
type: PropTypes.Requireable<"line" | "dot" | "columnar">;
|
|
15
|
-
trigger: PropTypes.Requireable<"
|
|
15
|
+
trigger: PropTypes.Requireable<"click" | "hover">;
|
|
16
16
|
};
|
|
17
17
|
onIndicatorChange: (activeIndex: number) => void;
|
|
18
18
|
handleIndicatorClick: (activeIndex: number) => void;
|
|
@@ -30,7 +30,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
|
|
|
30
30
|
slideDirection: PropTypes.Requireable<"left" | "right">;
|
|
31
31
|
speed: PropTypes.Requireable<number>;
|
|
32
32
|
style: PropTypes.Requireable<object>;
|
|
33
|
-
trigger: PropTypes.Requireable<"
|
|
33
|
+
trigger: PropTypes.Requireable<"click" | "hover">;
|
|
34
34
|
};
|
|
35
35
|
static defaultProps: CarouselProps;
|
|
36
36
|
foundation: CarouselFoundation;
|
|
@@ -110,7 +110,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
|
|
|
110
110
|
zIndex: PropTypes.Requireable<number>;
|
|
111
111
|
value: PropTypes.Requireable<NonNullable<string | number | any[]>>;
|
|
112
112
|
validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
|
|
113
|
-
showNext: PropTypes.Requireable<"
|
|
113
|
+
showNext: PropTypes.Requireable<"click" | "hover">;
|
|
114
114
|
stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
|
|
115
115
|
showClear: PropTypes.Requireable<boolean>;
|
|
116
116
|
defaultOpen: PropTypes.Requireable<boolean>;
|
|
@@ -48,7 +48,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
|
|
|
48
48
|
onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
49
49
|
onItemHover: PropTypes.Requireable<(...args: any[]) => any>;
|
|
50
50
|
multiple: PropTypes.Requireable<boolean>;
|
|
51
|
-
showNext: PropTypes.Requireable<"
|
|
51
|
+
showNext: PropTypes.Requireable<"click" | "hover">;
|
|
52
52
|
checkedKeys: PropTypes.Requireable<object>;
|
|
53
53
|
halfCheckedKeys: PropTypes.Requireable<object>;
|
|
54
54
|
onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
|
|
|
26
26
|
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
27
27
|
value: PropTypes.Requireable<any[]>;
|
|
28
28
|
disabled: PropTypes.Requireable<boolean>;
|
|
29
|
-
type: PropTypes.Requireable<"
|
|
29
|
+
type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
|
|
30
30
|
showClear: PropTypes.Requireable<boolean>;
|
|
31
31
|
format: PropTypes.Requireable<string>;
|
|
32
32
|
inputStyle: PropTypes.Requireable<object>;
|
|
@@ -46,8 +46,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
|
|
|
46
46
|
'aria-invalid': PropTypes.Requireable<boolean>;
|
|
47
47
|
'aria-labelledby': PropTypes.Requireable<string>;
|
|
48
48
|
'aria-required': PropTypes.Requireable<boolean>;
|
|
49
|
-
type: PropTypes.Requireable<"
|
|
50
|
-
size: PropTypes.Requireable<"
|
|
49
|
+
type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
|
|
50
|
+
size: PropTypes.Requireable<"small" | "default" | "large">;
|
|
51
51
|
clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
52
52
|
density: PropTypes.Requireable<"default" | "compact">;
|
|
53
53
|
defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
|
|
@@ -19,7 +19,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
|
|
|
19
19
|
export declare type MonthsGridState = MonthsGridFoundationState;
|
|
20
20
|
export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
|
|
21
21
|
static propTypes: {
|
|
22
|
-
type: PropTypes.Requireable<"
|
|
22
|
+
type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
|
|
23
23
|
defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
|
|
24
24
|
defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
|
|
25
25
|
multiple: PropTypes.Requireable<boolean>;
|
|
@@ -135,7 +135,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
|
|
|
135
135
|
preventScroll?: boolean;
|
|
136
136
|
showRestTagsPopover?: boolean;
|
|
137
137
|
restTagsPopoverProps?: import("../popover").PopoverProps;
|
|
138
|
-
} & Pick<import("../tooltip").TooltipProps, "
|
|
138
|
+
} & Pick<import("../tooltip").TooltipProps, "motion" | "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
|
|
139
139
|
static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
|
|
140
140
|
static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
|
|
141
141
|
static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;
|
package/lib/es/form/field.d.ts
CHANGED
|
@@ -83,7 +83,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
|
|
|
83
83
|
preventScroll?: boolean;
|
|
84
84
|
showRestTagsPopover?: boolean;
|
|
85
85
|
restTagsPopoverProps?: import("../popover").PopoverProps;
|
|
86
|
-
} & Pick<import("../tooltip").TooltipProps, "
|
|
86
|
+
} & Pick<import("../tooltip").TooltipProps, "motion" | "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
|
|
87
87
|
declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
|
|
88
88
|
declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
|
|
89
89
|
declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
|
package/lib/es/input/index.d.ts
CHANGED
|
@@ -83,7 +83,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
|
|
|
83
83
|
showClear: PropTypes.Requireable<boolean>;
|
|
84
84
|
hideSuffix: PropTypes.Requireable<boolean>;
|
|
85
85
|
placeholder: PropTypes.Requireable<any>;
|
|
86
|
-
size: PropTypes.Requireable<"
|
|
86
|
+
size: PropTypes.Requireable<"small" | "default" | "large">;
|
|
87
87
|
className: PropTypes.Requireable<string>;
|
|
88
88
|
style: PropTypes.Requireable<object>;
|
|
89
89
|
validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
|
|
@@ -21,7 +21,7 @@ export default class inputGroup extends BaseComponent<InputGroupProps, InputGrou
|
|
|
21
21
|
static propTypes: {
|
|
22
22
|
className: PropTypes.Requireable<string>;
|
|
23
23
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
24
|
-
size: PropTypes.Requireable<"
|
|
24
|
+
size: PropTypes.Requireable<"small" | "default" | "large">;
|
|
25
25
|
style: PropTypes.Requireable<object>;
|
|
26
26
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
27
27
|
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -58,7 +58,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
|
|
|
58
58
|
margin: PropTypes.Requireable<NonNullable<number | object>>;
|
|
59
59
|
mouseEnterDelay: PropTypes.Requireable<number>;
|
|
60
60
|
mouseLeaveDelay: PropTypes.Requireable<number>;
|
|
61
|
-
trigger: PropTypes.Validator<NonNullable<"
|
|
61
|
+
trigger: PropTypes.Validator<NonNullable<"click" | "focus" | "hover" | "custom">>;
|
|
62
62
|
contentClassName: PropTypes.Requireable<NonNullable<string | any[]>>;
|
|
63
63
|
onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
64
64
|
onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
|
package/lib/es/rating/index.d.ts
CHANGED
|
@@ -69,7 +69,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
|
|
|
69
69
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
70
70
|
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
|
|
71
71
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
72
|
-
size: PropTypes.Requireable<NonNullable<number | "
|
|
72
|
+
size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
|
|
73
73
|
tooltips: PropTypes.Requireable<string[]>;
|
|
74
74
|
id: PropTypes.Requireable<string>;
|
|
75
75
|
preventScroll: PropTypes.Requireable<boolean>;
|
package/lib/es/rating/item.d.ts
CHANGED
|
@@ -40,7 +40,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
|
|
|
40
40
|
disabled: PropTypes.Requireable<boolean>;
|
|
41
41
|
count: PropTypes.Requireable<number>;
|
|
42
42
|
ariaLabelPrefix: PropTypes.Requireable<string>;
|
|
43
|
-
size: PropTypes.Requireable<NonNullable<number | "
|
|
43
|
+
size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
|
|
44
44
|
'aria-describedby': PropTypes.Requireable<string>;
|
|
45
45
|
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
46
46
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
package/lib/es/switch/index.d.ts
CHANGED
|
@@ -45,7 +45,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
|
|
|
45
45
|
onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
|
|
46
46
|
onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
|
|
47
47
|
style: PropTypes.Requireable<object>;
|
|
48
|
-
size: PropTypes.Requireable<"
|
|
48
|
+
size: PropTypes.Requireable<"small" | "default" | "large">;
|
|
49
49
|
uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
50
50
|
id: PropTypes.Requireable<string>;
|
|
51
51
|
};
|
package/lib/es/table/Table.d.ts
CHANGED
|
@@ -52,7 +52,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
|
|
|
52
52
|
components: PropTypes.Requireable<any>;
|
|
53
53
|
bordered: PropTypes.Requireable<boolean>;
|
|
54
54
|
loading: PropTypes.Requireable<boolean>;
|
|
55
|
-
size: PropTypes.Requireable<"
|
|
55
|
+
size: PropTypes.Requireable<"small" | "default" | "middle">;
|
|
56
56
|
tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
|
|
57
57
|
columns: PropTypes.Requireable<PropTypes.InferProps<{
|
|
58
58
|
align: PropTypes.Requireable<"left" | "right" | "center">;
|
|
@@ -289,7 +289,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
|
|
|
289
289
|
showTotal?: boolean;
|
|
290
290
|
pageSize?: number;
|
|
291
291
|
pageSizeOpts?: number[];
|
|
292
|
-
size?: "
|
|
292
|
+
size?: "small" | "default";
|
|
293
293
|
currentPage?: number;
|
|
294
294
|
defaultCurrentPage?: number;
|
|
295
295
|
onPageChange?: (currentPage: number) => void;
|
package/lib/es/table/index.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
|
|
|
15
15
|
components: PropTypes.Requireable<any>;
|
|
16
16
|
bordered: PropTypes.Requireable<boolean>;
|
|
17
17
|
loading: PropTypes.Requireable<boolean>;
|
|
18
|
-
size: PropTypes.Requireable<"
|
|
18
|
+
size: PropTypes.Requireable<"small" | "default" | "middle">;
|
|
19
19
|
tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
|
|
20
20
|
columns: PropTypes.Requireable<PropTypes.InferProps<{
|
|
21
21
|
align: PropTypes.Requireable<"left" | "right" | "center">;
|
package/lib/es/tabs/TabBar.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
|
|
|
31
31
|
renderExtra(): ReactNode;
|
|
32
32
|
handleItemClick: (itemKey: string, e: MouseEvent<Element>) => void;
|
|
33
33
|
handleKeyDown: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
|
|
34
|
+
renderTabItemInOverflowList: (panel: PlainTab) => ReactNode;
|
|
34
35
|
renderTabItem: (panel: PlainTab) => ReactNode;
|
|
35
36
|
renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
|
|
36
37
|
handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
|
package/lib/es/tabs/TabBar.js
CHANGED
|
@@ -21,6 +21,7 @@ import Dropdown from '../dropdown';
|
|
|
21
21
|
import Button from '../button';
|
|
22
22
|
import { IconChevronRight, IconChevronLeft, IconClose } from '@douyinfe/semi-icons';
|
|
23
23
|
import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
|
|
24
|
+
import TabItem from './TabItem';
|
|
24
25
|
|
|
25
26
|
class TabBar extends React.Component {
|
|
26
27
|
constructor(props) {
|
|
@@ -46,7 +47,7 @@ class TabBar extends React.Component {
|
|
|
46
47
|
this.props.handleKeyDown(event, itemKey, closable);
|
|
47
48
|
};
|
|
48
49
|
|
|
49
|
-
this.
|
|
50
|
+
this.renderTabItemInOverflowList = panel => {
|
|
50
51
|
const {
|
|
51
52
|
size,
|
|
52
53
|
type,
|
|
@@ -91,6 +92,30 @@ class TabBar extends React.Component {
|
|
|
91
92
|
}), panelIcon, panel.tab, closableIcon);
|
|
92
93
|
};
|
|
93
94
|
|
|
95
|
+
this.renderTabItem = panel => {
|
|
96
|
+
const {
|
|
97
|
+
size,
|
|
98
|
+
type,
|
|
99
|
+
deleteTabItem,
|
|
100
|
+
handleKeyDown,
|
|
101
|
+
tabPosition
|
|
102
|
+
} = this.props;
|
|
103
|
+
|
|
104
|
+
const isSelected = this._isActive(panel.itemKey);
|
|
105
|
+
|
|
106
|
+
return /*#__PURE__*/React.createElement(TabItem, Object.assign({
|
|
107
|
+
key: this._getItemKey(panel.itemKey)
|
|
108
|
+
}, panel, {
|
|
109
|
+
selected: isSelected,
|
|
110
|
+
size: size,
|
|
111
|
+
type: type,
|
|
112
|
+
tabPosition: tabPosition,
|
|
113
|
+
handleKeyDown: handleKeyDown,
|
|
114
|
+
deleteTabItem: deleteTabItem,
|
|
115
|
+
onClick: this.handleItemClick
|
|
116
|
+
}));
|
|
117
|
+
};
|
|
118
|
+
|
|
94
119
|
this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
|
|
95
120
|
|
|
96
121
|
this.handleArrowClick = (items, pos) => {
|
|
@@ -194,7 +219,7 @@ class TabBar extends React.Component {
|
|
|
194
219
|
overflowRenderer: this.renderOverflow,
|
|
195
220
|
renderMode: "scroll",
|
|
196
221
|
className: "".concat(cssClasses.TABS_BAR, "-overflow-list"),
|
|
197
|
-
visibleItemRenderer: this.
|
|
222
|
+
visibleItemRenderer: this.renderTabItemInOverflowList
|
|
198
223
|
});
|
|
199
224
|
};
|
|
200
225
|
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { ReactNode, MouseEvent } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { TabType, TabSize, TabPosition } from './interface';
|
|
4
|
+
export interface TabItemProps {
|
|
5
|
+
tab?: ReactNode;
|
|
6
|
+
icon?: ReactNode;
|
|
7
|
+
size?: TabSize;
|
|
8
|
+
type?: TabType;
|
|
9
|
+
tabPosition?: TabPosition;
|
|
10
|
+
selected?: boolean;
|
|
11
|
+
closable?: boolean;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
itemKey?: string;
|
|
14
|
+
handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
|
|
15
|
+
deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
|
|
16
|
+
onClick?: (itemKey: string, e: MouseEvent<Element>) => void;
|
|
17
|
+
}
|
|
18
|
+
export default class TabItem extends React.Component<TabItemProps> {
|
|
19
|
+
static propsTypes: {
|
|
20
|
+
tab: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
21
|
+
icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
22
|
+
size: PropTypes.Requireable<string>;
|
|
23
|
+
type: PropTypes.Requireable<string>;
|
|
24
|
+
tabPosition: PropTypes.Requireable<string>;
|
|
25
|
+
selected: PropTypes.Requireable<boolean>;
|
|
26
|
+
closable: PropTypes.Requireable<boolean>;
|
|
27
|
+
disabled: PropTypes.Requireable<boolean>;
|
|
28
|
+
itemKey: PropTypes.Requireable<string>;
|
|
29
|
+
handleKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
|
|
30
|
+
deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
|
|
31
|
+
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
32
|
+
};
|
|
33
|
+
static elementType: string;
|
|
34
|
+
renderIcon(icon: ReactNode): ReactNode;
|
|
35
|
+
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
36
|
+
handleClick: (e: React.MouseEvent) => void;
|
|
37
|
+
render(): JSX.Element;
|
|
38
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import cls from 'classnames';
|
|
4
|
+
import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/tabs/constants';
|
|
5
|
+
import { IconClose } from '@douyinfe/semi-icons';
|
|
6
|
+
export default class TabItem extends React.Component {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
|
|
10
|
+
this.handleKeyDown = event => {
|
|
11
|
+
const {
|
|
12
|
+
itemKey,
|
|
13
|
+
closable,
|
|
14
|
+
handleKeyDown
|
|
15
|
+
} = this.props;
|
|
16
|
+
handleKeyDown && handleKeyDown(event, itemKey, closable);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
this.handleClick = e => {
|
|
20
|
+
const {
|
|
21
|
+
itemKey,
|
|
22
|
+
onClick,
|
|
23
|
+
disabled
|
|
24
|
+
} = this.props;
|
|
25
|
+
!disabled && onClick && onClick(itemKey, e);
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
renderIcon(icon) {
|
|
30
|
+
return /*#__PURE__*/React.createElement("span", null, icon);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
render() {
|
|
34
|
+
const {
|
|
35
|
+
tab,
|
|
36
|
+
size,
|
|
37
|
+
type,
|
|
38
|
+
icon,
|
|
39
|
+
selected,
|
|
40
|
+
closable,
|
|
41
|
+
disabled,
|
|
42
|
+
itemKey,
|
|
43
|
+
deleteTabItem,
|
|
44
|
+
tabPosition
|
|
45
|
+
} = this.props;
|
|
46
|
+
const panelIcon = icon ? this.renderIcon(icon) : null;
|
|
47
|
+
const className = cls(cssClasses.TABS_TAB, "".concat(cssClasses.TABS_TAB, "-").concat(type), "".concat(cssClasses.TABS_TAB, "-").concat(tabPosition), "".concat(cssClasses.TABS_TAB, "-single"), {
|
|
48
|
+
[cssClasses.TABS_TAB_ACTIVE]: selected,
|
|
49
|
+
[cssClasses.TABS_TAB_DISABLED]: disabled,
|
|
50
|
+
["".concat(cssClasses.TABS_TAB, "-small")]: size === 'small',
|
|
51
|
+
["".concat(cssClasses.TABS_TAB, "-medium")]: size === 'medium'
|
|
52
|
+
});
|
|
53
|
+
const closableIcon = type === 'card' && closable ? /*#__PURE__*/React.createElement(IconClose, {
|
|
54
|
+
"aria-label": "Close",
|
|
55
|
+
role: "button",
|
|
56
|
+
className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
|
|
57
|
+
onClick: e => deleteTabItem(itemKey, e)
|
|
58
|
+
}) : null;
|
|
59
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
role: "tab",
|
|
61
|
+
id: "semiTab".concat(itemKey),
|
|
62
|
+
"data-tabkey": "semiTab".concat(itemKey),
|
|
63
|
+
"aria-controls": "semiTabPanel".concat(itemKey),
|
|
64
|
+
"aria-disabled": disabled ? 'true' : 'false',
|
|
65
|
+
"aria-selected": selected ? 'true' : 'false',
|
|
66
|
+
tabIndex: selected ? 0 : -1,
|
|
67
|
+
onKeyDown: this.handleKeyDown,
|
|
68
|
+
onClick: this.handleClick,
|
|
69
|
+
className: className
|
|
70
|
+
}, panelIcon, tab, closableIcon);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
}
|
|
74
|
+
TabItem.propsTypes = {
|
|
75
|
+
tab: PropTypes.node,
|
|
76
|
+
icon: PropTypes.node,
|
|
77
|
+
size: PropTypes.oneOf(strings.SIZE),
|
|
78
|
+
type: PropTypes.oneOf(strings.TYPE_MAP),
|
|
79
|
+
tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
|
|
80
|
+
selected: PropTypes.bool,
|
|
81
|
+
closable: PropTypes.bool,
|
|
82
|
+
disabled: PropTypes.bool,
|
|
83
|
+
itemKey: PropTypes.string,
|
|
84
|
+
handleKeyDown: PropTypes.func,
|
|
85
|
+
deleteTabItem: PropTypes.func,
|
|
86
|
+
onClick: PropTypes.func
|
|
87
|
+
};
|
|
88
|
+
TabItem.elementType = 'TabItem';
|
package/lib/es/tabs/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/es/ta
|
|
|
4
4
|
import BaseComponent from '../_base/baseComponent';
|
|
5
5
|
import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
|
|
6
6
|
import TabPane from './TabPane';
|
|
7
|
+
import TabItem from './TabItem';
|
|
7
8
|
import { PlainTab, TabsProps } from './interface';
|
|
8
9
|
export * from './interface';
|
|
9
10
|
export interface TabsState {
|
|
@@ -14,6 +15,7 @@ export interface TabsState {
|
|
|
14
15
|
}
|
|
15
16
|
declare class Tabs extends BaseComponent<TabsProps, TabsState> {
|
|
16
17
|
static TabPane: typeof TabPane;
|
|
18
|
+
static TabItem: typeof TabItem;
|
|
17
19
|
static propTypes: {
|
|
18
20
|
activeKey: PropTypes.Requireable<string>;
|
|
19
21
|
className: PropTypes.Requireable<string>;
|
package/lib/es/tabs/index.js
CHANGED
|
@@ -23,6 +23,7 @@ import BaseComponent from '../_base/baseComponent';
|
|
|
23
23
|
import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
|
|
24
24
|
import TabBar from './TabBar';
|
|
25
25
|
import TabPane from './TabPane';
|
|
26
|
+
import TabItem from './TabItem';
|
|
26
27
|
import TabsContext from './tabs-context';
|
|
27
28
|
const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
|
|
28
29
|
export * from './interface';
|
|
@@ -335,6 +336,7 @@ class Tabs extends BaseComponent {
|
|
|
335
336
|
}
|
|
336
337
|
|
|
337
338
|
Tabs.TabPane = TabPane;
|
|
339
|
+
Tabs.TabItem = TabItem;
|
|
338
340
|
Tabs.propTypes = {
|
|
339
341
|
activeKey: PropTypes.string,
|
|
340
342
|
className: PropTypes.string,
|
|
@@ -56,6 +56,7 @@ export interface TagInputState {
|
|
|
56
56
|
focusing?: boolean;
|
|
57
57
|
hovering?: boolean;
|
|
58
58
|
active?: boolean;
|
|
59
|
+
entering?: boolean;
|
|
59
60
|
}
|
|
60
61
|
declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
|
|
61
62
|
static propTypes: {
|
|
@@ -91,7 +92,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
|
|
|
91
92
|
onAdd: PropTypes.Requireable<(...args: any[]) => any>;
|
|
92
93
|
onRemove: PropTypes.Requireable<(...args: any[]) => any>;
|
|
93
94
|
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
|
|
94
|
-
size: PropTypes.Requireable<"
|
|
95
|
+
size: PropTypes.Requireable<"small" | "default" | "large">;
|
|
95
96
|
validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
|
|
96
97
|
prefix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
97
98
|
suffix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
@@ -151,6 +152,8 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
|
|
|
151
152
|
renderTags(): JSX.Element;
|
|
152
153
|
blur(): void;
|
|
153
154
|
focus(): void;
|
|
155
|
+
handleInputCompositionStart: (e: any) => void;
|
|
156
|
+
handleInputCompositionEnd: (e: any) => void;
|
|
154
157
|
render(): JSX.Element;
|
|
155
158
|
}
|
|
156
159
|
export default TagInput;
|
package/lib/es/tagInput/index.js
CHANGED
|
@@ -157,13 +157,22 @@ class TagInput extends BaseComponent {
|
|
|
157
157
|
this.foundation.handleSortEnd(callbackProps);
|
|
158
158
|
};
|
|
159
159
|
|
|
160
|
+
this.handleInputCompositionStart = e => {
|
|
161
|
+
this.foundation.handleInputCompositionStart(e);
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
this.handleInputCompositionEnd = e => {
|
|
165
|
+
this.foundation.handleInputCompositionEnd(e);
|
|
166
|
+
};
|
|
167
|
+
|
|
160
168
|
this.foundation = new TagInputFoundation(this.adapter);
|
|
161
169
|
this.state = {
|
|
162
170
|
tagsArray: props.defaultValue || [],
|
|
163
171
|
inputValue: '',
|
|
164
172
|
focusing: false,
|
|
165
173
|
hovering: false,
|
|
166
|
-
active: false
|
|
174
|
+
active: false,
|
|
175
|
+
entering: false
|
|
167
176
|
};
|
|
168
177
|
this.inputRef = /*#__PURE__*/React.createRef();
|
|
169
178
|
this.tagInputRef = /*#__PURE__*/React.createRef();
|
|
@@ -239,6 +248,11 @@ class TagInput extends BaseComponent {
|
|
|
239
248
|
active
|
|
240
249
|
});
|
|
241
250
|
},
|
|
251
|
+
setEntering: entering => {
|
|
252
|
+
this.setState({
|
|
253
|
+
entering
|
|
254
|
+
});
|
|
255
|
+
},
|
|
242
256
|
getClickOutsideHandler: () => {
|
|
243
257
|
return this.clickOutsideHandler;
|
|
244
258
|
},
|
|
@@ -528,7 +542,9 @@ class TagInput extends BaseComponent {
|
|
|
528
542
|
},
|
|
529
543
|
onFocus: e => {
|
|
530
544
|
this.handleInputFocus(e);
|
|
531
|
-
}
|
|
545
|
+
},
|
|
546
|
+
onCompositionStart: this.handleInputCompositionStart,
|
|
547
|
+
onCompositionEnd: this.handleInputCompositionEnd
|
|
532
548
|
})), this.renderClearBtn(), this.renderSuffix())
|
|
533
549
|
);
|
|
534
550
|
}
|
|
@@ -130,7 +130,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
|
|
|
130
130
|
secondStep: PropTypes.Requireable<number>;
|
|
131
131
|
focusOnOpen: PropTypes.Requireable<boolean>;
|
|
132
132
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
133
|
-
size: PropTypes.Requireable<"
|
|
133
|
+
size: PropTypes.Requireable<"small" | "default" | "large">;
|
|
134
134
|
panels: PropTypes.Requireable<PropTypes.InferProps<{
|
|
135
135
|
panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
136
136
|
panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
@@ -48,7 +48,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
|
|
|
48
48
|
secondStep: import("prop-types").Requireable<number>;
|
|
49
49
|
focusOnOpen: import("prop-types").Requireable<boolean>;
|
|
50
50
|
autoFocus: import("prop-types").Requireable<boolean>;
|
|
51
|
-
size: import("prop-types").Requireable<"
|
|
51
|
+
size: import("prop-types").Requireable<"small" | "default" | "large">;
|
|
52
52
|
panels: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
53
53
|
panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
|
|
54
54
|
panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
|
|
@@ -90,7 +90,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
|
|
|
90
90
|
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
|
|
91
91
|
mouseEnterDelay: PropTypes.Requireable<number>;
|
|
92
92
|
mouseLeaveDelay: PropTypes.Requireable<number>;
|
|
93
|
-
trigger: PropTypes.Validator<NonNullable<"
|
|
93
|
+
trigger: PropTypes.Validator<NonNullable<"click" | "focus" | "hover" | "custom">>;
|
|
94
94
|
className: PropTypes.Requireable<string>;
|
|
95
95
|
wrapperClassName: PropTypes.Requireable<string>;
|
|
96
96
|
clickToHide: PropTypes.Requireable<boolean>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.27.0-alpha.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es/index.js",
|
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
"lib/*"
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@douyinfe/semi-animation": "2.
|
|
21
|
-
"@douyinfe/semi-animation-react": "2.
|
|
22
|
-
"@douyinfe/semi-foundation": "2.
|
|
23
|
-
"@douyinfe/semi-icons": "2.
|
|
24
|
-
"@douyinfe/semi-illustrations": "2.
|
|
25
|
-
"@douyinfe/semi-theme-default": "2.
|
|
20
|
+
"@douyinfe/semi-animation": "2.27.0-alpha.0",
|
|
21
|
+
"@douyinfe/semi-animation-react": "2.27.0-alpha.0",
|
|
22
|
+
"@douyinfe/semi-foundation": "2.27.0-alpha.0",
|
|
23
|
+
"@douyinfe/semi-icons": "2.27.0-alpha.0",
|
|
24
|
+
"@douyinfe/semi-illustrations": "2.27.0-alpha.0",
|
|
25
|
+
"@douyinfe/semi-theme-default": "2.27.0-alpha.0",
|
|
26
26
|
"async-validator": "^3.5.0",
|
|
27
27
|
"classnames": "^2.2.6",
|
|
28
28
|
"copy-text-to-clipboard": "^2.1.1",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
],
|
|
70
70
|
"author": "",
|
|
71
71
|
"license": "MIT",
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "3e818e5687041820aab8c5094c3b6fae7c8f2049",
|
|
73
73
|
"devDependencies": {
|
|
74
74
|
"@babel/plugin-proposal-decorators": "^7.15.8",
|
|
75
75
|
"@babel/plugin-transform-runtime": "^7.15.8",
|