@douyinfe/semi-ui 2.14.0-beta.2 → 2.15.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.
Files changed (185) hide show
  1. package/autoComplete/index.tsx +0 -1
  2. package/cascader/__test__/cascader.test.js +13 -10
  3. package/cascader/_story/cascader.stories.js +22 -0
  4. package/cascader/index.tsx +53 -35
  5. package/checkbox/checkbox.tsx +1 -0
  6. package/checkbox/checkboxInner.tsx +4 -1
  7. package/datePicker/__test__/datePicker.test.js +1 -0
  8. package/datePicker/_story/v2/FixTriggerRender.tsx +36 -0
  9. package/datePicker/_story/v2/index.js +1 -0
  10. package/datePicker/datePicker.tsx +7 -5
  11. package/dist/css/semi.css +39 -11
  12. package/dist/css/semi.min.css +1 -1
  13. package/dist/umd/semi-ui.js +1151 -347
  14. package/dist/umd/semi-ui.js.map +1 -1
  15. package/dist/umd/semi-ui.min.js +1 -1
  16. package/dist/umd/semi-ui.min.js.map +1 -1
  17. package/dropdown/context.ts +2 -0
  18. package/dropdown/dropdownItem.tsx +2 -1
  19. package/dropdown/dropdownMenu.tsx +24 -1
  20. package/dropdown/index.tsx +10 -2
  21. package/form/_story/form.stories.tsx +23 -15
  22. package/form/hoc/withField.tsx +1 -1
  23. package/form/interface.ts +1 -1
  24. package/input/__test__/input.test.js +31 -0
  25. package/input/_story/input.stories.js +24 -1
  26. package/input/index.tsx +5 -2
  27. package/input/inputGroup.tsx +7 -6
  28. package/inputNumber/index.tsx +5 -3
  29. package/lib/cjs/autoComplete/index.d.ts +0 -1
  30. package/lib/cjs/autoComplete/index.js +0 -1
  31. package/lib/cjs/cascader/index.d.ts +1 -1
  32. package/lib/cjs/cascader/index.js +36 -9
  33. package/lib/cjs/checkbox/checkbox.d.ts +1 -0
  34. package/lib/cjs/checkbox/checkbox.js +2 -1
  35. package/lib/cjs/checkbox/checkboxInner.d.ts +2 -0
  36. package/lib/cjs/checkbox/checkboxInner.js +8 -2
  37. package/lib/cjs/datePicker/datePicker.d.ts +1 -1
  38. package/lib/cjs/datePicker/datePicker.js +21 -6
  39. package/lib/cjs/dropdown/context.d.ts +2 -0
  40. package/lib/cjs/dropdown/dropdownItem.js +3 -1
  41. package/lib/cjs/dropdown/dropdownMenu.d.ts +18 -1
  42. package/lib/cjs/dropdown/dropdownMenu.js +23 -2
  43. package/lib/cjs/dropdown/index.d.ts +4 -0
  44. package/lib/cjs/dropdown/index.js +13 -5
  45. package/lib/cjs/form/baseForm.d.ts +16 -15
  46. package/lib/cjs/form/field.d.ts +16 -15
  47. package/lib/cjs/form/hoc/withField.d.ts +1 -1
  48. package/lib/cjs/form/interface.d.ts +1 -1
  49. package/lib/cjs/input/index.d.ts +2 -1
  50. package/lib/cjs/input/index.js +11 -5
  51. package/lib/cjs/input/inputGroup.js +16 -9
  52. package/lib/cjs/inputNumber/index.d.ts +1 -0
  53. package/lib/cjs/inputNumber/index.js +8 -3
  54. package/lib/cjs/locale/source/de.d.ts +3 -0
  55. package/lib/cjs/locale/source/de.js +165 -0
  56. package/lib/cjs/locale/source/fr.d.ts +3 -0
  57. package/lib/cjs/locale/source/fr.js +165 -0
  58. package/lib/cjs/locale/source/it.d.ts +3 -0
  59. package/lib/cjs/locale/source/it.js +165 -0
  60. package/lib/cjs/modal/ModalContent.d.ts +1 -0
  61. package/lib/cjs/modal/ModalContent.js +17 -4
  62. package/lib/cjs/modal/confirm.d.ts +5 -0
  63. package/lib/cjs/radio/radio.d.ts +2 -0
  64. package/lib/cjs/radio/radio.js +2 -1
  65. package/lib/cjs/radio/radioInner.d.ts +2 -0
  66. package/lib/cjs/radio/radioInner.js +8 -2
  67. package/lib/cjs/rating/index.d.ts +7 -0
  68. package/lib/cjs/rating/index.js +135 -68
  69. package/lib/cjs/rating/item.d.ts +27 -3
  70. package/lib/cjs/rating/item.js +145 -38
  71. package/lib/cjs/select/index.d.ts +2 -0
  72. package/lib/cjs/select/index.js +15 -3
  73. package/lib/cjs/spin/icon.js +1 -1
  74. package/lib/cjs/table/Body/index.js +1 -1
  75. package/lib/cjs/tabs/index.d.ts +1 -0
  76. package/lib/cjs/tabs/index.js +2 -1
  77. package/lib/cjs/tabs/interface.d.ts +1 -0
  78. package/lib/cjs/tag/index.js +4 -5
  79. package/lib/cjs/tag/interface.d.ts +1 -0
  80. package/lib/cjs/tagInput/index.d.ts +2 -0
  81. package/lib/cjs/tagInput/index.js +19 -5
  82. package/lib/cjs/timePicker/TimeInput.d.ts +2 -1
  83. package/lib/cjs/timePicker/TimeInput.js +7 -3
  84. package/lib/cjs/timePicker/TimePicker.d.ts +2 -0
  85. package/lib/cjs/timePicker/TimePicker.js +2 -1
  86. package/lib/cjs/timePicker/index.d.ts +1 -0
  87. package/lib/cjs/tooltip/index.d.ts +2 -0
  88. package/lib/cjs/tooltip/index.js +12 -4
  89. package/lib/cjs/tree/index.d.ts +1 -0
  90. package/lib/cjs/tree/index.js +21 -5
  91. package/lib/cjs/tree/treeNode.js +15 -19
  92. package/lib/cjs/treeSelect/index.js +20 -4
  93. package/lib/es/autoComplete/index.d.ts +0 -1
  94. package/lib/es/autoComplete/index.js +0 -1
  95. package/lib/es/cascader/index.d.ts +1 -1
  96. package/lib/es/cascader/index.js +36 -9
  97. package/lib/es/checkbox/checkbox.d.ts +1 -0
  98. package/lib/es/checkbox/checkbox.js +2 -1
  99. package/lib/es/checkbox/checkboxInner.d.ts +2 -0
  100. package/lib/es/checkbox/checkboxInner.js +8 -2
  101. package/lib/es/datePicker/datePicker.d.ts +1 -1
  102. package/lib/es/datePicker/datePicker.js +21 -6
  103. package/lib/es/dropdown/context.d.ts +2 -0
  104. package/lib/es/dropdown/dropdownItem.js +3 -1
  105. package/lib/es/dropdown/dropdownMenu.d.ts +18 -1
  106. package/lib/es/dropdown/dropdownMenu.js +21 -2
  107. package/lib/es/dropdown/index.d.ts +4 -0
  108. package/lib/es/dropdown/index.js +13 -5
  109. package/lib/es/form/baseForm.d.ts +16 -15
  110. package/lib/es/form/field.d.ts +16 -15
  111. package/lib/es/form/hoc/withField.d.ts +1 -1
  112. package/lib/es/form/interface.d.ts +1 -1
  113. package/lib/es/input/index.d.ts +2 -1
  114. package/lib/es/input/index.js +11 -5
  115. package/lib/es/input/inputGroup.js +15 -9
  116. package/lib/es/inputNumber/index.d.ts +1 -0
  117. package/lib/es/inputNumber/index.js +8 -3
  118. package/lib/es/locale/source/de.d.ts +3 -0
  119. package/lib/es/locale/source/de.js +153 -0
  120. package/lib/es/locale/source/fr.d.ts +3 -0
  121. package/lib/es/locale/source/fr.js +153 -0
  122. package/lib/es/locale/source/it.d.ts +3 -0
  123. package/lib/es/locale/source/it.js +153 -0
  124. package/lib/es/modal/ModalContent.d.ts +1 -0
  125. package/lib/es/modal/ModalContent.js +17 -4
  126. package/lib/es/modal/confirm.d.ts +5 -0
  127. package/lib/es/radio/radio.d.ts +2 -0
  128. package/lib/es/radio/radio.js +2 -1
  129. package/lib/es/radio/radioInner.d.ts +2 -0
  130. package/lib/es/radio/radioInner.js +8 -2
  131. package/lib/es/rating/index.d.ts +7 -0
  132. package/lib/es/rating/index.js +133 -65
  133. package/lib/es/rating/item.d.ts +27 -3
  134. package/lib/es/rating/item.js +145 -32
  135. package/lib/es/select/index.d.ts +2 -0
  136. package/lib/es/select/index.js +15 -3
  137. package/lib/es/spin/icon.js +1 -1
  138. package/lib/es/table/Body/index.js +1 -1
  139. package/lib/es/tabs/index.d.ts +1 -0
  140. package/lib/es/tabs/index.js +2 -1
  141. package/lib/es/tabs/interface.d.ts +1 -0
  142. package/lib/es/tag/index.js +4 -5
  143. package/lib/es/tag/interface.d.ts +1 -0
  144. package/lib/es/tagInput/index.d.ts +2 -0
  145. package/lib/es/tagInput/index.js +19 -5
  146. package/lib/es/timePicker/TimeInput.d.ts +2 -1
  147. package/lib/es/timePicker/TimeInput.js +7 -3
  148. package/lib/es/timePicker/TimePicker.d.ts +2 -0
  149. package/lib/es/timePicker/TimePicker.js +2 -1
  150. package/lib/es/timePicker/index.d.ts +1 -0
  151. package/lib/es/tooltip/index.d.ts +2 -0
  152. package/lib/es/tooltip/index.js +13 -4
  153. package/lib/es/tree/index.d.ts +1 -0
  154. package/lib/es/tree/index.js +19 -5
  155. package/lib/es/tree/treeNode.js +14 -20
  156. package/lib/es/treeSelect/index.js +18 -4
  157. package/locale/source/de.ts +156 -0
  158. package/locale/source/fr.ts +156 -0
  159. package/locale/source/it.ts +156 -0
  160. package/modal/ModalContent.tsx +7 -4
  161. package/package.json +8 -8
  162. package/radio/radio.tsx +2 -0
  163. package/radio/radioInner.tsx +4 -1
  164. package/rating/__test__/rating.test.js +13 -31
  165. package/rating/_story/rating.stories.js +13 -2
  166. package/rating/index.tsx +63 -18
  167. package/rating/item.tsx +141 -26
  168. package/select/index.tsx +6 -2
  169. package/spin/icon.tsx +1 -1
  170. package/table/Body/index.tsx +1 -1
  171. package/table/_story/v2/FixedVirtualizedEmpty.tsx +76 -0
  172. package/table/_story/v2/index.js +2 -1
  173. package/tabs/index.tsx +1 -0
  174. package/tabs/interface.ts +1 -0
  175. package/tag/index.tsx +2 -3
  176. package/tag/interface.ts +1 -0
  177. package/tagInput/index.tsx +8 -4
  178. package/timePicker/TimeInput.tsx +5 -3
  179. package/timePicker/TimePicker.tsx +2 -0
  180. package/tooltip/index.tsx +7 -2
  181. package/tree/index.tsx +13 -2
  182. package/tree/treeNode.tsx +11 -13
  183. package/treeSelect/_story/treeSelect.stories.js +38 -1
  184. package/treeSelect/index.tsx +13 -3
  185. package/upload/_story/upload.stories.tsx +9 -6
