@os-design/core 1.0.157 → 1.0.158
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/dist/cjs/TimePicker/index.js +28 -7
- package/dist/cjs/TimePicker/index.js.map +1 -1
- package/dist/esm/TimePicker/index.js +20 -5
- package/dist/esm/TimePicker/index.js.map +1 -1
- package/dist/types/TimePicker/index.d.ts +1 -0
- package/dist/types/TimePicker/index.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -8,8 +8,9 @@ exports["default"] = void 0;
|
|
|
8
8
|
var _timePickerUtils = require("@os-design/time-picker-utils");
|
|
9
9
|
var _utils = require("@os-design/utils");
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _Button = _interopRequireDefault(require("../Button"));
|
|
11
12
|
var _Input = _interopRequireDefault(require("../Input"));
|
|
12
|
-
var _excluded = ["value", "defaultValue", "onChange", "onSelect"];
|
|
13
|
+
var _excluded = ["notation", "value", "defaultValue", "onChange", "onSelect", "right"];
|
|
13
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
15
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -26,12 +27,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
26
27
|
* The component to choose a time.
|
|
27
28
|
*/
|
|
28
29
|
var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
29
|
-
var
|
|
30
|
+
var _ref$notation = _ref.notation,
|
|
31
|
+
notation = _ref$notation === void 0 ? '12-hour' : _ref$notation,
|
|
32
|
+
value = _ref.value,
|
|
30
33
|
defaultValue = _ref.defaultValue,
|
|
31
34
|
_ref$onChange = _ref.onChange,
|
|
32
35
|
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
33
36
|
_ref$onSelect = _ref.onSelect,
|
|
34
37
|
_onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
|
|
38
|
+
right = _ref.right,
|
|
35
39
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
36
40
|
var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
|
|
37
41
|
_useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
|
|
@@ -52,6 +56,15 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
52
56
|
_useState2 = _slicedToArray(_useState, 2),
|
|
53
57
|
selection = _useState2[0],
|
|
54
58
|
setSelection = _useState2[1];
|
|
59
|
+
var _useState3 = (0, _react.useState)(null),
|
|
60
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
61
|
+
period = _useState4[0],
|
|
62
|
+
setPeriod = _useState4[1];
|
|
63
|
+
(0, _react.useEffect)(function () {
|
|
64
|
+
if (notation === '12-hour') {
|
|
65
|
+
setPeriod('AM');
|
|
66
|
+
}
|
|
67
|
+
}, [notation]);
|
|
55
68
|
|
|
56
69
|
// Update the selection
|
|
57
70
|
(0, _react.useEffect)(function () {
|
|
@@ -59,11 +72,11 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
59
72
|
inputRef.current.setSelectionRange(selection.start, selection.end);
|
|
60
73
|
}, [inputRef, selection]);
|
|
61
74
|
var time = (0, _react.useMemo)(function () {
|
|
62
|
-
if (!forwardedValue) return '00:00';
|
|
75
|
+
if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';
|
|
63
76
|
var hour = forwardedValue.getHours().toString().padStart(2, '0');
|
|
64
77
|
var minute = forwardedValue.getMinutes().toString().padStart(2, '0');
|
|
65
78
|
return "".concat(hour, ":").concat(minute);
|
|
66
|
-
}, [forwardedValue]);
|
|
79
|
+
}, [forwardedValue, notation]);
|
|
67
80
|
var onKeyDown = (0, _react.useCallback)(function (e) {
|
|
68
81
|
var nextCaret = selection.start;
|
|
69
82
|
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' && e.metaKey) {
|
|
@@ -75,13 +88,13 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
75
88
|
} else if (e.key === 'ArrowRight') {
|
|
76
89
|
nextCaret = selection.start < 5 ? selection.start + 1 : 5;
|
|
77
90
|
} else if (e.key === 'Backspace') {
|
|
78
|
-
setForwardedValue((0, _timePickerUtils.timeToDate)('00:00'));
|
|
91
|
+
setForwardedValue((0, _timePickerUtils.timeToDate)('00:00', period));
|
|
79
92
|
nextCaret = 0;
|
|
80
93
|
} else if ((0, _timePickerUtils.isDigitKey)(e.key)) {
|
|
81
94
|
var pos = selection.start === 2 ? 3 : selection.start;
|
|
82
95
|
if (pos === 5) pos = 0;
|
|
83
96
|
var nextTime = (0, _timePickerUtils.replaceChar)(time, pos, e.key);
|
|
84
|
-
setForwardedValue((0, _timePickerUtils.timeToDate)(nextTime));
|
|
97
|
+
setForwardedValue((0, _timePickerUtils.timeToDate)(nextTime, period));
|
|
85
98
|
nextCaret = pos < 5 ? pos + 1 : 5;
|
|
86
99
|
}
|
|
87
100
|
setSelection({
|
|
@@ -89,7 +102,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
89
102
|
end: nextCaret
|
|
90
103
|
});
|
|
91
104
|
e.preventDefault();
|
|
92
|
-
}, [selection.start, setForwardedValue, time]);
|
|
105
|
+
}, [period, selection.start, setForwardedValue, time]);
|
|
93
106
|
return /*#__PURE__*/_react["default"].createElement(_Input["default"], _extends({
|
|
94
107
|
type: "text",
|
|
95
108
|
inputMode: "decimal",
|
|
@@ -97,6 +110,14 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
97
110
|
minLength: 5,
|
|
98
111
|
maxLength: 5,
|
|
99
112
|
value: time,
|
|
113
|
+
right: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
114
|
+
type: "ghost",
|
|
115
|
+
wide: "never",
|
|
116
|
+
size: "small",
|
|
117
|
+
onClick: function onClick() {
|
|
118
|
+
return setPeriod(period === 'AM' ? 'PM' : 'AM');
|
|
119
|
+
}
|
|
120
|
+
}, period), right),
|
|
100
121
|
onSelect: function onSelect(e) {
|
|
101
122
|
// Update the selection state.
|
|
102
123
|
var _e$currentTarget = e.currentTarget,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["TimePicker","forwardRef","ref","value","defaultValue","onChange","onSelect","rest","useForwardedRef","inputRef","mergedInputRef","useForwardedState","forwardedValue","setForwardedValue","useState","start","end","selection","setSelection","useEffect","current","setSelectionRange","time","useMemo","hour","getHours","toString","padStart","minute","getMinutes","onKeyDown","useCallback","e","nextCaret","key","metaKey","timeToDate","isDigitKey","pos","nextTime","replaceChar","preventDefault","currentTarget","selectionStart","selectionEnd","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n isDigitKey,\n replaceChar,\n timeToDate,\n} from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport Input, { InputProps } from '../Input';\n\nexport interface TimePickerProps\n extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n /**\n * The selected date.\n * @default undefined\n */\n value?: Date;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: Date;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: Date) => void;\n}\n\ninterface Selection {\n start: number;\n end: number;\n}\n\n/**\n * The component to choose a time.\n */\nconst TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(\n (\n { value
|
|
1
|
+
{"version":3,"file":"index.js","names":["TimePicker","forwardRef","ref","notation","value","defaultValue","onChange","onSelect","right","rest","useForwardedRef","inputRef","mergedInputRef","useForwardedState","forwardedValue","setForwardedValue","useState","start","end","selection","setSelection","period","setPeriod","useEffect","current","setSelectionRange","time","useMemo","hour","getHours","toString","padStart","minute","getMinutes","onKeyDown","useCallback","e","nextCaret","key","metaKey","timeToDate","isDigitKey","pos","nextTime","replaceChar","preventDefault","currentTarget","selectionStart","selectionEnd","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n isDigitKey,\n replaceChar,\n timeToDate,\n} from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport Button from '../Button';\nimport Input, { InputProps } from '../Input';\n\nexport interface TimePickerProps\n extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n /**\n * The time notation.\n * @default 12-hour\n */\n notation?: '12-hour' | '24-hour';\n /**\n * The selected date.\n * @default undefined\n */\n value?: Date;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: Date;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: Date) => void;\n}\n\ninterface Selection {\n start: number;\n end: number;\n}\n\n/**\n * The component to choose a time.\n */\nconst TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(\n (\n {\n notation = '12-hour',\n value,\n defaultValue,\n onChange = () => {},\n onSelect = () => {},\n right,\n ...rest\n },\n ref\n ) => {\n const [inputRef, mergedInputRef] = useForwardedRef(ref);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n const [period, setPeriod] = useState<'AM' | 'PM' | null>(null);\n\n useEffect(() => {\n if (notation === '12-hour') {\n setPeriod('AM');\n }\n }, [notation]);\n\n // Update the selection\n useEffect(() => {\n if (!inputRef.current) return;\n inputRef.current.setSelectionRange(selection.start, selection.end);\n }, [inputRef, selection]);\n\n const time = useMemo(() => {\n if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';\n const hour = forwardedValue.getHours().toString().padStart(2, '0');\n const minute = forwardedValue.getMinutes().toString().padStart(2, '0');\n return `${hour}:${minute}`;\n }, [forwardedValue, notation]);\n\n const onKeyDown = useCallback(\n (e) => {\n let nextCaret = selection.start;\n if (e.key === 'ArrowUp' || (e.key === 'ArrowLeft' && e.metaKey)) {\n nextCaret = 0;\n } else if (\n e.key === 'ArrowDown' ||\n (e.key === 'ArrowRight' && e.metaKey)\n ) {\n nextCaret = 5;\n } else if (e.key === 'ArrowLeft') {\n nextCaret = selection.start > 0 ? selection.start - 1 : 0;\n } else if (e.key === 'ArrowRight') {\n nextCaret = selection.start < 5 ? selection.start + 1 : 5;\n } else if (e.key === 'Backspace') {\n setForwardedValue(timeToDate('00:00', period));\n nextCaret = 0;\n } else if (isDigitKey(e.key)) {\n let pos = selection.start === 2 ? 3 : selection.start;\n if (pos === 5) pos = 0;\n const nextTime = replaceChar(time, pos, e.key);\n setForwardedValue(timeToDate(nextTime, period));\n nextCaret = pos < 5 ? pos + 1 : 5;\n }\n setSelection({ start: nextCaret, end: nextCaret });\n e.preventDefault();\n },\n [period, selection.start, setForwardedValue, time]\n );\n\n return (\n <Input\n type='text'\n inputMode='decimal'\n role='spinbutton'\n minLength={5}\n maxLength={5}\n value={time}\n right={\n <>\n <Button\n type='ghost'\n wide='never'\n size='small'\n onClick={() => setPeriod(period === 'AM' ? 'PM' : 'AM')}\n >\n {period}\n </Button>\n {right}\n </>\n }\n onSelect={(e) => {\n // Update the selection state.\n const { selectionStart, selectionEnd } = e.currentTarget;\n setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });\n onSelect(e);\n }}\n onKeyDown={onKeyDown}\n {...rest}\n ref={mergedInputRef}\n />\n );\n }\n);\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":"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"}
|
|
@@ -2,15 +2,18 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
import { isDigitKey, replaceChar, timeToDate } from '@os-design/time-picker-utils';
|
|
3
3
|
import { useForwardedRef, useForwardedState } from '@os-design/utils';
|
|
4
4
|
import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
|
|
5
|
+
import Button from '../Button';
|
|
5
6
|
import Input from '../Input';
|
|
6
7
|
/**
|
|
7
8
|
* The component to choose a time.
|
|
8
9
|
*/
|
|
9
10
|
const TimePicker = /*#__PURE__*/forwardRef(({
|
|
11
|
+
notation = '12-hour',
|
|
10
12
|
value,
|
|
11
13
|
defaultValue,
|
|
12
14
|
onChange = () => {},
|
|
13
15
|
onSelect = () => {},
|
|
16
|
+
right,
|
|
14
17
|
...rest
|
|
15
18
|
}, ref) => {
|
|
16
19
|
const [inputRef, mergedInputRef] = useForwardedRef(ref);
|
|
@@ -23,6 +26,12 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
23
26
|
start: 0,
|
|
24
27
|
end: 0
|
|
25
28
|
});
|
|
29
|
+
const [period, setPeriod] = useState(null);
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (notation === '12-hour') {
|
|
32
|
+
setPeriod('AM');
|
|
33
|
+
}
|
|
34
|
+
}, [notation]);
|
|
26
35
|
|
|
27
36
|
// Update the selection
|
|
28
37
|
useEffect(() => {
|
|
@@ -30,11 +39,11 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
30
39
|
inputRef.current.setSelectionRange(selection.start, selection.end);
|
|
31
40
|
}, [inputRef, selection]);
|
|
32
41
|
const time = useMemo(() => {
|
|
33
|
-
if (!forwardedValue) return '00:00';
|
|
42
|
+
if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';
|
|
34
43
|
const hour = forwardedValue.getHours().toString().padStart(2, '0');
|
|
35
44
|
const minute = forwardedValue.getMinutes().toString().padStart(2, '0');
|
|
36
45
|
return `${hour}:${minute}`;
|
|
37
|
-
}, [forwardedValue]);
|
|
46
|
+
}, [forwardedValue, notation]);
|
|
38
47
|
const onKeyDown = useCallback(e => {
|
|
39
48
|
let nextCaret = selection.start;
|
|
40
49
|
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' && e.metaKey) {
|
|
@@ -46,13 +55,13 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
46
55
|
} else if (e.key === 'ArrowRight') {
|
|
47
56
|
nextCaret = selection.start < 5 ? selection.start + 1 : 5;
|
|
48
57
|
} else if (e.key === 'Backspace') {
|
|
49
|
-
setForwardedValue(timeToDate('00:00'));
|
|
58
|
+
setForwardedValue(timeToDate('00:00', period));
|
|
50
59
|
nextCaret = 0;
|
|
51
60
|
} else if (isDigitKey(e.key)) {
|
|
52
61
|
let pos = selection.start === 2 ? 3 : selection.start;
|
|
53
62
|
if (pos === 5) pos = 0;
|
|
54
63
|
const nextTime = replaceChar(time, pos, e.key);
|
|
55
|
-
setForwardedValue(timeToDate(nextTime));
|
|
64
|
+
setForwardedValue(timeToDate(nextTime, period));
|
|
56
65
|
nextCaret = pos < 5 ? pos + 1 : 5;
|
|
57
66
|
}
|
|
58
67
|
setSelection({
|
|
@@ -60,7 +69,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
60
69
|
end: nextCaret
|
|
61
70
|
});
|
|
62
71
|
e.preventDefault();
|
|
63
|
-
}, [selection.start, setForwardedValue, time]);
|
|
72
|
+
}, [period, selection.start, setForwardedValue, time]);
|
|
64
73
|
return /*#__PURE__*/React.createElement(Input, _extends({
|
|
65
74
|
type: "text",
|
|
66
75
|
inputMode: "decimal",
|
|
@@ -68,6 +77,12 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
68
77
|
minLength: 5,
|
|
69
78
|
maxLength: 5,
|
|
70
79
|
value: time,
|
|
80
|
+
right: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
|
81
|
+
type: "ghost",
|
|
82
|
+
wide: "never",
|
|
83
|
+
size: "small",
|
|
84
|
+
onClick: () => setPeriod(period === 'AM' ? 'PM' : 'AM')
|
|
85
|
+
}, period), right),
|
|
71
86
|
onSelect: e => {
|
|
72
87
|
// Update the selection state.
|
|
73
88
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["isDigitKey","replaceChar","timeToDate","useForwardedRef","useForwardedState","React","forwardRef","useCallback","useEffect","useMemo","useState","Input","TimePicker","value","defaultValue","onChange","onSelect","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","selection","setSelection","start","end","current","setSelectionRange","time","hour","getHours","toString","padStart","minute","getMinutes","onKeyDown","e","nextCaret","key","metaKey","pos","nextTime","preventDefault","selectionStart","selectionEnd","currentTarget","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n isDigitKey,\n replaceChar,\n timeToDate,\n} from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport Input, { InputProps } from '../Input';\n\nexport interface TimePickerProps\n extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n /**\n * The selected date.\n * @default undefined\n */\n value?: Date;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: Date;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: Date) => void;\n}\n\ninterface Selection {\n start: number;\n end: number;\n}\n\n/**\n * The component to choose a time.\n */\nconst TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(\n (\n { value
|
|
1
|
+
{"version":3,"file":"index.js","names":["isDigitKey","replaceChar","timeToDate","useForwardedRef","useForwardedState","React","forwardRef","useCallback","useEffect","useMemo","useState","Button","Input","TimePicker","notation","value","defaultValue","onChange","onSelect","right","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","selection","setSelection","start","end","period","setPeriod","current","setSelectionRange","time","hour","getHours","toString","padStart","minute","getMinutes","onKeyDown","e","nextCaret","key","metaKey","pos","nextTime","preventDefault","selectionStart","selectionEnd","currentTarget","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n isDigitKey,\n replaceChar,\n timeToDate,\n} from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport Button from '../Button';\nimport Input, { InputProps } from '../Input';\n\nexport interface TimePickerProps\n extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n /**\n * The time notation.\n * @default 12-hour\n */\n notation?: '12-hour' | '24-hour';\n /**\n * The selected date.\n * @default undefined\n */\n value?: Date;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: Date;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: Date) => void;\n}\n\ninterface Selection {\n start: number;\n end: number;\n}\n\n/**\n * The component to choose a time.\n */\nconst TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(\n (\n {\n notation = '12-hour',\n value,\n defaultValue,\n onChange = () => {},\n onSelect = () => {},\n right,\n ...rest\n },\n ref\n ) => {\n const [inputRef, mergedInputRef] = useForwardedRef(ref);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n const [period, setPeriod] = useState<'AM' | 'PM' | null>(null);\n\n useEffect(() => {\n if (notation === '12-hour') {\n setPeriod('AM');\n }\n }, [notation]);\n\n // Update the selection\n useEffect(() => {\n if (!inputRef.current) return;\n inputRef.current.setSelectionRange(selection.start, selection.end);\n }, [inputRef, selection]);\n\n const time = useMemo(() => {\n if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';\n const hour = forwardedValue.getHours().toString().padStart(2, '0');\n const minute = forwardedValue.getMinutes().toString().padStart(2, '0');\n return `${hour}:${minute}`;\n }, [forwardedValue, notation]);\n\n const onKeyDown = useCallback(\n (e) => {\n let nextCaret = selection.start;\n if (e.key === 'ArrowUp' || (e.key === 'ArrowLeft' && e.metaKey)) {\n nextCaret = 0;\n } else if (\n e.key === 'ArrowDown' ||\n (e.key === 'ArrowRight' && e.metaKey)\n ) {\n nextCaret = 5;\n } else if (e.key === 'ArrowLeft') {\n nextCaret = selection.start > 0 ? selection.start - 1 : 0;\n } else if (e.key === 'ArrowRight') {\n nextCaret = selection.start < 5 ? selection.start + 1 : 5;\n } else if (e.key === 'Backspace') {\n setForwardedValue(timeToDate('00:00', period));\n nextCaret = 0;\n } else if (isDigitKey(e.key)) {\n let pos = selection.start === 2 ? 3 : selection.start;\n if (pos === 5) pos = 0;\n const nextTime = replaceChar(time, pos, e.key);\n setForwardedValue(timeToDate(nextTime, period));\n nextCaret = pos < 5 ? pos + 1 : 5;\n }\n setSelection({ start: nextCaret, end: nextCaret });\n e.preventDefault();\n },\n [period, selection.start, setForwardedValue, time]\n );\n\n return (\n <Input\n type='text'\n inputMode='decimal'\n role='spinbutton'\n minLength={5}\n maxLength={5}\n value={time}\n right={\n <>\n <Button\n type='ghost'\n wide='never'\n size='small'\n onClick={() => setPeriod(period === 'AM' ? 'PM' : 'AM')}\n >\n {period}\n </Button>\n {right}\n </>\n }\n onSelect={(e) => {\n // Update the selection state.\n const { selectionStart, selectionEnd } = e.currentTarget;\n setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });\n onSelect(e);\n }}\n onKeyDown={onKeyDown}\n {...rest}\n ref={mergedInputRef}\n />\n );\n }\n);\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InputProps } from '../Input';
|
|
3
3
|
export interface TimePickerProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {
|
|
4
|
+
notation?: '12-hour' | '24-hour';
|
|
4
5
|
value?: Date;
|
|
5
6
|
defaultValue?: Date;
|
|
6
7
|
onChange?: (value: Date) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAMN,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAKxE,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKjC,KAAK,CAAC,EAAE,IAAI,CAAC;IAKb,YAAY,CAAC,EAAE,IAAI,CAAC;IAKpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC;AAUD,QAAA,MAAM,UAAU,0FAwGf,CAAC;AAIF,eAAe,UAAU,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.158",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@os-design/portal": "^1.0.6",
|
|
38
38
|
"@os-design/styles": "^1.0.39",
|
|
39
39
|
"@os-design/theming": "^1.0.37",
|
|
40
|
-
"@os-design/time-picker-utils": "^1.0.
|
|
40
|
+
"@os-design/time-picker-utils": "^1.0.1",
|
|
41
41
|
"@os-design/utils": "^1.0.55",
|
|
42
42
|
"@os-team/password-score": "^1.0.3",
|
|
43
43
|
"facepaint": "^1.2.1",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react": ">=18",
|
|
59
59
|
"react-dom": ">=18"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "1f7502d2714949d3dabaa8e103a4e315fda8e2f8"
|
|
62
62
|
}
|