@clayui/time-picker 3.141.1 → 3.141.2-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/index.js +324 -0
- package/lib/esm/index.js +316 -0
- package/package.json +15 -8
- package/lib/index.d.ts +0 -99
- package/lib/index.js +0 -356
package/lib/cjs/index.js
ADDED
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _button = _interopRequireDefault(require("@clayui/button"));
|
|
8
|
+
var _form = require("@clayui/form");
|
|
9
|
+
var _icon = _interopRequireDefault(require("@clayui/icon"));
|
|
10
|
+
var _shared = require("@clayui/shared");
|
|
11
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
+
/**
|
|
17
|
+
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
18
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
|
+
*/
|
|
20
|
+
var TimeType;
|
|
21
|
+
(function (TimeType) {
|
|
22
|
+
TimeType["minutes"] = "minutes";
|
|
23
|
+
TimeType["hours"] = "hours";
|
|
24
|
+
TimeType["ampm"] = "ampm";
|
|
25
|
+
})(TimeType || (TimeType = {}));
|
|
26
|
+
const DEFAULT_VALUE = '--';
|
|
27
|
+
const DEFAULT_CONFIG = {
|
|
28
|
+
use12Hours: {
|
|
29
|
+
ampm: {
|
|
30
|
+
am: 'AM',
|
|
31
|
+
pm: 'PM'
|
|
32
|
+
},
|
|
33
|
+
hours: {
|
|
34
|
+
max: 12,
|
|
35
|
+
min: 1
|
|
36
|
+
},
|
|
37
|
+
minutes: {
|
|
38
|
+
max: 59,
|
|
39
|
+
min: 0
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
use24Hours: {
|
|
43
|
+
ampm: {
|
|
44
|
+
am: 'AM',
|
|
45
|
+
pm: 'PM'
|
|
46
|
+
},
|
|
47
|
+
hours: {
|
|
48
|
+
max: 23,
|
|
49
|
+
min: 0
|
|
50
|
+
},
|
|
51
|
+
minutes: {
|
|
52
|
+
max: 59,
|
|
53
|
+
min: 0
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const regex = /^\d+$/;
|
|
58
|
+
const TimePicker = _ref => {
|
|
59
|
+
let {
|
|
60
|
+
ariaLabels = {
|
|
61
|
+
ampm: 'Select time of day (AM/PM) using up (PM) and down (AM) arrow keys',
|
|
62
|
+
clear: 'Delete the entered time',
|
|
63
|
+
hours: 'Enter the hour in 00:00 format',
|
|
64
|
+
minutes: 'Enter the minutes in 00:00 format',
|
|
65
|
+
timeDown: 'Time down',
|
|
66
|
+
timeUp: 'Time up'
|
|
67
|
+
},
|
|
68
|
+
config = DEFAULT_CONFIG,
|
|
69
|
+
disabled = false,
|
|
70
|
+
defaultValue = {
|
|
71
|
+
hours: DEFAULT_VALUE,
|
|
72
|
+
minutes: DEFAULT_VALUE
|
|
73
|
+
},
|
|
74
|
+
icon = false,
|
|
75
|
+
id,
|
|
76
|
+
name,
|
|
77
|
+
onChange,
|
|
78
|
+
onInputChange,
|
|
79
|
+
spritemap,
|
|
80
|
+
timezone,
|
|
81
|
+
use12Hours = false,
|
|
82
|
+
value,
|
|
83
|
+
values
|
|
84
|
+
} = _ref;
|
|
85
|
+
const [internalValue, setValue] = (0, _shared.useControlledState)({
|
|
86
|
+
defaultName: 'defaultValue',
|
|
87
|
+
defaultValue,
|
|
88
|
+
handleName: 'onChange',
|
|
89
|
+
name: 'value',
|
|
90
|
+
onChange: onChange ?? onInputChange,
|
|
91
|
+
value: value ?? values
|
|
92
|
+
});
|
|
93
|
+
const useConfig = config[use12Hours ? 'use12Hours' : 'use24Hours'];
|
|
94
|
+
const [actionVisible, setActionVisible] = (0, _react.useState)(false);
|
|
95
|
+
const elementRef = (0, _react.useRef)(null);
|
|
96
|
+
const defaultFocused = {
|
|
97
|
+
configName: TimeType.hours,
|
|
98
|
+
focused: false
|
|
99
|
+
};
|
|
100
|
+
const [currentInputFocused, setCurrentInputFocused] = (0, _react.useState)(defaultFocused);
|
|
101
|
+
const handleMaxAndMin = (value, config) => {
|
|
102
|
+
const newValue = value.substring(value.length - 2, value.length);
|
|
103
|
+
const intrinsicValue = Number(newValue);
|
|
104
|
+
if (intrinsicValue > config.max) {
|
|
105
|
+
return String(config.min);
|
|
106
|
+
} else if (intrinsicValue < config.min) {
|
|
107
|
+
return String(config.max);
|
|
108
|
+
}
|
|
109
|
+
return newValue;
|
|
110
|
+
};
|
|
111
|
+
const handleKeyDown = (event, value, configName) => {
|
|
112
|
+
const config = useConfig[configName];
|
|
113
|
+
const intrinsicValue = Number(value);
|
|
114
|
+
const onValue = newValue => {
|
|
115
|
+
const newVal = configName === TimeType.ampm ? newValue : handleMaxAndMin(String(newValue), config);
|
|
116
|
+
return setValue({
|
|
117
|
+
...internalValue,
|
|
118
|
+
// eslint-disable-next-line sort-keys
|
|
119
|
+
[configName]: String(newVal).padStart(2, '0')
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
switch (event.key) {
|
|
123
|
+
case 'Backspace':
|
|
124
|
+
onValue(DEFAULT_VALUE);
|
|
125
|
+
break;
|
|
126
|
+
case 'ArrowUp':
|
|
127
|
+
event.preventDefault();
|
|
128
|
+
event.stopPropagation();
|
|
129
|
+
if (configName === TimeType.ampm) {
|
|
130
|
+
onValue(config.pm);
|
|
131
|
+
} else {
|
|
132
|
+
onValue(value !== DEFAULT_VALUE ? intrinsicValue + 1 : config.min);
|
|
133
|
+
}
|
|
134
|
+
break;
|
|
135
|
+
case 'ArrowDown':
|
|
136
|
+
event.preventDefault();
|
|
137
|
+
event.stopPropagation();
|
|
138
|
+
if (configName === TimeType.ampm) {
|
|
139
|
+
onValue(config.am);
|
|
140
|
+
} else {
|
|
141
|
+
onValue(value !== DEFAULT_VALUE ? intrinsicValue - 1 : config.max);
|
|
142
|
+
}
|
|
143
|
+
break;
|
|
144
|
+
default:
|
|
145
|
+
if (regex.test(event.key) && configName !== TimeType.ampm) {
|
|
146
|
+
const maxSecondDigit = Math.floor(config.max / 10);
|
|
147
|
+
const minFirstDigit = config.min;
|
|
148
|
+
const keyVal = intrinsicValue < minFirstDigit ? minFirstDigit : event.key;
|
|
149
|
+
const newVal = Number(value) > maxSecondDigit ? `0${keyVal}` : (value && value !== DEFAULT_VALUE ? value : '') + keyVal;
|
|
150
|
+
onValue(newVal);
|
|
151
|
+
} else if (configName === TimeType.ampm && (event.key === 'a' || event.key === 'p')) {
|
|
152
|
+
onValue(event.key === 'a' ? config.am : config.pm);
|
|
153
|
+
}
|
|
154
|
+
break;
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
const handleAction = direction => {
|
|
158
|
+
const {
|
|
159
|
+
configName
|
|
160
|
+
} = currentInputFocused;
|
|
161
|
+
const config = useConfig[configName];
|
|
162
|
+
const prevValue = internalValue[configName];
|
|
163
|
+
let value;
|
|
164
|
+
if (configName === TimeType.ampm) {
|
|
165
|
+
value = direction === 1 ? config.pm : config.am;
|
|
166
|
+
} else {
|
|
167
|
+
value = handleMaxAndMin(String(prevValue !== DEFAULT_VALUE ? Number(prevValue) + direction : direction === -1 ? config.max : 0), config);
|
|
168
|
+
}
|
|
169
|
+
setCurrentInputFocused({
|
|
170
|
+
configName,
|
|
171
|
+
focused: true
|
|
172
|
+
});
|
|
173
|
+
setValue({
|
|
174
|
+
...internalValue,
|
|
175
|
+
// eslint-disable-next-line sort-keys
|
|
176
|
+
[configName]: String(value).padStart(2, '0')
|
|
177
|
+
});
|
|
178
|
+
};
|
|
179
|
+
const handleDocumentClick = event => {
|
|
180
|
+
if (elementRef.current && event.target !== null && !elementRef.current.contains(event.target)) {
|
|
181
|
+
setActionVisible(false);
|
|
182
|
+
setCurrentInputFocused(defaultFocused);
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
const handleInputFocus = configName => {
|
|
186
|
+
setActionVisible(true);
|
|
187
|
+
setCurrentInputFocused({
|
|
188
|
+
configName,
|
|
189
|
+
focused: true
|
|
190
|
+
});
|
|
191
|
+
};
|
|
192
|
+
(0, _react.useEffect)(() => {
|
|
193
|
+
document.addEventListener('click', handleDocumentClick);
|
|
194
|
+
return () => {
|
|
195
|
+
document.removeEventListener('click', handleDocumentClick);
|
|
196
|
+
};
|
|
197
|
+
}, []);
|
|
198
|
+
const visibleActionReset = actionVisible && (internalValue.ampm !== DEFAULT_VALUE && internalValue.ampm != null || internalValue.hours !== DEFAULT_VALUE || internalValue.minutes !== DEFAULT_VALUE);
|
|
199
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
200
|
+
className: "clay-time"
|
|
201
|
+
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.Group, null, icon && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
|
|
202
|
+
shrink: true
|
|
203
|
+
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupText, null, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
204
|
+
spritemap: spritemap,
|
|
205
|
+
symbol: "time"
|
|
206
|
+
}))), /*#__PURE__*/_react.default.createElement(_shared.FocusScope, {
|
|
207
|
+
arrowKeysLeftRight: true,
|
|
208
|
+
arrowKeysUpDown: false
|
|
209
|
+
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
210
|
+
className: (0, _classnames.default)('form-control', {
|
|
211
|
+
disabled
|
|
212
|
+
}),
|
|
213
|
+
onMouseEnter: () => {
|
|
214
|
+
if (!disabled) {
|
|
215
|
+
setActionVisible(true);
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
onMouseLeave: () => {
|
|
219
|
+
if (!currentInputFocused.focused && !disabled) {
|
|
220
|
+
setActionVisible(false);
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
ref: elementRef
|
|
224
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
225
|
+
className: "clay-time-edit"
|
|
226
|
+
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
227
|
+
"aria-label": ariaLabels.hours,
|
|
228
|
+
className: (0, _classnames.default)('clay-time-hours form-control-inset', {
|
|
229
|
+
focus: currentInputFocused.configName === TimeType.hours && currentInputFocused.focused
|
|
230
|
+
}),
|
|
231
|
+
disabled: disabled,
|
|
232
|
+
id: id,
|
|
233
|
+
maxLength: 2,
|
|
234
|
+
onFocus: () => handleInputFocus(TimeType.hours),
|
|
235
|
+
onKeyDown: event => handleKeyDown(event, internalValue.hours, TimeType.hours),
|
|
236
|
+
readOnly: true,
|
|
237
|
+
type: "text",
|
|
238
|
+
value: internalValue.hours
|
|
239
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
240
|
+
className: "clay-time-divider"
|
|
241
|
+
}, ":"), /*#__PURE__*/_react.default.createElement("input", {
|
|
242
|
+
"aria-label": ariaLabels.minutes,
|
|
243
|
+
className: (0, _classnames.default)('clay-time-minutes form-control-inset', {
|
|
244
|
+
focus: currentInputFocused.configName === TimeType.minutes
|
|
245
|
+
}),
|
|
246
|
+
disabled: disabled,
|
|
247
|
+
maxLength: 2,
|
|
248
|
+
onFocus: () => handleInputFocus(TimeType.minutes),
|
|
249
|
+
onKeyDown: event => handleKeyDown(event, internalValue.minutes, TimeType.minutes),
|
|
250
|
+
readOnly: true,
|
|
251
|
+
type: "text",
|
|
252
|
+
value: internalValue.minutes
|
|
253
|
+
}), use12Hours && /*#__PURE__*/_react.default.createElement("input", {
|
|
254
|
+
"aria-label": ariaLabels.ampm,
|
|
255
|
+
className: (0, _classnames.default)('clay-time-ampm form-control-inset', {
|
|
256
|
+
focus: currentInputFocused.configName === TimeType.ampm
|
|
257
|
+
}),
|
|
258
|
+
disabled: disabled,
|
|
259
|
+
"max-length": "2",
|
|
260
|
+
onFocus: () => handleInputFocus(TimeType.ampm),
|
|
261
|
+
onKeyDown: event => handleKeyDown(event, internalValue.ampm, TimeType.ampm),
|
|
262
|
+
readOnly: true,
|
|
263
|
+
type: "text",
|
|
264
|
+
value: internalValue.ampm || DEFAULT_VALUE
|
|
265
|
+
}), name && /*#__PURE__*/_react.default.createElement("input", {
|
|
266
|
+
name: name,
|
|
267
|
+
type: "hidden",
|
|
268
|
+
value: `${internalValue.hours}:${internalValue.minutes}`
|
|
269
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
270
|
+
className: "clay-time-action-group"
|
|
271
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
272
|
+
className: "clay-time-action-group-item",
|
|
273
|
+
style: {
|
|
274
|
+
opacity: visibleActionReset ? 1 : 0,
|
|
275
|
+
pointerEvents: visibleActionReset ? 'auto' : 'none'
|
|
276
|
+
}
|
|
277
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
278
|
+
"aria-label": ariaLabels.clear,
|
|
279
|
+
className: "clay-time-clear-btn",
|
|
280
|
+
disabled: disabled,
|
|
281
|
+
displayType: "unstyled",
|
|
282
|
+
onClick: () => setValue(use12Hours ? {
|
|
283
|
+
ampm: DEFAULT_VALUE,
|
|
284
|
+
hours: DEFAULT_VALUE,
|
|
285
|
+
minutes: DEFAULT_VALUE
|
|
286
|
+
} : {
|
|
287
|
+
hours: DEFAULT_VALUE,
|
|
288
|
+
minutes: DEFAULT_VALUE
|
|
289
|
+
}),
|
|
290
|
+
tabIndex: visibleActionReset ? 0 : -1
|
|
291
|
+
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
292
|
+
spritemap: spritemap,
|
|
293
|
+
symbol: "times-circle"
|
|
294
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
295
|
+
className: "clay-time-action-group-item",
|
|
296
|
+
style: {
|
|
297
|
+
opacity: actionVisible ? 1 : 0
|
|
298
|
+
}
|
|
299
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
300
|
+
className: "btn-group-vertical clay-time-inner-spin",
|
|
301
|
+
role: "group"
|
|
302
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
303
|
+
"aria-label": ariaLabels.timeUp,
|
|
304
|
+
className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-inc",
|
|
305
|
+
disabled: disabled,
|
|
306
|
+
displayType: "secondary",
|
|
307
|
+
onClick: () => handleAction(1)
|
|
308
|
+
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
309
|
+
spritemap: spritemap,
|
|
310
|
+
symbol: "angle-up"
|
|
311
|
+
})), /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
312
|
+
"aria-label": ariaLabels.timeDown,
|
|
313
|
+
className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-dec",
|
|
314
|
+
disabled: disabled,
|
|
315
|
+
displayType: "secondary",
|
|
316
|
+
onClick: () => handleAction(-1)
|
|
317
|
+
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
318
|
+
spritemap: spritemap,
|
|
319
|
+
symbol: "angle-down"
|
|
320
|
+
})))))))), timezone && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
|
|
321
|
+
shrink: true
|
|
322
|
+
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupText, null, `(${timezone})`))));
|
|
323
|
+
};
|
|
324
|
+
var _default = exports.default = TimePicker;
|
package/lib/esm/index.js
ADDED
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import ClayButton from '@clayui/button';
|
|
7
|
+
import { ClayInput } from '@clayui/form';
|
|
8
|
+
import ClayIcon from '@clayui/icon';
|
|
9
|
+
import { FocusScope, useControlledState } from '@clayui/shared';
|
|
10
|
+
import classNames from 'classnames';
|
|
11
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
12
|
+
var TimeType;
|
|
13
|
+
(function (TimeType) {
|
|
14
|
+
TimeType["minutes"] = "minutes";
|
|
15
|
+
TimeType["hours"] = "hours";
|
|
16
|
+
TimeType["ampm"] = "ampm";
|
|
17
|
+
})(TimeType || (TimeType = {}));
|
|
18
|
+
const DEFAULT_VALUE = '--';
|
|
19
|
+
const DEFAULT_CONFIG = {
|
|
20
|
+
use12Hours: {
|
|
21
|
+
ampm: {
|
|
22
|
+
am: 'AM',
|
|
23
|
+
pm: 'PM'
|
|
24
|
+
},
|
|
25
|
+
hours: {
|
|
26
|
+
max: 12,
|
|
27
|
+
min: 1
|
|
28
|
+
},
|
|
29
|
+
minutes: {
|
|
30
|
+
max: 59,
|
|
31
|
+
min: 0
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
use24Hours: {
|
|
35
|
+
ampm: {
|
|
36
|
+
am: 'AM',
|
|
37
|
+
pm: 'PM'
|
|
38
|
+
},
|
|
39
|
+
hours: {
|
|
40
|
+
max: 23,
|
|
41
|
+
min: 0
|
|
42
|
+
},
|
|
43
|
+
minutes: {
|
|
44
|
+
max: 59,
|
|
45
|
+
min: 0
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
const regex = /^\d+$/;
|
|
50
|
+
const TimePicker = _ref => {
|
|
51
|
+
let {
|
|
52
|
+
ariaLabels = {
|
|
53
|
+
ampm: 'Select time of day (AM/PM) using up (PM) and down (AM) arrow keys',
|
|
54
|
+
clear: 'Delete the entered time',
|
|
55
|
+
hours: 'Enter the hour in 00:00 format',
|
|
56
|
+
minutes: 'Enter the minutes in 00:00 format',
|
|
57
|
+
timeDown: 'Time down',
|
|
58
|
+
timeUp: 'Time up'
|
|
59
|
+
},
|
|
60
|
+
config = DEFAULT_CONFIG,
|
|
61
|
+
disabled = false,
|
|
62
|
+
defaultValue = {
|
|
63
|
+
hours: DEFAULT_VALUE,
|
|
64
|
+
minutes: DEFAULT_VALUE
|
|
65
|
+
},
|
|
66
|
+
icon = false,
|
|
67
|
+
id,
|
|
68
|
+
name,
|
|
69
|
+
onChange,
|
|
70
|
+
onInputChange,
|
|
71
|
+
spritemap,
|
|
72
|
+
timezone,
|
|
73
|
+
use12Hours = false,
|
|
74
|
+
value,
|
|
75
|
+
values
|
|
76
|
+
} = _ref;
|
|
77
|
+
const [internalValue, setValue] = useControlledState({
|
|
78
|
+
defaultName: 'defaultValue',
|
|
79
|
+
defaultValue,
|
|
80
|
+
handleName: 'onChange',
|
|
81
|
+
name: 'value',
|
|
82
|
+
onChange: onChange ?? onInputChange,
|
|
83
|
+
value: value ?? values
|
|
84
|
+
});
|
|
85
|
+
const useConfig = config[use12Hours ? 'use12Hours' : 'use24Hours'];
|
|
86
|
+
const [actionVisible, setActionVisible] = useState(false);
|
|
87
|
+
const elementRef = useRef(null);
|
|
88
|
+
const defaultFocused = {
|
|
89
|
+
configName: TimeType.hours,
|
|
90
|
+
focused: false
|
|
91
|
+
};
|
|
92
|
+
const [currentInputFocused, setCurrentInputFocused] = useState(defaultFocused);
|
|
93
|
+
const handleMaxAndMin = (value, config) => {
|
|
94
|
+
const newValue = value.substring(value.length - 2, value.length);
|
|
95
|
+
const intrinsicValue = Number(newValue);
|
|
96
|
+
if (intrinsicValue > config.max) {
|
|
97
|
+
return String(config.min);
|
|
98
|
+
} else if (intrinsicValue < config.min) {
|
|
99
|
+
return String(config.max);
|
|
100
|
+
}
|
|
101
|
+
return newValue;
|
|
102
|
+
};
|
|
103
|
+
const handleKeyDown = (event, value, configName) => {
|
|
104
|
+
const config = useConfig[configName];
|
|
105
|
+
const intrinsicValue = Number(value);
|
|
106
|
+
const onValue = newValue => {
|
|
107
|
+
const newVal = configName === TimeType.ampm ? newValue : handleMaxAndMin(String(newValue), config);
|
|
108
|
+
return setValue({
|
|
109
|
+
...internalValue,
|
|
110
|
+
// eslint-disable-next-line sort-keys
|
|
111
|
+
[configName]: String(newVal).padStart(2, '0')
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
switch (event.key) {
|
|
115
|
+
case 'Backspace':
|
|
116
|
+
onValue(DEFAULT_VALUE);
|
|
117
|
+
break;
|
|
118
|
+
case 'ArrowUp':
|
|
119
|
+
event.preventDefault();
|
|
120
|
+
event.stopPropagation();
|
|
121
|
+
if (configName === TimeType.ampm) {
|
|
122
|
+
onValue(config.pm);
|
|
123
|
+
} else {
|
|
124
|
+
onValue(value !== DEFAULT_VALUE ? intrinsicValue + 1 : config.min);
|
|
125
|
+
}
|
|
126
|
+
break;
|
|
127
|
+
case 'ArrowDown':
|
|
128
|
+
event.preventDefault();
|
|
129
|
+
event.stopPropagation();
|
|
130
|
+
if (configName === TimeType.ampm) {
|
|
131
|
+
onValue(config.am);
|
|
132
|
+
} else {
|
|
133
|
+
onValue(value !== DEFAULT_VALUE ? intrinsicValue - 1 : config.max);
|
|
134
|
+
}
|
|
135
|
+
break;
|
|
136
|
+
default:
|
|
137
|
+
if (regex.test(event.key) && configName !== TimeType.ampm) {
|
|
138
|
+
const maxSecondDigit = Math.floor(config.max / 10);
|
|
139
|
+
const minFirstDigit = config.min;
|
|
140
|
+
const keyVal = intrinsicValue < minFirstDigit ? minFirstDigit : event.key;
|
|
141
|
+
const newVal = Number(value) > maxSecondDigit ? `0${keyVal}` : (value && value !== DEFAULT_VALUE ? value : '') + keyVal;
|
|
142
|
+
onValue(newVal);
|
|
143
|
+
} else if (configName === TimeType.ampm && (event.key === 'a' || event.key === 'p')) {
|
|
144
|
+
onValue(event.key === 'a' ? config.am : config.pm);
|
|
145
|
+
}
|
|
146
|
+
break;
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
const handleAction = direction => {
|
|
150
|
+
const {
|
|
151
|
+
configName
|
|
152
|
+
} = currentInputFocused;
|
|
153
|
+
const config = useConfig[configName];
|
|
154
|
+
const prevValue = internalValue[configName];
|
|
155
|
+
let value;
|
|
156
|
+
if (configName === TimeType.ampm) {
|
|
157
|
+
value = direction === 1 ? config.pm : config.am;
|
|
158
|
+
} else {
|
|
159
|
+
value = handleMaxAndMin(String(prevValue !== DEFAULT_VALUE ? Number(prevValue) + direction : direction === -1 ? config.max : 0), config);
|
|
160
|
+
}
|
|
161
|
+
setCurrentInputFocused({
|
|
162
|
+
configName,
|
|
163
|
+
focused: true
|
|
164
|
+
});
|
|
165
|
+
setValue({
|
|
166
|
+
...internalValue,
|
|
167
|
+
// eslint-disable-next-line sort-keys
|
|
168
|
+
[configName]: String(value).padStart(2, '0')
|
|
169
|
+
});
|
|
170
|
+
};
|
|
171
|
+
const handleDocumentClick = event => {
|
|
172
|
+
if (elementRef.current && event.target !== null && !elementRef.current.contains(event.target)) {
|
|
173
|
+
setActionVisible(false);
|
|
174
|
+
setCurrentInputFocused(defaultFocused);
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
const handleInputFocus = configName => {
|
|
178
|
+
setActionVisible(true);
|
|
179
|
+
setCurrentInputFocused({
|
|
180
|
+
configName,
|
|
181
|
+
focused: true
|
|
182
|
+
});
|
|
183
|
+
};
|
|
184
|
+
useEffect(() => {
|
|
185
|
+
document.addEventListener('click', handleDocumentClick);
|
|
186
|
+
return () => {
|
|
187
|
+
document.removeEventListener('click', handleDocumentClick);
|
|
188
|
+
};
|
|
189
|
+
}, []);
|
|
190
|
+
const visibleActionReset = actionVisible && (internalValue.ampm !== DEFAULT_VALUE && internalValue.ampm != null || internalValue.hours !== DEFAULT_VALUE || internalValue.minutes !== DEFAULT_VALUE);
|
|
191
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
192
|
+
className: "clay-time"
|
|
193
|
+
}, /*#__PURE__*/React.createElement(ClayInput.Group, null, icon && /*#__PURE__*/React.createElement(ClayInput.GroupItem, {
|
|
194
|
+
shrink: true
|
|
195
|
+
}, /*#__PURE__*/React.createElement(ClayInput.GroupText, null, /*#__PURE__*/React.createElement(ClayIcon, {
|
|
196
|
+
spritemap: spritemap,
|
|
197
|
+
symbol: "time"
|
|
198
|
+
}))), /*#__PURE__*/React.createElement(FocusScope, {
|
|
199
|
+
arrowKeysLeftRight: true,
|
|
200
|
+
arrowKeysUpDown: false
|
|
201
|
+
}, /*#__PURE__*/React.createElement(ClayInput.GroupItem, null, /*#__PURE__*/React.createElement("div", {
|
|
202
|
+
className: classNames('form-control', {
|
|
203
|
+
disabled
|
|
204
|
+
}),
|
|
205
|
+
onMouseEnter: () => {
|
|
206
|
+
if (!disabled) {
|
|
207
|
+
setActionVisible(true);
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
onMouseLeave: () => {
|
|
211
|
+
if (!currentInputFocused.focused && !disabled) {
|
|
212
|
+
setActionVisible(false);
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
ref: elementRef
|
|
216
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
217
|
+
className: "clay-time-edit"
|
|
218
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
219
|
+
"aria-label": ariaLabels.hours,
|
|
220
|
+
className: classNames('clay-time-hours form-control-inset', {
|
|
221
|
+
focus: currentInputFocused.configName === TimeType.hours && currentInputFocused.focused
|
|
222
|
+
}),
|
|
223
|
+
disabled: disabled,
|
|
224
|
+
id: id,
|
|
225
|
+
maxLength: 2,
|
|
226
|
+
onFocus: () => handleInputFocus(TimeType.hours),
|
|
227
|
+
onKeyDown: event => handleKeyDown(event, internalValue.hours, TimeType.hours),
|
|
228
|
+
readOnly: true,
|
|
229
|
+
type: "text",
|
|
230
|
+
value: internalValue.hours
|
|
231
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
232
|
+
className: "clay-time-divider"
|
|
233
|
+
}, ":"), /*#__PURE__*/React.createElement("input", {
|
|
234
|
+
"aria-label": ariaLabels.minutes,
|
|
235
|
+
className: classNames('clay-time-minutes form-control-inset', {
|
|
236
|
+
focus: currentInputFocused.configName === TimeType.minutes
|
|
237
|
+
}),
|
|
238
|
+
disabled: disabled,
|
|
239
|
+
maxLength: 2,
|
|
240
|
+
onFocus: () => handleInputFocus(TimeType.minutes),
|
|
241
|
+
onKeyDown: event => handleKeyDown(event, internalValue.minutes, TimeType.minutes),
|
|
242
|
+
readOnly: true,
|
|
243
|
+
type: "text",
|
|
244
|
+
value: internalValue.minutes
|
|
245
|
+
}), use12Hours && /*#__PURE__*/React.createElement("input", {
|
|
246
|
+
"aria-label": ariaLabels.ampm,
|
|
247
|
+
className: classNames('clay-time-ampm form-control-inset', {
|
|
248
|
+
focus: currentInputFocused.configName === TimeType.ampm
|
|
249
|
+
}),
|
|
250
|
+
disabled: disabled,
|
|
251
|
+
"max-length": "2",
|
|
252
|
+
onFocus: () => handleInputFocus(TimeType.ampm),
|
|
253
|
+
onKeyDown: event => handleKeyDown(event, internalValue.ampm, TimeType.ampm),
|
|
254
|
+
readOnly: true,
|
|
255
|
+
type: "text",
|
|
256
|
+
value: internalValue.ampm || DEFAULT_VALUE
|
|
257
|
+
}), name && /*#__PURE__*/React.createElement("input", {
|
|
258
|
+
name: name,
|
|
259
|
+
type: "hidden",
|
|
260
|
+
value: `${internalValue.hours}:${internalValue.minutes}`
|
|
261
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
262
|
+
className: "clay-time-action-group"
|
|
263
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
264
|
+
className: "clay-time-action-group-item",
|
|
265
|
+
style: {
|
|
266
|
+
opacity: visibleActionReset ? 1 : 0,
|
|
267
|
+
pointerEvents: visibleActionReset ? 'auto' : 'none'
|
|
268
|
+
}
|
|
269
|
+
}, /*#__PURE__*/React.createElement(ClayButton, {
|
|
270
|
+
"aria-label": ariaLabels.clear,
|
|
271
|
+
className: "clay-time-clear-btn",
|
|
272
|
+
disabled: disabled,
|
|
273
|
+
displayType: "unstyled",
|
|
274
|
+
onClick: () => setValue(use12Hours ? {
|
|
275
|
+
ampm: DEFAULT_VALUE,
|
|
276
|
+
hours: DEFAULT_VALUE,
|
|
277
|
+
minutes: DEFAULT_VALUE
|
|
278
|
+
} : {
|
|
279
|
+
hours: DEFAULT_VALUE,
|
|
280
|
+
minutes: DEFAULT_VALUE
|
|
281
|
+
}),
|
|
282
|
+
tabIndex: visibleActionReset ? 0 : -1
|
|
283
|
+
}, /*#__PURE__*/React.createElement(ClayIcon, {
|
|
284
|
+
spritemap: spritemap,
|
|
285
|
+
symbol: "times-circle"
|
|
286
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
287
|
+
className: "clay-time-action-group-item",
|
|
288
|
+
style: {
|
|
289
|
+
opacity: actionVisible ? 1 : 0
|
|
290
|
+
}
|
|
291
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
292
|
+
className: "btn-group-vertical clay-time-inner-spin",
|
|
293
|
+
role: "group"
|
|
294
|
+
}, /*#__PURE__*/React.createElement(ClayButton, {
|
|
295
|
+
"aria-label": ariaLabels.timeUp,
|
|
296
|
+
className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-inc",
|
|
297
|
+
disabled: disabled,
|
|
298
|
+
displayType: "secondary",
|
|
299
|
+
onClick: () => handleAction(1)
|
|
300
|
+
}, /*#__PURE__*/React.createElement(ClayIcon, {
|
|
301
|
+
spritemap: spritemap,
|
|
302
|
+
symbol: "angle-up"
|
|
303
|
+
})), /*#__PURE__*/React.createElement(ClayButton, {
|
|
304
|
+
"aria-label": ariaLabels.timeDown,
|
|
305
|
+
className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-dec",
|
|
306
|
+
disabled: disabled,
|
|
307
|
+
displayType: "secondary",
|
|
308
|
+
onClick: () => handleAction(-1)
|
|
309
|
+
}, /*#__PURE__*/React.createElement(ClayIcon, {
|
|
310
|
+
spritemap: spritemap,
|
|
311
|
+
symbol: "angle-down"
|
|
312
|
+
})))))))), timezone && /*#__PURE__*/React.createElement(ClayInput.GroupItem, {
|
|
313
|
+
shrink: true
|
|
314
|
+
}, /*#__PURE__*/React.createElement(ClayInput.GroupText, null, `(${timezone})`))));
|
|
315
|
+
};
|
|
316
|
+
export default TimePicker;
|
package/package.json
CHANGED
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clayui/time-picker",
|
|
3
|
-
"version": "3.141.
|
|
3
|
+
"version": "3.141.2-alpha.0",
|
|
4
4
|
"description": "ClayTimePicker component",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"repository": "https://github.com/liferay/clay",
|
|
7
|
-
"main": "lib/index.js",
|
|
7
|
+
"main": "lib/cjs/index.js",
|
|
8
|
+
"module": "lib/esm/index.js",
|
|
9
|
+
"exports": {
|
|
10
|
+
"import": "./lib/esm/index.js",
|
|
11
|
+
"require": "./lib/cjs/index.js"
|
|
12
|
+
},
|
|
8
13
|
"types": "lib/index.d.ts",
|
|
9
14
|
"ts:main": "src/index.tsx",
|
|
10
15
|
"files": [
|
|
11
16
|
"lib"
|
|
12
17
|
],
|
|
13
18
|
"scripts": {
|
|
14
|
-
"build": "
|
|
19
|
+
"build": "yarn build:cjs && yarn build:esm",
|
|
20
|
+
"build:cjs": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib/cjs --extensions .ts,.tsx",
|
|
21
|
+
"build:esm": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib/esm --extensions .ts,.tsx --env-name esm",
|
|
15
22
|
"buildTypes": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
|
|
16
23
|
"test": "jest --config ../../jest.config.js"
|
|
17
24
|
},
|
|
@@ -20,10 +27,10 @@
|
|
|
20
27
|
"react"
|
|
21
28
|
],
|
|
22
29
|
"dependencies": {
|
|
23
|
-
"@clayui/button": "^3.
|
|
24
|
-
"@clayui/form": "^3.141.
|
|
25
|
-
"@clayui/icon": "^3.
|
|
26
|
-
"@clayui/shared": "^3.141.
|
|
30
|
+
"@clayui/button": "^3.141.2-alpha.0",
|
|
31
|
+
"@clayui/form": "^3.141.2-alpha.0",
|
|
32
|
+
"@clayui/icon": "^3.141.2-alpha.0",
|
|
33
|
+
"@clayui/shared": "^3.141.2-alpha.0",
|
|
27
34
|
"classnames": "^2.2.6"
|
|
28
35
|
},
|
|
29
36
|
"peerDependencies": {
|
|
@@ -34,5 +41,5 @@
|
|
|
34
41
|
"browserslist": [
|
|
35
42
|
"extends browserslist-config-clay"
|
|
36
43
|
],
|
|
37
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "aea6ecdaee62ccc374009982f934e1b193785668"
|
|
38
45
|
}
|
package/lib/index.d.ts
DELETED
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
import { InternalDispatch } from '@clayui/shared';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
declare type ConfigMaxMin = {
|
|
8
|
-
max: number;
|
|
9
|
-
min: number;
|
|
10
|
-
};
|
|
11
|
-
declare type ConfigAmpm = {
|
|
12
|
-
am: string;
|
|
13
|
-
pm: string;
|
|
14
|
-
};
|
|
15
|
-
declare type Config = {
|
|
16
|
-
ampm: ConfigAmpm;
|
|
17
|
-
hours: ConfigMaxMin;
|
|
18
|
-
minutes: ConfigMaxMin;
|
|
19
|
-
};
|
|
20
|
-
export declare type InputAmPm = '--' | 'AM' | 'PM';
|
|
21
|
-
export declare type Input = {
|
|
22
|
-
ampm?: InputAmPm;
|
|
23
|
-
hours: '--' | string;
|
|
24
|
-
minutes: '--' | string;
|
|
25
|
-
};
|
|
26
|
-
interface IProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
|
|
27
|
-
/**
|
|
28
|
-
* Add the labels for the input elements and the input clear button,
|
|
29
|
-
* use this to provide accessibility and internationalization.
|
|
30
|
-
* By default the text is in English.
|
|
31
|
-
*/
|
|
32
|
-
ariaLabels?: {
|
|
33
|
-
ampm: string;
|
|
34
|
-
hours: string;
|
|
35
|
-
minutes: string;
|
|
36
|
-
clear: string;
|
|
37
|
-
timeDown: string;
|
|
38
|
-
timeUp: string;
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* Range settings for 12 or 24 hours.
|
|
42
|
-
*/
|
|
43
|
-
config?: {
|
|
44
|
-
use12Hours: Config;
|
|
45
|
-
use24Hours: Config;
|
|
46
|
-
};
|
|
47
|
-
/**
|
|
48
|
-
* Flag to disable user interactions on the component.
|
|
49
|
-
*/
|
|
50
|
-
disabled?: boolean;
|
|
51
|
-
/**
|
|
52
|
-
* Property to set the default value (uncontrolled).
|
|
53
|
-
*/
|
|
54
|
-
defaultValue?: Input;
|
|
55
|
-
/**
|
|
56
|
-
* Flag to indicate if show time icon or not.
|
|
57
|
-
*/
|
|
58
|
-
icon?: boolean;
|
|
59
|
-
/**
|
|
60
|
-
* Id to be applied to `clay-time-hours` input.
|
|
61
|
-
*/
|
|
62
|
-
id?: string;
|
|
63
|
-
/**
|
|
64
|
-
* Called when input values change hour, minutes or ampm (controlled).
|
|
65
|
-
*/
|
|
66
|
-
onChange?: InternalDispatch<Input>;
|
|
67
|
-
/**
|
|
68
|
-
* Called when input values change hour, minutes or ampm (controlled).
|
|
69
|
-
* @deprecated since v3.52.0 - use `onChange` instead.
|
|
70
|
-
*/
|
|
71
|
-
onInputChange?: InternalDispatch<Input>;
|
|
72
|
-
/**
|
|
73
|
-
* Name attribute for the hidden input (used for form submission).
|
|
74
|
-
*/
|
|
75
|
-
name?: string;
|
|
76
|
-
/**
|
|
77
|
-
* The path to the SVG spritemap file containing the icons.
|
|
78
|
-
*/
|
|
79
|
-
spritemap?: string;
|
|
80
|
-
/**
|
|
81
|
-
* Flag to indicate the timezone of the user.
|
|
82
|
-
*/
|
|
83
|
-
timezone?: string;
|
|
84
|
-
/**
|
|
85
|
-
* Flag to indicate if 12-hour use, when true, should show am/pm input.
|
|
86
|
-
*/
|
|
87
|
-
use12Hours?: boolean;
|
|
88
|
-
/**
|
|
89
|
-
* Sets the values for the hour, minute, or am/pm input (controlled).
|
|
90
|
-
* @deprecated since v3.52.0 - use `value` instead.
|
|
91
|
-
*/
|
|
92
|
-
values?: Input;
|
|
93
|
-
/**
|
|
94
|
-
* Sets the values for the hour, minute, or am/pm input (controlled).
|
|
95
|
-
*/
|
|
96
|
-
value?: Input;
|
|
97
|
-
}
|
|
98
|
-
declare const TimePicker: ({ ariaLabels, config, disabled, defaultValue, icon, id, name, onChange, onInputChange, spritemap, timezone, use12Hours, value, values, }: IProps) => JSX.Element;
|
|
99
|
-
export default TimePicker;
|
package/lib/index.js
DELETED
|
@@ -1,356 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _button = _interopRequireDefault(require("@clayui/button"));
|
|
9
|
-
var _form = require("@clayui/form");
|
|
10
|
-
var _icon = _interopRequireDefault(require("@clayui/icon"));
|
|
11
|
-
var _shared = require("@clayui/shared");
|
|
12
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
14
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
20
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
21
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
22
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
23
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
24
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
25
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
|
|
26
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
27
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /**
|
|
28
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
29
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
30
|
-
*/
|
|
31
|
-
var TimeType;
|
|
32
|
-
(function (TimeType) {
|
|
33
|
-
TimeType["minutes"] = "minutes";
|
|
34
|
-
TimeType["hours"] = "hours";
|
|
35
|
-
TimeType["ampm"] = "ampm";
|
|
36
|
-
})(TimeType || (TimeType = {}));
|
|
37
|
-
var DEFAULT_VALUE = '--';
|
|
38
|
-
var DEFAULT_CONFIG = {
|
|
39
|
-
use12Hours: {
|
|
40
|
-
ampm: {
|
|
41
|
-
am: 'AM',
|
|
42
|
-
pm: 'PM'
|
|
43
|
-
},
|
|
44
|
-
hours: {
|
|
45
|
-
max: 12,
|
|
46
|
-
min: 1
|
|
47
|
-
},
|
|
48
|
-
minutes: {
|
|
49
|
-
max: 59,
|
|
50
|
-
min: 0
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
use24Hours: {
|
|
54
|
-
ampm: {
|
|
55
|
-
am: 'AM',
|
|
56
|
-
pm: 'PM'
|
|
57
|
-
},
|
|
58
|
-
hours: {
|
|
59
|
-
max: 23,
|
|
60
|
-
min: 0
|
|
61
|
-
},
|
|
62
|
-
minutes: {
|
|
63
|
-
max: 59,
|
|
64
|
-
min: 0
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
var regex = /^\d+$/;
|
|
69
|
-
var TimePicker = function TimePicker(_ref) {
|
|
70
|
-
var _ref$ariaLabels = _ref.ariaLabels,
|
|
71
|
-
ariaLabels = _ref$ariaLabels === void 0 ? {
|
|
72
|
-
ampm: 'Select time of day (AM/PM) using up (PM) and down (AM) arrow keys',
|
|
73
|
-
clear: 'Delete the entered time',
|
|
74
|
-
hours: 'Enter the hour in 00:00 format',
|
|
75
|
-
minutes: 'Enter the minutes in 00:00 format',
|
|
76
|
-
timeDown: 'Time down',
|
|
77
|
-
timeUp: 'Time up'
|
|
78
|
-
} : _ref$ariaLabels,
|
|
79
|
-
_ref$config = _ref.config,
|
|
80
|
-
config = _ref$config === void 0 ? DEFAULT_CONFIG : _ref$config,
|
|
81
|
-
_ref$disabled = _ref.disabled,
|
|
82
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
83
|
-
_ref$defaultValue = _ref.defaultValue,
|
|
84
|
-
defaultValue = _ref$defaultValue === void 0 ? {
|
|
85
|
-
hours: DEFAULT_VALUE,
|
|
86
|
-
minutes: DEFAULT_VALUE
|
|
87
|
-
} : _ref$defaultValue,
|
|
88
|
-
_ref$icon = _ref.icon,
|
|
89
|
-
icon = _ref$icon === void 0 ? false : _ref$icon,
|
|
90
|
-
id = _ref.id,
|
|
91
|
-
name = _ref.name,
|
|
92
|
-
onChange = _ref.onChange,
|
|
93
|
-
onInputChange = _ref.onInputChange,
|
|
94
|
-
spritemap = _ref.spritemap,
|
|
95
|
-
timezone = _ref.timezone,
|
|
96
|
-
_ref$use12Hours = _ref.use12Hours,
|
|
97
|
-
use12Hours = _ref$use12Hours === void 0 ? false : _ref$use12Hours,
|
|
98
|
-
value = _ref.value,
|
|
99
|
-
values = _ref.values;
|
|
100
|
-
var _useControlledState = (0, _shared.useControlledState)({
|
|
101
|
-
defaultName: 'defaultValue',
|
|
102
|
-
defaultValue: defaultValue,
|
|
103
|
-
handleName: 'onChange',
|
|
104
|
-
name: 'value',
|
|
105
|
-
onChange: onChange !== null && onChange !== void 0 ? onChange : onInputChange,
|
|
106
|
-
value: value !== null && value !== void 0 ? value : values
|
|
107
|
-
}),
|
|
108
|
-
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
109
|
-
internalValue = _useControlledState2[0],
|
|
110
|
-
setValue = _useControlledState2[1];
|
|
111
|
-
var useConfig = config[use12Hours ? 'use12Hours' : 'use24Hours'];
|
|
112
|
-
var _useState = (0, _react.useState)(false),
|
|
113
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
114
|
-
actionVisible = _useState2[0],
|
|
115
|
-
setActionVisible = _useState2[1];
|
|
116
|
-
var elementRef = (0, _react.useRef)(null);
|
|
117
|
-
var defaultFocused = {
|
|
118
|
-
configName: TimeType.hours,
|
|
119
|
-
focused: false
|
|
120
|
-
};
|
|
121
|
-
var _useState3 = (0, _react.useState)(defaultFocused),
|
|
122
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
123
|
-
currentInputFocused = _useState4[0],
|
|
124
|
-
setCurrentInputFocused = _useState4[1];
|
|
125
|
-
var handleMaxAndMin = function handleMaxAndMin(value, config) {
|
|
126
|
-
var newValue = value.substring(value.length - 2, value.length);
|
|
127
|
-
var intrinsicValue = Number(newValue);
|
|
128
|
-
if (intrinsicValue > config.max) {
|
|
129
|
-
return String(config.min);
|
|
130
|
-
} else if (intrinsicValue < config.min) {
|
|
131
|
-
return String(config.max);
|
|
132
|
-
}
|
|
133
|
-
return newValue;
|
|
134
|
-
};
|
|
135
|
-
var handleKeyDown = function handleKeyDown(event, value, configName) {
|
|
136
|
-
var config = useConfig[configName];
|
|
137
|
-
var intrinsicValue = Number(value);
|
|
138
|
-
var onValue = function onValue(newValue) {
|
|
139
|
-
var newVal = configName === TimeType.ampm ? newValue : handleMaxAndMin(String(newValue), config);
|
|
140
|
-
return setValue(_objectSpread(_objectSpread({}, internalValue), {}, _defineProperty({}, configName, String(newVal).padStart(2, '0'))));
|
|
141
|
-
};
|
|
142
|
-
switch (event.key) {
|
|
143
|
-
case 'Backspace':
|
|
144
|
-
onValue(DEFAULT_VALUE);
|
|
145
|
-
break;
|
|
146
|
-
case 'ArrowUp':
|
|
147
|
-
event.preventDefault();
|
|
148
|
-
event.stopPropagation();
|
|
149
|
-
if (configName === TimeType.ampm) {
|
|
150
|
-
onValue(config.pm);
|
|
151
|
-
} else {
|
|
152
|
-
onValue(value !== DEFAULT_VALUE ? intrinsicValue + 1 : config.min);
|
|
153
|
-
}
|
|
154
|
-
break;
|
|
155
|
-
case 'ArrowDown':
|
|
156
|
-
event.preventDefault();
|
|
157
|
-
event.stopPropagation();
|
|
158
|
-
if (configName === TimeType.ampm) {
|
|
159
|
-
onValue(config.am);
|
|
160
|
-
} else {
|
|
161
|
-
onValue(value !== DEFAULT_VALUE ? intrinsicValue - 1 : config.max);
|
|
162
|
-
}
|
|
163
|
-
break;
|
|
164
|
-
default:
|
|
165
|
-
if (regex.test(event.key) && configName !== TimeType.ampm) {
|
|
166
|
-
var maxSecondDigit = Math.floor(config.max / 10);
|
|
167
|
-
var minFirstDigit = config.min;
|
|
168
|
-
var keyVal = intrinsicValue < minFirstDigit ? minFirstDigit : event.key;
|
|
169
|
-
var newVal = Number(value) > maxSecondDigit ? "0".concat(keyVal) : (value && value !== DEFAULT_VALUE ? value : '') + keyVal;
|
|
170
|
-
onValue(newVal);
|
|
171
|
-
} else if (configName === TimeType.ampm && (event.key === 'a' || event.key === 'p')) {
|
|
172
|
-
onValue(event.key === 'a' ? config.am : config.pm);
|
|
173
|
-
}
|
|
174
|
-
break;
|
|
175
|
-
}
|
|
176
|
-
};
|
|
177
|
-
var handleAction = function handleAction(direction) {
|
|
178
|
-
var configName = currentInputFocused.configName;
|
|
179
|
-
var config = useConfig[configName];
|
|
180
|
-
var prevValue = internalValue[configName];
|
|
181
|
-
var value;
|
|
182
|
-
if (configName === TimeType.ampm) {
|
|
183
|
-
value = direction === 1 ? config.pm : config.am;
|
|
184
|
-
} else {
|
|
185
|
-
value = handleMaxAndMin(String(prevValue !== DEFAULT_VALUE ? Number(prevValue) + direction : direction === -1 ? config.max : 0), config);
|
|
186
|
-
}
|
|
187
|
-
setCurrentInputFocused({
|
|
188
|
-
configName: configName,
|
|
189
|
-
focused: true
|
|
190
|
-
});
|
|
191
|
-
setValue(_objectSpread(_objectSpread({}, internalValue), {}, _defineProperty({}, configName, String(value).padStart(2, '0'))));
|
|
192
|
-
};
|
|
193
|
-
var handleDocumentClick = function handleDocumentClick(event) {
|
|
194
|
-
if (elementRef.current && event.target !== null && !elementRef.current.contains(event.target)) {
|
|
195
|
-
setActionVisible(false);
|
|
196
|
-
setCurrentInputFocused(defaultFocused);
|
|
197
|
-
}
|
|
198
|
-
};
|
|
199
|
-
var handleInputFocus = function handleInputFocus(configName) {
|
|
200
|
-
setActionVisible(true);
|
|
201
|
-
setCurrentInputFocused({
|
|
202
|
-
configName: configName,
|
|
203
|
-
focused: true
|
|
204
|
-
});
|
|
205
|
-
};
|
|
206
|
-
(0, _react.useEffect)(function () {
|
|
207
|
-
document.addEventListener('click', handleDocumentClick);
|
|
208
|
-
return function () {
|
|
209
|
-
document.removeEventListener('click', handleDocumentClick);
|
|
210
|
-
};
|
|
211
|
-
}, []);
|
|
212
|
-
var visibleActionReset = actionVisible && (internalValue.ampm !== DEFAULT_VALUE && internalValue.ampm != null || internalValue.hours !== DEFAULT_VALUE || internalValue.minutes !== DEFAULT_VALUE);
|
|
213
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
214
|
-
className: "clay-time"
|
|
215
|
-
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.Group, null, icon && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
|
|
216
|
-
shrink: true
|
|
217
|
-
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupText, null, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
218
|
-
spritemap: spritemap,
|
|
219
|
-
symbol: "time"
|
|
220
|
-
}))), /*#__PURE__*/_react.default.createElement(_shared.FocusScope, {
|
|
221
|
-
arrowKeysLeftRight: true,
|
|
222
|
-
arrowKeysUpDown: false
|
|
223
|
-
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
224
|
-
className: (0, _classnames.default)('form-control', {
|
|
225
|
-
disabled: disabled
|
|
226
|
-
}),
|
|
227
|
-
onMouseEnter: function onMouseEnter() {
|
|
228
|
-
if (!disabled) {
|
|
229
|
-
setActionVisible(true);
|
|
230
|
-
}
|
|
231
|
-
},
|
|
232
|
-
onMouseLeave: function onMouseLeave() {
|
|
233
|
-
if (!currentInputFocused.focused && !disabled) {
|
|
234
|
-
setActionVisible(false);
|
|
235
|
-
}
|
|
236
|
-
},
|
|
237
|
-
ref: elementRef
|
|
238
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
239
|
-
className: "clay-time-edit"
|
|
240
|
-
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
241
|
-
"aria-label": ariaLabels.hours,
|
|
242
|
-
className: (0, _classnames.default)('clay-time-hours form-control-inset', {
|
|
243
|
-
focus: currentInputFocused.configName === TimeType.hours && currentInputFocused.focused
|
|
244
|
-
}),
|
|
245
|
-
disabled: disabled,
|
|
246
|
-
id: id,
|
|
247
|
-
maxLength: 2,
|
|
248
|
-
onFocus: function onFocus() {
|
|
249
|
-
return handleInputFocus(TimeType.hours);
|
|
250
|
-
},
|
|
251
|
-
onKeyDown: function onKeyDown(event) {
|
|
252
|
-
return handleKeyDown(event, internalValue.hours, TimeType.hours);
|
|
253
|
-
},
|
|
254
|
-
readOnly: true,
|
|
255
|
-
type: "text",
|
|
256
|
-
value: internalValue.hours
|
|
257
|
-
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
258
|
-
className: "clay-time-divider"
|
|
259
|
-
}, ":"), /*#__PURE__*/_react.default.createElement("input", {
|
|
260
|
-
"aria-label": ariaLabels.minutes,
|
|
261
|
-
className: (0, _classnames.default)('clay-time-minutes form-control-inset', {
|
|
262
|
-
focus: currentInputFocused.configName === TimeType.minutes
|
|
263
|
-
}),
|
|
264
|
-
disabled: disabled,
|
|
265
|
-
maxLength: 2,
|
|
266
|
-
onFocus: function onFocus() {
|
|
267
|
-
return handleInputFocus(TimeType.minutes);
|
|
268
|
-
},
|
|
269
|
-
onKeyDown: function onKeyDown(event) {
|
|
270
|
-
return handleKeyDown(event, internalValue.minutes, TimeType.minutes);
|
|
271
|
-
},
|
|
272
|
-
readOnly: true,
|
|
273
|
-
type: "text",
|
|
274
|
-
value: internalValue.minutes
|
|
275
|
-
}), use12Hours && /*#__PURE__*/_react.default.createElement("input", {
|
|
276
|
-
"aria-label": ariaLabels.ampm,
|
|
277
|
-
className: (0, _classnames.default)('clay-time-ampm form-control-inset', {
|
|
278
|
-
focus: currentInputFocused.configName === TimeType.ampm
|
|
279
|
-
}),
|
|
280
|
-
disabled: disabled,
|
|
281
|
-
"max-length": "2",
|
|
282
|
-
onFocus: function onFocus() {
|
|
283
|
-
return handleInputFocus(TimeType.ampm);
|
|
284
|
-
},
|
|
285
|
-
onKeyDown: function onKeyDown(event) {
|
|
286
|
-
return handleKeyDown(event, internalValue.ampm, TimeType.ampm);
|
|
287
|
-
},
|
|
288
|
-
readOnly: true,
|
|
289
|
-
type: "text",
|
|
290
|
-
value: internalValue.ampm || DEFAULT_VALUE
|
|
291
|
-
}), name && /*#__PURE__*/_react.default.createElement("input", {
|
|
292
|
-
name: name,
|
|
293
|
-
type: "hidden",
|
|
294
|
-
value: "".concat(internalValue.hours, ":").concat(internalValue.minutes)
|
|
295
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
296
|
-
className: "clay-time-action-group"
|
|
297
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
298
|
-
className: "clay-time-action-group-item",
|
|
299
|
-
style: {
|
|
300
|
-
opacity: visibleActionReset ? 1 : 0,
|
|
301
|
-
pointerEvents: visibleActionReset ? 'auto' : 'none'
|
|
302
|
-
}
|
|
303
|
-
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
304
|
-
"aria-label": ariaLabels.clear,
|
|
305
|
-
className: "clay-time-clear-btn",
|
|
306
|
-
disabled: disabled,
|
|
307
|
-
displayType: "unstyled",
|
|
308
|
-
onClick: function onClick() {
|
|
309
|
-
return setValue(use12Hours ? {
|
|
310
|
-
ampm: DEFAULT_VALUE,
|
|
311
|
-
hours: DEFAULT_VALUE,
|
|
312
|
-
minutes: DEFAULT_VALUE
|
|
313
|
-
} : {
|
|
314
|
-
hours: DEFAULT_VALUE,
|
|
315
|
-
minutes: DEFAULT_VALUE
|
|
316
|
-
});
|
|
317
|
-
},
|
|
318
|
-
tabIndex: visibleActionReset ? 0 : -1
|
|
319
|
-
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
320
|
-
spritemap: spritemap,
|
|
321
|
-
symbol: "times-circle"
|
|
322
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
323
|
-
className: "clay-time-action-group-item",
|
|
324
|
-
style: {
|
|
325
|
-
opacity: actionVisible ? 1 : 0
|
|
326
|
-
}
|
|
327
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
328
|
-
className: "btn-group-vertical clay-time-inner-spin",
|
|
329
|
-
role: "group"
|
|
330
|
-
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
331
|
-
"aria-label": ariaLabels.timeUp,
|
|
332
|
-
className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-inc",
|
|
333
|
-
disabled: disabled,
|
|
334
|
-
displayType: "secondary",
|
|
335
|
-
onClick: function onClick() {
|
|
336
|
-
return handleAction(1);
|
|
337
|
-
}
|
|
338
|
-
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
339
|
-
spritemap: spritemap,
|
|
340
|
-
symbol: "angle-up"
|
|
341
|
-
})), /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
342
|
-
"aria-label": ariaLabels.timeDown,
|
|
343
|
-
className: "clay-time-inner-spin-btn clay-time-inner-spin-btn-dec",
|
|
344
|
-
disabled: disabled,
|
|
345
|
-
displayType: "secondary",
|
|
346
|
-
onClick: function onClick() {
|
|
347
|
-
return handleAction(-1);
|
|
348
|
-
}
|
|
349
|
-
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
350
|
-
spritemap: spritemap,
|
|
351
|
-
symbol: "angle-down"
|
|
352
|
-
})))))))), timezone && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
|
|
353
|
-
shrink: true
|
|
354
|
-
}, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupText, null, "(".concat(timezone, ")")))));
|
|
355
|
-
};
|
|
356
|
-
var _default = exports.default = TimePicker;
|