@@ -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
  }
@@ -10,14 +10,14 @@ _Object$defineProperty(exports, "__esModule", {
10
10
 
11
11
  exports.default = void 0;
12
12
 
13
- var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
14
-
15
13
  var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
16
14
 
17
15
  var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
18
16
 
19
17
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
20
18
 
19
+ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
20
+
21
21
  var _react = _interopRequireDefault(require("react"));
22
22
 
23
23
  var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -26,7 +26,7 @@ var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
26
26
 
27
27
  var _classnames = _interopRequireDefault(require("classnames"));
28
28
 
29
- var _context4 = _interopRequireDefault(require("../configProvider/context"));
29
+ var _context7 = _interopRequireDefault(require("../configProvider/context"));
30
30
 
31
31
  var _constants = require("@douyinfe/semi-foundation/lib/cjs/rating/constants");
32
32
 
@@ -76,11 +76,14 @@ class Rating extends _baseComponent.default {
76
76
 
77
77
  this.focus = () => {
78
78
  const {
79
- disabled
79
+ disabled,
80
+ preventScroll
80
81
  } = this.props;
81
82
 
82
83
  if (!disabled) {
83
- this.rate.focus();
84
+ this.rate.focus({
85
+ preventScroll
86
+ });
84
87
  }
85
88
  };
86
89
 
@@ -102,13 +105,95 @@ class Rating extends _baseComponent.default {
102
105
  this.rate = node;
103
106
  };
104
107
 
108
+ this.handleStarFocusVisible = event => {
109
+ this.foundation.handleStarFocusVisible(event);
110
+ };
111
+
112
+ this.handleStarBlur = event => {
113
+ this.foundation.handleStarBlur(event);
114
+ };
115
+
116
+ this.getAriaLabelPrefix = () => {
117
+ if (this.props['aria-label']) {
118
+ return this.props['aria-label'];
119
+ }
120
+
121
+ let prefix = 'star';
122
+ const {
123
+ character
124
+ } = this.props;
125
+
126
+ if (typeof character === 'string') {
127
+ prefix = character;
128
+ }
129
+
130
+ return prefix;
131
+ };
132
+
133
+ this.getItemList = ariaLabelPrefix => {
134
+ var _context, _context2;
135
+
136
+ const {
137
+ count,
138
+ allowHalf,
139
+ prefixCls,
140
+ disabled,
141
+ character,
142
+ size,
143
+ tooltips
144
+ } = this.props;
145
+ const {
146
+ value,
147
+ hoverValue,
148
+ focused
149
+ } = this.state; // index == count is for Empty rating
150
+
151
+ const itemList = (0, _map.default)(_context = [...(0, _keys.default)(_context2 = Array(count + 1)).call(_context2)]).call(_context, ind => {
152
+ const content = /*#__PURE__*/_react.default.createElement(_item.default, {
153
+ ref: this.saveRef(ind),
154
+ index: ind,
155
+ count: count,
156
+ prefixCls: "".concat(prefixCls, "-star"),
157
+ allowHalf: allowHalf,
158
+ value: hoverValue === undefined ? value : hoverValue,
159
+ onClick: disabled ? _function.noop : this.onClick,
160
+ onHover: disabled ? _function.noop : this.onHover,
161
+ key: ind,
162
+ disabled: disabled,
163
+ character: character,
164
+ focused: focused,
165
+ size: ind === count ? 0 : size,
166
+ ariaLabelPrefix: ariaLabelPrefix,
167
+ onFocus: disabled || count !== ind ? _function.noop : this.handleStarFocusVisible,
168
+ onBlur: disabled || count !== ind ? _function.noop : this.handleStarBlur
169
+ });
170
+
171
+ if (tooltips) {
172
+ var _context3;
173
+
174
+ const text = tooltips[ind] ? tooltips[ind] : '';
175
+ const showTips = hoverValue - 1 === ind;
176
+ return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
177
+ visible: showTips,
178
+ trigger: "custom",
179
+ content: text,
180
+ key: (0, _concat.default)(_context3 = "".concat(ind, "-")).call(_context3, showTips)
181
+ }, content);
182
+ }
183
+
184
+ return content;
185
+ });
186
+ return itemList;
187
+ };
188
+
105
189
  const value = props.value === undefined ? props.defaultValue : props.value;
106
190
  this.stars = {};
107
191
  this.state = {
108
192
  value,
109
193
  focused: false,
110
194
  hoverValue: undefined,
111
- clearedValue: null
195
+ clearedValue: null,
196
+ emptyStarFocusVisible: false
112
197
  };
113
198
  this.foundation = new _foundation.default(this.adapter);
114
199
  }
