@hi-ui/time-picker 5.0.0-experimental.1 → 5.0.0-rc.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 (13) hide show
  1. package/CHANGELOG.md +23 -32
  2. package/lib/cjs/Input.js +5 -2
  3. package/lib/cjs/PopContent.js +4 -2
  4. package/lib/cjs/TimePicker.js +50 -19
  5. package/lib/esm/Input.js +5 -2
  6. package/lib/esm/PopContent.js +4 -2
  7. package/lib/esm/TimePicker.js +50 -19
  8. package/lib/types/@types/index.d.ts +7 -7
  9. package/lib/types/Input.d.ts +5 -1
  10. package/lib/types/Panel.d.ts +1 -1
  11. package/lib/types/PopContent.d.ts +3 -1
  12. package/lib/types/TimePicker.d.ts +7 -2
  13. package/package.json +12 -11
package/CHANGELOG.md CHANGED
@@ -1,15 +1,6 @@
1
1
  # @hi-ui/time-picker
2
2
 
3
- ## 5.0.0-experimental.1
4
-
5
- ### Patch Changes
6
-
7
- - 8f23e9322: style: 表单类组件统一调整后缀颜色、placeholder 颜色 (5.0)
8
- - 900c6c2f0: style: 统一修改表单类组件 filled 背景色为 g100 (5.0)
9
- - 发布 hiui experimental 版本
10
- - f8321b72f: fix(time-picker): 修复清空后无法选中 00:00:00 问题 & 设置默认宽度 100% (5.0)
11
-
12
- ## 5.0.0-experimental.0
3
+ ## 5.0.0-rc.0
13
4
 
14
5
  ### Major Changes
15
6
 
@@ -20,68 +11,68 @@
20
11
  - 2f5e5ce4d: feat(time-picker): appearance 增加 contained 类型，以及最新风格的样式修改 (5.0)
21
12
  - 6dca7795c: feat: 下拉选择组件增加 showIndicator 参数 & 修改 appearance 中的 unset 样式 (5.0)
22
13
  - 58ad82e94: feat: 输入框和选择器组件增加 borderless 形态 (5.0)
14
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
23
15
 
24
16
  ### Patch Changes
25
17
 
26
- - 1662753e0: style: fix ui bug (5.0)
27
18
  - 41552be0b: <br>
28
19
  - style(time-picker): 为占位符增加溢出处理和文本省略样式 (5.0)
29
20
  - style(tag-input): 为占位符增加溢出处理和文本省略样式 (5.0)
30
21
  - style(input): 增加溢出处理和文本省略样式 (5.0)
31
22
  - style(number-input): 增加溢出处理和文本省略样式 (5.0)
32
- - f4fc0ef30: style: 修改样式问题 (5.0)
33
23
  - 29cae09ea: style: 修改 appearance 为 unset 和 borderless 模式的样式 (5.0)
34
- - be5a59325: style: 修改样式问题 (5.0)
35
24
  - 79ea480f3: feat(global-context): 增加 size api 全局配置 (5.0)
36
25
  - 2e56529f7: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
37
26
  - 3b989bb78: fix(time-picker): update notifyOutside callback to handle single value case (5.0)
27
+ - 8f23e9322: style: 表单类组件统一调整后缀颜色、placeholder 颜色 (5.0)
38
28
  - 4a31cea53: style: 下拉框间距改为 4px (5.0)
29
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
30
+ - 900c6c2f0: style: 统一修改表单类组件 filled 背景色为 g100 (5.0)
39
31
  - a5327c316: style(date-picker, time-picker): 修改禁用时的样式 (5.0)
40
32
  - c74ed73f3: fix(time-picker): 修改 notifyOutside 回调逻辑，修复清空要点击 2 次才生效问题 (5.0)
41
- - 934e1aecf: style: 修改样式问题 (5.0)
33
+ - f8321b72f: fix(time-picker): 修复清空后无法选中 00:00:00 问题 & 设置默认宽度 100% (5.0)
42
34
  - 33da3144e: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
43
- - 0a8cc07a7: style: 修改样式 (5.0)
44
- - 7f3abee55: style: fix ui bug (5.0)
45
35
  - 4a31cea53: style: 统一调整选择类组件 hover 时的背景色 (5.0)
46
36
  - 99801c2d1: fix: 修复 UI 问题 (5.0)
47
- - 86910f5e2: style: 修改 UI (5.0)
48
37
  - Updated dependencies [1e226cd66]
49
38
  - Updated dependencies [eea29eade]
50
- - Updated dependencies [1662753e0]
39
+ - Updated dependencies [7f204c892]
51
40
  - Updated dependencies [122d1d859]
41
+ - Updated dependencies [eb17c4697]
52
42
  - Updated dependencies [8c0ee78f0]
53
43
  - Updated dependencies [9b34d99bc]
54
44
  - Updated dependencies [8f3aa85e4]
55
45
  - Updated dependencies [fd4c20bbd]
56
- - Updated dependencies [be5a59325]
57
- - Updated dependencies [71fc15e5c]
58
46
  - Updated dependencies [79ea480f3]
59
47
  - Updated dependencies [2e56529f7]
48
+ - Updated dependencies [3a7186e4b]
60
49
  - Updated dependencies [277c5033a]
61
50
  - Updated dependencies [95abba983]
62
51
  - Updated dependencies [8a92ec660]
63
52
  - Updated dependencies [1429eced2]
