@hi-ui/time-picker 5.0.0-experimental.1 → 5.0.0-experimental.2

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 (11) hide show
  1. package/CHANGELOG.md +20 -0
  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/Input.d.ts +4 -0
  9. package/lib/types/PopContent.d.ts +2 -0
  10. package/lib/types/TimePicker.d.ts +6 -1
  11. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @hi-ui/time-picker
2
2
 
3
+ ## 5.0.0-experimental.2
4
+
5
+ ### Minor Changes
6
+
7
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
8
+
9
+ ### Patch Changes
10
+
11
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
12
+ - Updated dependencies [7f204c892]
13
+ - Updated dependencies [eb17c4697]
14
+ - Updated dependencies [eb17c4697]
15
+ - Updated dependencies [c407744fe]
16
+ - Updated dependencies [59cef699f]
17
+ - @hi-ui/icons@5.0.0-experimental.1
18
+ - @hi-ui/core@5.0.0-experimental.1
19
+ - @hi-ui/button@5.0.0-experimental.1
20
+ - @hi-ui/popper@5.0.0-experimental.1
21
+ - @hi-ui/use-merge-semantic@5.0.0-experimental.0
22
+
3
23
  ## 5.0.0-experimental.1
4
24
 
5
25
  ### Patch Changes
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/Input.d.ts CHANGED
@@ -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/PopContent.d.ts CHANGED
@@ -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
8
  type ExtendType = Omit<HiBaseHTMLProps<'div'>, 'placeholder' | 'value' | 'onChange'> & TimePickerFilterProps & TimePickerStep;
8
- export interface TimePickerProps extends ExtendType {
9
+ export type TimePickerSemanticName = 'root' | 'inputWrapper' | 'prefix' | 'label' | 'input' | 'functionButton' | 'closeButton' | 'popContent' | 'popFunctionButtons' | 'popConfirmBtn' | 'popNowBtn';
10
+ export type TimePickerSemanticClassNames = SemanticClassNamesType<TimePickerProps, TimePickerSemanticName>;
11
+ export type TimePickerSemanticStyles = SemanticStylesType<TimePickerProps, TimePickerSemanticName>;
12
+ export 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-experimental.2",
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",
48
+ "@hi-ui/button": "^5.0.0-experimental.1",
49
49
  "@hi-ui/classname": "^5.0.0-experimental.0",
50
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",
51
+ "@hi-ui/icons": "^5.0.0-experimental.1",
52
+ "@hi-ui/popper": "^5.0.0-experimental.1",
53
53
  "@hi-ui/use-merge-refs": "^5.0.0-experimental.0",
54
54
  "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
55
- "dayjs": "^1.10.7"
55
+ "dayjs": "^1.10.7",
56
+ "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
56
57
  },
57
58
  "peerDependencies": {
58
- "@hi-ui/core": ">=5.0.0-experimental.0",
59
+ "@hi-ui/core": ">=5.0.0-experimental.1",
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-experimental.1",
65
+ "@hi-ui/core-css": "^5.0.0-experimental.2",
65
66
  "react": "^17.0.1",
66
67
  "react-dom": "^17.0.1"
67
68
  }