@@ -127,11 +212,16 @@ class Rating extends _baseComponent.default {
127
212
  return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
128
213
  focus: () => {
129
214
  const {
130
- disabled
215
+ disabled,
216
+ count
131
217
  } = this.props;
218
+ const {
219
+ value
220
+ } = this.state;
132
221
 
133
222
  if (!disabled) {
134
- this.rate.focus();
223
+ const index = Math.ceil(value) - 1;
224
+ this.stars[index < 0 ? count : index].starFocus();
135
225
  }
136
226
  },
137
227
  getStarDOM: index => {
@@ -193,6 +283,11 @@ class Rating extends _baseComponent.default {
193
283
  focused: false
194
284
  });
195
285
  onKeyDown && onKeyDown(e);
286
+ },
287
+ setEmptyStarFocusVisible: focusVisible => {
288
+ this.setState({
289
+ emptyStarFocusVisible: focusVisible
290
+ });
196
291
  }
197
292
  });
198
293
  }
@@ -206,81 +301,52 @@ class Rating extends _baseComponent.default {
206
301
  }
207
302
 
208
303
  render() {
209
- var _context, _context2;
304
+ var _context4, _context5, _context6;
210
305
 
211
306
  const {
212
- count,
213
- allowHalf,
214
307
  style,
215
308
  prefixCls,
216
309
  disabled,
217
310
  className,
218
- character,
219
- tabIndex,
220
- size,
221
- tooltips,
222
- id
311
+ id,
312
+ count,
313
+ tabIndex
223
314
  } = this.props;
224
315
  const {
225
316
  value,
226
- hoverValue,
227
- focused
317
+ emptyStarFocusVisible
228
318
  } = this.state;
229
- const itemList = (0, _map.default)(_context = [...(0, _keys.default)(_context2 = Array(count)).call(_context2)]).call(_context, ind => {
230
- const content = /*#__PURE__*/_react.default.createElement(_item.default, {
231
- ref: this.saveRef(ind),
232
- index: ind,
233
- count: count,
234
- prefixCls: "".concat(prefixCls, "-star"),
235
- allowHalf: allowHalf,
236
- value: hoverValue === undefined ? value : hoverValue,
237
- onClick: this.onClick,
238
- onHover: this.onHover,
239
- key: ind,
240
- disabled: disabled,
241
- character: character,
242
- focused: focused,
243
- size: size
244
- });
245
-
246
- if (tooltips) {
247
- var _context3;
248
-
249
- const text = tooltips[ind] ? tooltips[ind] : '';
250
- const showTips = hoverValue - 1 === ind;
251
- return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
252
- visible: showTips,
253
- trigger: "custom",
254
- content: text,
255
- key: (0, _concat.default)(_context3 = "".concat(ind, "-")).call(_context3, showTips)
256
- }, content);
257
- }
258
-
259
- return content;
260
- });
319
+ const ariaLabelPrefix = this.getAriaLabelPrefix();
320
+ const ariaLabel = (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "Rating: ".concat(value, " of ")).call(_context6, count, " ")).call(_context5, ariaLabelPrefix)).call(_context4, value === 1 ? '' : 's', ",");
321
+ const itemList = this.getItemList(ariaLabelPrefix);
261
322
  const listCls = (0, _classnames.default)(prefixCls, {
262
- ["".concat(prefixCls, "-disabled")]: disabled
323
+ ["".concat(prefixCls, "-disabled")]: disabled,
324
+ ["".concat(prefixCls, "-focus")]: emptyStarFocusVisible
263
325
  }, className);