53
+ - Updated dependencies [eb17c4697]
64
54
  - Updated dependencies [976ec929d]
65
55
  - Updated dependencies [f1ab51725]
56
+ - Updated dependencies [c407744fe]
57
+ - Updated dependencies [d91a8bb0f]
66
58
  - Updated dependencies [4006b2c8c]
67
59
  - Updated dependencies [e42e2badf]
68
60
  - Updated dependencies [33da3144e]
69
- - Updated dependencies [0a8cc07a7]
70
- - Updated dependencies [7f3abee55]
71
61
  - Updated dependencies [58ad82e94]
72
- - Updated dependencies [a0f0c9d6b]
62
+ - Updated dependencies [95d930354]
73
63
  - Updated dependencies [f2be367e9]
74
64
  - Updated dependencies [1972fd16a]
65
+ - Updated dependencies [59cef699f]
75
66
  - Updated dependencies [99801c2d1]
76
- - Updated dependencies [86910f5e2]
77
- - @hi-ui/popper@5.0.0-experimental.0
78
- - @hi-ui/button@5.0.0-experimental.0
79
- - @hi-ui/icons@5.0.0-experimental.0
80
- - @hi-ui/core@5.0.0-experimental.0
81
- - @hi-ui/use-merge-refs@5.0.0-experimental.0
82
- - @hi-ui/use-uncontrolled-state@5.0.0-experimental.0
83
- - @hi-ui/classname@5.0.0-experimental.0
84
- - @hi-ui/env@5.0.0-experimental.0
67
+ - @hi-ui/popper@5.0.0-rc.0
68
+ - @hi-ui/button@5.0.0-rc.0
69
+ - @hi-ui/icons@5.0.0-rc.0
70
+ - @hi-ui/core@5.0.0-rc.0
71
+ - @hi-ui/use-merge-refs@5.0.0-rc.0
72
+ - @hi-ui/use-uncontrolled-state@5.0.0-rc.0
73
+ - @hi-ui/classname@5.0.0-rc.0
74
+ - @hi-ui/env@5.0.0-rc.0
75
+ - @hi-ui/use-merge-semantic@5.0.0-rc.0
85
76
 
86
77
  ## 4.1.2
87
78
 
package/lib/cjs/Input.js CHANGED
@@ -42,7 +42,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
42
42
  disabled = props.disabled,
43
43
  onValidChange = props.onValidChange,
44
44
  isFitContent = props.isFitContent,
45
- size = props.size;
45
+ size = props.size,
46
+ classNameProp = props.className,
47
+ styleProp = props.style;
46
48
  var i18n = core.useLocaleContext();
47
49
  var toText = i18n.get('timePicker.to');
48
50
  var componentClass = React.useMemo(function () {
@@ -151,7 +153,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
151
153
  };
152
154
  }, [value]);
153
155
  return /*#__PURE__*/React__default["default"].createElement("div", {
154
- className: classname.cx(componentClass, componentClass + "--size-" + size, (_cx = {}, _cx[componentClass + "--not-valid"] = !judgeIsValid(cacheValue), _cx[componentClass + "--range"] = type === 'range', _cx[componentClass + "--disabled"] = disabled, _cx[componentClass + "--fit-content"] = isFitContent, _cx))
156
+ className: classname.cx(componentClass, componentClass + "--size-" + size, classNameProp, (_cx = {}, _cx[componentClass + "--not-valid"] = !judgeIsValid(cacheValue), _cx[componentClass + "--range"] = type === 'range', _cx[componentClass + "--disabled"] = disabled, _cx[componentClass + "--fit-content"] = isFitContent, _cx)),
157
+ style: styleProp
155
158
  }, renderInput(cacheValue[0], 0), type === 'range' && /*#__PURE__*/React__default["default"].createElement("div", {
156
159
  className: componentClass + "__range-separator"
157
160
  }, toText), type === 'range' && renderInput(cacheValue[1], 1));
package/lib/cjs/PopContent.js CHANGED
@@ -19,6 +19,7 @@ var getRange = require('./utils/getRange.js');
19
19
  var Panel = require('./Panel.js');
20
20
  var analysisFormat = require('./utils/analysisFormat.js');
21
21
  var getFormatDefault = require('./utils/getFormatDefault.js');
22
+ var classname = require('@hi-ui/classname');
22
23
  var TimePicker = require('./TimePicker.js');
23
24
  var useFilter = require('./hooks/useFilter.js');
24
25
  function _interopDefaultCompat(e) {
@@ -47,7 +48,8 @@ var PopContent = function PopContent(props) {
47
48
  originalDisabledSeconds = _props$disabledSecond === void 0 ? DefaultDisabledFunc : _props$disabledSecond,
48
49
  _props$disabledMinute = props.disabledMinutes,
49
50
  originalDisabledMinutes = _props$disabledMinute === void 0 ? DefaultDisabledFunc : _props$disabledMinute,
50
- style = props.style;
51
+ style = props.style,
52
+ classNameProp = props.className;
51
53
  // 将值统一转化为函数
52
54
  // 由于 pop content 会被 date-picker 直接调用，故而在此多做一次兼容处理
53
55
  var _useFilter = useFilter.useFilter({
@@ -180,7 +182,7 @@ var PopContent = function PopContent(props) {
180
182
  }));
181
183
  }, [componentClass, hourStep, secondStep, minuteStep, customDisabledHours, customDisabledMinute, customDisabledSeconds, prefix, format, value, panelType, type, _onChange]);
