@semcore/time-picker 3.0.15 → 3.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/lib/cjs/PickerFormat.js.map +1 -1
- package/lib/cjs/PickerInput.js +4 -2
- package/lib/cjs/PickerInput.js.map +1 -1
- package/lib/cjs/TimePicker.js +17 -15
- package/lib/cjs/TimePicker.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/PickerFormat.js.map +1 -1
- package/lib/es6/PickerInput.js +4 -2
- package/lib/es6/PickerInput.js.map +1 -1
- package/lib/es6/TimePicker.js +17 -15
- package/lib/es6/TimePicker.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/PickerFormat.jsx +0 -21
- package/src/PickerInput.jsx +0 -217
- package/src/TimePicker.jsx +0 -243
- package/src/index.d.ts +0 -47
- package/src/index.js +0 -2
- package/src/style/time-picker.shadow.css +0 -99
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.18] - 2022-07-25
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/input` [3.0.9 ~> 3.0.10], `@semcore/select` [3.0.15 ~> 3.0.16]).
|
|
10
|
+
|
|
11
|
+
## [3.0.17] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/flex-box` [4.5.6 ~> 4.5.7], `@semcore/button` [4.0.8 ~> 4.0.9], `@semcore/input` [3.0.8 ~> 3.0.9], `@semcore/select` [3.0.14 ~> 3.0.15]).
|
|
16
|
+
|
|
17
|
+
## [3.0.16] - 2022-07-21
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/select` [3.0.13 ~> 3.0.14]).
|
|
22
|
+
|
|
5
23
|
## [3.0.15] - 2022-07-18
|
|
6
24
|
|
|
7
25
|
### Changed
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"PickerFormat.js","names":["TimePickerFormat","SPickerFormat","Box","asProps","Children","meridiem","styles","SPickerFormatText","sstyled","origin","Component","keyboardFocusEnhance"],"sources":["../../src/PickerFormat.jsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nclass TimePickerFormat extends Component {\n static enhance = [keyboardFocusEnhance()];\n render() {\n const SPickerFormat = Root;\n const { Children, meridiem, styles } = this.asProps;\n const SPickerFormatText = 'span';\n\n return sstyled(styles)(\n <SPickerFormat render={Box} type=\"button\" tag=\"button\">\n {Children.origin ? <Children /> : <SPickerFormatText>{meridiem}</SPickerFormatText>}\n </SPickerFormat>,\n );\n }\n}\n\nexport default TimePickerFormat;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;IAEMA,gB;;;;;;;;;;;;WAEJ,kBAAS;MAAA;MAAA;;MACP,IAAMC,aAAa,GAKMC,YALzB;MACA,oBAAuC,KAAKC,OAA5C;MAAA,IAAQC,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,QAAlB,iBAAkBA,QAAlB;MAAA,IAA4BC,MAA5B,iBAA4BA,MAA5B;MACA,IAAMC,iBAAiB,GAAG,MAA1B;MAEA,eAAO,IAAAC,aAAA,EAAQF,MAAR,CAAP,eACE,gCAAC,aAAD;QAAA,QAAiC,QAAjC;QAAA,OAA8C;MAA9C,YACGF,QAAQ,CAACK,MAAT,gBAAkB,gCAAC,QAAD,2BAAlB,gBAAiC,gCAAC,iBAAD,qCAAoBJ,QAApB,CADpC,CADF;IAKD;;;EAZ4BK,e;;iCAAzBV,gB,aACa,CAAC,IAAAW,gCAAA,GAAD,C;eAcJX,gB"}
|
package/lib/cjs/PickerInput.js
CHANGED
|
@@ -86,7 +86,7 @@ var ItemPicker = /*#__PURE__*/function (_Component) {
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
89
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$input", _react["default"].createRef());
|
|
89
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$input", /*#__PURE__*/_react["default"].createRef());
|
|
90
90
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
|
|
91
91
|
dirtyValue: undefined,
|
|
92
92
|
visible: false
|
|
@@ -114,7 +114,9 @@ var ItemPicker = /*#__PURE__*/function (_Component) {
|
|
|
114
114
|
return _this.submitChanges(e);
|
|
115
115
|
});
|
|
116
116
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFocus", function () {
|
|
117
|
-
_this
|
|
117
|
+
var _this$$input;
|
|
118
|
+
|
|
119
|
+
(_this$$input = _this.$input) === null || _this$$input === void 0 ? void 0 : _this$$input.current.select();
|
|
118
120
|
});
|
|
119
121
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function () {});
|
|
120
122
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelect", function (value, e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/PickerInput.jsx"],"names":["MAP_FIELD_TO_TIME","hours","minutes","MAP_SIZE_SELECT","m","l","getOptions","min","max","step","length","Number","toFixed","options","Array","fill","numValue","map","i","index","value","String","ItemPicker","React","createRef","dirtyValue","undefined","visible","minMax","Math","e","stopPropagation","numberValue","NaN","isNaN","setState","slice","submitChanges","$input","current","select","dispatchOnChange","event","asProps","$onValueChange","field","state","parseValueWithMinMax","SPickerInput","Select","Trigger","styles","onSelect","time","size","disabled","onVisibleChange","other","timeValue","handleSelect","handleVisibleChange","Input","Value","handleChange","handleBlur","handleFocus","handleKeyDown","Component","placeholder","Hours","currentTarget","keyCode","selectionStart","selectionEnd","preventDefault","nextInput","is12Hour","focus","prevProps","prevState","Minutes","prevFocus"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Input from '@semcore/input';\nimport Select from '@semcore/select';\nimport { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst MAP_FIELD_TO_TIME = {\n hours: 0,\n minutes: 1,\n};\n\nconst MAP_SIZE_SELECT = {\n m: 'm',\n l: 'l',\n};\n\nfunction getOptions(min, max, step = 1) {\n const length = Number(((max + 1 - min) / step).toFixed(0));\n const options = Array(length).fill('');\n let numValue = min;\n return options.map((i, index) => {\n numValue = index === 0 ? numValue : numValue + step;\n const value = withLeadingZero(String(numValue));\n return (\n <Select.Option value={value} key={value}>\n {value}\n </Select.Option>\n );\n });\n}\n\nclass ItemPicker extends Component {\n static defaultProps = {\n placeholder: '00',\n };\n\n $input = React.createRef();\n\n minMax() {\n return [];\n }\n\n state = {\n dirtyValue: undefined,\n visible: false,\n };\n\n parseValueWithMinMax = (value) => {\n const [min, max] = this.minMax();\n return String(Math.max(min, Math.min(max, value)));\n };\n\n dispatchOnChange(value, event) {\n this.setState({ dirtyValue: undefined });\n this.asProps.$onValueChange(value, this.field, event);\n }\n\n submitChanges(event) {\n let { dirtyValue } = this.state;\n if (dirtyValue !== undefined) {\n // if changes value\n if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not \"\"\n this.dispatchOnChange(dirtyValue, event);\n }\n }\n\n handleChange = (value, e) => {\n /* hide props for bubbling events */\n e.stopPropagation();\n const numberValue = intOrDefault(Number(value), NaN);\n\n if (!Number.isNaN(numberValue)) {\n this.setState({ dirtyValue: value.slice(-2) });\n }\n };\n\n handleBlur = (e) => this.submitChanges(e);\n\n handleFocus = () => {\n this.$input?.current.select();\n };\n\n /* rewrite method */\n handleKeyDown = () => {};\n\n handleSelect = (value, e) => {\n this.dispatchOnChange(value, e);\n };\n\n handleVisibleChange = (visible) => this.setState({ visible });\n\n render() {\n const SPickerInput = Root;\n const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =\n this.asProps;\n const { dirtyValue, visible } = this.state;\n const timeValue = time[MAP_FIELD_TO_TIME[this.field]];\n const value = dirtyValue === undefined ? timeValue : dirtyValue;\n const [min, max] = this.minMax();\n\n return sstyled(styles)(\n <Select\n {...other}\n interaction=\"focus\"\n size={size ? MAP_SIZE_SELECT[size] : false}\n onChange={callAllEventHandlers(onSelect, this.handleSelect)}\n onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}\n visible={visible}\n value={timeValue}\n >\n <SPickerInput\n interaction=\"focus\"\n render={Select.Trigger}\n tag={Input.Value}\n ref={this.$input}\n size={size}\n disabled={disabled}\n neighborLocation={false}\n value={value}\n aria-label={`Search ${this.field}`}\n onChange={this.handleChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>\n </Select>,\n );\n }\n}\n\nclass Hours extends ItemPicker {\n field = 'hours';\n\n minMax() {\n const { is12Hour } = this.asProps;\n if (is12Hour) {\n return [1, 12];\n } else {\n return [0, 23];\n }\n }\n\n nextInput() {\n if (this.$input.current) {\n const $input = nextInput(this.$input.current);\n if ($input) {\n this.setState({ visible: false });\n $input.focus();\n }\n }\n }\n\n handleKeyDown = (e) => {\n const { currentTarget } = e;\n if (e.keyCode === 13) this.submitChanges(e);\n if (e.keyCode === 39) {\n if (\n currentTarget.selectionStart >= currentTarget.value.length &&\n currentTarget.selectionStart === currentTarget.selectionEnd\n ) {\n e.preventDefault();\n this.nextInput();\n }\n }\n };\n\n componentDidUpdate(prevProps, prevState) {\n const { dirtyValue } = this.state;\n if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;\n\n if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {\n this.nextInput();\n }\n }\n}\n\nclass Minutes extends ItemPicker {\n field = 'minutes';\n\n minMax() {\n return [0, 59];\n }\n\n prevFocus() {\n if (this.$input.current) {\n const $input = prevInput(this.$input.current);\n if ($input) {\n this.setState({ visible: false });\n $input.focus();\n }\n }\n }\n\n handleKeyDown = (e) => {\n const { currentTarget } = e;\n if (e.keyCode === 13) this.submitChanges(e);\n if (e.keyCode === 37) {\n if (\n currentTarget.selectionStart <= 0 &&\n currentTarget.selectionStart === currentTarget.selectionEnd\n ) {\n e.preventDefault();\n this.prevFocus();\n }\n }\n if (e.keyCode === 8) {\n if (currentTarget.value.length === 0) {\n e.preventDefault();\n this.prevFocus();\n }\n }\n };\n}\n\nexport { Hours, Minutes };\n"],"file":"PickerInput.js"}
|
|
1
|
+
{"version":3,"file":"PickerInput.js","names":["MAP_FIELD_TO_TIME","hours","minutes","MAP_SIZE_SELECT","m","l","getOptions","min","max","step","length","Number","toFixed","options","Array","fill","numValue","map","i","index","value","withLeadingZero","String","ItemPicker","React","createRef","dirtyValue","undefined","visible","minMax","Math","e","stopPropagation","numberValue","intOrDefault","NaN","isNaN","setState","slice","submitChanges","$input","current","select","dispatchOnChange","event","asProps","$onValueChange","field","state","parseValueWithMinMax","SPickerInput","Select","Trigger","styles","onSelect","time","size","disabled","onVisibleChange","other","timeValue","sstyled","callAllEventHandlers","handleSelect","handleVisibleChange","Input","Value","handleChange","handleBlur","handleFocus","handleKeyDown","Component","placeholder","Hours","currentTarget","keyCode","selectionStart","selectionEnd","preventDefault","nextInput","is12Hour","focus","prevProps","prevState","Minutes","prevFocus","prevInput"],"sources":["../../src/PickerInput.jsx"],"sourcesContent":["import React from 'react';\nimport Input from '@semcore/input';\nimport Select from '@semcore/select';\nimport { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst MAP_FIELD_TO_TIME = {\n hours: 0,\n minutes: 1,\n};\n\nconst MAP_SIZE_SELECT = {\n m: 'm',\n l: 'l',\n};\n\nfunction getOptions(min, max, step = 1) {\n const length = Number(((max + 1 - min) / step).toFixed(0));\n const options = Array(length).fill('');\n let numValue = min;\n return options.map((i, index) => {\n numValue = index === 0 ? numValue : numValue + step;\n const value = withLeadingZero(String(numValue));\n return (\n <Select.Option value={value} key={value}>\n {value}\n </Select.Option>\n );\n });\n}\n\nclass ItemPicker extends Component {\n static defaultProps = {\n placeholder: '00',\n };\n\n $input = React.createRef();\n\n minMax() {\n return [];\n }\n\n state = {\n dirtyValue: undefined,\n visible: false,\n };\n\n parseValueWithMinMax = (value) => {\n const [min, max] = this.minMax();\n return String(Math.max(min, Math.min(max, value)));\n };\n\n dispatchOnChange(value, event) {\n this.setState({ dirtyValue: undefined });\n this.asProps.$onValueChange(value, this.field, event);\n }\n\n submitChanges(event) {\n let { dirtyValue } = this.state;\n if (dirtyValue !== undefined) {\n // if changes value\n if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not \"\"\n this.dispatchOnChange(dirtyValue, event);\n }\n }\n\n handleChange = (value, e) => {\n /* hide props for bubbling events */\n e.stopPropagation();\n const numberValue = intOrDefault(Number(value), NaN);\n\n if (!Number.isNaN(numberValue)) {\n this.setState({ dirtyValue: value.slice(-2) });\n }\n };\n\n handleBlur = (e) => this.submitChanges(e);\n\n handleFocus = () => {\n this.$input?.current.select();\n };\n\n /* rewrite method */\n handleKeyDown = () => {};\n\n handleSelect = (value, e) => {\n this.dispatchOnChange(value, e);\n };\n\n handleVisibleChange = (visible) => this.setState({ visible });\n\n render() {\n const SPickerInput = Root;\n const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =\n this.asProps;\n const { dirtyValue, visible } = this.state;\n const timeValue = time[MAP_FIELD_TO_TIME[this.field]];\n const value = dirtyValue === undefined ? timeValue : dirtyValue;\n const [min, max] = this.minMax();\n\n return sstyled(styles)(\n <Select\n {...other}\n interaction=\"focus\"\n size={size ? MAP_SIZE_SELECT[size] : false}\n onChange={callAllEventHandlers(onSelect, this.handleSelect)}\n onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}\n visible={visible}\n value={timeValue}\n >\n <SPickerInput\n interaction=\"focus\"\n render={Select.Trigger}\n tag={Input.Value}\n ref={this.$input}\n size={size}\n disabled={disabled}\n neighborLocation={false}\n value={value}\n aria-label={`Search ${this.field}`}\n onChange={this.handleChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>\n </Select>,\n );\n }\n}\n\nclass Hours extends ItemPicker {\n field = 'hours';\n\n minMax() {\n const { is12Hour } = this.asProps;\n if (is12Hour) {\n return [1, 12];\n } else {\n return [0, 23];\n }\n }\n\n nextInput() {\n if (this.$input.current) {\n const $input = nextInput(this.$input.current);\n if ($input) {\n this.setState({ visible: false });\n $input.focus();\n }\n }\n }\n\n handleKeyDown = (e) => {\n const { currentTarget } = e;\n if (e.keyCode === 13) this.submitChanges(e);\n if (e.keyCode === 39) {\n if (\n currentTarget.selectionStart >= currentTarget.value.length &&\n currentTarget.selectionStart === currentTarget.selectionEnd\n ) {\n e.preventDefault();\n this.nextInput();\n }\n }\n };\n\n componentDidUpdate(prevProps, prevState) {\n const { dirtyValue } = this.state;\n if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;\n\n if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {\n this.nextInput();\n }\n }\n}\n\nclass Minutes extends ItemPicker {\n field = 'minutes';\n\n minMax() {\n return [0, 59];\n }\n\n prevFocus() {\n if (this.$input.current) {\n const $input = prevInput(this.$input.current);\n if ($input) {\n this.setState({ visible: false });\n $input.focus();\n }\n }\n }\n\n handleKeyDown = (e) => {\n const { currentTarget } = e;\n if (e.keyCode === 13) this.submitChanges(e);\n if (e.keyCode === 37) {\n if (\n currentTarget.selectionStart <= 0 &&\n currentTarget.selectionStart === currentTarget.selectionEnd\n ) {\n e.preventDefault();\n this.prevFocus();\n }\n }\n if (e.keyCode === 8) {\n if (currentTarget.value.length === 0) {\n e.preventDefault();\n this.prevFocus();\n }\n }\n };\n}\n\nexport { Hours, Minutes };\n"],"mappings":"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"}
|
package/lib/cjs/TimePicker.js
CHANGED
|
@@ -61,22 +61,22 @@ var style = (
|
|
|
61
61
|
/*__reshadow_css_start__*/
|
|
62
62
|
_core.sstyled.insert(
|
|
63
63
|
/*__inner_css_start__*/
|
|
64
|
-
".
|
|
64
|
+
".___STimePicker_a7ect_gg_{position:relative;width:auto}.___STimePicker_a7ect_gg_.__disabled_a7ect_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_a7ect_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_a7ect_gg_.__placeholder_a7ect_gg_{text-overflow:clip}.___SPickerInput_a7ect_gg_._size_m_a7ect_gg_{width:19px}.___SPickerInput_a7ect_gg_._size_l_a7ect_gg_{width:21px}.___SPickerFormat_a7ect_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_a7ect_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_a7ect_gg_:active,.___SPickerFormat_a7ect_gg_.__active_a7ect_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_a7ect_gg_._size_m_a7ect_gg_{height:28px;font-size:14px;margin:0 -1px 0 0}.___SPickerFormat_a7ect_gg_._size_m_a7ect_gg_ .___SPickerFormatText_a7ect_gg_{margin:0 8px}.___SPickerFormat_a7ect_gg_._size_l_a7ect_gg_{height:40px;font-size:16px;margin:0 -4px 0 0}.___SPickerFormat_a7ect_gg_._size_l_a7ect_gg_ .___SPickerFormatText_a7ect_gg_{margin:0 12px}.___SPickerFormat_a7ect_gg_.__disabled_a7ect_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_a7ect_gg_.__keyboardFocused_a7ect_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STimePickerSeparator_a7ect_gg_.__disabled_a7ect_gg_{opacity:0.3;pointer-events:none}"
|
|
65
65
|
/*__inner_css_end__*/
|
|
66
|
-
, "
|
|
66
|
+
, "a7ect_gg_")
|
|
67
67
|
/*__reshadow_css_end__*/
|
|
68
68
|
, {
|
|
69
|
-
"__STimePicker": "
|
|
70
|
-
"_disabled": "
|
|
71
|
-
"__SPickerInput": "
|
|
72
|
-
"_placeholder": "
|
|
73
|
-
"_size_m": "
|
|
74
|
-
"_size_l": "
|
|
75
|
-
"__SPickerFormat": "
|
|
76
|
-
"_active": "
|
|
77
|
-
"__SPickerFormatText": "
|
|
78
|
-
"_keyboardFocused": "
|
|
79
|
-
"__STimePickerSeparator": "
|
|
69
|
+
"__STimePicker": "___STimePicker_a7ect_gg_",
|
|
70
|
+
"_disabled": "__disabled_a7ect_gg_",
|
|
71
|
+
"__SPickerInput": "___SPickerInput_a7ect_gg_",
|
|
72
|
+
"_placeholder": "__placeholder_a7ect_gg_",
|
|
73
|
+
"_size_m": "_size_m_a7ect_gg_",
|
|
74
|
+
"_size_l": "_size_l_a7ect_gg_",
|
|
75
|
+
"__SPickerFormat": "___SPickerFormat_a7ect_gg_",
|
|
76
|
+
"_active": "__active_a7ect_gg_",
|
|
77
|
+
"__SPickerFormatText": "___SPickerFormatText_a7ect_gg_",
|
|
78
|
+
"_keyboardFocused": "__keyboardFocused_a7ect_gg_",
|
|
79
|
+
"__STimePickerSeparator": "___STimePickerSeparator_a7ect_gg_"
|
|
80
80
|
});
|
|
81
81
|
var MAP_MERIDIEM = {
|
|
82
82
|
AM: 'PM',
|
|
@@ -366,10 +366,12 @@ var Separator = /*#__PURE__*/function (_Component2) {
|
|
|
366
366
|
}
|
|
367
367
|
|
|
368
368
|
_this2 = _super2.call.apply(_super2, [this].concat(args));
|
|
369
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "$el", _react["default"].createRef());
|
|
369
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "$el", /*#__PURE__*/_react["default"].createRef());
|
|
370
370
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handlerClick", function () {
|
|
371
371
|
if (_this2.$el.current) {
|
|
372
|
-
|
|
372
|
+
var _prevInput;
|
|
373
|
+
|
|
374
|
+
(_prevInput = prevInput(_this2.$el.current)) === null || _prevInput === void 0 ? void 0 : _prevInput.focus();
|
|
373
375
|
}
|
|
374
376
|
});
|
|
375
377
|
return _this2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TimePicker.jsx"],"names":["MAP_MERIDIEM","AM","PM","MAP_FIELD_TO_TIME","hours","minutes","nextInput","element","nextElementSibling","tagName","prevInput","previousElementSibling","intOrDefault","value","def","number","Number","parseInt","isNaN","withLeadingZero","String","length","meridiemByHours","formatHoursTo12","nHours","NaN","formatHoursTo24","meridiem","TimePickerRoot","field","event","is12Hour","asProps","time","split","timeToValue","handlers","size","disabled","valueToTime","$onValueChange","handleValueChange","_getHoursAndMinutesProps","undefined","_lastMeridiem","disablePortal","onClick","handleMeridiemClick","STimePicker","Input","styles","Children","Component","style","defaultValue","children","Separator","React","createRef","$el","current","focus","STimePickerSeparator","Box","handlerClick","TimePicker","Hours","Minutes","Format"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,EAAE,EAAE,IADe;AAEnBC,EAAAA,EAAE,EAAE;AAFe,CAArB;AAIA,IAAMC,iBAAiB,GAAG;AACxBC,EAAAA,KAAK,EAAE,CADiB;AAExBC,EAAAA,OAAO,EAAE;AAFe,CAA1B;;AAKO,SAASC,SAAT,CAAmBC,OAAnB,EAA4B;AACjC,KAAG;AACDA,IAAAA,OAAO,GAAGA,OAAO,CAACC,kBAAlB;AACD,GAFD,QAESD,OAAO,IAAIA,OAAO,CAACE,OAAR,KAAoB,OAFxC;;AAGA,SAAOF,OAAP;AACD;;AAEM,SAASG,SAAT,CAAmBH,OAAnB,EAA4B;AACjC,KAAG;AACDA,IAAAA,OAAO,GAAGA,OAAO,CAACI,sBAAlB;AACD,GAFD,QAESJ,OAAO,IAAIA,OAAO,CAACE,OAAR,KAAoB,OAFxC;;AAGA,SAAOF,OAAP;AACD;;AAEM,SAASK,YAAT,CAAsBC,KAAtB,EAAsC;AAAA,MAATC,GAAS,uEAAH,CAAG;AAC3C,MAAMC,MAAM,GAAGC,MAAM,CAACC,QAAP,CAAgBJ,KAAhB,CAAf;AACA,SAAOG,MAAM,CAACE,KAAP,CAAaH,MAAb,IAAuBD,GAAvB,GAA6BC,MAApC;AACD;;AAEM,SAASI,eAAT,CAAyBN,KAAzB,EAAgC;AACrCA,EAAAA,KAAK,GAAGO,MAAM,CAACP,KAAD,CAAd;AACA,MAAIA,KAAK,CAACQ,MAAN,KAAiB,CAArB,EAAwB,kBAAWR,KAAX;AACxB,SAAOO,MAAM,CAACP,KAAD,CAAb;AACD;;AAEM,SAASS,eAAT,CAAyBlB,KAAzB,EAAgC;AACrC,SAAOA,KAAK,IAAI,EAAT,GAAc,IAAd,GAAqB,IAA5B;AACD;;AAEM,SAASmB,eAAT,CAAyBnB;AAAM;AAA/B,EAAkD;AACvD,MAAMoB,MAAM,GAAGZ,YAAY,CAACR,KAAD,EAAQqB,GAAR,CAA3B,CADuD,CACd;;AACzC,MAAIT,MAAM,CAACE,KAAP,CAAaM,MAAb,CAAJ,EAA0B,OAAOpB,KAAP,CAF6B,CAIvD;;AACA,MAAIoB,MAAM,KAAK,CAAf,EAAkB,OAAO,EAAP,CALqC,CAK1B;;AAC7B,MAAIA,MAAM,GAAG,EAAb,EAAiB,OAAOA,MAAM,GAAG,EAAhB,CANsC,CAMlB;;AAErC,SAAOpB,KAAP;AACD;;AAEM,SAASsB,eAAT,CAAyBtB;AAAM;AAA/B,EAAkDuB,QAAlD,EAA4D;AACjE,MAAMH,MAAM,GAAGZ,YAAY,CAACR,KAAD,EAAQqB,GAAR,CAA3B,CADiE,CACxB;;AAEzC,MAAIT,MAAM,CAACE,KAAP,CAAaM,MAAb,CAAJ,EAA0B,OAAOpB,KAAP;;AAE1B,MAAIuB,QAAQ,KAAK,IAAjB,EAAuB;AACrB,QAAIH,MAAM,KAAK,EAAf,EAAmB,OAAO,CAAP,CADE,CACQ;AAC9B;;AAED,MAAIG,QAAQ,KAAK,IAAjB,EAAuB;AACrB,QAAIH,MAAM,GAAG,EAAb,EAAiB,OAAOA,MAAM,GAAG,EAAhB,CADI,CACgB;AACtC;;AAED,SAAOpB,KAAP;AACD;;IAEKwB,c;;;;;;;;;;;;;;;sGAgBY,I;0GAkDI,UAACf,KAAD,EAAQgB,KAAR,EAAeC,KAAf,EAAyB;AAC3C,UAAQC,QAAR,GAAqB,MAAKC,OAA1B,CAAQD,QAAR;;AACA;AAAA,UAAQJ,QAAR,yBAAQA,QAAR;;AAEA,UAAIM,IAAJ;;AACA,UAAIJ,KAAJ,EAAW;AACTI,QAAAA,IAAI,GAAG,MAAKpB,KAAL,CAAWqB,KAAX,CAAiB,GAAjB,CAAP;AACAD,QAAAA,IAAI,CAAC9B,iBAAiB,CAAC0B,KAAD,CAAlB,CAAJ,GAAiChB,KAAjC;AACD,OAHD,MAGO;AACLoB,QAAAA,IAAI,GAAGpB,KAAK,CAACqB,KAAN,CAAY,GAAZ,CAAP;AACD;;AAED,kBAAiCD,IAAjC;AAAA;AAAA;AAAA,UAAK7B,KAAL,wBAAa,EAAb;AAAA;AAAA,UAAiBC,OAAjB,yBAA2B,EAA3B;;AAEA,UAAI0B,QAAJ,EAAc3B,KAAK,GAAGgB,MAAM,CAACG,eAAe,CAACnB,KAAD,CAAhB,CAAd;AAEdS,MAAAA,KAAK,GAAG,MAAKsB,WAAL,CAAiB,CAAC/B,KAAD,EAAQC,OAAR,CAAjB,EAAmCsB,QAAnC,CAAR;;AACA,YAAKS,QAAL,CAAcvB,KAAd,CAAoBA,KAApB,EAA2BiB,KAA3B;AACD,K;4GAEqB,UAACA,KAAD,EAAW;AAC/B,UAAQC,QAAR,GAAqB,MAAKC,OAA1B,CAAQD,QAAR;;AACA;AAAA,UAAMlB,KAAN,0BAAMA,KAAN;AAAA,UAAac,QAAb,0BAAaA,QAAb;;AACA,yBAAiCd,KAAK,CAACqB,KAAN,CAAY,GAAZ,CAAjC;AAAA;AAAA;AAAA,UAAK9B,KAAL,+BAAa,EAAb;AAAA;AAAA,UAAiBC,OAAjB,gCAA2B,EAA3B;;AAEA,UAAI0B,QAAJ,EAAc3B,KAAK,GAAGgB,MAAM,CAACG,eAAe,CAACnB,KAAD,CAAhB,CAAd;AAEdS,MAAAA,KAAK,GAAG,MAAKsB,WAAL,CAAiB,CAAC/B,KAAD,EAAQC,OAAR,CAAjB,EAAmCL,YAAY,CAAC2B,QAAD,CAA/C,CAAR;;AACA,YAAKS,QAAL,CAAcvB,KAAd,CAAoBA,KAApB,EAA2BiB,KAA3B;AACD,K;iHAE0B,YAAM;AAC/B,0BAAqC,MAAKE,OAA1C;AAAA,UAAQD,QAAR,iBAAQA,QAAR;AAAA,UAAkBM,IAAlB,iBAAkBA,IAAlB;AAAA,UAAwBC,QAAxB,iBAAwBA,QAAxB;;AACA,UAAML,IAAI,GAAG,MAAKM,WAAL,CAAiB,MAAK1B,KAAtB,CAAb;;AAEA,aAAO;AACLoB,QAAAA,IAAI,EAAJA,IADK;AAELI,QAAAA,IAAI,EAAJA,IAFK;AAGLN,QAAAA,QAAQ,EAARA,QAHK;AAILO,QAAAA,QAAQ,EAARA,QAJK;AAKLE,QAAAA,cAAc,EAAE,MAAKC;AALhB,OAAP;AAOD,K;sGAEe,MAAKC,wB;wGACH,MAAKA,wB;;;;;;WA/FD;AAEtB,iCAAoB;AAClB,aAAO;AACL7B,QAAAA,KAAK,EAAE;AADF,OAAP;AAGD;;;SAED,eAAY;AACV,UAAQA,KAAR,GAAkB,KAAKmB,OAAvB,CAAQnB,KAAR;AACA,aAAOA,KAAK,KAAK,IAAV,IAAkBA,KAAK,KAAK8B,SAA5B,GAAwC,GAAxC,GAA8C9B,KAArD;AACD;;;SAED,eAAe;AACb,UAAQA,KAAR,GAAkB,KAAKmB,OAAvB,CAAQnB,KAAR;;AACA,0BAAqBA,KAAK,CAACqB,KAAN,CAAY,GAAZ,CAArB;AAAA;AAAA;AAAA,UAAO9B,KAAP,+BAAe,EAAf;;AAEA,UAAMoB,MAAM,GAAGZ,YAAY,CAACR,KAAD,EAAQqB,GAAR,CAA3B;;AAEA,UAAI,CAACT,MAAM,CAACE,KAAP,CAAaM,MAAb,CAAL,EAA2B;AACzB,aAAKoB,aAAL,GAAqBtB,eAAe,CAACE,MAAD,CAApC;AACD;;AAED,aAAO,KAAKoB,aAAZ;AACD;;;WAED,qBAAY/B,KAAZ,EAAmB;AACjB,UAAQkB,QAAR,GAAqB,KAAKC,OAA1B,CAAQD,QAAR;;AACA,0BAAiClB,KAAK,CAACqB,KAAN,CAAY,GAAZ,CAAjC;AAAA;AAAA;AAAA,UAAK9B,KAAL,+BAAa,EAAb;AAAA;AAAA,UAAiBC,OAAjB,gCAA2B,EAA3B;;AAEA,UAAI0B,QAAJ,EAAc3B,KAAK,GAAGmB,eAAe,CAACnB,KAAD,CAAvB;AAEdA,MAAAA,KAAK,GAAGe,eAAe,CAACf,KAAD,CAAvB;AACAC,MAAAA,OAAO,GAAGc,eAAe,CAACd,OAAD,CAAzB;AAEA,aAAO,CAACD,KAAD,EAAQC,OAAR,CAAP;AACD;;;WAED,qBAAY4B,IAAZ,EAAkBN,QAAlB,EAA4B;AAC1B,UAAQI,QAAR,GAAqB,KAAKC,OAA1B,CAAQD,QAAR;;AACA,mDAAiCE,IAAjC;AAAA;AAAA,UAAK7B,KAAL,wBAAa,EAAb;AAAA;AAAA,UAAiBC,OAAjB,yBAA2B,EAA3B;;AAEAD,MAAAA,KAAK,GAAGQ,YAAY,CAACR,KAAD,EAAQA,KAAR,CAApB,CAJ0B,CAIU;;AACpCC,MAAAA,OAAO,GAAGO,YAAY,CAACP,OAAD,EAAUA,OAAV,CAAtB,CAL0B,CAKgB;;AAE1C,UAAI0B,QAAJ,EAAc3B,KAAK,GAAGsB,eAAe,CAACtB,KAAD,EAAQuB,QAAR,CAAvB,CAPY,CAO8B;;AAExD,uBAAUvB,KAAV,cAAmBC,OAAnB;AACD;;;WAiDD,6BAAoB;AAClB,aAAO;AACLiC,QAAAA,QAAQ,EAAE,KAAKN,OAAL,CAAaM;AADlB,OAAP;AAGD;;;WAED,0BAAiB;AACf,2BAA0C,KAAKN,OAA/C;AAAA,UAAQK,IAAR,kBAAQA,IAAR;AAAA,UAAcC,QAAd,kBAAcA,QAAd;AAAA,UAAwBO,aAAxB,kBAAwBA,aAAxB;AACA,aAAO;AACLR,QAAAA,IAAI,EAAJA,IADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLO,QAAAA,aAAa,EAAbA,aAHK;AAILlB,QAAAA,QAAQ,EAAE,KAAKA,QAJV;AAKLmB,QAAAA,OAAO,EAAE,KAAKC;AALT,OAAP;AAOD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,WAAW,GAIMC,iBAJvB;AACA,2BAA6B,KAAKjB,OAAlC;AAAA,UAAQkB,MAAR,kBAAQA,MAAR;AAAA,UAAgBC,QAAhB,kBAAgBA,QAAhB;AAEA,qBAAO,mBAAQD,MAAR,CAAP,eACE,gCAAC,WAAD,6FACE,gCAAC,QAAD,2BADF,CADF;AAKD;;;EA3I0BE,e;;iCAAvBxB,c,iBACiB,Y;iCADjBA,c,WAEWyB,K;iCAFXzB,c,kBAGkB;AAAA,MAAGG,QAAH,SAAGA,QAAH;AAAA,SAAmB;AACvCuB,IAAAA,YAAY,EAAE,EADyB;AAEvCjB,IAAAA,IAAI,EAAE,GAFiC;AAGvCkB,IAAAA,QAAQ,eACN,+EACE,gCAAC,UAAD,CAAY,KAAZ,OADF,eAEE,gCAAC,UAAD,CAAY,SAAZ,OAFF,eAGE,gCAAC,UAAD,CAAY,OAAZ,OAHF,EAIGxB,QAAQ,iBAAI,gCAAC,UAAD,CAAY,MAAZ,OAJf;AAJqC,GAAnB;AAAA,C;;IA2IlByB,S;;;;;;;;;;;;;;;6FAKEC,kBAAMC,SAAN,E;sGAES,YAAM;AACnB,UAAI,OAAKC,GAAL,CAASC,OAAb,EAAsB;AACpBlD,QAAAA,SAAS,CAAC,OAAKiD,GAAL,CAASC,OAAV,CAAT,EAA6BC,KAA7B;AACD;AACF,K;;;;;;WAED,kBAAS;AAAA;AACP,UAAMC,oBAAoB,GACWC,YADrC;AACA,0BAAO,gCAAC,oBAAD;AAAA,eAAwC,KAAKJ,GAA7C;AAAA,mBAA2D,KAAKK;AAAhE,gBAAP;AACD;;;EAhBqBZ,e;;iCAAlBI,S,kBACkB;AACpBD,EAAAA,QAAQ,EAAE;AADU,C;AAkBxB,IAAMU,UAAU,GAAG,sBAAgBrC,cAAhB,EAAgC;AACjDsC,EAAAA,KAAK,EAALA,kBADiD;AAEjDC,EAAAA,OAAO,EAAPA,oBAFiD;AAGjDX,EAAAA,SAAS,EAATA,SAHiD;AAIjDY,EAAAA,MAAM,EAANA;AAJiD,CAAhC,CAAnB;eAOeH,U","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport { Box } from '@semcore/flex-box';\nimport { Hours, Minutes } from './PickerInput';\nimport Format from './PickerFormat';\n\nimport style from './style/time-picker.shadow.css';\n\nconst MAP_MERIDIEM = {\n AM: 'PM',\n PM: 'AM',\n};\nconst MAP_FIELD_TO_TIME = {\n hours: 0,\n minutes: 1,\n};\n\nexport function nextInput(element) {\n do {\n element = element.nextElementSibling;\n } while (element && element.tagName !== 'INPUT');\n return element;\n}\n\nexport function prevInput(element) {\n do {\n element = element.previousElementSibling;\n } while (element && element.tagName !== 'INPUT');\n return element;\n}\n\nexport function intOrDefault(value, def = 0) {\n const number = Number.parseInt(value);\n return Number.isNaN(number) ? def : number;\n}\n\nexport function withLeadingZero(value) {\n value = String(value);\n if (value.length === 1) return `0${value}`;\n return String(value);\n}\n\nexport function meridiemByHours(hours) {\n return hours >= 12 ? 'PM' : 'AM';\n}\n\nexport function formatHoursTo12(hours /* hours by 24 */) {\n const nHours = intOrDefault(hours, NaN); // if not (:00)\n if (Number.isNaN(nHours)) return hours;\n\n // if not (HH:00)\n if (nHours === 0) return 12; // 0 => 12 PM\n if (nHours > 12) return nHours - 12; // 22 => 12 PM\n\n return hours;\n}\n\nexport function formatHoursTo24(hours /* hours by 12 */, meridiem) {\n const nHours = intOrDefault(hours, NaN); // if not (:00)\n\n if (Number.isNaN(nHours)) return hours;\n\n if (meridiem === 'AM') {\n if (nHours === 12) return 0; // 12 AM => 0\n }\n\n if (meridiem === 'PM') {\n if (nHours < 12) return nHours + 12; // 10 PM => 22\n }\n\n return hours;\n}\n\nclass TimePickerRoot extends Component {\n static displayName = 'TimePicker';\n static style = style;\n static defaultProps = ({ is12Hour }) => ({\n defaultValue: '',\n size: 'm',\n children: (\n <>\n <TimePicker.Hours />\n <TimePicker.Separator />\n <TimePicker.Minutes />\n {is12Hour && <TimePicker.Format />}\n </>\n ),\n });\n\n _lastMeridiem = 'AM'; // default AM\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n get value() {\n const { value } = this.asProps;\n return value === null || value === undefined ? ':' : value;\n }\n\n get meridiem() {\n const { value } = this.asProps;\n const [hours = ''] = value.split(':');\n\n const nHours = intOrDefault(hours, NaN);\n\n if (!Number.isNaN(nHours)) {\n this._lastMeridiem = meridiemByHours(nHours);\n }\n\n return this._lastMeridiem;\n }\n\n valueToTime(value) {\n const { is12Hour } = this.asProps;\n let [hours = '', minutes = ''] = value.split(':');\n\n if (is12Hour) hours = formatHoursTo12(hours);\n\n hours = withLeadingZero(hours);\n minutes = withLeadingZero(minutes);\n\n return [hours, minutes];\n }\n\n timeToValue(time, meridiem) {\n const { is12Hour } = this.asProps;\n let [hours = '', minutes = ''] = time;\n\n hours = intOrDefault(hours, hours); // 03 => 3\n minutes = intOrDefault(minutes, minutes); // MM => MM\n\n if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0\n\n return `${hours}:${minutes}`;\n }\n\n handleValueChange = (value, field, event) => {\n const { is12Hour } = this.asProps;\n const { meridiem } = this;\n\n let time;\n if (field) {\n time = this.value.split(':');\n time[MAP_FIELD_TO_TIME[field]] = value;\n } else {\n time = value.split(':');\n }\n\n let [hours = '', minutes = ''] = time;\n\n if (is12Hour) hours = String(formatHoursTo12(hours));\n\n value = this.timeToValue([hours, minutes], meridiem);\n this.handlers.value(value, event);\n };\n\n handleMeridiemClick = (event) => {\n const { is12Hour } = this.asProps;\n let { value, meridiem } = this;\n let [hours = '', minutes = ''] = value.split(':');\n\n if (is12Hour) hours = String(formatHoursTo12(hours));\n\n value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);\n this.handlers.value(value, event);\n };\n\n _getHoursAndMinutesProps = () => {\n const { is12Hour, size, disabled } = this.asProps;\n const time = this.valueToTime(this.value);\n\n return {\n time,\n size,\n is12Hour,\n disabled,\n $onValueChange: this.handleValueChange,\n };\n };\n\n getHoursProps = this._getHoursAndMinutesProps;\n getMinutesProps = this._getHoursAndMinutesProps;\n\n getSeparatorProps() {\n return {\n disabled: this.asProps.disabled,\n };\n }\n\n getFormatProps() {\n const { size, disabled, disablePortal } = this.asProps;\n return {\n size,\n disabled,\n disablePortal,\n meridiem: this.meridiem,\n onClick: this.handleMeridiemClick,\n };\n }\n\n render() {\n const STimePicker = Root;\n const { styles, Children } = this.asProps;\n\n return sstyled(styles)(\n <STimePicker render={Input}>\n <Children />\n </STimePicker>,\n );\n }\n}\n\nclass Separator extends Component {\n static defaultProps = {\n children: ':',\n };\n\n $el = React.createRef();\n\n handlerClick = () => {\n if (this.$el.current) {\n prevInput(this.$el.current)?.focus();\n }\n };\n\n render() {\n const STimePickerSeparator = Root;\n return <STimePickerSeparator render={Box} ref={this.$el} onClick={this.handlerClick} />;\n }\n}\n\nconst TimePicker = createComponent(TimePickerRoot, {\n Hours,\n Minutes,\n Separator,\n Format,\n});\n\nexport default TimePicker;\n"],"file":"TimePicker.js"}
|
|
1
|
+
{"version":3,"file":"TimePicker.js","names":["MAP_MERIDIEM","AM","PM","MAP_FIELD_TO_TIME","hours","minutes","nextInput","element","nextElementSibling","tagName","prevInput","previousElementSibling","intOrDefault","value","def","number","Number","parseInt","isNaN","withLeadingZero","String","length","meridiemByHours","formatHoursTo12","nHours","NaN","formatHoursTo24","meridiem","TimePickerRoot","field","event","is12Hour","asProps","time","split","timeToValue","handlers","size","disabled","valueToTime","$onValueChange","handleValueChange","_getHoursAndMinutesProps","undefined","_lastMeridiem","disablePortal","onClick","handleMeridiemClick","STimePicker","Input","styles","Children","sstyled","Component","style","defaultValue","children","Separator","React","createRef","$el","current","focus","STimePickerSeparator","Box","handlerClick","TimePicker","createComponent","Hours","Minutes","Format"],"sources":["../../src/TimePicker.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport { Box } from '@semcore/flex-box';\nimport { Hours, Minutes } from './PickerInput';\nimport Format from './PickerFormat';\n\nimport style from './style/time-picker.shadow.css';\n\nconst MAP_MERIDIEM = {\n AM: 'PM',\n PM: 'AM',\n};\nconst MAP_FIELD_TO_TIME = {\n hours: 0,\n minutes: 1,\n};\n\nexport function nextInput(element) {\n do {\n element = element.nextElementSibling;\n } while (element && element.tagName !== 'INPUT');\n return element;\n}\n\nexport function prevInput(element) {\n do {\n element = element.previousElementSibling;\n } while (element && element.tagName !== 'INPUT');\n return element;\n}\n\nexport function intOrDefault(value, def = 0) {\n const number = Number.parseInt(value);\n return Number.isNaN(number) ? def : number;\n}\n\nexport function withLeadingZero(value) {\n value = String(value);\n if (value.length === 1) return `0${value}`;\n return String(value);\n}\n\nexport function meridiemByHours(hours) {\n return hours >= 12 ? 'PM' : 'AM';\n}\n\nexport function formatHoursTo12(hours /* hours by 24 */) {\n const nHours = intOrDefault(hours, NaN); // if not (:00)\n if (Number.isNaN(nHours)) return hours;\n\n // if not (HH:00)\n if (nHours === 0) return 12; // 0 => 12 PM\n if (nHours > 12) return nHours - 12; // 22 => 12 PM\n\n return hours;\n}\n\nexport function formatHoursTo24(hours /* hours by 12 */, meridiem) {\n const nHours = intOrDefault(hours, NaN); // if not (:00)\n\n if (Number.isNaN(nHours)) return hours;\n\n if (meridiem === 'AM') {\n if (nHours === 12) return 0; // 12 AM => 0\n }\n\n if (meridiem === 'PM') {\n if (nHours < 12) return nHours + 12; // 10 PM => 22\n }\n\n return hours;\n}\n\nclass TimePickerRoot extends Component {\n static displayName = 'TimePicker';\n static style = style;\n static defaultProps = ({ is12Hour }) => ({\n defaultValue: '',\n size: 'm',\n children: (\n <>\n <TimePicker.Hours />\n <TimePicker.Separator />\n <TimePicker.Minutes />\n {is12Hour && <TimePicker.Format />}\n </>\n ),\n });\n\n _lastMeridiem = 'AM'; // default AM\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n get value() {\n const { value } = this.asProps;\n return value === null || value === undefined ? ':' : value;\n }\n\n get meridiem() {\n const { value } = this.asProps;\n const [hours = ''] = value.split(':');\n\n const nHours = intOrDefault(hours, NaN);\n\n if (!Number.isNaN(nHours)) {\n this._lastMeridiem = meridiemByHours(nHours);\n }\n\n return this._lastMeridiem;\n }\n\n valueToTime(value) {\n const { is12Hour } = this.asProps;\n let [hours = '', minutes = ''] = value.split(':');\n\n if (is12Hour) hours = formatHoursTo12(hours);\n\n hours = withLeadingZero(hours);\n minutes = withLeadingZero(minutes);\n\n return [hours, minutes];\n }\n\n timeToValue(time, meridiem) {\n const { is12Hour } = this.asProps;\n let [hours = '', minutes = ''] = time;\n\n hours = intOrDefault(hours, hours); // 03 => 3\n minutes = intOrDefault(minutes, minutes); // MM => MM\n\n if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0\n\n return `${hours}:${minutes}`;\n }\n\n handleValueChange = (value, field, event) => {\n const { is12Hour } = this.asProps;\n const { meridiem } = this;\n\n let time;\n if (field) {\n time = this.value.split(':');\n time[MAP_FIELD_TO_TIME[field]] = value;\n } else {\n time = value.split(':');\n }\n\n let [hours = '', minutes = ''] = time;\n\n if (is12Hour) hours = String(formatHoursTo12(hours));\n\n value = this.timeToValue([hours, minutes], meridiem);\n this.handlers.value(value, event);\n };\n\n handleMeridiemClick = (event) => {\n const { is12Hour } = this.asProps;\n let { value, meridiem } = this;\n let [hours = '', minutes = ''] = value.split(':');\n\n if (is12Hour) hours = String(formatHoursTo12(hours));\n\n value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);\n this.handlers.value(value, event);\n };\n\n _getHoursAndMinutesProps = () => {\n const { is12Hour, size, disabled } = this.asProps;\n const time = this.valueToTime(this.value);\n\n return {\n time,\n size,\n is12Hour,\n disabled,\n $onValueChange: this.handleValueChange,\n };\n };\n\n getHoursProps = this._getHoursAndMinutesProps;\n getMinutesProps = this._getHoursAndMinutesProps;\n\n getSeparatorProps() {\n return {\n disabled: this.asProps.disabled,\n };\n }\n\n getFormatProps() {\n const { size, disabled, disablePortal } = this.asProps;\n return {\n size,\n disabled,\n disablePortal,\n meridiem: this.meridiem,\n onClick: this.handleMeridiemClick,\n };\n }\n\n render() {\n const STimePicker = Root;\n const { styles, Children } = this.asProps;\n\n return sstyled(styles)(\n <STimePicker render={Input}>\n <Children />\n </STimePicker>,\n );\n }\n}\n\nclass Separator extends Component {\n static defaultProps = {\n children: ':',\n };\n\n $el = React.createRef();\n\n handlerClick = () => {\n if (this.$el.current) {\n prevInput(this.$el.current)?.focus();\n }\n };\n\n render() {\n const STimePickerSeparator = Root;\n return <STimePickerSeparator render={Box} ref={this.$el} onClick={this.handlerClick} />;\n }\n}\n\nconst TimePicker = createComponent(TimePickerRoot, {\n Hours,\n Minutes,\n Separator,\n Format,\n});\n\nexport default TimePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,YAAY,GAAG;EACnBC,EAAE,EAAE,IADe;EAEnBC,EAAE,EAAE;AAFe,CAArB;AAIA,IAAMC,iBAAiB,GAAG;EACxBC,KAAK,EAAE,CADiB;EAExBC,OAAO,EAAE;AAFe,CAA1B;;AAKO,SAASC,SAAT,CAAmBC,OAAnB,EAA4B;EACjC,GAAG;IACDA,OAAO,GAAGA,OAAO,CAACC,kBAAlB;EACD,CAFD,QAESD,OAAO,IAAIA,OAAO,CAACE,OAAR,KAAoB,OAFxC;;EAGA,OAAOF,OAAP;AACD;;AAEM,SAASG,SAAT,CAAmBH,OAAnB,EAA4B;EACjC,GAAG;IACDA,OAAO,GAAGA,OAAO,CAACI,sBAAlB;EACD,CAFD,QAESJ,OAAO,IAAIA,OAAO,CAACE,OAAR,KAAoB,OAFxC;;EAGA,OAAOF,OAAP;AACD;;AAEM,SAASK,YAAT,CAAsBC,KAAtB,EAAsC;EAAA,IAATC,GAAS,uEAAH,CAAG;EAC3C,IAAMC,MAAM,GAAGC,MAAM,CAACC,QAAP,CAAgBJ,KAAhB,CAAf;EACA,OAAOG,MAAM,CAACE,KAAP,CAAaH,MAAb,IAAuBD,GAAvB,GAA6BC,MAApC;AACD;;AAEM,SAASI,eAAT,CAAyBN,KAAzB,EAAgC;EACrCA,KAAK,GAAGO,MAAM,CAACP,KAAD,CAAd;EACA,IAAIA,KAAK,CAACQ,MAAN,KAAiB,CAArB,EAAwB,kBAAWR,KAAX;EACxB,OAAOO,MAAM,CAACP,KAAD,CAAb;AACD;;AAEM,SAASS,eAAT,CAAyBlB,KAAzB,EAAgC;EACrC,OAAOA,KAAK,IAAI,EAAT,GAAc,IAAd,GAAqB,IAA5B;AACD;;AAEM,SAASmB,eAAT,CAAyBnB;AAAM;AAA/B,EAAkD;EACvD,IAAMoB,MAAM,GAAGZ,YAAY,CAACR,KAAD,EAAQqB,GAAR,CAA3B,CADuD,CACd;;EACzC,IAAIT,MAAM,CAACE,KAAP,CAAaM,MAAb,CAAJ,EAA0B,OAAOpB,KAAP,CAF6B,CAIvD;;EACA,IAAIoB,MAAM,KAAK,CAAf,EAAkB,OAAO,EAAP,CALqC,CAK1B;;EAC7B,IAAIA,MAAM,GAAG,EAAb,EAAiB,OAAOA,MAAM,GAAG,EAAhB,CANsC,CAMlB;;EAErC,OAAOpB,KAAP;AACD;;AAEM,SAASsB,eAAT,CAAyBtB;AAAM;AAA/B,EAAkDuB,QAAlD,EAA4D;EACjE,IAAMH,MAAM,GAAGZ,YAAY,CAACR,KAAD,EAAQqB,GAAR,CAA3B,CADiE,CACxB;;EAEzC,IAAIT,MAAM,CAACE,KAAP,CAAaM,MAAb,CAAJ,EAA0B,OAAOpB,KAAP;;EAE1B,IAAIuB,QAAQ,KAAK,IAAjB,EAAuB;IACrB,IAAIH,MAAM,KAAK,EAAf,EAAmB,OAAO,CAAP,CADE,CACQ;EAC9B;;EAED,IAAIG,QAAQ,KAAK,IAAjB,EAAuB;IACrB,IAAIH,MAAM,GAAG,EAAb,EAAiB,OAAOA,MAAM,GAAG,EAAhB,CADI,CACgB;EACtC;;EAED,OAAOpB,KAAP;AACD;;IAEKwB,c;;;;;;;;;;;;;;;sGAgBY,I;0GAkDI,UAACf,KAAD,EAAQgB,KAAR,EAAeC,KAAf,EAAyB;MAC3C,IAAQC,QAAR,GAAqB,MAAKC,OAA1B,CAAQD,QAAR;;MACA;MAAA,IAAQJ,QAAR,yBAAQA,QAAR;;MAEA,IAAIM,IAAJ;;MACA,IAAIJ,KAAJ,EAAW;QACTI,IAAI,GAAG,MAAKpB,KAAL,CAAWqB,KAAX,CAAiB,GAAjB,CAAP;QACAD,IAAI,CAAC9B,iBAAiB,CAAC0B,KAAD,CAAlB,CAAJ,GAAiChB,KAAjC;MACD,CAHD,MAGO;QACLoB,IAAI,GAAGpB,KAAK,CAACqB,KAAN,CAAY,GAAZ,CAAP;MACD;;MAED,YAAiCD,IAAjC;MAAA;MAAA;MAAA,IAAK7B,KAAL,wBAAa,EAAb;MAAA;MAAA,IAAiBC,OAAjB,yBAA2B,EAA3B;;MAEA,IAAI0B,QAAJ,EAAc3B,KAAK,GAAGgB,MAAM,CAACG,eAAe,CAACnB,KAAD,CAAhB,CAAd;MAEdS,KAAK,GAAG,MAAKsB,WAAL,CAAiB,CAAC/B,KAAD,EAAQC,OAAR,CAAjB,EAAmCsB,QAAnC,CAAR;;MACA,MAAKS,QAAL,CAAcvB,KAAd,CAAoBA,KAApB,EAA2BiB,KAA3B;IACD,C;4GAEqB,UAACA,KAAD,EAAW;MAC/B,IAAQC,QAAR,GAAqB,MAAKC,OAA1B,CAAQD,QAAR;;MACA;MAAA,IAAMlB,KAAN,0BAAMA,KAAN;MAAA,IAAac,QAAb,0BAAaA,QAAb;;MACA,mBAAiCd,KAAK,CAACqB,KAAN,CAAY,GAAZ,CAAjC;MAAA;MAAA;MAAA,IAAK9B,KAAL,+BAAa,EAAb;MAAA;MAAA,IAAiBC,OAAjB,gCAA2B,EAA3B;;MAEA,IAAI0B,QAAJ,EAAc3B,KAAK,GAAGgB,MAAM,CAACG,eAAe,CAACnB,KAAD,CAAhB,CAAd;MAEdS,KAAK,GAAG,MAAKsB,WAAL,CAAiB,CAAC/B,KAAD,EAAQC,OAAR,CAAjB,EAAmCL,YAAY,CAAC2B,QAAD,CAA/C,CAAR;;MACA,MAAKS,QAAL,CAAcvB,KAAd,CAAoBA,KAApB,EAA2BiB,KAA3B;IACD,C;iHAE0B,YAAM;MAC/B,oBAAqC,MAAKE,OAA1C;MAAA,IAAQD,QAAR,iBAAQA,QAAR;MAAA,IAAkBM,IAAlB,iBAAkBA,IAAlB;MAAA,IAAwBC,QAAxB,iBAAwBA,QAAxB;;MACA,IAAML,IAAI,GAAG,MAAKM,WAAL,CAAiB,MAAK1B,KAAtB,CAAb;;MAEA,OAAO;QACLoB,IAAI,EAAJA,IADK;QAELI,IAAI,EAAJA,IAFK;QAGLN,QAAQ,EAARA,QAHK;QAILO,QAAQ,EAARA,QAJK;QAKLE,cAAc,EAAE,MAAKC;MALhB,CAAP;IAOD,C;sGAEe,MAAKC,wB;wGACH,MAAKA,wB;;;;;;WA/FD;IAEtB,6BAAoB;MAClB,OAAO;QACL7B,KAAK,EAAE;MADF,CAAP;IAGD;;;SAED,eAAY;MACV,IAAQA,KAAR,GAAkB,KAAKmB,OAAvB,CAAQnB,KAAR;MACA,OAAOA,KAAK,KAAK,IAAV,IAAkBA,KAAK,KAAK8B,SAA5B,GAAwC,GAAxC,GAA8C9B,KAArD;IACD;;;SAED,eAAe;MACb,IAAQA,KAAR,GAAkB,KAAKmB,OAAvB,CAAQnB,KAAR;;MACA,oBAAqBA,KAAK,CAACqB,KAAN,CAAY,GAAZ,CAArB;MAAA;MAAA;MAAA,IAAO9B,KAAP,+BAAe,EAAf;;MAEA,IAAMoB,MAAM,GAAGZ,YAAY,CAACR,KAAD,EAAQqB,GAAR,CAA3B;;MAEA,IAAI,CAACT,MAAM,CAACE,KAAP,CAAaM,MAAb,CAAL,EAA2B;QACzB,KAAKoB,aAAL,GAAqBtB,eAAe,CAACE,MAAD,CAApC;MACD;;MAED,OAAO,KAAKoB,aAAZ;IACD;;;WAED,qBAAY/B,KAAZ,EAAmB;MACjB,IAAQkB,QAAR,GAAqB,KAAKC,OAA1B,CAAQD,QAAR;;MACA,oBAAiClB,KAAK,CAACqB,KAAN,CAAY,GAAZ,CAAjC;MAAA;MAAA;MAAA,IAAK9B,KAAL,+BAAa,EAAb;MAAA;MAAA,IAAiBC,OAAjB,gCAA2B,EAA3B;;MAEA,IAAI0B,QAAJ,EAAc3B,KAAK,GAAGmB,eAAe,CAACnB,KAAD,CAAvB;MAEdA,KAAK,GAAGe,eAAe,CAACf,KAAD,CAAvB;MACAC,OAAO,GAAGc,eAAe,CAACd,OAAD,CAAzB;MAEA,OAAO,CAACD,KAAD,EAAQC,OAAR,CAAP;IACD;;;WAED,qBAAY4B,IAAZ,EAAkBN,QAAlB,EAA4B;MAC1B,IAAQI,QAAR,GAAqB,KAAKC,OAA1B,CAAQD,QAAR;;MACA,6CAAiCE,IAAjC;MAAA;MAAA,IAAK7B,KAAL,wBAAa,EAAb;MAAA;MAAA,IAAiBC,OAAjB,yBAA2B,EAA3B;;MAEAD,KAAK,GAAGQ,YAAY,CAACR,KAAD,EAAQA,KAAR,CAApB,CAJ0B,CAIU;;MACpCC,OAAO,GAAGO,YAAY,CAACP,OAAD,EAAUA,OAAV,CAAtB,CAL0B,CAKgB;;MAE1C,IAAI0B,QAAJ,EAAc3B,KAAK,GAAGsB,eAAe,CAACtB,KAAD,EAAQuB,QAAR,CAAvB,CAPY,CAO8B;;MAExD,iBAAUvB,KAAV,cAAmBC,OAAnB;IACD;;;WAiDD,6BAAoB;MAClB,OAAO;QACLiC,QAAQ,EAAE,KAAKN,OAAL,CAAaM;MADlB,CAAP;IAGD;;;WAED,0BAAiB;MACf,qBAA0C,KAAKN,OAA/C;MAAA,IAAQK,IAAR,kBAAQA,IAAR;MAAA,IAAcC,QAAd,kBAAcA,QAAd;MAAA,IAAwBO,aAAxB,kBAAwBA,aAAxB;MACA,OAAO;QACLR,IAAI,EAAJA,IADK;QAELC,QAAQ,EAARA,QAFK;QAGLO,aAAa,EAAbA,aAHK;QAILlB,QAAQ,EAAE,KAAKA,QAJV;QAKLmB,OAAO,EAAE,KAAKC;MALT,CAAP;IAOD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMC,WAAW,GAIMC,iBAJvB;MACA,qBAA6B,KAAKjB,OAAlC;MAAA,IAAQkB,MAAR,kBAAQA,MAAR;MAAA,IAAgBC,QAAhB,kBAAgBA,QAAhB;MAEA,eAAO,IAAAC,aAAA,EAAQF,MAAR,CAAP,eACE,gCAAC,WAAD,6FACE,gCAAC,QAAD,2BADF,CADF;IAKD;;;EA3I0BG,e;;iCAAvBzB,c,iBACiB,Y;iCADjBA,c,WAEW0B,K;iCAFX1B,c,kBAGkB;EAAA,IAAGG,QAAH,SAAGA,QAAH;EAAA,OAAmB;IACvCwB,YAAY,EAAE,EADyB;IAEvClB,IAAI,EAAE,GAFiC;IAGvCmB,QAAQ,eACN,+EACE,gCAAC,UAAD,CAAY,KAAZ,OADF,eAEE,gCAAC,UAAD,CAAY,SAAZ,OAFF,eAGE,gCAAC,UAAD,CAAY,OAAZ,OAHF,EAIGzB,QAAQ,iBAAI,gCAAC,UAAD,CAAY,MAAZ,OAJf;EAJqC,CAAnB;AAAA,C;;IA2IlB0B,S;;;;;;;;;;;;;;;0GAKEC,iBAAA,CAAMC,SAAN,E;sGAES,YAAM;MACnB,IAAI,OAAKC,GAAL,CAASC,OAAb,EAAsB;QAAA;;QACpB,cAAAnD,SAAS,CAAC,OAAKkD,GAAL,CAASC,OAAV,CAAT,0DAA6BC,KAA7B;MACD;IACF,C;;;;;;WAED,kBAAS;MAAA;MACP,IAAMC,oBAAoB,GACWC,YADrC;MACA,oBAAO,gCAAC,oBAAD;QAAA,OAAwC,KAAKJ,GAA7C;QAAA,WAA2D,KAAKK;MAAhE,UAAP;IACD;;;EAhBqBZ,e;;iCAAlBI,S,kBACkB;EACpBD,QAAQ,EAAE;AADU,C;AAkBxB,IAAMU,UAAU,GAAG,IAAAC,gBAAA,EAAgBvC,cAAhB,EAAgC;EACjDwC,KAAK,EAALA,kBADiD;EAEjDC,OAAO,EAAPA,oBAFiD;EAGjDZ,SAAS,EAATA,SAHiD;EAIjDa,MAAM,EAANA;AAJiD,CAAhC,CAAnB;eAOeJ,U"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TimePicker';\nexport * from './TimePicker';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"PickerFormat.js","names":["React","Component","sstyled","Root","Box","keyboardFocusEnhance","TimePickerFormat","SPickerFormat","asProps","Children","meridiem","styles","SPickerFormatText","origin"],"sources":["../../src/PickerFormat.jsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nclass TimePickerFormat extends Component {\n static enhance = [keyboardFocusEnhance()];\n render() {\n const SPickerFormat = Root;\n const { Children, meridiem, styles } = this.asProps;\n const SPickerFormatText = 'span';\n\n return sstyled(styles)(\n <SPickerFormat render={Box} type=\"button\" tag=\"button\">\n {Children.origin ? <Children /> : <SPickerFormatText>{meridiem}</SPickerFormatText>}\n </SPickerFormat>,\n );\n }\n}\n\nexport default TimePickerFormat;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,OAApB,EAA6BC,IAA7B,QAAyC,eAAzC;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;IAEMC,gB;;;;;;;;;;;;;WAEJ,kBAAS;MAAA;MAAA;;MACP,IAAMC,aAAa,GAKMH,GALzB;MACA,oBAAuC,KAAKI,OAA5C;MAAA,IAAQC,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,QAAlB,iBAAkBA,QAAlB;MAAA,IAA4BC,MAA5B,iBAA4BA,MAA5B;MACA,IAAMC,iBAAiB,GAAG,MAA1B;MAEA,eAAOV,OAAO,CAACS,MAAD,CAAd,eACE,oBAAC,aAAD;QAAA,QAAiC,QAAjC;QAAA,OAA8C;MAA9C,YACGF,QAAQ,CAACI,MAAT,gBAAkB,oBAAC,QAAD,2BAAlB,gBAAiC,oBAAC,iBAAD,qCAAoBH,QAApB,CADpC,CADF;IAKD;;;;EAZ4BT,S;;gBAAzBK,gB,aACa,CAACD,oBAAoB,EAArB,C;;AAcnB,eAAeC,gBAAf"}
|
package/lib/es6/PickerInput.js
CHANGED
|
@@ -64,7 +64,7 @@ var ItemPicker = /*#__PURE__*/function (_Component) {
|
|
|
64
64
|
|
|
65
65
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
66
66
|
|
|
67
|
-
_defineProperty(_assertThisInitialized(_this), "$input", React.createRef());
|
|
67
|
+
_defineProperty(_assertThisInitialized(_this), "$input", /*#__PURE__*/React.createRef());
|
|
68
68
|
|
|
69
69
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
70
70
|
dirtyValue: undefined,
|
|
@@ -97,7 +97,9 @@ var ItemPicker = /*#__PURE__*/function (_Component) {
|
|
|
97
97
|
});
|
|
98
98
|
|
|
99
99
|
_defineProperty(_assertThisInitialized(_this), "handleFocus", function () {
|
|
100
|
-
_this
|
|
100
|
+
var _this$$input;
|
|
101
|
+
|
|
102
|
+
(_this$$input = _this.$input) === null || _this$$input === void 0 ? void 0 : _this$$input.current.select();
|
|
101
103
|
});
|
|
102
104
|
|
|
103
105
|
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function () {});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/PickerInput.jsx"],"names":["React","Input","Select","intOrDefault","nextInput","prevInput","withLeadingZero","Component","sstyled","Root","callAllEventHandlers","MAP_FIELD_TO_TIME","hours","minutes","MAP_SIZE_SELECT","m","l","getOptions","min","max","step","length","Number","toFixed","options","Array","fill","numValue","map","i","index","value","String","ItemPicker","createRef","dirtyValue","undefined","visible","minMax","Math","e","stopPropagation","numberValue","NaN","isNaN","setState","slice","submitChanges","$input","current","select","dispatchOnChange","event","asProps","$onValueChange","field","state","parseValueWithMinMax","SPickerInput","Trigger","styles","onSelect","time","size","disabled","onVisibleChange","other","timeValue","handleSelect","handleVisibleChange","Value","handleChange","handleBlur","handleFocus","handleKeyDown","placeholder","Hours","currentTarget","keyCode","selectionStart","selectionEnd","preventDefault","is12Hour","focus","prevProps","prevState","Minutes","prevFocus"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Input from '@semcore/input';\nimport Select from '@semcore/select';\nimport { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst MAP_FIELD_TO_TIME = {\n hours: 0,\n minutes: 1,\n};\n\nconst MAP_SIZE_SELECT = {\n m: 'm',\n l: 'l',\n};\n\nfunction getOptions(min, max, step = 1) {\n const length = Number(((max + 1 - min) / step).toFixed(0));\n const options = Array(length).fill('');\n let numValue = min;\n return options.map((i, index) => {\n numValue = index === 0 ? numValue : numValue + step;\n const value = withLeadingZero(String(numValue));\n return (\n <Select.Option value={value} key={value}>\n {value}\n </Select.Option>\n );\n });\n}\n\nclass ItemPicker extends Component {\n static defaultProps = {\n placeholder: '00',\n };\n\n $input = React.createRef();\n\n minMax() {\n return [];\n }\n\n state = {\n dirtyValue: undefined,\n visible: false,\n };\n\n parseValueWithMinMax = (value) => {\n const [min, max] = this.minMax();\n return String(Math.max(min, Math.min(max, value)));\n };\n\n dispatchOnChange(value, event) {\n this.setState({ dirtyValue: undefined });\n this.asProps.$onValueChange(value, this.field, event);\n }\n\n submitChanges(event) {\n let { dirtyValue } = this.state;\n if (dirtyValue !== undefined) {\n // if changes value\n if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not \"\"\n this.dispatchOnChange(dirtyValue, event);\n }\n }\n\n handleChange = (value, e) => {\n /* hide props for bubbling events */\n e.stopPropagation();\n const numberValue = intOrDefault(Number(value), NaN);\n\n if (!Number.isNaN(numberValue)) {\n this.setState({ dirtyValue: value.slice(-2) });\n }\n };\n\n handleBlur = (e) => this.submitChanges(e);\n\n handleFocus = () => {\n this.$input?.current.select();\n };\n\n /* rewrite method */\n handleKeyDown = () => {};\n\n handleSelect = (value, e) => {\n this.dispatchOnChange(value, e);\n };\n\n handleVisibleChange = (visible) => this.setState({ visible });\n\n render() {\n const SPickerInput = Root;\n const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =\n this.asProps;\n const { dirtyValue, visible } = this.state;\n const timeValue = time[MAP_FIELD_TO_TIME[this.field]];\n const value = dirtyValue === undefined ? timeValue : dirtyValue;\n const [min, max] = this.minMax();\n\n return sstyled(styles)(\n <Select\n {...other}\n interaction=\"focus\"\n size={size ? MAP_SIZE_SELECT[size] : false}\n onChange={callAllEventHandlers(onSelect, this.handleSelect)}\n onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}\n visible={visible}\n value={timeValue}\n >\n <SPickerInput\n interaction=\"focus\"\n render={Select.Trigger}\n tag={Input.Value}\n ref={this.$input}\n size={size}\n disabled={disabled}\n neighborLocation={false}\n value={value}\n aria-label={`Search ${this.field}`}\n onChange={this.handleChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>\n </Select>,\n );\n }\n}\n\nclass Hours extends ItemPicker {\n field = 'hours';\n\n minMax() {\n const { is12Hour } = this.asProps;\n if (is12Hour) {\n return [1, 12];\n } else {\n return [0, 23];\n }\n }\n\n nextInput() {\n if (this.$input.current) {\n const $input = nextInput(this.$input.current);\n if ($input) {\n this.setState({ visible: false });\n $input.focus();\n }\n }\n }\n\n handleKeyDown = (e) => {\n const { currentTarget } = e;\n if (e.keyCode === 13) this.submitChanges(e);\n if (e.keyCode === 39) {\n if (\n currentTarget.selectionStart >= currentTarget.value.length &&\n currentTarget.selectionStart === currentTarget.selectionEnd\n ) {\n e.preventDefault();\n this.nextInput();\n }\n }\n };\n\n componentDidUpdate(prevProps, prevState) {\n const { dirtyValue } = this.state;\n if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;\n\n if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {\n this.nextInput();\n }\n }\n}\n\nclass Minutes extends ItemPicker {\n field = 'minutes';\n\n minMax() {\n return [0, 59];\n }\n\n prevFocus() {\n if (this.$input.current) {\n const $input = prevInput(this.$input.current);\n if ($input) {\n this.setState({ visible: false });\n $input.focus();\n }\n }\n }\n\n handleKeyDown = (e) => {\n const { currentTarget } = e;\n if (e.keyCode === 13) this.submitChanges(e);\n if (e.keyCode === 37) {\n if (\n currentTarget.selectionStart <= 0 &&\n currentTarget.selectionStart === currentTarget.selectionEnd\n ) {\n e.preventDefault();\n this.prevFocus();\n }\n }\n if (e.keyCode === 8) {\n if (currentTarget.value.length === 0) {\n e.preventDefault();\n this.prevFocus();\n }\n }\n };\n}\n\nexport { Hours, Minutes };\n"],"file":"PickerInput.js"}
|
|
1
|
+
{"version":3,"file":"PickerInput.js","names":["React","Input","Select","intOrDefault","nextInput","prevInput","withLeadingZero","Component","sstyled","Root","callAllEventHandlers","MAP_FIELD_TO_TIME","hours","minutes","MAP_SIZE_SELECT","m","l","getOptions","min","max","step","length","Number","toFixed","options","Array","fill","numValue","map","i","index","value","String","ItemPicker","createRef","dirtyValue","undefined","visible","minMax","Math","e","stopPropagation","numberValue","NaN","isNaN","setState","slice","submitChanges","$input","current","select","dispatchOnChange","event","asProps","$onValueChange","field","state","parseValueWithMinMax","SPickerInput","Trigger","styles","onSelect","time","size","disabled","onVisibleChange","other","timeValue","handleSelect","handleVisibleChange","Value","handleChange","handleBlur","handleFocus","handleKeyDown","placeholder","Hours","currentTarget","keyCode","selectionStart","selectionEnd","preventDefault","is12Hour","focus","prevProps","prevState","Minutes","prevFocus"],"sources":["../../src/PickerInput.jsx"],"sourcesContent":["import React from 'react';\nimport Input from '@semcore/input';\nimport Select from '@semcore/select';\nimport { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst MAP_FIELD_TO_TIME = {\n hours: 0,\n minutes: 1,\n};\n\nconst MAP_SIZE_SELECT = {\n m: 'm',\n l: 'l',\n};\n\nfunction getOptions(min, max, step = 1) {\n const length = Number(((max + 1 - min) / step).toFixed(0));\n const options = Array(length).fill('');\n let numValue = min;\n return options.map((i, index) => {\n numValue = index === 0 ? numValue : numValue + step;\n const value = withLeadingZero(String(numValue));\n return (\n <Select.Option value={value} key={value}>\n {value}\n </Select.Option>\n );\n });\n}\n\nclass ItemPicker extends Component {\n static defaultProps = {\n placeholder: '00',\n };\n\n $input = React.createRef();\n\n minMax() {\n return [];\n }\n\n state = {\n dirtyValue: undefined,\n visible: false,\n };\n\n parseValueWithMinMax = (value) => {\n const [min, max] = this.minMax();\n return String(Math.max(min, Math.min(max, value)));\n };\n\n dispatchOnChange(value, event) {\n this.setState({ dirtyValue: undefined });\n this.asProps.$onValueChange(value, this.field, event);\n }\n\n submitChanges(event) {\n let { dirtyValue } = this.state;\n if (dirtyValue !== undefined) {\n // if changes value\n if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not \"\"\n this.dispatchOnChange(dirtyValue, event);\n }\n }\n\n handleChange = (value, e) => {\n /* hide props for bubbling events */\n e.stopPropagation();\n const numberValue = intOrDefault(Number(value), NaN);\n\n if (!Number.isNaN(numberValue)) {\n this.setState({ dirtyValue: value.slice(-2) });\n }\n };\n\n handleBlur = (e) => this.submitChanges(e);\n\n handleFocus = () => {\n this.$input?.current.select();\n };\n\n /* rewrite method */\n handleKeyDown = () => {};\n\n handleSelect = (value, e) => {\n this.dispatchOnChange(value, e);\n };\n\n handleVisibleChange = (visible) => this.setState({ visible });\n\n render() {\n const SPickerInput = Root;\n const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =\n this.asProps;\n const { dirtyValue, visible } = this.state;\n const timeValue = time[MAP_FIELD_TO_TIME[this.field]];\n const value = dirtyValue === undefined ? timeValue : dirtyValue;\n const [min, max] = this.minMax();\n\n return sstyled(styles)(\n <Select\n {...other}\n interaction=\"focus\"\n size={size ? MAP_SIZE_SELECT[size] : false}\n onChange={callAllEventHandlers(onSelect, this.handleSelect)}\n onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}\n visible={visible}\n value={timeValue}\n >\n <SPickerInput\n interaction=\"focus\"\n render={Select.Trigger}\n tag={Input.Value}\n ref={this.$input}\n size={size}\n disabled={disabled}\n neighborLocation={false}\n value={value}\n aria-label={`Search ${this.field}`}\n onChange={this.handleChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>\n </Select>,\n );\n }\n}\n\nclass Hours extends ItemPicker {\n field = 'hours';\n\n minMax() {\n const { is12Hour } = this.asProps;\n if (is12Hour) {\n return [1, 12];\n } else {\n return [0, 23];\n }\n }\n\n nextInput() {\n if (this.$input.current) {\n const $input = nextInput(this.$input.current);\n if ($input) {\n this.setState({ visible: false });\n $input.focus();\n }\n }\n }\n\n handleKeyDown = (e) => {\n const { currentTarget } = e;\n if (e.keyCode === 13) this.submitChanges(e);\n if (e.keyCode === 39) {\n if (\n currentTarget.selectionStart >= currentTarget.value.length &&\n currentTarget.selectionStart === currentTarget.selectionEnd\n ) {\n e.preventDefault();\n this.nextInput();\n }\n }\n };\n\n componentDidUpdate(prevProps, prevState) {\n const { dirtyValue } = this.state;\n if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;\n\n if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {\n this.nextInput();\n }\n }\n}\n\nclass Minutes extends ItemPicker {\n field = 'minutes';\n\n minMax() {\n return [0, 59];\n }\n\n prevFocus() {\n if (this.$input.current) {\n const $input = prevInput(this.$input.current);\n if ($input) {\n this.setState({ visible: false });\n $input.focus();\n }\n }\n }\n\n handleKeyDown = (e) => {\n const { currentTarget } = e;\n if (e.keyCode === 13) this.submitChanges(e);\n if (e.keyCode === 37) {\n if (\n currentTarget.selectionStart <= 0 &&\n currentTarget.selectionStart === currentTarget.selectionEnd\n ) {\n e.preventDefault();\n this.prevFocus();\n }\n }\n if (e.keyCode === 8) {\n if (currentTarget.value.length === 0) {\n e.preventDefault();\n this.prevFocus();\n }\n }\n };\n}\n\nexport { Hours, Minutes };\n"],"mappings":"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"}
|
package/lib/es6/TimePicker.js
CHANGED
|
@@ -30,22 +30,22 @@ var style = (
|
|
|
30
30
|
/*__reshadow_css_start__*/
|
|
31
31
|
_sstyled.insert(
|
|
32
32
|
/*__inner_css_start__*/
|
|
33
|
-
".
|
|
33
|
+
".___STimePicker_a7ect_gg_{position:relative;width:auto}.___STimePicker_a7ect_gg_.__disabled_a7ect_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_a7ect_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_a7ect_gg_.__placeholder_a7ect_gg_{text-overflow:clip}.___SPickerInput_a7ect_gg_._size_m_a7ect_gg_{width:19px}.___SPickerInput_a7ect_gg_._size_l_a7ect_gg_{width:21px}.___SPickerFormat_a7ect_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_a7ect_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_a7ect_gg_:active,.___SPickerFormat_a7ect_gg_.__active_a7ect_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_a7ect_gg_._size_m_a7ect_gg_{height:28px;font-size:14px;margin:0 -1px 0 0}.___SPickerFormat_a7ect_gg_._size_m_a7ect_gg_ .___SPickerFormatText_a7ect_gg_{margin:0 8px}.___SPickerFormat_a7ect_gg_._size_l_a7ect_gg_{height:40px;font-size:16px;margin:0 -4px 0 0}.___SPickerFormat_a7ect_gg_._size_l_a7ect_gg_ .___SPickerFormatText_a7ect_gg_{margin:0 12px}.___SPickerFormat_a7ect_gg_.__disabled_a7ect_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_a7ect_gg_.__keyboardFocused_a7ect_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STimePickerSeparator_a7ect_gg_.__disabled_a7ect_gg_{opacity:0.3;pointer-events:none}"
|
|
34
34
|
/*__inner_css_end__*/
|
|
35
|
-
, "
|
|
35
|
+
, "a7ect_gg_")
|
|
36
36
|
/*__reshadow_css_end__*/
|
|
37
37
|
, {
|
|
38
|
-
"__STimePicker": "
|
|
39
|
-
"_disabled": "
|
|
40
|
-
"__SPickerInput": "
|
|
41
|
-
"_placeholder": "
|
|
42
|
-
"_size_m": "
|
|
43
|
-
"_size_l": "
|
|
44
|
-
"__SPickerFormat": "
|
|
45
|
-
"_active": "
|
|
46
|
-
"__SPickerFormatText": "
|
|
47
|
-
"_keyboardFocused": "
|
|
48
|
-
"__STimePickerSeparator": "
|
|
38
|
+
"__STimePicker": "___STimePicker_a7ect_gg_",
|
|
39
|
+
"_disabled": "__disabled_a7ect_gg_",
|
|
40
|
+
"__SPickerInput": "___SPickerInput_a7ect_gg_",
|
|
41
|
+
"_placeholder": "__placeholder_a7ect_gg_",
|
|
42
|
+
"_size_m": "_size_m_a7ect_gg_",
|
|
43
|
+
"_size_l": "_size_l_a7ect_gg_",
|
|
44
|
+
"__SPickerFormat": "___SPickerFormat_a7ect_gg_",
|
|
45
|
+
"_active": "__active_a7ect_gg_",
|
|
46
|
+
"__SPickerFormatText": "___SPickerFormatText_a7ect_gg_",
|
|
47
|
+
"_keyboardFocused": "__keyboardFocused_a7ect_gg_",
|
|
48
|
+
"__STimePickerSeparator": "___STimePickerSeparator_a7ect_gg_"
|
|
49
49
|
});
|
|
50
50
|
var MAP_MERIDIEM = {
|
|
51
51
|
AM: 'PM',
|
|
@@ -339,11 +339,13 @@ var Separator = /*#__PURE__*/function (_Component2) {
|
|
|
339
339
|
|
|
340
340
|
_this2 = _super2.call.apply(_super2, [this].concat(args));
|
|
341
341
|
|
|
342
|
-
_defineProperty(_assertThisInitialized(_this2), "$el", React.createRef());
|
|
342
|
+
_defineProperty(_assertThisInitialized(_this2), "$el", /*#__PURE__*/React.createRef());
|
|
343
343
|
|
|
344
344
|
_defineProperty(_assertThisInitialized(_this2), "handlerClick", function () {
|
|
345
345
|
if (_this2.$el.current) {
|
|
346
|
-
|
|
346
|
+
var _prevInput;
|
|
347
|
+
|
|
348
|
+
(_prevInput = prevInput(_this2.$el.current)) === null || _prevInput === void 0 ? void 0 : _prevInput.focus();
|
|
347
349
|
}
|
|
348
350
|
});
|
|
349
351
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TimePicker.jsx"],"names":["React","createComponent","Component","sstyled","Root","Input","Box","Hours","Minutes","Format","MAP_MERIDIEM","AM","PM","MAP_FIELD_TO_TIME","hours","minutes","nextInput","element","nextElementSibling","tagName","prevInput","previousElementSibling","intOrDefault","value","def","number","Number","parseInt","isNaN","withLeadingZero","String","length","meridiemByHours","formatHoursTo12","nHours","NaN","formatHoursTo24","meridiem","TimePickerRoot","field","event","is12Hour","asProps","time","split","timeToValue","handlers","size","disabled","valueToTime","$onValueChange","handleValueChange","_getHoursAndMinutesProps","undefined","_lastMeridiem","disablePortal","onClick","handleMeridiemClick","STimePicker","styles","Children","style","defaultValue","children","Separator","createRef","$el","current","focus","STimePickerSeparator","handlerClick","TimePicker"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport { Box } from '@semcore/flex-box';\nimport { Hours, Minutes } from './PickerInput';\nimport Format from './PickerFormat';\n\nimport style from './style/time-picker.shadow.css';\n\nconst MAP_MERIDIEM = {\n AM: 'PM',\n PM: 'AM',\n};\nconst MAP_FIELD_TO_TIME = {\n hours: 0,\n minutes: 1,\n};\n\nexport function nextInput(element) {\n do {\n element = element.nextElementSibling;\n } while (element && element.tagName !== 'INPUT');\n return element;\n}\n\nexport function prevInput(element) {\n do {\n element = element.previousElementSibling;\n } while (element && element.tagName !== 'INPUT');\n return element;\n}\n\nexport function intOrDefault(value, def = 0) {\n const number = Number.parseInt(value);\n return Number.isNaN(number) ? def : number;\n}\n\nexport function withLeadingZero(value) {\n value = String(value);\n if (value.length === 1) return `0${value}`;\n return String(value);\n}\n\nexport function meridiemByHours(hours) {\n return hours >= 12 ? 'PM' : 'AM';\n}\n\nexport function formatHoursTo12(hours /* hours by 24 */) {\n const nHours = intOrDefault(hours, NaN); // if not (:00)\n if (Number.isNaN(nHours)) return hours;\n\n // if not (HH:00)\n if (nHours === 0) return 12; // 0 => 12 PM\n if (nHours > 12) return nHours - 12; // 22 => 12 PM\n\n return hours;\n}\n\nexport function formatHoursTo24(hours /* hours by 12 */, meridiem) {\n const nHours = intOrDefault(hours, NaN); // if not (:00)\n\n if (Number.isNaN(nHours)) return hours;\n\n if (meridiem === 'AM') {\n if (nHours === 12) return 0; // 12 AM => 0\n }\n\n if (meridiem === 'PM') {\n if (nHours < 12) return nHours + 12; // 10 PM => 22\n }\n\n return hours;\n}\n\nclass TimePickerRoot extends Component {\n static displayName = 'TimePicker';\n static style = style;\n static defaultProps = ({ is12Hour }) => ({\n defaultValue: '',\n size: 'm',\n children: (\n <>\n <TimePicker.Hours />\n <TimePicker.Separator />\n <TimePicker.Minutes />\n {is12Hour && <TimePicker.Format />}\n </>\n ),\n });\n\n _lastMeridiem = 'AM'; // default AM\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n get value() {\n const { value } = this.asProps;\n return value === null || value === undefined ? ':' : value;\n }\n\n get meridiem() {\n const { value } = this.asProps;\n const [hours = ''] = value.split(':');\n\n const nHours = intOrDefault(hours, NaN);\n\n if (!Number.isNaN(nHours)) {\n this._lastMeridiem = meridiemByHours(nHours);\n }\n\n return this._lastMeridiem;\n }\n\n valueToTime(value) {\n const { is12Hour } = this.asProps;\n let [hours = '', minutes = ''] = value.split(':');\n\n if (is12Hour) hours = formatHoursTo12(hours);\n\n hours = withLeadingZero(hours);\n minutes = withLeadingZero(minutes);\n\n return [hours, minutes];\n }\n\n timeToValue(time, meridiem) {\n const { is12Hour } = this.asProps;\n let [hours = '', minutes = ''] = time;\n\n hours = intOrDefault(hours, hours); // 03 => 3\n minutes = intOrDefault(minutes, minutes); // MM => MM\n\n if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0\n\n return `${hours}:${minutes}`;\n }\n\n handleValueChange = (value, field, event) => {\n const { is12Hour } = this.asProps;\n const { meridiem } = this;\n\n let time;\n if (field) {\n time = this.value.split(':');\n time[MAP_FIELD_TO_TIME[field]] = value;\n } else {\n time = value.split(':');\n }\n\n let [hours = '', minutes = ''] = time;\n\n if (is12Hour) hours = String(formatHoursTo12(hours));\n\n value = this.timeToValue([hours, minutes], meridiem);\n this.handlers.value(value, event);\n };\n\n handleMeridiemClick = (event) => {\n const { is12Hour } = this.asProps;\n let { value, meridiem } = this;\n let [hours = '', minutes = ''] = value.split(':');\n\n if (is12Hour) hours = String(formatHoursTo12(hours));\n\n value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);\n this.handlers.value(value, event);\n };\n\n _getHoursAndMinutesProps = () => {\n const { is12Hour, size, disabled } = this.asProps;\n const time = this.valueToTime(this.value);\n\n return {\n time,\n size,\n is12Hour,\n disabled,\n $onValueChange: this.handleValueChange,\n };\n };\n\n getHoursProps = this._getHoursAndMinutesProps;\n getMinutesProps = this._getHoursAndMinutesProps;\n\n getSeparatorProps() {\n return {\n disabled: this.asProps.disabled,\n };\n }\n\n getFormatProps() {\n const { size, disabled, disablePortal } = this.asProps;\n return {\n size,\n disabled,\n disablePortal,\n meridiem: this.meridiem,\n onClick: this.handleMeridiemClick,\n };\n }\n\n render() {\n const STimePicker = Root;\n const { styles, Children } = this.asProps;\n\n return sstyled(styles)(\n <STimePicker render={Input}>\n <Children />\n </STimePicker>,\n );\n }\n}\n\nclass Separator extends Component {\n static defaultProps = {\n children: ':',\n };\n\n $el = React.createRef();\n\n handlerClick = () => {\n if (this.$el.current) {\n prevInput(this.$el.current)?.focus();\n }\n };\n\n render() {\n const STimePickerSeparator = Root;\n return <STimePickerSeparator render={Box} ref={this.$el} onClick={this.handlerClick} />;\n }\n}\n\nconst TimePicker = createComponent(TimePickerRoot, {\n Hours,\n Minutes,\n Separator,\n Format,\n});\n\nexport default TimePicker;\n"],"file":"TimePicker.js"}
|
|
1
|
+
{"version":3,"file":"TimePicker.js","names":["React","createComponent","Component","sstyled","Root","Input","Box","Hours","Minutes","Format","MAP_MERIDIEM","AM","PM","MAP_FIELD_TO_TIME","hours","minutes","nextInput","element","nextElementSibling","tagName","prevInput","previousElementSibling","intOrDefault","value","def","number","Number","parseInt","isNaN","withLeadingZero","String","length","meridiemByHours","formatHoursTo12","nHours","NaN","formatHoursTo24","meridiem","TimePickerRoot","field","event","is12Hour","asProps","time","split","timeToValue","handlers","size","disabled","valueToTime","$onValueChange","handleValueChange","_getHoursAndMinutesProps","undefined","_lastMeridiem","disablePortal","onClick","handleMeridiemClick","STimePicker","styles","Children","style","defaultValue","children","Separator","createRef","$el","current","focus","STimePickerSeparator","handlerClick","TimePicker"],"sources":["../../src/TimePicker.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport { Box } from '@semcore/flex-box';\nimport { Hours, Minutes } from './PickerInput';\nimport Format from './PickerFormat';\n\nimport style from './style/time-picker.shadow.css';\n\nconst MAP_MERIDIEM = {\n AM: 'PM',\n PM: 'AM',\n};\nconst MAP_FIELD_TO_TIME = {\n hours: 0,\n minutes: 1,\n};\n\nexport function nextInput(element) {\n do {\n element = element.nextElementSibling;\n } while (element && element.tagName !== 'INPUT');\n return element;\n}\n\nexport function prevInput(element) {\n do {\n element = element.previousElementSibling;\n } while (element && element.tagName !== 'INPUT');\n return element;\n}\n\nexport function intOrDefault(value, def = 0) {\n const number = Number.parseInt(value);\n return Number.isNaN(number) ? def : number;\n}\n\nexport function withLeadingZero(value) {\n value = String(value);\n if (value.length === 1) return `0${value}`;\n return String(value);\n}\n\nexport function meridiemByHours(hours) {\n return hours >= 12 ? 'PM' : 'AM';\n}\n\nexport function formatHoursTo12(hours /* hours by 24 */) {\n const nHours = intOrDefault(hours, NaN); // if not (:00)\n if (Number.isNaN(nHours)) return hours;\n\n // if not (HH:00)\n if (nHours === 0) return 12; // 0 => 12 PM\n if (nHours > 12) return nHours - 12; // 22 => 12 PM\n\n return hours;\n}\n\nexport function formatHoursTo24(hours /* hours by 12 */, meridiem) {\n const nHours = intOrDefault(hours, NaN); // if not (:00)\n\n if (Number.isNaN(nHours)) return hours;\n\n if (meridiem === 'AM') {\n if (nHours === 12) return 0; // 12 AM => 0\n }\n\n if (meridiem === 'PM') {\n if (nHours < 12) return nHours + 12; // 10 PM => 22\n }\n\n return hours;\n}\n\nclass TimePickerRoot extends Component {\n static displayName = 'TimePicker';\n static style = style;\n static defaultProps = ({ is12Hour }) => ({\n defaultValue: '',\n size: 'm',\n children: (\n <>\n <TimePicker.Hours />\n <TimePicker.Separator />\n <TimePicker.Minutes />\n {is12Hour && <TimePicker.Format />}\n </>\n ),\n });\n\n _lastMeridiem = 'AM'; // default AM\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n get value() {\n const { value } = this.asProps;\n return value === null || value === undefined ? ':' : value;\n }\n\n get meridiem() {\n const { value } = this.asProps;\n const [hours = ''] = value.split(':');\n\n const nHours = intOrDefault(hours, NaN);\n\n if (!Number.isNaN(nHours)) {\n this._lastMeridiem = meridiemByHours(nHours);\n }\n\n return this._lastMeridiem;\n }\n\n valueToTime(value) {\n const { is12Hour } = this.asProps;\n let [hours = '', minutes = ''] = value.split(':');\n\n if (is12Hour) hours = formatHoursTo12(hours);\n\n hours = withLeadingZero(hours);\n minutes = withLeadingZero(minutes);\n\n return [hours, minutes];\n }\n\n timeToValue(time, meridiem) {\n const { is12Hour } = this.asProps;\n let [hours = '', minutes = ''] = time;\n\n hours = intOrDefault(hours, hours); // 03 => 3\n minutes = intOrDefault(minutes, minutes); // MM => MM\n\n if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0\n\n return `${hours}:${minutes}`;\n }\n\n handleValueChange = (value, field, event) => {\n const { is12Hour } = this.asProps;\n const { meridiem } = this;\n\n let time;\n if (field) {\n time = this.value.split(':');\n time[MAP_FIELD_TO_TIME[field]] = value;\n } else {\n time = value.split(':');\n }\n\n let [hours = '', minutes = ''] = time;\n\n if (is12Hour) hours = String(formatHoursTo12(hours));\n\n value = this.timeToValue([hours, minutes], meridiem);\n this.handlers.value(value, event);\n };\n\n handleMeridiemClick = (event) => {\n const { is12Hour } = this.asProps;\n let { value, meridiem } = this;\n let [hours = '', minutes = ''] = value.split(':');\n\n if (is12Hour) hours = String(formatHoursTo12(hours));\n\n value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);\n this.handlers.value(value, event);\n };\n\n _getHoursAndMinutesProps = () => {\n const { is12Hour, size, disabled } = this.asProps;\n const time = this.valueToTime(this.value);\n\n return {\n time,\n size,\n is12Hour,\n disabled,\n $onValueChange: this.handleValueChange,\n };\n };\n\n getHoursProps = this._getHoursAndMinutesProps;\n getMinutesProps = this._getHoursAndMinutesProps;\n\n getSeparatorProps() {\n return {\n disabled: this.asProps.disabled,\n };\n }\n\n getFormatProps() {\n const { size, disabled, disablePortal } = this.asProps;\n return {\n size,\n disabled,\n disablePortal,\n meridiem: this.meridiem,\n onClick: this.handleMeridiemClick,\n };\n }\n\n render() {\n const STimePicker = Root;\n const { styles, Children } = this.asProps;\n\n return sstyled(styles)(\n <STimePicker render={Input}>\n <Children />\n </STimePicker>,\n );\n }\n}\n\nclass Separator extends Component {\n static defaultProps = {\n children: ':',\n };\n\n $el = React.createRef();\n\n handlerClick = () => {\n if (this.$el.current) {\n prevInput(this.$el.current)?.focus();\n }\n };\n\n render() {\n const STimePickerSeparator = Root;\n return <STimePickerSeparator render={Box} ref={this.$el} onClick={this.handlerClick} />;\n }\n}\n\nconst TimePicker = createComponent(TimePickerRoot, {\n Hours,\n Minutes,\n Separator,\n Format,\n});\n\nexport default TimePicker;\n"],"mappings":"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"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TimePicker';\nexport * from './TimePicker';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB;AACA,cAAc,cAAd"}
|
package/package.json
CHANGED
package/src/PickerFormat.jsx
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
5
|
-
|
|
6
|
-
class TimePickerFormat extends Component {
|
|
7
|
-
static enhance = [keyboardFocusEnhance()];
|
|
8
|
-
render() {
|
|
9
|
-
const SPickerFormat = Root;
|
|
10
|
-
const { Children, meridiem, styles } = this.asProps;
|
|
11
|
-
const SPickerFormatText = 'span';
|
|
12
|
-
|
|
13
|
-
return sstyled(styles)(
|
|
14
|
-
<SPickerFormat render={Box} type="button" tag="button">
|
|
15
|
-
{Children.origin ? <Children /> : <SPickerFormatText>{meridiem}</SPickerFormatText>}
|
|
16
|
-
</SPickerFormat>,
|
|
17
|
-
);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export default TimePickerFormat;
|
package/src/PickerInput.jsx
DELETED
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Input from '@semcore/input';
|
|
3
|
-
import Select from '@semcore/select';
|
|
4
|
-
import { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';
|
|
5
|
-
import { Component, sstyled, Root } from '@semcore/core';
|
|
6
|
-
import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
|
|
7
|
-
|
|
8
|
-
const MAP_FIELD_TO_TIME = {
|
|
9
|
-
hours: 0,
|
|
10
|
-
minutes: 1,
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
const MAP_SIZE_SELECT = {
|
|
14
|
-
m: 'm',
|
|
15
|
-
l: 'l',
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
function getOptions(min, max, step = 1) {
|
|
19
|
-
const length = Number(((max + 1 - min) / step).toFixed(0));
|
|
20
|
-
const options = Array(length).fill('');
|
|
21
|
-
let numValue = min;
|
|
22
|
-
return options.map((i, index) => {
|
|
23
|
-
numValue = index === 0 ? numValue : numValue + step;
|
|
24
|
-
const value = withLeadingZero(String(numValue));
|
|
25
|
-
return (
|
|
26
|
-
<Select.Option value={value} key={value}>
|
|
27
|
-
{value}
|
|
28
|
-
</Select.Option>
|
|
29
|
-
);
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
class ItemPicker extends Component {
|
|
34
|
-
static defaultProps = {
|
|
35
|
-
placeholder: '00',
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
$input = React.createRef();
|
|
39
|
-
|
|
40
|
-
minMax() {
|
|
41
|
-
return [];
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
state = {
|
|
45
|
-
dirtyValue: undefined,
|
|
46
|
-
visible: false,
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
parseValueWithMinMax = (value) => {
|
|
50
|
-
const [min, max] = this.minMax();
|
|
51
|
-
return String(Math.max(min, Math.min(max, value)));
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
dispatchOnChange(value, event) {
|
|
55
|
-
this.setState({ dirtyValue: undefined });
|
|
56
|
-
this.asProps.$onValueChange(value, this.field, event);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
submitChanges(event) {
|
|
60
|
-
let { dirtyValue } = this.state;
|
|
61
|
-
if (dirtyValue !== undefined) {
|
|
62
|
-
// if changes value
|
|
63
|
-
if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not ""
|
|
64
|
-
this.dispatchOnChange(dirtyValue, event);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
handleChange = (value, e) => {
|
|
69
|
-
/* hide props for bubbling events */
|
|
70
|
-
e.stopPropagation();
|
|
71
|
-
const numberValue = intOrDefault(Number(value), NaN);
|
|
72
|
-
|
|
73
|
-
if (!Number.isNaN(numberValue)) {
|
|
74
|
-
this.setState({ dirtyValue: value.slice(-2) });
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
handleBlur = (e) => this.submitChanges(e);
|
|
79
|
-
|
|
80
|
-
handleFocus = () => {
|
|
81
|
-
this.$input?.current.select();
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
/* rewrite method */
|
|
85
|
-
handleKeyDown = () => {};
|
|
86
|
-
|
|
87
|
-
handleSelect = (value, e) => {
|
|
88
|
-
this.dispatchOnChange(value, e);
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
handleVisibleChange = (visible) => this.setState({ visible });
|
|
92
|
-
|
|
93
|
-
render() {
|
|
94
|
-
const SPickerInput = Root;
|
|
95
|
-
const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =
|
|
96
|
-
this.asProps;
|
|
97
|
-
const { dirtyValue, visible } = this.state;
|
|
98
|
-
const timeValue = time[MAP_FIELD_TO_TIME[this.field]];
|
|
99
|
-
const value = dirtyValue === undefined ? timeValue : dirtyValue;
|
|
100
|
-
const [min, max] = this.minMax();
|
|
101
|
-
|
|
102
|
-
return sstyled(styles)(
|
|
103
|
-
<Select
|
|
104
|
-
{...other}
|
|
105
|
-
interaction="focus"
|
|
106
|
-
size={size ? MAP_SIZE_SELECT[size] : false}
|
|
107
|
-
onChange={callAllEventHandlers(onSelect, this.handleSelect)}
|
|
108
|
-
onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}
|
|
109
|
-
visible={visible}
|
|
110
|
-
value={timeValue}
|
|
111
|
-
>
|
|
112
|
-
<SPickerInput
|
|
113
|
-
interaction="focus"
|
|
114
|
-
render={Select.Trigger}
|
|
115
|
-
tag={Input.Value}
|
|
116
|
-
ref={this.$input}
|
|
117
|
-
size={size}
|
|
118
|
-
disabled={disabled}
|
|
119
|
-
neighborLocation={false}
|
|
120
|
-
value={value}
|
|
121
|
-
aria-label={`Search ${this.field}`}
|
|
122
|
-
onChange={this.handleChange}
|
|
123
|
-
onBlur={this.handleBlur}
|
|
124
|
-
onFocus={this.handleFocus}
|
|
125
|
-
onKeyDown={this.handleKeyDown}
|
|
126
|
-
/>
|
|
127
|
-
<Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>
|
|
128
|
-
</Select>,
|
|
129
|
-
);
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
class Hours extends ItemPicker {
|
|
134
|
-
field = 'hours';
|
|
135
|
-
|
|
136
|
-
minMax() {
|
|
137
|
-
const { is12Hour } = this.asProps;
|
|
138
|
-
if (is12Hour) {
|
|
139
|
-
return [1, 12];
|
|
140
|
-
} else {
|
|
141
|
-
return [0, 23];
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
nextInput() {
|
|
146
|
-
if (this.$input.current) {
|
|
147
|
-
const $input = nextInput(this.$input.current);
|
|
148
|
-
if ($input) {
|
|
149
|
-
this.setState({ visible: false });
|
|
150
|
-
$input.focus();
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
handleKeyDown = (e) => {
|
|
156
|
-
const { currentTarget } = e;
|
|
157
|
-
if (e.keyCode === 13) this.submitChanges(e);
|
|
158
|
-
if (e.keyCode === 39) {
|
|
159
|
-
if (
|
|
160
|
-
currentTarget.selectionStart >= currentTarget.value.length &&
|
|
161
|
-
currentTarget.selectionStart === currentTarget.selectionEnd
|
|
162
|
-
) {
|
|
163
|
-
e.preventDefault();
|
|
164
|
-
this.nextInput();
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
};
|
|
168
|
-
|
|
169
|
-
componentDidUpdate(prevProps, prevState) {
|
|
170
|
-
const { dirtyValue } = this.state;
|
|
171
|
-
if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;
|
|
172
|
-
|
|
173
|
-
if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {
|
|
174
|
-
this.nextInput();
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
class Minutes extends ItemPicker {
|
|
180
|
-
field = 'minutes';
|
|
181
|
-
|
|
182
|
-
minMax() {
|
|
183
|
-
return [0, 59];
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
prevFocus() {
|
|
187
|
-
if (this.$input.current) {
|
|
188
|
-
const $input = prevInput(this.$input.current);
|
|
189
|
-
if ($input) {
|
|
190
|
-
this.setState({ visible: false });
|
|
191
|
-
$input.focus();
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
handleKeyDown = (e) => {
|
|
197
|
-
const { currentTarget } = e;
|
|
198
|
-
if (e.keyCode === 13) this.submitChanges(e);
|
|
199
|
-
if (e.keyCode === 37) {
|
|
200
|
-
if (
|
|
201
|
-
currentTarget.selectionStart <= 0 &&
|
|
202
|
-
currentTarget.selectionStart === currentTarget.selectionEnd
|
|
203
|
-
) {
|
|
204
|
-
e.preventDefault();
|
|
205
|
-
this.prevFocus();
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
if (e.keyCode === 8) {
|
|
209
|
-
if (currentTarget.value.length === 0) {
|
|
210
|
-
e.preventDefault();
|
|
211
|
-
this.prevFocus();
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
};
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
export { Hours, Minutes };
|
package/src/TimePicker.jsx
DELETED
|
@@ -1,243 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import Input from '@semcore/input';
|
|
4
|
-
import { Box } from '@semcore/flex-box';
|
|
5
|
-
import { Hours, Minutes } from './PickerInput';
|
|
6
|
-
import Format from './PickerFormat';
|
|
7
|
-
|
|
8
|
-
import style from './style/time-picker.shadow.css';
|
|
9
|
-
|
|
10
|
-
const MAP_MERIDIEM = {
|
|
11
|
-
AM: 'PM',
|
|
12
|
-
PM: 'AM',
|
|
13
|
-
};
|
|
14
|
-
const MAP_FIELD_TO_TIME = {
|
|
15
|
-
hours: 0,
|
|
16
|
-
minutes: 1,
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export function nextInput(element) {
|
|
20
|
-
do {
|
|
21
|
-
element = element.nextElementSibling;
|
|
22
|
-
} while (element && element.tagName !== 'INPUT');
|
|
23
|
-
return element;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export function prevInput(element) {
|
|
27
|
-
do {
|
|
28
|
-
element = element.previousElementSibling;
|
|
29
|
-
} while (element && element.tagName !== 'INPUT');
|
|
30
|
-
return element;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export function intOrDefault(value, def = 0) {
|
|
34
|
-
const number = Number.parseInt(value);
|
|
35
|
-
return Number.isNaN(number) ? def : number;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export function withLeadingZero(value) {
|
|
39
|
-
value = String(value);
|
|
40
|
-
if (value.length === 1) return `0${value}`;
|
|
41
|
-
return String(value);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
export function meridiemByHours(hours) {
|
|
45
|
-
return hours >= 12 ? 'PM' : 'AM';
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export function formatHoursTo12(hours /* hours by 24 */) {
|
|
49
|
-
const nHours = intOrDefault(hours, NaN); // if not (:00)
|
|
50
|
-
if (Number.isNaN(nHours)) return hours;
|
|
51
|
-
|
|
52
|
-
// if not (HH:00)
|
|
53
|
-
if (nHours === 0) return 12; // 0 => 12 PM
|
|
54
|
-
if (nHours > 12) return nHours - 12; // 22 => 12 PM
|
|
55
|
-
|
|
56
|
-
return hours;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
export function formatHoursTo24(hours /* hours by 12 */, meridiem) {
|
|
60
|
-
const nHours = intOrDefault(hours, NaN); // if not (:00)
|
|
61
|
-
|
|
62
|
-
if (Number.isNaN(nHours)) return hours;
|
|
63
|
-
|
|
64
|
-
if (meridiem === 'AM') {
|
|
65
|
-
if (nHours === 12) return 0; // 12 AM => 0
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
if (meridiem === 'PM') {
|
|
69
|
-
if (nHours < 12) return nHours + 12; // 10 PM => 22
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
return hours;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
class TimePickerRoot extends Component {
|
|
76
|
-
static displayName = 'TimePicker';
|
|
77
|
-
static style = style;
|
|
78
|
-
static defaultProps = ({ is12Hour }) => ({
|
|
79
|
-
defaultValue: '',
|
|
80
|
-
size: 'm',
|
|
81
|
-
children: (
|
|
82
|
-
<>
|
|
83
|
-
<TimePicker.Hours />
|
|
84
|
-
<TimePicker.Separator />
|
|
85
|
-
<TimePicker.Minutes />
|
|
86
|
-
{is12Hour && <TimePicker.Format />}
|
|
87
|
-
</>
|
|
88
|
-
),
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
_lastMeridiem = 'AM'; // default AM
|
|
92
|
-
|
|
93
|
-
uncontrolledProps() {
|
|
94
|
-
return {
|
|
95
|
-
value: null,
|
|
96
|
-
};
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
get value() {
|
|
100
|
-
const { value } = this.asProps;
|
|
101
|
-
return value === null || value === undefined ? ':' : value;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
get meridiem() {
|
|
105
|
-
const { value } = this.asProps;
|
|
106
|
-
const [hours = ''] = value.split(':');
|
|
107
|
-
|
|
108
|
-
const nHours = intOrDefault(hours, NaN);
|
|
109
|
-
|
|
110
|
-
if (!Number.isNaN(nHours)) {
|
|
111
|
-
this._lastMeridiem = meridiemByHours(nHours);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
return this._lastMeridiem;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
valueToTime(value) {
|
|
118
|
-
const { is12Hour } = this.asProps;
|
|
119
|
-
let [hours = '', minutes = ''] = value.split(':');
|
|
120
|
-
|
|
121
|
-
if (is12Hour) hours = formatHoursTo12(hours);
|
|
122
|
-
|
|
123
|
-
hours = withLeadingZero(hours);
|
|
124
|
-
minutes = withLeadingZero(minutes);
|
|
125
|
-
|
|
126
|
-
return [hours, minutes];
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
timeToValue(time, meridiem) {
|
|
130
|
-
const { is12Hour } = this.asProps;
|
|
131
|
-
let [hours = '', minutes = ''] = time;
|
|
132
|
-
|
|
133
|
-
hours = intOrDefault(hours, hours); // 03 => 3
|
|
134
|
-
minutes = intOrDefault(minutes, minutes); // MM => MM
|
|
135
|
-
|
|
136
|
-
if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0
|
|
137
|
-
|
|
138
|
-
return `${hours}:${minutes}`;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
handleValueChange = (value, field, event) => {
|
|
142
|
-
const { is12Hour } = this.asProps;
|
|
143
|
-
const { meridiem } = this;
|
|
144
|
-
|
|
145
|
-
let time;
|
|
146
|
-
if (field) {
|
|
147
|
-
time = this.value.split(':');
|
|
148
|
-
time[MAP_FIELD_TO_TIME[field]] = value;
|
|
149
|
-
} else {
|
|
150
|
-
time = value.split(':');
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
let [hours = '', minutes = ''] = time;
|
|
154
|
-
|
|
155
|
-
if (is12Hour) hours = String(formatHoursTo12(hours));
|
|
156
|
-
|
|
157
|
-
value = this.timeToValue([hours, minutes], meridiem);
|
|
158
|
-
this.handlers.value(value, event);
|
|
159
|
-
};
|
|
160
|
-
|
|
161
|
-
handleMeridiemClick = (event) => {
|
|
162
|
-
const { is12Hour } = this.asProps;
|
|
163
|
-
let { value, meridiem } = this;
|
|
164
|
-
let [hours = '', minutes = ''] = value.split(':');
|
|
165
|
-
|
|
166
|
-
if (is12Hour) hours = String(formatHoursTo12(hours));
|
|
167
|
-
|
|
168
|
-
value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);
|
|
169
|
-
this.handlers.value(value, event);
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
_getHoursAndMinutesProps = () => {
|
|
173
|
-
const { is12Hour, size, disabled } = this.asProps;
|
|
174
|
-
const time = this.valueToTime(this.value);
|
|
175
|
-
|
|
176
|
-
return {
|
|
177
|
-
time,
|
|
178
|
-
size,
|
|
179
|
-
is12Hour,
|
|
180
|
-
disabled,
|
|
181
|
-
$onValueChange: this.handleValueChange,
|
|
182
|
-
};
|
|
183
|
-
};
|
|
184
|
-
|
|
185
|
-
getHoursProps = this._getHoursAndMinutesProps;
|
|
186
|
-
getMinutesProps = this._getHoursAndMinutesProps;
|
|
187
|
-
|
|
188
|
-
getSeparatorProps() {
|
|
189
|
-
return {
|
|
190
|
-
disabled: this.asProps.disabled,
|
|
191
|
-
};
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
getFormatProps() {
|
|
195
|
-
const { size, disabled, disablePortal } = this.asProps;
|
|
196
|
-
return {
|
|
197
|
-
size,
|
|
198
|
-
disabled,
|
|
199
|
-
disablePortal,
|
|
200
|
-
meridiem: this.meridiem,
|
|
201
|
-
onClick: this.handleMeridiemClick,
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
render() {
|
|
206
|
-
const STimePicker = Root;
|
|
207
|
-
const { styles, Children } = this.asProps;
|
|
208
|
-
|
|
209
|
-
return sstyled(styles)(
|
|
210
|
-
<STimePicker render={Input}>
|
|
211
|
-
<Children />
|
|
212
|
-
</STimePicker>,
|
|
213
|
-
);
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
class Separator extends Component {
|
|
218
|
-
static defaultProps = {
|
|
219
|
-
children: ':',
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
$el = React.createRef();
|
|
223
|
-
|
|
224
|
-
handlerClick = () => {
|
|
225
|
-
if (this.$el.current) {
|
|
226
|
-
prevInput(this.$el.current)?.focus();
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
|
-
|
|
230
|
-
render() {
|
|
231
|
-
const STimePickerSeparator = Root;
|
|
232
|
-
return <STimePickerSeparator render={Box} ref={this.$el} onClick={this.handlerClick} />;
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
const TimePicker = createComponent(TimePickerRoot, {
|
|
237
|
-
Hours,
|
|
238
|
-
Minutes,
|
|
239
|
-
Separator,
|
|
240
|
-
Format,
|
|
241
|
-
});
|
|
242
|
-
|
|
243
|
-
export default TimePicker;
|
package/src/index.d.ts
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { IInputProps, IInputValueProps } from '@semcore/input';
|
|
4
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
5
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
|
|
7
|
-
export interface ITimePickerProps extends Omit<IInputProps, 'size'> {
|
|
8
|
-
/** Time in the hh:mm format */
|
|
9
|
-
value?: string;
|
|
10
|
-
/** The event responses upon time changing */
|
|
11
|
-
onChange?: (time: string, event?: React.SyntheticEvent) => void;
|
|
12
|
-
/** In charge of the component blocking */
|
|
13
|
-
disabled?: boolean;
|
|
14
|
-
/** Control size
|
|
15
|
-
* @default m */
|
|
16
|
-
size?: 'm' | 'l';
|
|
17
|
-
/** 12-hour time format */
|
|
18
|
-
is12Hour?: boolean;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export interface ITimePickerItemProps extends IInputValueProps {
|
|
22
|
-
/** Step for changing of the values in the dropdown list */
|
|
23
|
-
step?: number;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export interface ITimePickerFormatProps extends IBoxProps, IKeyboardFocusProps {}
|
|
27
|
-
|
|
28
|
-
export interface ITimePickerContext {
|
|
29
|
-
getHoursProps: PropGetterFn;
|
|
30
|
-
getFormatProps: PropGetterFn;
|
|
31
|
-
getMinutesProps: PropGetterFn;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export interface ITimePickerHandlers {
|
|
35
|
-
value: (value: string) => void;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
declare const TimePicker: (<T>(
|
|
39
|
-
props: CProps<ITimePickerProps & T, ITimePickerContext, ITimePickerHandlers>,
|
|
40
|
-
) => ReturnEl) & {
|
|
41
|
-
Hours: <T>(props: ITimePickerItemProps & T) => ReturnEl;
|
|
42
|
-
Minutes: <T>(props: ITimePickerItemProps & T) => ReturnEl;
|
|
43
|
-
Separator: typeof Box;
|
|
44
|
-
Format: <T>(props: ITimePickerFormatProps & T) => ReturnEl;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export default TimePicker;
|
package/src/index.js
DELETED
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
STimePicker {
|
|
4
|
-
position: relative;
|
|
5
|
-
width: auto;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
STimePicker[disabled] {
|
|
9
|
-
color: color-mod(var(--gray-800) a(30%));
|
|
10
|
-
cursor: default;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
SPickerInput {
|
|
14
|
-
box-sizing: content-box;
|
|
15
|
-
text-align: center;
|
|
16
|
-
z-index: 1;
|
|
17
|
-
|
|
18
|
-
&[placeholder] {
|
|
19
|
-
text-overflow: initial;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
SPickerInput[size='m'] {
|
|
24
|
-
width: 19px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
SPickerInput[size='l'] {
|
|
28
|
-
width: 21px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
SPickerFormat {
|
|
32
|
-
flex-shrink: 0;
|
|
33
|
-
position: relative;
|
|
34
|
-
display: inline-flex;
|
|
35
|
-
padding: 0;
|
|
36
|
-
white-space: nowrap;
|
|
37
|
-
font-family: inherit;
|
|
38
|
-
font-weight: 500;
|
|
39
|
-
line-height: normal;
|
|
40
|
-
text-decoration: none;
|
|
41
|
-
align-items: center;
|
|
42
|
-
border: 1px solid var(--gray-200);
|
|
43
|
-
border-radius: 0 var(--rounded-m) var(--rounded-m) 0;
|
|
44
|
-
outline: 0;
|
|
45
|
-
box-shadow: none;
|
|
46
|
-
cursor: pointer;
|
|
47
|
-
box-sizing: border-box;
|
|
48
|
-
overflow: visible;
|
|
49
|
-
user-select: none;
|
|
50
|
-
touch-action: manipulation;
|
|
51
|
-
-webkit-tap-highlight-color: transparent;
|
|
52
|
-
color: var(--gray-500);
|
|
53
|
-
background-color: color-mod(var(--gray-400) a(10%));
|
|
54
|
-
|
|
55
|
-
&:hover {
|
|
56
|
-
color: var(--gray-500);
|
|
57
|
-
background-color: color-mod(var(--gray-400) a(20%));
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
&:active,
|
|
61
|
-
&[active] {
|
|
62
|
-
color: var(--gray-500);
|
|
63
|
-
background-color: color-mod(var(--gray-400) a(30%));
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
SPickerFormat[size='m'] {
|
|
68
|
-
height: var(--form-control-m);
|
|
69
|
-
font-size: var(--fs-200);
|
|
70
|
-
margin: 0 -1px 0 0;
|
|
71
|
-
& SPickerFormatText {
|
|
72
|
-
margin: 0 8px;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
SPickerFormat[size='l'] {
|
|
77
|
-
height: var(--form-control-l);
|
|
78
|
-
font-size: var(--fs-300);
|
|
79
|
-
margin: 0 -4px 0 0;
|
|
80
|
-
& SPickerFormatText {
|
|
81
|
-
margin: 0 12px;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
SPickerFormat[disabled] {
|
|
86
|
-
opacity: var(--disabled-opacity);
|
|
87
|
-
cursor: default;
|
|
88
|
-
pointer-events: none;
|
|
89
|
-
border-color: transparent transparent transparent var(--gray-200);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
SPickerFormat[keyboardFocused] {
|
|
93
|
-
box-shadow: var(--keyboard-focus);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
STimePickerSeparator[disabled] {
|
|
97
|
-
opacity: var(--disabled-opacity);
|
|
98
|
-
pointer-events: none;
|
|
99
|
-
}
|