264
- return /*#__PURE__*/_react.default.createElement("ul", {
265
- "aria-label": this.props['aria-label'],
266
- "aria-labelledby": this.props['aria-labelledby'],
267
- "aria-describedby": this.props['aria-describedby'],
268
- className: listCls,
269
- style: style,
270
- onMouseLeave: disabled ? null : this.onMouseLeave,
271
- tabIndex: disabled ? -1 : tabIndex,
272
- onFocus: disabled ? null : this.onFocus,
273
- onBlur: disabled ? null : this.onBlur,
274
- onKeyDown: disabled ? null : this.onKeyDown,
275
- ref: this.saveRate,
276
- id: id
277
- }, itemList);
326
+ return (
327
+ /*#__PURE__*/
328
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
329
+ _react.default.createElement("ul", {
330
+ "aria-label": ariaLabel,
331
+ "aria-labelledby": this.props['aria-labelledby'],
332
+ "aria-describedby": this.props['aria-describedby'],
333
+ className: listCls,
334
+ style: style,
335
+ onMouseLeave: disabled ? _function.noop : this.onMouseLeave,
336
+ tabIndex: disabled ? -1 : tabIndex,
337
+ onFocus: disabled ? _function.noop : this.onFocus,
338
+ onBlur: disabled ? _function.noop : this.onBlur,
339
+ onKeyDown: disabled ? _function.noop : this.onKeyDown,
340
+ ref: this.saveRate,
341
+ id: id
342
+ }, itemList)
343
+ );
278
344
  }