182
184
  return /*#__PURE__*/React__default["default"].createElement("div", {
183
- className: componentClass,
185
+ className: classname.cx(componentClass, classNameProp),
184
186
  style: style
185
187
  }, renderPanel(0), type === 'range' && /*#__PURE__*/React__default["default"].createElement("div", {
186
188
  className: componentClass + "__separator"
package/lib/cjs/TimePicker.js CHANGED
@@ -18,6 +18,7 @@ var React = require('react');
18
18
  var classname = require('@hi-ui/classname');
19
19
  var env = require('@hi-ui/env');
20
20
  var core = require('@hi-ui/core');
21
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
21
22
  var Input = require('./Input.js');
22
23
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
23
24
  var popper = require('@hi-ui/popper');
@@ -63,6 +64,9 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
63
64
  _a$role = _a.role,
64
65
  role = _a$role === void 0 ? _role : _a$role,
65
66
  className = _a.className,
67
+ style = _a.style,
68
+ classNamesProp = _a.classNames,
69
+ stylesProp = _a.styles,
66
70
  controlledValue = _a.value,
67
71
  _a$hourStep = _a.hourStep,
68
72
  hourStep = _a$hourStep === void 0 ? 1 : _a$hourStep,
@@ -98,10 +102,27 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
98
102
  label = _a.label,
99
103
  _a$showIndicator = _a.showIndicator,
100
104
  showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
101
- restProps = tslib.__rest(_a, ["prefixCls", "role", "className", "value", "hourStep", "minuteStep", "secondStep", "format", "type", "appearance", "defaultValue", "disabled", "disabledHours", "disabledSeconds", "disabledMinutes", "onChange", "placeholder", "inputReadonly", "overlay", "size", "invalid", "prefix", "label", "showIndicator"]);
105
+ restProps = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "value", "hourStep", "minuteStep", "secondStep", "format", "type", "appearance", "defaultValue", "disabled", "disabledHours", "disabledSeconds", "disabledMinutes", "onChange", "placeholder", "inputReadonly", "overlay", "size", "invalid", "prefix", "label", "showIndicator"]);
102
106
  var _useGlobalContext = core.useGlobalContext(),
103
- globalSize = _useGlobalContext.size;
107
+ globalSize = _useGlobalContext.size,
108
+ timePickerConfig = _useGlobalContext.timePicker;
104
109
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
110
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
111
+ classNamesList: [timePickerConfig === null || timePickerConfig === void 0 ? void 0 : timePickerConfig.classNames, classNamesProp],
112
+ stylesList: [timePickerConfig === null || timePickerConfig === void 0 ? void 0 : timePickerConfig.styles, stylesProp],
113
+ info: {
114
+ props: Object.assign(Object.assign({}, restProps), {
115
+ type: type,
116
+ format: format,
117
+ appearance: appearance,
118
+ disabled: disabled,
119
+ size: size,
120
+ invalid: invalid
121
+ })
122
+ }
123
+ }),
124
+ classNames = _useMergeSemantic.classNames,
125
+ styles = _useMergeSemantic.styles;
105
126
  var i18n = core.useLocaleContext();
106
127
  var confirmText = i18n.get('timePicker.ok');
107
128
  var nowText = i18n.get('timePicker.now');
@@ -206,12 +227,14 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
206
227
  var _useState5 = React.useState(false),
207
228
  focus = _useState5[0],
208
229
  setFocus = _useState5[1];
209
- var cls = classname.cx(prefixCls, className, prefixCls + "--appearance-" + appearance, (_cx = {}, _cx[prefixCls + "--active"] = showPopper && !disabled, _cx[prefixCls + "--disabled"] = disabled, _cx[prefixCls + "--input-not-valid"] = !isInputValid || invalid, _cx[prefixCls + "--size-" + size] = true, _cx[prefixCls + "--has-value"] = cacheValue[0], _cx));
230
+ var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, prefixCls + "--appearance-" + appearance, (_cx = {}, _cx[prefixCls + "--active"] = showPopper && !disabled, _cx[prefixCls + "--disabled"] = disabled, _cx[prefixCls + "--input-not-valid"] = !isInputValid || invalid, _cx[prefixCls + "--size-" + size] = true, _cx[prefixCls + "--has-value"] = cacheValue[0], _cx));
210
231
  var functionButtons = React.useMemo(function () {
211
232
  return /*#__PURE__*/React__default["default"].createElement("div", {
212
- className: prefixCls + "__pop-function-buttons"
233
+ className: classname.cx(prefixCls + "__pop-function-buttons", classNames === null || classNames === void 0 ? void 0 : classNames.popFunctionButtons),
234
+ style: styles === null || styles === void 0 ? void 0 : styles.popFunctionButtons
213
235
  }, /*#__PURE__*/React__default["default"].createElement(button.Button, {
214
- className: prefixCls + "__pop-confirm-btn",
236
+ className: classname.cx(prefixCls + "__pop-confirm-btn", classNames === null || classNames === void 0 ? void 0 : classNames.popConfirmBtn),
237
+ style: styles === null || styles === void 0 ? void 0 : styles.popConfirmBtn,
215
238
  type: 'primary',
216
239
  size: 'sm',
217
240
  disabled: !isInputValid,
@@ -250,7 +273,8 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
250
273
  setShowPopper(false);
251
274
  }
252
275
  }, confirmText), type === 'single' && !isInSingleValueFormat && ( /*#__PURE__*/React__default["default"].createElement(button.Button, {
253
- className: prefixCls + "__pop-now-btn",
276
+ className: classname.cx(prefixCls + "__pop-now-btn", classNames === null || classNames === void 0 ? void 0 : classNames.popNowBtn),
277
+ style: styles === null || styles === void 0 ? void 0 : styles.popNowBtn,
254
278
  appearance: "text",
255
279
  type: "primary",
256
280
  size: "sm",
@@ -261,11 +285,12 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
261
285
  setShowPopper(false);
262
286
  }
263
287
  }, nowText)));
