@douyinfe/semi-ui 2.14.0 → 2.15.1
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/autoComplete/index.tsx +0 -1
- package/cascader/__test__/cascader.test.js +13 -10
- package/cascader/_story/cascader.stories.js +22 -0
- package/cascader/index.tsx +53 -35
- package/checkbox/checkbox.tsx +1 -0
- package/checkbox/checkboxInner.tsx +4 -1
- package/datePicker/__test__/datePicker.test.js +1 -0
- package/datePicker/_story/v2/FixTriggerRender.tsx +36 -0
- package/datePicker/_story/v2/index.js +1 -0
- package/datePicker/datePicker.tsx +7 -5
- package/dist/css/semi.css +39 -11
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +1150 -346
- 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/dropdown/context.ts +2 -0
- package/dropdown/dropdownItem.tsx +2 -1
- package/dropdown/dropdownMenu.tsx +24 -1
- package/dropdown/index.tsx +10 -2
- package/form/_story/form.stories.tsx +23 -15
- package/form/hoc/withField.tsx +1 -1
- package/form/interface.ts +1 -1
- package/input/__test__/input.test.js +31 -0
- package/input/_story/input.stories.js +24 -1
- package/input/index.tsx +5 -2
- package/input/inputGroup.tsx +7 -6
- package/inputNumber/index.tsx +5 -3
- package/lib/cjs/autoComplete/index.d.ts +0 -1
- package/lib/cjs/autoComplete/index.js +0 -1
- package/lib/cjs/cascader/index.d.ts +1 -1
- package/lib/cjs/cascader/index.js +36 -9
- package/lib/cjs/checkbox/checkbox.d.ts +1 -0
- package/lib/cjs/checkbox/checkbox.js +2 -1
- package/lib/cjs/checkbox/checkboxInner.d.ts +2 -0
- package/lib/cjs/checkbox/checkboxInner.js +8 -2
- package/lib/cjs/datePicker/datePicker.d.ts +1 -1
- package/lib/cjs/datePicker/datePicker.js +21 -6
- package/lib/cjs/dropdown/context.d.ts +2 -0
- package/lib/cjs/dropdown/dropdownItem.js +3 -1
- package/lib/cjs/dropdown/dropdownMenu.d.ts +18 -1
- package/lib/cjs/dropdown/dropdownMenu.js +23 -2
- package/lib/cjs/dropdown/index.d.ts +4 -0
- package/lib/cjs/dropdown/index.js +13 -5
- package/lib/cjs/form/baseForm.d.ts +16 -15
- package/lib/cjs/form/field.d.ts +16 -15
- package/lib/cjs/form/hoc/withField.d.ts +1 -1
- package/lib/cjs/form/interface.d.ts +1 -1
- package/lib/cjs/input/index.d.ts +2 -1
- package/lib/cjs/input/index.js +11 -5
- package/lib/cjs/input/inputGroup.js +16 -9
- package/lib/cjs/inputNumber/index.d.ts +1 -0
- package/lib/cjs/inputNumber/index.js +8 -3
- package/lib/cjs/locale/source/de.d.ts +3 -0
- package/lib/cjs/locale/source/de.js +165 -0
- package/lib/cjs/locale/source/fr.d.ts +3 -0
- package/lib/cjs/locale/source/fr.js +165 -0
- package/lib/cjs/locale/source/it.d.ts +3 -0
- package/lib/cjs/locale/source/it.js +165 -0
- package/lib/cjs/modal/ModalContent.d.ts +1 -0
- package/lib/cjs/modal/ModalContent.js +17 -4
- package/lib/cjs/modal/confirm.d.ts +5 -0
- package/lib/cjs/radio/radio.d.ts +2 -0
- package/lib/cjs/radio/radio.js +2 -1
- package/lib/cjs/radio/radioInner.d.ts +2 -0
- package/lib/cjs/radio/radioInner.js +8 -2
- package/lib/cjs/rating/index.d.ts +7 -0
- package/lib/cjs/rating/index.js +135 -68
- package/lib/cjs/rating/item.d.ts +27 -3
- package/lib/cjs/rating/item.js +145 -38
- package/lib/cjs/select/index.d.ts +2 -0
- package/lib/cjs/select/index.js +15 -3
- package/lib/cjs/table/Body/index.js +1 -1
- package/lib/cjs/tabs/index.d.ts +1 -0
- package/lib/cjs/tabs/index.js +2 -1
- package/lib/cjs/tabs/interface.d.ts +1 -0
- package/lib/cjs/tag/index.js +4 -5
- package/lib/cjs/tag/interface.d.ts +1 -0
- package/lib/cjs/tagInput/index.d.ts +2 -0
- package/lib/cjs/tagInput/index.js +19 -5
- package/lib/cjs/timePicker/TimeInput.d.ts +2 -1
- package/lib/cjs/timePicker/TimeInput.js +7 -3
- package/lib/cjs/timePicker/TimePicker.d.ts +2 -0
- package/lib/cjs/timePicker/TimePicker.js +2 -1
- package/lib/cjs/timePicker/index.d.ts +1 -0
- package/lib/cjs/tooltip/index.d.ts +2 -0
- package/lib/cjs/tooltip/index.js +12 -4
- package/lib/cjs/tree/index.d.ts +1 -0
- package/lib/cjs/tree/index.js +21 -5
- package/lib/cjs/tree/treeNode.js +15 -19
- package/lib/cjs/treeSelect/index.js +20 -4
- package/lib/es/autoComplete/index.d.ts +0 -1
- package/lib/es/autoComplete/index.js +0 -1
- package/lib/es/cascader/index.d.ts +1 -1
- package/lib/es/cascader/index.js +36 -9
- package/lib/es/checkbox/checkbox.d.ts +1 -0
- package/lib/es/checkbox/checkbox.js +2 -1
- package/lib/es/checkbox/checkboxInner.d.ts +2 -0
- package/lib/es/checkbox/checkboxInner.js +8 -2
- package/lib/es/datePicker/datePicker.d.ts +1 -1
- package/lib/es/datePicker/datePicker.js +21 -6
- package/lib/es/dropdown/context.d.ts +2 -0
- package/lib/es/dropdown/dropdownItem.js +3 -1
- package/lib/es/dropdown/dropdownMenu.d.ts +18 -1
- package/lib/es/dropdown/dropdownMenu.js +21 -2
- package/lib/es/dropdown/index.d.ts +4 -0
- package/lib/es/dropdown/index.js +13 -5
- package/lib/es/form/baseForm.d.ts +16 -15
- package/lib/es/form/field.d.ts +16 -15
- package/lib/es/form/hoc/withField.d.ts +1 -1
- package/lib/es/form/interface.d.ts +1 -1
- package/lib/es/input/index.d.ts +2 -1
- package/lib/es/input/index.js +11 -5
- package/lib/es/input/inputGroup.js +15 -9
- package/lib/es/inputNumber/index.d.ts +1 -0
- package/lib/es/inputNumber/index.js +8 -3
- package/lib/es/locale/source/de.d.ts +3 -0
- package/lib/es/locale/source/de.js +153 -0
- package/lib/es/locale/source/fr.d.ts +3 -0
- package/lib/es/locale/source/fr.js +153 -0
- package/lib/es/locale/source/it.d.ts +3 -0
- package/lib/es/locale/source/it.js +153 -0
- package/lib/es/modal/ModalContent.d.ts +1 -0
- package/lib/es/modal/ModalContent.js +17 -4
- package/lib/es/modal/confirm.d.ts +5 -0
- package/lib/es/radio/radio.d.ts +2 -0
- package/lib/es/radio/radio.js +2 -1
- package/lib/es/radio/radioInner.d.ts +2 -0
- package/lib/es/radio/radioInner.js +8 -2
- package/lib/es/rating/index.d.ts +7 -0
- package/lib/es/rating/index.js +133 -65
- package/lib/es/rating/item.d.ts +27 -3
- package/lib/es/rating/item.js +145 -32
- package/lib/es/select/index.d.ts +2 -0
- package/lib/es/select/index.js +15 -3
- package/lib/es/table/Body/index.js +1 -1
- package/lib/es/tabs/index.d.ts +1 -0
- package/lib/es/tabs/index.js +2 -1
- package/lib/es/tabs/interface.d.ts +1 -0
- package/lib/es/tag/index.js +4 -5
- package/lib/es/tag/interface.d.ts +1 -0
- package/lib/es/tagInput/index.d.ts +2 -0
- package/lib/es/tagInput/index.js +19 -5
- package/lib/es/timePicker/TimeInput.d.ts +2 -1
- package/lib/es/timePicker/TimeInput.js +7 -3
- package/lib/es/timePicker/TimePicker.d.ts +2 -0
- package/lib/es/timePicker/TimePicker.js +2 -1
- package/lib/es/timePicker/index.d.ts +1 -0
- package/lib/es/tooltip/index.d.ts +2 -0
- package/lib/es/tooltip/index.js +13 -4
- package/lib/es/tree/index.d.ts +1 -0
- package/lib/es/tree/index.js +19 -5
- package/lib/es/tree/treeNode.js +14 -20
- package/lib/es/treeSelect/index.js +18 -4
- package/locale/source/de.ts +156 -0
- package/locale/source/fr.ts +156 -0
- package/locale/source/it.ts +156 -0
- package/modal/ModalContent.tsx +7 -4
- package/package.json +8 -8
- package/radio/radio.tsx +2 -0
- package/radio/radioInner.tsx +4 -1
- package/rating/__test__/rating.test.js +13 -31
- package/rating/_story/rating.stories.js +13 -2
- package/rating/index.tsx +63 -18
- package/rating/item.tsx +141 -26
- package/select/index.tsx +6 -2
- package/table/Body/index.tsx +1 -1
- package/table/_story/v2/FixedVirtualizedEmpty.tsx +76 -0
- package/table/_story/v2/index.js +2 -1
- package/tabs/index.tsx +1 -0
- package/tabs/interface.ts +1 -0
- package/tag/index.tsx +2 -3
- package/tag/interface.ts +1 -0
- package/tagInput/index.tsx +8 -4
- package/timePicker/TimeInput.tsx +5 -3
- package/timePicker/TimePicker.tsx +2 -0
- package/tooltip/index.tsx +7 -2
- package/tree/index.tsx +13 -2
- package/tree/treeNode.tsx +11 -13
- package/treeSelect/_story/treeSelect.stories.js +38 -1
- package/treeSelect/index.tsx +13 -3
- package/upload/_story/upload.stories.tsx +9 -6
package/lib/es/radio/radio.js
CHANGED
|
@@ -236,7 +236,8 @@ Radio.propTypes = {
|
|
|
236
236
|
addonStyle: PropTypes.object,
|
|
237
237
|
addonClassName: PropTypes.string,
|
|
238
238
|
type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_BUTTON, strings.TYPE_CARD, strings.TYPE_PURECARD]),
|
|
239
|
-
'aria-label': PropTypes.string
|
|
239
|
+
'aria-label': PropTypes.string,
|
|
240
|
+
preventScroll: PropTypes.bool
|
|
240
241
|
};
|
|
241
242
|
Radio.defaultProps = {
|
|
242
243
|
autoFocus: false,
|
|
@@ -20,6 +20,7 @@ export interface RadioInnerProps extends BaseProps {
|
|
|
20
20
|
focusInner?: boolean;
|
|
21
21
|
onInputFocus?: (e: any) => void;
|
|
22
22
|
onInputBlur?: (e: any) => void;
|
|
23
|
+
preventScroll?: boolean;
|
|
23
24
|
}
|
|
24
25
|
interface RadioInnerState {
|
|
25
26
|
checked?: boolean;
|
|
@@ -36,6 +37,7 @@ declare class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState>
|
|
|
36
37
|
focusInner: PropTypes.Requireable<boolean>;
|
|
37
38
|
onInputFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
38
39
|
onInputBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
40
|
+
preventScroll: PropTypes.Requireable<boolean>;
|
|
39
41
|
};
|
|
40
42
|
static defaultProps: {
|
|
41
43
|
onChange: (...args: any[]) => void;
|
|
@@ -54,7 +54,12 @@ class RadioInner extends BaseComponent {
|
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
focus() {
|
|
57
|
-
|
|
57
|
+
const {
|
|
58
|
+
preventScroll
|
|
59
|
+
} = this.props;
|
|
60
|
+
this.inputEntity.focus({
|
|
61
|
+
preventScroll
|
|
62
|
+
});
|
|
58
63
|
}
|
|
59
64
|
|
|
60
65
|
onChange(e) {
|
|
@@ -125,7 +130,8 @@ RadioInner.propTypes = {
|
|
|
125
130
|
'aria-label': PropTypes.string,
|
|
126
131
|
focusInner: PropTypes.bool,
|
|
127
132
|
onInputFocus: PropTypes.func,
|
|
128
|
-
onInputBlur: PropTypes.func
|
|
133
|
+
onInputBlur: PropTypes.func,
|
|
134
|
+
preventScroll: PropTypes.bool
|
|
129
135
|
};
|
|
130
136
|
RadioInner.defaultProps = {
|
|
131
137
|
onChange: _noop,
|
package/lib/es/rating/index.d.ts
CHANGED
|
@@ -34,12 +34,14 @@ export interface RatingProps {
|
|
|
34
34
|
size?: 'small' | 'default' | number;
|
|
35
35
|
tooltips?: string[];
|
|
36
36
|
id?: string;
|
|
37
|
+
preventScroll?: boolean;
|
|
37
38
|
}
|
|
38
39
|
export interface RatingState {
|
|
39
40
|
value: number;
|
|
40
41
|
hoverValue: number;
|
|
41
42
|
focused: boolean;
|
|
42
43
|
clearedValue: number;
|
|
44
|
+
emptyStarFocusVisible: boolean;
|
|
43
45
|
}
|
|
44
46
|
export default class Rating extends BaseComponent<RatingProps, RatingState> {
|
|
45
47
|
static contextType: React.Context<import("../configProvider/context").ContextValue>;
|
|
@@ -70,6 +72,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
|
|
|
70
72
|
size: PropTypes.Requireable<number | "default" | "small">;
|
|
71
73
|
tooltips: PropTypes.Requireable<string[]>;
|
|
72
74
|
id: PropTypes.Requireable<string>;
|
|
75
|
+
preventScroll: PropTypes.Requireable<boolean>;
|
|
73
76
|
};
|
|
74
77
|
static defaultProps: {
|
|
75
78
|
defaultValue: number;
|
|
@@ -101,5 +104,9 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
|
|
|
101
104
|
blur: () => void;
|
|
102
105
|
saveRef: (index: number) => (node: Item) => void;
|
|
103
106
|
saveRate: (node: HTMLUListElement) => void;
|
|
107
|
+
handleStarFocusVisible: (event: React.FocusEvent) => void;
|
|
108
|
+
handleStarBlur: (event: React.FocusEvent) => void;
|
|
109
|
+
getAriaLabelPrefix: () => string;
|
|
110
|
+
getItemList: (ariaLabelPrefix: string) => JSX.Element[];
|
|
104
111
|
render(): JSX.Element;
|
|
105
112
|
}
|
package/lib/es/rating/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
|
|
2
1
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
3
2
|
import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
|
|
4
3
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
4
|
+
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import ReactDOM from 'react-dom';
|
|
7
7
|
import BaseComponent from '../_base/baseComponent';
|
|
@@ -48,11 +48,14 @@ export default class Rating extends BaseComponent {
|
|
|
48
48
|
|
|
49
49
|
this.focus = () => {
|
|
50
50
|
const {
|
|
51
|
-
disabled
|
|
51
|
+
disabled,
|
|
52
|
+
preventScroll
|
|
52
53
|
} = this.props;
|
|
53
54
|
|
|
54
55
|
if (!disabled) {
|
|
55
|
-
this.rate.focus(
|
|
56
|
+
this.rate.focus({
|
|
57
|
+
preventScroll
|
|
58
|
+
});
|
|
56
59
|
}
|
|
57
60
|
};
|
|
58
61
|
|
|
@@ -74,13 +77,96 @@ export default class Rating extends BaseComponent {
|
|
|
74
77
|
this.rate = node;
|
|
75
78
|
};
|
|
76
79
|
|
|
80
|
+
this.handleStarFocusVisible = event => {
|
|
81
|
+
this.foundation.handleStarFocusVisible(event);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
this.handleStarBlur = event => {
|
|
85
|
+
this.foundation.handleStarBlur(event);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
this.getAriaLabelPrefix = () => {
|
|
89
|
+
if (this.props['aria-label']) {
|
|
90
|
+
return this.props['aria-label'];
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
let prefix = 'star';
|
|
94
|
+
const {
|
|
95
|
+
character
|
|
96
|
+
} = this.props;
|
|
97
|
+
|
|
98
|
+
if (typeof character === 'string') {
|
|
99
|
+
prefix = character;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return prefix;
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
this.getItemList = ariaLabelPrefix => {
|
|
106
|
+
var _context, _context2;
|
|
107
|
+
|
|
108
|
+
const {
|
|
109
|
+
count,
|
|
110
|
+
allowHalf,
|
|
111
|
+
prefixCls,
|
|
112
|
+
disabled,
|
|
113
|
+
character,
|
|
114
|
+
size,
|
|
115
|
+
tooltips
|
|
116
|
+
} = this.props;
|
|
117
|
+
const {
|
|
118
|
+
value,
|
|
119
|
+
hoverValue,
|
|
120
|
+
focused
|
|
121
|
+
} = this.state; // index == count is for Empty rating
|
|
122
|
+
|
|
123
|
+
const itemList = _mapInstanceProperty(_context = [..._keysInstanceProperty(_context2 = Array(count + 1)).call(_context2)]).call(_context, ind => {
|
|
124
|
+
const content = /*#__PURE__*/React.createElement(Item, {
|
|
125
|
+
ref: this.saveRef(ind),
|
|
126
|
+
index: ind,
|
|
127
|
+
count: count,
|
|
128
|
+
prefixCls: "".concat(prefixCls, "-star"),
|
|
129
|
+
allowHalf: allowHalf,
|
|
130
|
+
value: hoverValue === undefined ? value : hoverValue,
|
|
131
|
+
onClick: disabled ? noop : this.onClick,
|
|
132
|
+
onHover: disabled ? noop : this.onHover,
|
|
133
|
+
key: ind,
|
|
134
|
+
disabled: disabled,
|
|
135
|
+
character: character,
|
|
136
|
+
focused: focused,
|
|
137
|
+
size: ind === count ? 0 : size,
|
|
138
|
+
ariaLabelPrefix: ariaLabelPrefix,
|
|
139
|
+
onFocus: disabled || count !== ind ? noop : this.handleStarFocusVisible,
|
|
140
|
+
onBlur: disabled || count !== ind ? noop : this.handleStarBlur
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
if (tooltips) {
|
|
144
|
+
var _context3;
|
|
145
|
+
|
|
146
|
+
const text = tooltips[ind] ? tooltips[ind] : '';
|
|
147
|
+
const showTips = hoverValue - 1 === ind;
|
|
148
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
149
|
+
visible: showTips,
|
|
150
|
+
trigger: "custom",
|
|
151
|
+
content: text,
|
|
152
|
+
key: _concatInstanceProperty(_context3 = "".concat(ind, "-")).call(_context3, showTips)
|
|
153
|
+
}, content);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
return content;
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
return itemList;
|
|
160
|
+
};
|
|
161
|
+
|
|
77
162
|
const value = props.value === undefined ? props.defaultValue : props.value;
|
|
78
163
|
this.stars = {};
|
|
79
164
|
this.state = {
|
|
80
165
|
value,
|
|
81
166
|
focused: false,
|
|
82
167
|
hoverValue: undefined,
|
|
83
|
-
clearedValue: null
|
|
168
|
+
clearedValue: null,
|
|
169
|
+
emptyStarFocusVisible: false
|
|
84
170
|
};
|
|
85
171
|
this.foundation = new RatingFoundation(this.adapter);
|
|
86
172
|
}
|
|
@@ -99,11 +185,16 @@ export default class Rating extends BaseComponent {
|
|
|
99
185
|
return _Object$assign(_Object$assign({}, super.adapter), {
|
|
100
186
|
focus: () => {
|
|
101
187
|
const {
|
|
102
|
-
disabled
|
|
188
|
+
disabled,
|
|
189
|
+
count
|
|
103
190
|
} = this.props;
|
|
191
|
+
const {
|
|
192
|
+
value
|
|
193
|
+
} = this.state;
|
|
104
194
|
|
|
105
195
|
if (!disabled) {
|
|
106
|
-
|
|
196
|
+
const index = Math.ceil(value) - 1;
|
|
197
|
+
this.stars[index < 0 ? count : index].starFocus();
|
|
107
198
|
}
|
|
108
199
|
},
|
|
109
200
|
getStarDOM: index => {
|
|
@@ -165,6 +256,11 @@ export default class Rating extends BaseComponent {
|
|
|
165
256
|
focused: false
|
|
166
257
|
});
|
|
167
258
|
onKeyDown && onKeyDown(e);
|
|
259
|
+
},
|
|
260
|
+
setEmptyStarFocusVisible: focusVisible => {
|
|
261
|
+
this.setState({
|
|
262
|
+
emptyStarFocusVisible: focusVisible
|
|
263
|
+
});
|
|
168
264
|
}
|
|
169
265
|
});
|
|
170
266
|
}
|
|
@@ -178,77 +274,48 @@ export default class Rating extends BaseComponent {
|
|
|
178
274
|
}
|
|
179
275
|
|
|
180
276
|
render() {
|
|
181
|
-
var
|
|
277
|
+
var _context4, _context5, _context6;
|
|
182
278
|
|
|
183
279
|
const {
|
|
184
|
-
count,
|
|
185
|
-
allowHalf,
|
|
186
280
|
style,
|
|
187
281
|
prefixCls,
|
|
188
282
|
disabled,
|
|
189
283
|
className,
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
tooltips,
|
|
194
|
-
id
|
|
284
|
+
id,
|
|
285
|
+
count,
|
|
286
|
+
tabIndex
|
|
195
287
|
} = this.props;
|
|
196
288
|
const {
|
|
197
289
|
value,
|
|
198
|
-
|
|
199
|
-
focused
|
|
290
|
+
emptyStarFocusVisible
|
|
200
291
|
} = this.state;
|
|
292
|
+
const ariaLabelPrefix = this.getAriaLabelPrefix();
|
|
201
293
|
|
|
202
|
-
const
|
|
203
|
-
const content = /*#__PURE__*/React.createElement(Item, {
|
|
204
|
-
ref: this.saveRef(ind),
|
|
205
|
-
index: ind,
|
|
206
|
-
count: count,
|
|
207
|
-
prefixCls: "".concat(prefixCls, "-star"),
|
|
208
|
-
allowHalf: allowHalf,
|
|
209
|
-
value: hoverValue === undefined ? value : hoverValue,
|
|
210
|
-
onClick: this.onClick,
|
|
211
|
-
onHover: this.onHover,
|
|
212
|
-
key: ind,
|
|
213
|
-
disabled: disabled,
|
|
214
|
-
character: character,
|
|
215
|
-
focused: focused,
|
|
216
|
-
size: size
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
if (tooltips) {
|
|
220
|
-
var _context3;
|
|
221
|
-
|
|
222
|
-
const text = tooltips[ind] ? tooltips[ind] : '';
|
|
223
|
-
const showTips = hoverValue - 1 === ind;
|
|
224
|
-
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
225
|
-
visible: showTips,
|
|
226
|
-
trigger: "custom",
|
|
227
|
-
content: text,
|
|
228
|
-
key: _concatInstanceProperty(_context3 = "".concat(ind, "-")).call(_context3, showTips)
|
|
229
|
-
}, content);
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
return content;
|
|
233
|
-
});
|
|
294
|
+
const ariaLabel = _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "Rating: ".concat(value, " of ")).call(_context6, count, " ")).call(_context5, ariaLabelPrefix)).call(_context4, value === 1 ? '' : 's', ",");
|
|
234
295
|
|
|
296
|
+
const itemList = this.getItemList(ariaLabelPrefix);
|
|
235
297
|
const listCls = cls(prefixCls, {
|
|
236
|
-
["".concat(prefixCls, "-disabled")]: disabled
|
|
298
|
+
["".concat(prefixCls, "-disabled")]: disabled,
|
|
299
|
+
["".concat(prefixCls, "-focus")]: emptyStarFocusVisible
|
|
237
300
|
}, className);
|
|
238
|
-
return
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
"
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
301
|
+
return (
|
|
302
|
+
/*#__PURE__*/
|
|
303
|
+
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
|
|
304
|
+
React.createElement("ul", {
|
|
305
|
+
"aria-label": ariaLabel,
|
|
306
|
+
"aria-labelledby": this.props['aria-labelledby'],
|
|
307
|
+
"aria-describedby": this.props['aria-describedby'],
|
|
308
|
+
className: listCls,
|
|
309
|
+
style: style,
|
|
310
|
+
onMouseLeave: disabled ? noop : this.onMouseLeave,
|
|
311
|
+
tabIndex: disabled ? -1 : tabIndex,
|
|
312
|
+
onFocus: disabled ? noop : this.onFocus,
|
|
313
|
+
onBlur: disabled ? noop : this.onBlur,
|
|
314
|
+
onKeyDown: disabled ? noop : this.onKeyDown,
|
|
315
|
+
ref: this.saveRate,
|
|
316
|
+
id: id
|
|
317
|
+
}, itemList)
|
|
318
|
+
);
|
|
252
319
|
}
|
|
253
320
|
|
|
254
321
|
}
|
|
@@ -279,7 +346,8 @@ Rating.propTypes = {
|
|
|
279
346
|
autoFocus: PropTypes.bool,
|
|
280
347
|
size: PropTypes.oneOfType([PropTypes.oneOf(strings.SIZE_SET), PropTypes.number]),
|
|
281
348
|
tooltips: PropTypes.arrayOf(PropTypes.string),
|
|
282
|
-
id: PropTypes.string
|
|
349
|
+
id: PropTypes.string,
|
|
350
|
+
preventScroll: PropTypes.bool
|
|
283
351
|
};
|
|
284
352
|
Rating.defaultProps = {
|
|
285
353
|
defaultValue: 0,
|
|
@@ -290,6 +358,6 @@ Rating.defaultProps = {
|
|
|
290
358
|
prefixCls: cssClasses.PREFIX,
|
|
291
359
|
onChange: noop,
|
|
292
360
|
onHoverChange: noop,
|
|
293
|
-
tabIndex:
|
|
361
|
+
tabIndex: -1,
|
|
294
362
|
size: 'default'
|
|
295
363
|
};
|
package/lib/es/rating/item.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { strings } from '@douyinfe/semi-foundation/lib/es/rating/constants';
|
|
4
4
|
import '@douyinfe/semi-foundation/lib/es/rating/rating.css';
|
|
5
|
+
import { RatingItemFoundation, RatingItemAdapter } from '@douyinfe/semi-foundation/lib/es/rating/foundation';
|
|
6
|
+
import BaseComponent, { BaseProps } from '../_base/baseComponent';
|
|
5
7
|
declare type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
|
|
6
|
-
export interface RatingItemProps {
|
|
8
|
+
export interface RatingItemProps extends BaseProps {
|
|
7
9
|
value: number;
|
|
8
10
|
index: number;
|
|
9
11
|
prefixCls: string;
|
|
@@ -14,10 +16,18 @@ export interface RatingItemProps {
|
|
|
14
16
|
focused: boolean;
|
|
15
17
|
disabled: boolean;
|
|
16
18
|
count: number;
|
|
19
|
+
ariaLabelPrefix: string;
|
|
17
20
|
size: number | ArrayElement<typeof strings.SIZE_SET>;
|
|
18
21
|
'aria-describedby'?: React.AriaAttributes['aria-describedby'];
|
|
22
|
+
onFocus?: (e: React.FocusEvent) => void;
|
|
23
|
+
onBlur?: (e: React.FocusEvent) => void;
|
|
24
|
+
preventScroll?: boolean;
|
|
19
25
|
}
|
|
20
|
-
export
|
|
26
|
+
export interface RatingItemState {
|
|
27
|
+
firstStarFocus: boolean;
|
|
28
|
+
secondStarFocus: boolean;
|
|
29
|
+
}
|
|
30
|
+
export default class Item extends BaseComponent<RatingItemProps, RatingItemState> {
|
|
21
31
|
static propTypes: {
|
|
22
32
|
value: PropTypes.Requireable<number>;
|
|
23
33
|
index: PropTypes.Requireable<number>;
|
|
@@ -29,12 +39,26 @@ export default class Item extends PureComponent<RatingItemProps> {
|
|
|
29
39
|
focused: PropTypes.Requireable<boolean>;
|
|
30
40
|
disabled: PropTypes.Requireable<boolean>;
|
|
31
41
|
count: PropTypes.Requireable<number>;
|
|
42
|
+
ariaLabelPrefix: PropTypes.Requireable<string>;
|
|
32
43
|
size: PropTypes.Requireable<number | "default" | "small">;
|
|
33
44
|
'aria-describedby': PropTypes.Requireable<string>;
|
|
45
|
+
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
46
|
+
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
47
|
+
preventScroll: PropTypes.Requireable<boolean>;
|
|
34
48
|
};
|
|
49
|
+
foundation: RatingItemFoundation;
|
|
50
|
+
constructor(props: RatingItemProps);
|
|
51
|
+
get adapter(): RatingItemAdapter<RatingItemProps, RatingItemState>;
|
|
52
|
+
firstStar: HTMLDivElement;
|
|
53
|
+
secondStar: HTMLDivElement;
|
|
35
54
|
onHover: React.MouseEventHandler;
|
|
36
55
|
onClick: React.MouseEventHandler;
|
|
56
|
+
onFocus: (e: any, star: any) => void;
|
|
57
|
+
onBlur: (e: any, star: any) => void;
|
|
37
58
|
onKeyDown: React.KeyboardEventHandler;
|
|
59
|
+
starFocus: () => void;
|
|
60
|
+
saveFirstStar: (node: HTMLDivElement) => void;
|
|
61
|
+
saveSecondStar: (node: HTMLDivElement) => void;
|
|
38
62
|
render(): JSX.Element;
|
|
39
63
|
}
|
|
40
64
|
export {};
|
package/lib/es/rating/item.js
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
2
1
|
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
|
|
3
|
-
import
|
|
2
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
3
|
+
import React from 'react';
|
|
4
4
|
import cls from 'classnames';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
|
-
import { strings } from '@douyinfe/semi-foundation/lib/es/rating/constants';
|
|
6
|
+
import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/rating/constants';
|
|
7
7
|
import '@douyinfe/semi-foundation/lib/es/rating/rating.css';
|
|
8
8
|
import { IconStar } from '@douyinfe/semi-icons';
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
import { RatingItemFoundation } from '@douyinfe/semi-foundation/lib/es/rating/foundation';
|
|
10
|
+
import BaseComponent from '../_base/baseComponent';
|
|
11
|
+
export default class Item extends BaseComponent {
|
|
12
|
+
constructor(props) {
|
|
13
|
+
super(props);
|
|
14
|
+
this.firstStar = null;
|
|
15
|
+
this.secondStar = null;
|
|
12
16
|
|
|
13
17
|
this.onHover = e => {
|
|
14
18
|
const {
|
|
@@ -26,6 +30,22 @@ export default class Item extends PureComponent {
|
|
|
26
30
|
onClick(e, index);
|
|
27
31
|
};
|
|
28
32
|
|
|
33
|
+
this.onFocus = (e, star) => {
|
|
34
|
+
const {
|
|
35
|
+
onFocus
|
|
36
|
+
} = this.props;
|
|
37
|
+
onFocus && onFocus(e);
|
|
38
|
+
this.foundation.handleFocusVisible(e, star);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
this.onBlur = (e, star) => {
|
|
42
|
+
const {
|
|
43
|
+
onBlur
|
|
44
|
+
} = this.props;
|
|
45
|
+
onBlur && onBlur(e);
|
|
46
|
+
this.foundation.handleBlur(e, star);
|
|
47
|
+
};
|
|
48
|
+
|
|
29
49
|
this.onKeyDown = e => {
|
|
30
50
|
const {
|
|
31
51
|
onClick,
|
|
@@ -36,10 +56,57 @@ export default class Item extends PureComponent {
|
|
|
36
56
|
onClick(e, index);
|
|
37
57
|
}
|
|
38
58
|
};
|
|
59
|
+
|
|
60
|
+
this.starFocus = () => {
|
|
61
|
+
const {
|
|
62
|
+
value,
|
|
63
|
+
index,
|
|
64
|
+
preventScroll
|
|
65
|
+
} = this.props;
|
|
66
|
+
|
|
67
|
+
if (value - index === 0.5) {
|
|
68
|
+
this.firstStar.focus({
|
|
69
|
+
preventScroll
|
|
70
|
+
});
|
|
71
|
+
} else {
|
|
72
|
+
this.secondStar.focus({
|
|
73
|
+
preventScroll
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
this.saveFirstStar = node => {
|
|
79
|
+
this.firstStar = node;
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
this.saveSecondStar = node => {
|
|
83
|
+
this.secondStar = node;
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
this.state = {
|
|
87
|
+
firstStarFocus: false,
|
|
88
|
+
secondStarFocus: false
|
|
89
|
+
};
|
|
90
|
+
this.foundation = new RatingItemFoundation(this.adapter);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
get adapter() {
|
|
94
|
+
return _Object$assign(_Object$assign({}, super.adapter), {
|
|
95
|
+
setFirstStarFocus: value => {
|
|
96
|
+
this.setState({
|
|
97
|
+
firstStarFocus: value
|
|
98
|
+
});
|
|
99
|
+
},
|
|
100
|
+
setSecondStarFocus: value => {
|
|
101
|
+
this.setState({
|
|
102
|
+
secondStarFocus: value
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
});
|
|
39
106
|
}
|
|
40
107
|
|
|
41
108
|
render() {
|
|
42
|
-
var _context;
|
|
109
|
+
var _context, _context2, _context3, _context4;
|
|
43
110
|
|
|
44
111
|
const {
|
|
45
112
|
index,
|
|
@@ -50,18 +117,21 @@ export default class Item extends PureComponent {
|
|
|
50
117
|
disabled,
|
|
51
118
|
allowHalf,
|
|
52
119
|
focused,
|
|
53
|
-
size
|
|
120
|
+
size,
|
|
121
|
+
ariaLabelPrefix
|
|
54
122
|
} = this.props;
|
|
123
|
+
const {
|
|
124
|
+
firstStarFocus,
|
|
125
|
+
secondStarFocus
|
|
126
|
+
} = this.state;
|
|
55
127
|
const starValue = index + 1;
|
|
56
|
-
const diff = starValue - value;
|
|
57
|
-
const isFocused = value === 0 && index === 0 && focused; // const isHalf = allowHalf && value + 0.5 === starValue;
|
|
128
|
+
const diff = starValue - value; // const isHalf = allowHalf && value + 0.5 === starValue;
|
|
58
129
|
|
|
59
130
|
const isHalf = allowHalf && diff < 1 && diff > 0;
|
|
60
|
-
const firstWidth =
|
|
131
|
+
const firstWidth = 1 - diff;
|
|
61
132
|
const isFull = starValue <= value;
|
|
62
133
|
const isCustomSize = typeof size === 'number';
|
|
63
134
|
const starCls = cls(prefixCls, {
|
|
64
|
-
["".concat(prefixCls, "-focused")]: isFocused,
|
|
65
135
|
["".concat(prefixCls, "-half")]: isHalf,
|
|
66
136
|
["".concat(prefixCls, "-full")]: isFull,
|
|
67
137
|
[_concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, size)]: !isCustomSize
|
|
@@ -73,34 +143,73 @@ export default class Item extends PureComponent {
|
|
|
73
143
|
} : {};
|
|
74
144
|
const iconSize = isCustomSize ? 'inherit' : size === 'small' ? 'default' : 'extra-large';
|
|
75
145
|
const content = character ? character : /*#__PURE__*/React.createElement(IconStar, {
|
|
76
|
-
size: iconSize
|
|
146
|
+
size: iconSize,
|
|
147
|
+
style: {
|
|
148
|
+
display: 'block'
|
|
149
|
+
}
|
|
77
150
|
});
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
151
|
+
const isEmpty = index === count;
|
|
152
|
+
const starWrapCls = cls("".concat(prefixCls, "-wrapper"), {
|
|
153
|
+
["".concat(prefixCls, "-disabled")]: disabled,
|
|
154
|
+
["".concat(cssClasses.PREFIX, "-focus")]: (firstStarFocus || secondStarFocus) && value !== 0
|
|
155
|
+
});
|
|
156
|
+
const starWrapProps = {
|
|
82
157
|
onClick: disabled ? null : this.onClick,
|
|
83
158
|
onKeyDown: disabled ? null : this.onKeyDown,
|
|
84
159
|
onMouseMove: disabled ? null : this.onHover,
|
|
160
|
+
className: starWrapCls
|
|
161
|
+
};
|
|
162
|
+
const AriaSetSize = allowHalf ? count * 2 + 1 : count + 1;
|
|
163
|
+
const firstStarProps = {
|
|
164
|
+
ref: this.saveFirstStar,
|
|
165
|
+
role: "radio",
|
|
166
|
+
'aria-checked': value === index + 0.5,
|
|
167
|
+
'aria-posinset': 2 * index + 1,
|
|
168
|
+
'aria-setsize': AriaSetSize,
|
|
169
|
+
'aria-disabled': disabled,
|
|
170
|
+
'aria-label': _concatInstanceProperty(_context2 = "".concat(index + 0.5, " ")).call(_context2, ariaLabelPrefix, "s"),
|
|
171
|
+
'aria-labelledby': this.props['aria-describedby'],
|
|
172
|
+
'aria-describedby': this.props['aria-describedby'],
|
|
173
|
+
className: cls("".concat(prefixCls, "-first"), "".concat(cssClasses.PREFIX, "-no-focus")),
|
|
174
|
+
tabIndex: !disabled && value === index + 0.5 ? 0 : -1,
|
|
175
|
+
onFocus: e => {
|
|
176
|
+
this.onFocus(e, 'first');
|
|
177
|
+
},
|
|
178
|
+
onBlur: e => {
|
|
179
|
+
this.onBlur(e, 'first');
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
const secondStarTabIndex = !disabled && (value === index + 1 || isEmpty && value === 0) ? 0 : -1;
|
|
183
|
+
const secondStarProps = {
|
|
184
|
+
ref: this.saveSecondStar,
|
|
85
185
|
role: "radio",
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
186
|
+
'aria-checked': isEmpty ? value === 0 : value === index + 1,
|
|
187
|
+
'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
|
|
188
|
+
'aria-setsize': AriaSetSize,
|
|
189
|
+
'aria-disabled': disabled,
|
|
190
|
+
'aria-label': _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(isEmpty ? 0 : index + 1, " ")).call(_context4, ariaLabelPrefix)).call(_context3, index === 0 ? '' : 's'),
|
|
191
|
+
'aria-labelledby': this.props['aria-describedby'],
|
|
192
|
+
'aria-describedby': this.props['aria-describedby'],
|
|
193
|
+
className: cls("".concat(prefixCls, "-second"), "".concat(cssClasses.PREFIX, "-no-focus")),
|
|
194
|
+
tabIndex: secondStarTabIndex,
|
|
195
|
+
onFocus: e => {
|
|
196
|
+
this.onFocus(e, 'second');
|
|
197
|
+
},
|
|
198
|
+
onBlur: e => {
|
|
199
|
+
this.onBlur(e, 'second');
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
203
|
+
className: starCls,
|
|
204
|
+
style: _Object$assign({}, sizeStyle),
|
|
205
|
+
key: index
|
|
206
|
+
}, /*#__PURE__*/React.createElement("div", _Object$assign({}, starWrapProps), allowHalf && !isEmpty && /*#__PURE__*/React.createElement("div", _Object$assign({}, firstStarProps, {
|
|
97
207
|
style: {
|
|
98
208
|
width: "".concat(firstWidth * 100, "%")
|
|
99
209
|
}
|
|
100
|
-
}, content), /*#__PURE__*/React.createElement("div", {
|
|
101
|
-
className: "".concat(prefixCls, "-second"),
|
|
210
|
+
}), content), /*#__PURE__*/React.createElement("div", _Object$assign({}, secondStarProps, {
|
|
102
211
|
"x-semi-prop": "character"
|
|
103
|
-
}, content)));
|
|
212
|
+
}), content)));
|
|
104
213
|
}
|
|
105
214
|
|
|
106
215
|
}
|
|
@@ -115,6 +224,10 @@ Item.propTypes = {
|
|
|
115
224
|
focused: PropTypes.bool,
|
|
116
225
|
disabled: PropTypes.bool,
|
|
117
226
|
count: PropTypes.number,
|
|
227
|
+
ariaLabelPrefix: PropTypes.string,
|
|
118
228
|
size: PropTypes.oneOfType([PropTypes.oneOf(strings.SIZE_SET), PropTypes.number]),
|
|
119
|
-
'aria-describedby': PropTypes.string
|
|
229
|
+
'aria-describedby': PropTypes.string,
|
|
230
|
+
onFocus: PropTypes.func,
|
|
231
|
+
onBlur: PropTypes.func,
|
|
232
|
+
preventScroll: PropTypes.bool
|
|
120
233
|
};
|
package/lib/es/select/index.d.ts
CHANGED
|
@@ -122,6 +122,7 @@ export declare type SelectProps = {
|
|
|
122
122
|
onBlur?: (e: React.FocusEvent) => void;
|
|
123
123
|
onListScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
|
|
124
124
|
children?: React.ReactNode;
|
|
125
|
+
preventScroll?: boolean;
|
|
125
126
|
} & Pick<TooltipProps, 'spacing' | 'getPopupContainer' | 'motion' | 'autoAdjustOverflow' | 'mouseLeaveDelay' | 'mouseEnterDelay' | 'stopPropagation'> & React.RefAttributes<any>;
|
|
126
127
|
export interface SelectState {
|
|
127
128
|
isOpen: boolean;
|
|
@@ -214,6 +215,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
|
|
|
214
215
|
renderOptionItem: PropTypes.Requireable<(...args: any[]) => any>;
|
|
215
216
|
onListScroll: PropTypes.Requireable<(...args: any[]) => any>;
|
|
216
217
|
arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
218
|
+
preventScroll: PropTypes.Requireable<boolean>;
|
|
217
219
|
};
|
|
218
220
|
static defaultProps: Partial<SelectProps>;
|
|
219
221
|
inputRef: React.RefObject<HTMLInputElement>;
|