279
345
 
280
346
  }
281
347
 
282
348
  exports.default = Rating;
283
- Rating.contextType = _context4.default;
349
+ Rating.contextType = _context7.default;
284
350
  Rating.propTypes = {
285
351
  'aria-describedby': _propTypes.default.string,
286
352
  'aria-errormessage': _propTypes.default.string,
@@ -307,7 +373,8 @@ Rating.propTypes = {
307
373
  autoFocus: _propTypes.default.bool,
308
374
  size: _propTypes.default.oneOfType([_propTypes.default.oneOf(_constants.strings.SIZE_SET), _propTypes.default.number]),
309
375
  tooltips: _propTypes.default.arrayOf(_propTypes.default.string),
310
- id: _propTypes.default.string
376
+ id: _propTypes.default.string,
377
+ preventScroll: _propTypes.default.bool
311
378
  };
312
379
  Rating.defaultProps = {
313
380
  defaultValue: 0,
@@ -318,6 +385,6 @@ Rating.defaultProps = {
318
385
  prefixCls: _constants.cssClasses.PREFIX,
319
386
  onChange: _function.noop,
320
387
  onHoverChange: _function.noop,
321
- tabIndex: 0,
388
+ tabIndex: -1,
322
389
  size: 'default'
323
390
  };
@@ -1,9 +1,11 @@
1
- import React, { PureComponent } from 'react';
1
+ import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { strings } from '@douyinfe/semi-foundation/lib/cjs/rating/constants';
4
4
  import '@douyinfe/semi-foundation/lib/cjs/rating/rating.css';
5
+ import { RatingItemFoundation, RatingItemAdapter } from '@douyinfe/semi-foundation/lib/cjs/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 default class Item extends PureComponent<RatingItemProps> {
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 {};
@@ -1,11 +1,7 @@
1
1
  "use strict";
2
2
 
3
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
4
-
5
3
  var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
4
 
7
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
-
9
5
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
10
6
 
11
7
  _Object$defineProperty(exports, "__esModule", {
@@ -14,11 +10,11 @@ _Object$defineProperty(exports, "__esModule", {
14
10
 
15
11
  exports.default = void 0;
16
12
 
17
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
18
-
19
13
  var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
20
14
 
21
- var _react = _interopRequireWildcard(require("react"));
15
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
16
+
17
+ var _react = _interopRequireDefault(require("react"));
22
18
 
23
19
  var _classnames = _interopRequireDefault(require("classnames"));
24
20
 
@@ -30,13 +26,15 @@ require("@douyinfe/semi-foundation/lib/cjs/rating/rating.css");
30
26
 
31
27
  var _semiIcons = require("@douyinfe/semi-icons");
32
28
 
33
- function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
+ var _foundation = require("@douyinfe/semi-foundation/lib/cjs/rating/foundation");
34
30
 
35
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
+ var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
36
32
 
37
- class Item extends _react.PureComponent {
38
- constructor() {
39
- super(...arguments);
33
+ class Item extends _baseComponent.default {
34
+ constructor(props) {
35
+ super(props);
36
+ this.firstStar = null;
37
+ this.secondStar = null;
40
38
 
41
39
  this.onHover = e => {
42
40
  const {
@@ -54,6 +52,22 @@ class Item extends _react.PureComponent {
54
52
  onClick(e, index);
55
53
  };
56
54
 
55
+ this.onFocus = (e, star) => {
56
+ const {
57
+ onFocus
58
+ } = this.props;
59
+ onFocus && onFocus(e);
60
+ this.foundation.handleFocusVisible(e, star);
61
+ };
62
+
63
+ this.onBlur = (e, star) => {
64
+ const {
65
+ onBlur
66
+ } = this.props;
67
+ onBlur && onBlur(e);
68
+ this.foundation.handleBlur(e, star);
69
+ };
70
+
57
71
  this.onKeyDown = e => {
58
72
  const {
59
73
  onClick,
@@ -64,10 +78,57 @@ class Item extends _react.PureComponent {
64
78
  onClick(e, index);
65
79
  }
66
80
  };
81
+
82
+ this.starFocus = () => {
83
+ const {
84
+ value,
85
+ index,
86
+ preventScroll
87
+ } = this.props;
88
+
89
+ if (value - index === 0.5) {
90
+ this.firstStar.focus({
91
+ preventScroll
92
+ });
93
+ } else {
94
+ this.secondStar.focus({
95
+ preventScroll
96
+ });
97
+ }
98
+ };
99
+
100
+ this.saveFirstStar = node => {
101
+ this.firstStar = node;
102
+ };
103
+
104
+ this.saveSecondStar = node => {
105
+ this.secondStar = node;
106
+ };
107
+
108
+ this.state = {
109
+ firstStarFocus: false,
110
+ secondStarFocus: false
111
+ };
112
+ this.foundation = new _foundation.RatingItemFoundation(this.adapter);
113
+ }
114
+
115
+ get adapter() {
116
+ return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
117
+ setFirstStarFocus: value => {
118
+ this.setState({
119
+ firstStarFocus: value
120
+ });
121
+ },
122
+ setSecondStarFocus: value => {
123
+ this.setState({
124
+ secondStarFocus: value
125
+ });
126
+ }
127
+ });
67
128
  }
68
129
 
69
130
  render() {
70
- var _context;
131
+ var _context, _context2, _context3, _context4;
71
132
 
72
133
  const {
73
134
  index,
@@ -78,18 +139,21 @@ class Item extends _react.PureComponent {
78
139
  disabled,
79
140
  allowHalf,
80
141
  focused,
81
- size
142
+ size,
143
+ ariaLabelPrefix
82
144
  } = this.props;
145
+ const {
146
+ firstStarFocus,
147
+ secondStarFocus
148
+ } = this.state;
83
149
  const starValue = index + 1;
84
- const diff = starValue - value;
85
- const isFocused = value === 0 && index === 0 && focused; // const isHalf = allowHalf && value + 0.5 === starValue;
150
+ const diff = starValue - value; // const isHalf = allowHalf && value + 0.5 === starValue;
86
151
 
87
152
  const isHalf = allowHalf && diff < 1 && diff > 0;
88
- const firstWidth = isHalf ? 1 - diff : 0.5;
153
+ const firstWidth = 1 - diff;
89
154
  const isFull = starValue <= value;
90
155
  const isCustomSize = typeof size === 'number';
91
156
  const starCls = (0, _classnames.default)(prefixCls, {
92
- ["".concat(prefixCls, "-focused")]: isFocused,
93
157
  ["".concat(prefixCls, "-half")]: isHalf,
94
158
  ["".concat(prefixCls, "-full")]: isFull,
95
159
  [(0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, size)]: !isCustomSize
@@ -101,34 +165,73 @@ class Item extends _react.PureComponent {
101
165
  } : {};
102
166
  const iconSize = isCustomSize ? 'inherit' : size === 'small' ? 'default' : 'extra-large';
103
167
  const content = character ? character : /*#__PURE__*/_react.default.createElement(_semiIcons.IconStar, {
104
- size: iconSize
168
+ size: iconSize,
169
+ style: {
170
+ display: 'block'
171
+ }
105
172
  });
106
- return /*#__PURE__*/_react.default.createElement("li", {
107
- className: starCls,
108
- style: (0, _assign.default)({}, sizeStyle)
109
- }, /*#__PURE__*/_react.default.createElement("div", {
173
+ const isEmpty = index === count;
174
+ const starWrapCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), {
175
+ ["".concat(prefixCls, "-disabled")]: disabled,
176
+ ["".concat(_constants.cssClasses.PREFIX, "-focus")]: (firstStarFocus || secondStarFocus) && value !== 0
177
+ });
178
+ const starWrapProps = {
110
179
  onClick: disabled ? null : this.onClick,
111
180
  onKeyDown: disabled ? null : this.onKeyDown,
112
181
  onMouseMove: disabled ? null : this.onHover,
182
+ className: starWrapCls
183
+ };
184
+ const AriaSetSize = allowHalf ? count * 2 + 1 : count + 1;
185
+ const firstStarProps = {
186
+ ref: this.saveFirstStar,
113
187
  role: "radio",
114
- "aria-checked": value > index ? 'true' : 'false',
115
- "aria-posinset": index + 1,
116
- "aria-setsize": count,
117
- "aria-disabled": disabled,
118
- "aria-label": "Rating ".concat(index + (isHalf ? 0.5 : 1)),
119
- "aria-labelledby": this.props['aria-describedby'],
120
- "aria-describedby": this.props['aria-describedby'],
121
- tabIndex: 0,
122
- className: "".concat(prefixCls, "-wrapper")
123
- }, /*#__PURE__*/_react.default.createElement("div", {
124
- className: "".concat(prefixCls, "-first"),
188
+ 'aria-checked': value === index + 0.5,
189
+ 'aria-posinset': 2 * index + 1,
190
+ 'aria-setsize': AriaSetSize,
191
+ 'aria-disabled': disabled,
192
+ 'aria-label': (0, _concat.default)(_context2 = "".concat(index + 0.5, " ")).call(_context2, ariaLabelPrefix, "s"),
193
+ 'aria-labelledby': this.props['aria-describedby'],
194
+ 'aria-describedby': this.props['aria-describedby'],
195
+ className: (0, _classnames.default)("".concat(prefixCls, "-first"), "".concat(_constants.cssClasses.PREFIX, "-no-focus")),
196
+ tabIndex: !disabled && value === index + 0.5 ? 0 : -1,
197
+ onFocus: e => {
198
+ this.onFocus(e, 'first');
199
+ },
200
+ onBlur: e => {
201
+ this.onBlur(e, 'first');
202
+ }
203
+ };
204
+ const secondStarTabIndex = !disabled && (value === index + 1 || isEmpty && value === 0) ? 0 : -1;
205
+ const secondStarProps = {
206
+ ref: this.saveSecondStar,
207
+ role: "radio",
208
+ 'aria-checked': isEmpty ? value === 0 : value === index + 1,
209
+ 'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
210
+ 'aria-setsize': AriaSetSize,
211
+ 'aria-disabled': disabled,
212
+ 'aria-label': (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = "".concat(isEmpty ? 0 : index + 1, " ")).call(_context4, ariaLabelPrefix)).call(_context3, index === 0 ? '' : 's'),
213
+ 'aria-labelledby': this.props['aria-describedby'],
214
+ 'aria-describedby': this.props['aria-describedby'],
215
+ className: (0, _classnames.default)("".concat(prefixCls, "-second"), "".concat(_constants.cssClasses.PREFIX, "-no-focus")),
216
+ tabIndex: secondStarTabIndex,
217
+ onFocus: e => {
218
+ this.onFocus(e, 'second');
219
+ },
220
+ onBlur: e => {
221
+ this.onBlur(e, 'second');
222
+ }
223
+ };
224
+ return /*#__PURE__*/_react.default.createElement("li", {
225
+ className: starCls,
226
+ style: (0, _assign.default)({}, sizeStyle),
227
+ key: index
228
+ }, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, starWrapProps), allowHalf && !isEmpty && /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, firstStarProps, {
125
229
  style: {
126
230
  width: "".concat(firstWidth * 100, "%")
127
231
  }
128
- }, content), /*#__PURE__*/_react.default.createElement("div", {
129
- className: "".concat(prefixCls, "-second"),
232
+ }), content), /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, secondStarProps, {
130
233
  "x-semi-prop": "character"
131
- }, content)));
234
+ }), content)));
132
235
  }
133
236
 
134
237
  }
@@ -145,6 +248,10 @@ Item.propTypes = {
145
248
  focused: _propTypes.default.bool,
146
249
  disabled: _propTypes.default.bool,
147
250
  count: _propTypes.default.number,
251
+ ariaLabelPrefix: _propTypes.default.string,
148
252
  size: _propTypes.default.oneOfType([_propTypes.default.oneOf(_constants.strings.SIZE_SET), _propTypes.default.number]),
149
- 'aria-describedby': _propTypes.default.string
253
+ 'aria-describedby': _propTypes.default.string,
254
+ onFocus: _propTypes.default.func,
255
+ onBlur: _propTypes.default.func,
256
+ preventScroll: _propTypes.default.bool
150
257
  };
@@ -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>;