264
- }, [prefixCls, isInputValid, confirmText, type, isInSingleValueFormat, nowText, validChecker, cacheValue, value, controlledValue, uncontrolledValue, onChange, onCacheChange, format]);
288
+ }, [prefixCls, classNames === null || classNames === void 0 ? void 0 : classNames.popFunctionButtons, classNames === null || classNames === void 0 ? void 0 : classNames.popConfirmBtn, classNames === null || classNames === void 0 ? void 0 : classNames.popNowBtn, styles === null || styles === void 0 ? void 0 : styles.popFunctionButtons, styles === null || styles === void 0 ? void 0 : styles.popConfirmBtn, styles === null || styles === void 0 ? void 0 : styles.popNowBtn, isInputValid, confirmText, type, isInSingleValueFormat, nowText, validChecker, cacheValue, value, controlledValue, uncontrolledValue, onChange, onCacheChange, format]);
265
289
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
266
290
  ref: useMergeRefs.useMergeRefs(ref, setAttachEl),
267
291
  role: role,
268
- className: cls
292
+ className: cls,
293
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
269
294
  }, restProps, {
270
295
  onMouseEnter: function onMouseEnter() {
271
296
  setFocus(true);
@@ -274,11 +299,14 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
274
299
  setFocus(false);
275
300
  }
276
301
  }), /*#__PURE__*/React__default["default"].createElement("div", {
277
- className: prefixCls + "__input-wrapper"
278
- }, prefix ? /*#__PURE__*/React__default["default"].createElement("span", {
279
- className: prefixCls + "__prefix"
280
- }, prefix) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React__default["default"].createElement("div", {
281
- className: prefixCls + "__label",
302
+ className: classname.cx(prefixCls + "__input-wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.inputWrapper),
303
+ style: styles === null || styles === void 0 ? void 0 : styles.inputWrapper
304
+ }, prefix ? ( /*#__PURE__*/React__default["default"].createElement("span", {
305
+ className: classname.cx(prefixCls + "__prefix", classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
306
+ style: styles === null || styles === void 0 ? void 0 : styles.prefix
307
+ }, prefix)) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React__default["default"].createElement("div", {
308
+ className: classname.cx(prefixCls + "__label", classNames === null || classNames === void 0 ? void 0 : classNames.label),
309
+ style: styles === null || styles === void 0 ? void 0 : styles.label,
282
310
  onClick: function onClick() {
283
311
  showPopperRef.current = !showPopperRef.current;
284
312
  setShowPopper(function (pre) {
@@ -286,6 +314,8 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
286
314
  });
287
315
  }
288
316
  }, label, cacheValue[0] && '：')) : null, appearance !== 'contained' || appearance === 'contained' && cacheValue[0] ? ( /*#__PURE__*/React__default["default"].createElement(Input.Input, {
317
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
318
+ style: styles === null || styles === void 0 ? void 0 : styles.input,
289
319
  size: size,
290
320
  isFitContent: appearance === 'unset',
291
321
  ref: inputRef,
@@ -308,7 +338,8 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
308
338
  setShowPopper(true);
309
339
  }
310
340
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
311
- className: prefixCls + "__function-button",
341
+ className: classname.cx(prefixCls + "__function-button", classNames === null || classNames === void 0 ? void 0 : classNames.functionButton),
342
+ style: styles === null || styles === void 0 ? void 0 : styles.functionButton,
312
343
  onClick: function onClick() {
313
344
  showPopperRef.current = !showPopperRef.current;
314
345
  setShowPopper(function (pre) {
@@ -316,7 +347,8 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
316
347
  });
317
348
  }
318
349
  }, showPopper || focus && cacheValue[0] ? ( /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, {
319
- className: prefixCls + "__close-button",
350
+ className: classname.cx(prefixCls + "__close-button", classNames === null || classNames === void 0 ? void 0 : classNames.closeButton),
351
+ style: styles === null || styles === void 0 ? void 0 : styles.closeButton,
320
352
  onClick: function onClick(evt) {
321
353
  evt.stopPropagation();
322
354
  onCacheChange(type === 'single' ? [''] : ['', '']);
@@ -338,10 +370,9 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
338
370
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.refresh();
339
371
  },
340
372
  preload: true
341
- }), /*#__PURE__*/React__default["default"].createElement(PopContent.PopContent
342
- // itemHeight={itemHeight}
343
- // fullDisplayItemNumber={fullDisplayItemNumber}
344
- , {
373
+ }), /*#__PURE__*/React__default["default"].createElement(PopContent.PopContent, {
374
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.popContent,
375
+ style: styles === null || styles === void 0 ? void 0 : styles.popContent,
345
376
  // itemHeight={itemHeight}
346
377
  // fullDisplayItemNumber={fullDisplayItemNumber}
347
378
  type: type,
package/lib/esm/Input.js CHANGED
@@ -30,7 +30,9 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
30
30
  disabled = props.disabled,
31
31
  onValidChange = props.onValidChange,
32
32
  isFitContent = props.isFitContent,
33
- size = props.size;
33
+ size = props.size,
34
+ classNameProp = props.className,
35
+ styleProp = props.style;
34
36
  var i18n = useLocaleContext();
35
37
  var toText = i18n.get('timePicker.to');
36
38
  var componentClass = useMemo(function () {
@@ -139,7 +141,8 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
139
141
  };
140
142
  }, [value]);
141
143
  return /*#__PURE__*/React.createElement("div", {
142
- className: cx(componentClass, componentClass + "--size-" + size, (_cx = {}, _cx[componentClass + "--not-valid"] = !judgeIsValid(cacheValue), _cx[componentClass + "--range"] = type === 'range', _cx[componentClass + "--disabled"] = disabled, _cx[componentClass + "--fit-content"] = isFitContent, _cx))
144
+ className: cx(componentClass, componentClass + "--size-" + size, classNameProp, (_cx = {}, _cx[componentClass + "--not-valid"] = !judgeIsValid(cacheValue), _cx[componentClass + "--range"] = type === 'range', _cx[componentClass + "--disabled"] = disabled, _cx[componentClass + "--fit-content"] = isFitContent, _cx)),
145
+ style: styleProp
143
146
  }, renderInput(cacheValue[0], 0), type === 'range' && /*#__PURE__*/React.createElement("div", {
144
147
  className: componentClass + "__range-separator"
145
148
  }, toText), type === 'range' && renderInput(cacheValue[1], 1));
package/lib/esm/PopContent.js CHANGED
@@ -13,6 +13,7 @@ import { getRange } from './utils/getRange.js';
13
13
  import { Panel } from './Panel.js';
14
14
  import { analysisFormat } from './utils/analysisFormat.js';
15
15
  import { getFormatDefault } from './utils/getFormatDefault.js';
16
+ import { cx } from '@hi-ui/classname';
16
17
  import { timePickerPrefix } from './TimePicker.js';
17
18
  import { useFilter } from './hooks/useFilter.js';
18
19
  var DefaultDisabledFunc = function DefaultDisabledFunc() {
@@ -35,7 +36,8 @@ var PopContent = function PopContent(props) {
35
36
  originalDisabledSeconds = _props$disabledSecond === void 0 ? DefaultDisabledFunc : _props$disabledSecond,
36
37
  _props$disabledMinute = props.disabledMinutes,
37
38
  originalDisabledMinutes = _props$disabledMinute === void 0 ? DefaultDisabledFunc : _props$disabledMinute,
38
- style = props.style;
39
+ style = props.style,
40
+ classNameProp = props.className;
39
41
  // 将值统一转化为函数
40
42
  // 由于 pop content 会被 date-picker 直接调用，故而在此多做一次兼容处理
41
43
  var _useFilter = useFilter({
@@ -168,7 +170,7 @@ var PopContent = function PopContent(props) {
168
170
  }));
169
171
  }, [componentClass, hourStep, secondStep, minuteStep, customDisabledHours, customDisabledMinute, customDisabledSeconds, prefix, format, value, panelType, type, _onChange]);
170
172
  return /*#__PURE__*/React.createElement("div", {
171
- className: componentClass,
173
+ className: cx(componentClass, classNameProp),
172
174
  style: style
173
175
  }, renderPanel(0), type === 'range' && /*#__PURE__*/React.createElement("div", {
174
176
  className: componentClass + "__separator"
package/lib/esm/TimePicker.js CHANGED
@@ -12,6 +12,7 @@ import React, { forwardRef, useState, useMemo, useCallback, useRef, useEffect }
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
14
  import { useGlobalContext, useLocaleContext } from '@hi-ui/core';
15
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
15
16
  import { Input } from './Input.js';
16
17
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
17
18
  import { Popper } from '@hi-ui/popper';
@@ -50,6 +51,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
50
51
  _a$role = _a.role,
51
52
  role = _a$role === void 0 ? _role : _a$role,
52
53
  className = _a.className,
54
+ style = _a.style,
55
+ classNamesProp = _a.classNames,
56
+ stylesProp = _a.styles,
53
57
  controlledValue = _a.value,
54
58
  _a$hourStep = _a.hourStep,
55
59
  hourStep = _a$hourStep === void 0 ? 1 : _a$hourStep,
@@ -85,10 +89,27 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
85
89
  label = _a.label,
86
90
  _a$showIndicator = _a.showIndicator,
87
91
  showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
88
- restProps = __rest(_a, ["prefixCls", "role", "className", "value", "hourStep", "minuteStep", "secondStep", "format", "type", "appearance", "defaultValue", "disabled", "disabledHours", "disabledSeconds", "disabledMinutes", "onChange", "placeholder", "inputReadonly", "overlay", "size", "invalid", "prefix", "label", "showIndicator"]);
92
+ restProps = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "value", "hourStep", "minuteStep", "secondStep", "format", "type", "appearance", "defaultValue", "disabled", "disabledHours", "disabledSeconds", "disabledMinutes", "onChange", "placeholder", "inputReadonly", "overlay", "size", "invalid", "prefix", "label", "showIndicator"]);
89
93
  var _useGlobalContext = useGlobalContext(),
90
- globalSize = _useGlobalContext.size;
94
+ globalSize = _useGlobalContext.size,
95
+ timePickerConfig = _useGlobalContext.timePicker;
91
96
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
97
+ var _useMergeSemantic = useMergeSemantic({
98
+ classNamesList: [timePickerConfig === null || timePickerConfig === void 0 ? void 0 : timePickerConfig.classNames, classNamesProp],
99
+ stylesList: [timePickerConfig === null || timePickerConfig === void 0 ? void 0 : timePickerConfig.styles, stylesProp],
100
+ info: {
101
+ props: Object.assign(Object.assign({}, restProps), {
102
+ type: type,
103
+ format: format,
104
+ appearance: appearance,
105
+ disabled: disabled,
106
+ size: size,
107
+ invalid: invalid
108
+ })
109
+ }
110
+ }),
111
+ classNames = _useMergeSemantic.classNames,
112
+ styles = _useMergeSemantic.styles;
92
113
  var i18n = useLocaleContext();
93
114
  var confirmText = i18n.get('timePicker.ok');
94
115
  var nowText = i18n.get('timePicker.now');
@@ -193,12 +214,14 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
193
214
  var _useState5 = useState(false),
194
215
  focus = _useState5[0],
195
216
  setFocus = _useState5[1];
196
- var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, (_cx = {}, _cx[prefixCls + "--active"] = showPopper && !disabled, _cx[prefixCls + "--disabled"] = disabled, _cx[prefixCls + "--input-not-valid"] = !isInputValid || invalid, _cx[prefixCls + "--size-" + size] = true, _cx[prefixCls + "--has-value"] = cacheValue[0], _cx));
217
+ var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, prefixCls + "--appearance-" + appearance, (_cx = {}, _cx[prefixCls + "--active"] = showPopper && !disabled, _cx[prefixCls + "--disabled"] = disabled, _cx[prefixCls + "--input-not-valid"] = !isInputValid || invalid, _cx[prefixCls + "--size-" + size] = true, _cx[prefixCls + "--has-value"] = cacheValue[0], _cx));
197
218
  var functionButtons = useMemo(function () {
198
219
  return /*#__PURE__*/React.createElement("div", {
199
- className: prefixCls + "__pop-function-buttons"
220
+ className: cx(prefixCls + "__pop-function-buttons", classNames === null || classNames === void 0 ? void 0 : classNames.popFunctionButtons),
221
+ style: styles === null || styles === void 0 ? void 0 : styles.popFunctionButtons
200
222
  }, /*#__PURE__*/React.createElement(Button, {
201
- className: prefixCls + "__pop-confirm-btn",
223
+ className: cx(prefixCls + "__pop-confirm-btn", classNames === null || classNames === void 0 ? void 0 : classNames.popConfirmBtn),
224
+ style: styles === null || styles === void 0 ? void 0 : styles.popConfirmBtn,
202
225
  type: 'primary',
203
226
  size: 'sm',
204
227
  disabled: !isInputValid,
@@ -237,7 +260,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
237
260
  setShowPopper(false);
238
261
  }
239
262
  }, confirmText), type === 'single' && !isInSingleValueFormat && ( /*#__PURE__*/React.createElement(Button, {
240
- className: prefixCls + "__pop-now-btn",
263
+ className: cx(prefixCls + "__pop-now-btn", classNames === null || classNames === void 0 ? void 0 : classNames.popNowBtn),
264
+ style: styles === null || styles === void 0 ? void 0 : styles.popNowBtn,
241
265
  appearance: "text",
242
266
  type: "primary",
243
267
  size: "sm",
@@ -248,11 +272,12 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
248
272
  setShowPopper(false);
249
273
  }
250
274
  }, nowText)));
251
- }, [prefixCls, isInputValid, confirmText, type, isInSingleValueFormat, nowText, validChecker, cacheValue, value, controlledValue, uncontrolledValue, onChange, onCacheChange, format]);
275
+ }, [prefixCls, classNames === null || classNames === void 0 ? void 0 : classNames.popFunctionButtons, classNames === null || classNames === void 0 ? void 0 : classNames.popConfirmBtn, classNames === null || classNames === void 0 ? void 0 : classNames.popNowBtn, styles === null || styles === void 0 ? void 0 : styles.popFunctionButtons, styles === null || styles === void 0 ? void 0 : styles.popConfirmBtn, styles === null || styles === void 0 ? void 0 : styles.popNowBtn, isInputValid, confirmText, type, isInSingleValueFormat, nowText, validChecker, cacheValue, value, controlledValue, uncontrolledValue, onChange, onCacheChange, format]);
252
276
  return /*#__PURE__*/React.createElement("div", Object.assign({
253
277
  ref: useMergeRefs(ref, setAttachEl),
254
278
  role: role,
255
- className: cls
279
+ className: cls,
280
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
256
281
  }, restProps, {
257
282
  onMouseEnter: function onMouseEnter() {
258
283
  setFocus(true);
@@ -261,11 +286,14 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
261
286
  setFocus(false);
262
287
  }
263
288
  }), /*#__PURE__*/React.createElement("div", {
264
- className: prefixCls + "__input-wrapper"
265
- }, prefix ? /*#__PURE__*/React.createElement("span", {
266
- className: prefixCls + "__prefix"
267
- }, prefix) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React.createElement("div", {
268
- className: prefixCls + "__label",
289
+ className: cx(prefixCls + "__input-wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.inputWrapper),
290
+ style: styles === null || styles === void 0 ? void 0 : styles.inputWrapper
291
+ }, prefix ? ( /*#__PURE__*/React.createElement("span", {
292
+ className: cx(prefixCls + "__prefix", classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
293
+ style: styles === null || styles === void 0 ? void 0 : styles.prefix
294
+ }, prefix)) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React.createElement("div", {
295
+ className: cx(prefixCls + "__label", classNames === null || classNames === void 0 ? void 0 : classNames.label),
296
+ style: styles === null || styles === void 0 ? void 0 : styles.label,
269
297
  onClick: function onClick() {
270
298
  showPopperRef.current = !showPopperRef.current;
271
299
  setShowPopper(function (pre) {
@@ -273,6 +301,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
273
301
  });
274
302
  }
275
303
  }, label, cacheValue[0] && '：')) : null, appearance !== 'contained' || appearance === 'contained' && cacheValue[0] ? ( /*#__PURE__*/React.createElement(Input, {
304
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
305
+ style: styles === null || styles === void 0 ? void 0 : styles.input,
276
306
  size: size,
277
307
  isFitContent: appearance === 'unset',
278
308
  ref: inputRef,
@@ -295,7 +325,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
295
325
  setShowPopper(true);
296
326
  }
297
327
  })) : null, /*#__PURE__*/React.createElement("div", {
298
- className: prefixCls + "__function-button",
328
+ className: cx(prefixCls + "__function-button", classNames === null || classNames === void 0 ? void 0 : classNames.functionButton),
329
+ style: styles === null || styles === void 0 ? void 0 : styles.functionButton,
299
330
  onClick: function onClick() {
300
331
  showPopperRef.current = !showPopperRef.current;
301
332
  setShowPopper(function (pre) {
@@ -303,7 +334,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
303
334
  });
304
335
  }
305
336
  }, showPopper || focus && cacheValue[0] ? ( /*#__PURE__*/React.createElement(CloseCircleFilled, {
306
- className: prefixCls + "__close-button",
337
+ className: cx(prefixCls + "__close-button", classNames === null || classNames === void 0 ? void 0 : classNames.closeButton),
338
+ style: styles === null || styles === void 0 ? void 0 : styles.closeButton,
307
339
  onClick: function onClick(evt) {
308
340
  evt.stopPropagation();
309
341
  onCacheChange(type === 'single' ? [''] : ['', '']);
@@ -325,10 +357,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
325
357
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.refresh();
326
358
  },
327
359
  preload: true
328
- }), /*#__PURE__*/React.createElement(PopContent
329
- // itemHeight={itemHeight}
330
- // fullDisplayItemNumber={fullDisplayItemNumber}
331
- , {
360
+ }), /*#__PURE__*/React.createElement(PopContent, {
361
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.popContent,
362
+ style: styles === null || styles === void 0 ? void 0 : styles.popContent,
332
363
  // itemHeight={itemHeight}
333
364
  // fullDisplayItemNumber={fullDisplayItemNumber}
334
365
  type: type,
package/lib/types/@types/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- export type TimePickerType = 'single' | 'range';
2
- export type TimePickerFormat = 'HH:mm:ss' | 'HH' | 'mm' | 'ss' | 'HH:mm' | 'mm:ss';
3
- export type TimePickerPanelType = 'single' | 'range-start' | 'range-end';
1
+ export declare type TimePickerType = 'single' | 'range';
2
+ export declare type TimePickerFormat = 'HH:mm:ss' | 'HH' | 'mm' | 'ss' | 'HH:mm' | 'mm:ss';
3
+ export declare type TimePickerPanelType = 'single' | 'range-start' | 'range-end';
4
4
  export declare enum TimePickerSelectorType {
5
5
  hour = 1,
6
6
  minute = 2,
7
7
  second = 3
8
8
  }
9
- export type TimePickerValue = Date | number | string;
9
+ export declare type TimePickerValue = Date | number | string;
10
10
  export interface TimePickerStep {
11
11
  /**
12
12
  * 小时选项间隔
@@ -24,9 +24,9 @@ export interface TimePickerStep {
24
24
  */
25
25
  secondStep?: number;
26
26
  }
27
- export type TimePickerDisabledHoursFunction = (panel: TimePickerPanelType) => number[];
28
- export type TimePickerDisabledMinutesFunction = (hour: number, panel: TimePickerPanelType) => number[];
29
- export type TimePickerDisabledSecondsFunction = (hour: number, minute: number, panel: TimePickerPanelType) => number[];
27
+ export declare type TimePickerDisabledHoursFunction = (panel: TimePickerPanelType) => number[];
28
+ export declare type TimePickerDisabledMinutesFunction = (hour: number, panel: TimePickerPanelType) => number[];
29
+ export declare type TimePickerDisabledSecondsFunction = (hour: number, minute: number, panel: TimePickerPanelType) => number[];
30
30
  export interface TimePickerFilterProps {
31
31
  /**
32
32
  * 禁止选择的小时
package/lib/types/Input.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { TimePickerFilter, TimePickerFormat, TimePickerStep, TimePickerType } from './@types';
3
- type ExtendType = Required<TimePickerFilter> & Required<TimePickerStep>;
3
+ declare type ExtendType = Required<TimePickerFilter> & Required<TimePickerStep>;
4
4
  interface InputProps extends ExtendType {
5
5
  value: string[];
6
6
  onChange: (value: string[]) => void;
@@ -13,6 +13,10 @@ interface InputProps extends ExtendType {
13
13
  onValidChange: (isValid: boolean) => void;
14
14
  isFitContent: boolean;
15
15
  size: 'xs' | 'sm' | 'md' | 'lg';
16
+ /** 语义化：根节点类名 */
17
+ className?: string;
18
+ /** 语义化：根节点样式 */
19
+ style?: React.CSSProperties;
16
20
  }
17
21
  export interface InputRef {
18
22
  /**
package/lib/types/Panel.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FC } from 'react';
2
2
  import { TimePickerFilter, TimePickerFormat, TimePickerPanelType, TimePickerStep } from './@types';
3
- type ExtendType = Required<TimePickerFilter> & Required<TimePickerStep>;
3
+ declare type ExtendType = Required<TimePickerFilter> & Required<TimePickerStep>;
4
4
  interface PanelProps extends ExtendType {
5
5
  prefix: string;
6
6
  panel: TimePickerPanelType;
package/lib/types/PopContent.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { FC } from 'react';
2
2
  import { TimePickerFilterProps, TimePickerFormat, TimePickerPanelType, TimePickerStep, TimePickerType } from './@types';
3
- type ExtendType = Partial<TimePickerFilterProps> & Required<TimePickerStep>;
3
+ declare type ExtendType = Partial<TimePickerFilterProps> & Required<TimePickerStep>;
4
4
  interface PopContentProps extends ExtendType {
5
5
  prefix?: string;
6
6
  value: string[];
@@ -9,6 +9,8 @@ interface PopContentProps extends ExtendType {
9
9
  type: TimePickerType;
10
10
  panelType?: TimePickerPanelType;
11
11
  style?: React.CSSProperties;
12
+ /** 语义化：根节点类名 */
13
+ className?: string;
12
14
  }
13
15
  export declare const PopContent: FC<PopContentProps>;
14
16
  export {};
package/lib/types/TimePicker.d.ts CHANGED
@@ -1,11 +1,16 @@
1
1
  import React from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
3
4
  import { TimePickerStep, TimePickerType, TimePickerFormat, TimePickerFilterProps, TimePickerValue } from './@types';
4
5
  import { PopperOverlayProps } from '@hi-ui/popper';
5
6
  export declare const timePickerPrefix: string;
6
7
  export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement | null>>;
7
- type ExtendType = Omit<HiBaseHTMLProps<'div'>, 'placeholder' | 'value' | 'onChange'> & TimePickerFilterProps & TimePickerStep;
8
- export interface TimePickerProps extends ExtendType {
8
+ declare type ExtendType = Omit<HiBaseHTMLProps<'div'>, 'placeholder' | 'value' | 'onChange'> & TimePickerFilterProps & TimePickerStep;
9
+ export declare type TimePickerSemanticName = 'root' | 'inputWrapper' | 'prefix' | 'label' | 'input' | 'functionButton' | 'closeButton' | 'popContent' | 'popFunctionButtons' | 'popConfirmBtn' | 'popNowBtn';
10
+ export declare type TimePickerSemanticClassNames = SemanticClassNamesType<TimePickerProps, TimePickerSemanticName>;
11
+ export declare type TimePickerSemanticStyles = SemanticStylesType<TimePickerProps, TimePickerSemanticName>;
12
+ export declare type TimePickerSemantic = ComponentSemantic<TimePickerSemanticClassNames, TimePickerSemanticStyles>;
13
+ export interface TimePickerProps extends ExtendType, TimePickerSemantic {
9
14
  /**
10
15
  * 选择器类型
11
16
  * @default 'single'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/time-picker",
3
- "version": "5.0.0-experimental.1",
3
+ "version": "5.0.0-rc.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,23 +45,24 @@
45
45
  "url": "https://github.com/XiaoMi/hiui/issues"
46
46
  },
47
47
  "dependencies": {
48
- "@hi-ui/button": "^5.0.0-experimental.0",
49
- "@hi-ui/classname": "^5.0.0-experimental.0",
50
- "@hi-ui/env": "^5.0.0-experimental.0",
51
- "@hi-ui/icons": "^5.0.0-experimental.0",
52
- "@hi-ui/popper": "^5.0.0-experimental.0",
53
- "@hi-ui/use-merge-refs": "^5.0.0-experimental.0",
54
- "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
48
+ "@hi-ui/button": "^5.0.0-rc.0",
49
+ "@hi-ui/classname": "^5.0.0-rc.0",
50
+ "@hi-ui/env": "^5.0.0-rc.0",
51
+ "@hi-ui/icons": "^5.0.0-rc.0",
52
+ "@hi-ui/popper": "^5.0.0-rc.0",
53
+ "@hi-ui/use-merge-refs": "^5.0.0-rc.0",
54
+ "@hi-ui/use-merge-semantic": "^5.0.0-rc.0",
55
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-rc.0",
55
56
  "dayjs": "^1.10.7"
56
57
  },
57
58
  "peerDependencies": {
58
- "@hi-ui/core": ">=5.0.0-experimental.0",
59
+ "@hi-ui/core": ">=5.0.0-rc.0",
59
60
  "react": ">=16.8.6",
60
61
  "react-dom": ">=16.8.6"
61
62
  },
62
63
  "devDependencies": {
63
- "@hi-ui/core": "^5.0.0-experimental.0",
64
- "@hi-ui/core-css": "^5.0.0-experimental.1",
64
+ "@hi-ui/core": "^5.0.0-rc.0",
65
+ "@hi-ui/core-css": "^5.0.0-rc.0",
65
66
  "react": "^17.0.1",
66
67
  "react-dom": "^17.0.1"
67
68
  }