@synerise/ds-time-picker 0.6.2 → 0.6.3
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 +8 -0
- package/dist/TimePicker.js +15 -38
- package/dist/Unit.js +12 -27
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.6.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.2...@synerise/ds-time-picker@0.6.3) (2021-11-22)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-time-picker
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.1...@synerise/ds-time-picker@0.6.2) (2021-11-16)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-time-picker
|
package/dist/TimePicker.js
CHANGED
|
@@ -1,25 +1,5 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
4
|
-
|
|
5
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
-
|
|
7
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
8
|
-
|
|
9
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
10
|
-
|
|
11
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
12
|
-
|
|
13
|
-
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."); }
|
|
14
|
-
|
|
15
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
16
|
-
|
|
17
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
18
|
-
|
|
19
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
20
|
-
|
|
21
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
22
|
-
|
|
23
3
|
import * as React from 'react';
|
|
24
4
|
import dayjs from 'dayjs';
|
|
25
5
|
import Icon, { ClockM, Close3S } from '@synerise/ds-icon';
|
|
@@ -68,41 +48,38 @@ var TimePicker = function TimePicker(_ref) {
|
|
|
68
48
|
intl = _ref.intl;
|
|
69
49
|
|
|
70
50
|
var _React$useState = React.useState(defaultOpen || false),
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
setOpen = _React$useState2[1];
|
|
51
|
+
open = _React$useState[0],
|
|
52
|
+
setOpen = _React$useState[1];
|
|
74
53
|
|
|
75
|
-
var _React$
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
setLocalValue = _React$useState4[1];
|
|
54
|
+
var _React$useState2 = React.useState(value),
|
|
55
|
+
localValue = _React$useState2[0],
|
|
56
|
+
setLocalValue = _React$useState2[1];
|
|
79
57
|
|
|
80
|
-
var _React$
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
setClockMode = _React$useState6[1];
|
|
58
|
+
var _React$useState3 = React.useState(defaultAM ? CLOCK_MODES.AM : CLOCK_MODES.PM),
|
|
59
|
+
clockMode = _React$useState3[0],
|
|
60
|
+
setClockMode = _React$useState3[1];
|
|
84
61
|
|
|
85
62
|
React.useEffect(function () {
|
|
86
63
|
setLocalValue(value);
|
|
87
64
|
}, [value]);
|
|
88
65
|
var unitConfig = [{
|
|
89
66
|
unit: 'hour',
|
|
90
|
-
options: use12HourClock ?
|
|
67
|
+
options: use12HourClock ? [].concat(Array(13).keys()) : [].concat(Array(24).keys()),
|
|
91
68
|
disabled: disabledHours,
|
|
92
69
|
insertSeperator: true
|
|
93
70
|
}, {
|
|
94
71
|
unit: 'minute',
|
|
95
|
-
options:
|
|
72
|
+
options: [].concat(Array(60).keys()),
|
|
96
73
|
disabled: disabledMinutes,
|
|
97
74
|
insertSeperator: true
|
|
98
75
|
}, {
|
|
99
76
|
unit: 'second',
|
|
100
|
-
options:
|
|
77
|
+
options: [].concat(Array(60).keys()),
|
|
101
78
|
disabled: disabledSeconds,
|
|
102
79
|
insertSeperator: !!use12HourClock
|
|
103
80
|
}];
|
|
104
81
|
var unitsToRender = React.useMemo(function () {
|
|
105
|
-
var availableUnits = units
|
|
82
|
+
var availableUnits = units != null && units.length ? units : defaultUnits;
|
|
106
83
|
return unitConfig.filter(function (u) {
|
|
107
84
|
return availableUnits && availableUnits.includes(u.unit);
|
|
108
85
|
});
|
|
@@ -197,7 +174,7 @@ var TimePicker = function TimePicker(_ref) {
|
|
|
197
174
|
}
|
|
198
175
|
|
|
199
176
|
return /*#__PURE__*/React.createElement(S.Container, {
|
|
200
|
-
className: "ds-time-picker "
|
|
177
|
+
className: "ds-time-picker " + (className || ''),
|
|
201
178
|
"data-testid": "tp-container",
|
|
202
179
|
style: containerStyle
|
|
203
180
|
}, /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
@@ -209,9 +186,9 @@ var TimePicker = function TimePicker(_ref) {
|
|
|
209
186
|
disabled: disabled
|
|
210
187
|
}, dropdownProps), /*#__PURE__*/React.createElement(S.TimePickerInput, _extends({
|
|
211
188
|
disabled: disabled,
|
|
212
|
-
className: ""
|
|
189
|
+
className: "" + (alwaysOpen || open ? 'active' : ''),
|
|
213
190
|
"data-testid": "tp-input",
|
|
214
|
-
value: use12HourClock && !!dateString ?
|
|
191
|
+
value: use12HourClock && !!dateString ? dateString + " " + clockMode : dateString,
|
|
215
192
|
placeholder: placeholderValue,
|
|
216
193
|
readOnly: true,
|
|
217
194
|
icon1: timePickerIcon
|
package/dist/Unit.js
CHANGED
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
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."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
1
|
import * as React from 'react';
|
|
14
2
|
import dayjs from 'dayjs';
|
|
15
3
|
import { debounce } from 'debounce';
|
|
@@ -26,22 +14,19 @@ var Unit = function Unit(_ref) {
|
|
|
26
14
|
var selected = value && dayjs(value).get(unit);
|
|
27
15
|
|
|
28
16
|
var _React$useState = React.useState(false),
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
setForceUpdate = _React$useState2[1];
|
|
17
|
+
forceUpdate = _React$useState[0],
|
|
18
|
+
setForceUpdate = _React$useState[1];
|
|
32
19
|
|
|
33
20
|
var selectedCellRef = React.useRef(null);
|
|
34
21
|
var unitContainerRef = React.useRef(null);
|
|
35
22
|
|
|
36
|
-
var _React$
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
setFirstRender = _React$useState4[1];
|
|
23
|
+
var _React$useState2 = React.useState(true),
|
|
24
|
+
isFirstRender = _React$useState2[0],
|
|
25
|
+
setFirstRender = _React$useState2[1];
|
|
40
26
|
|
|
41
|
-
var _React$
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
setContainerHeight = _React$useState6[1];
|
|
27
|
+
var _React$useState3 = React.useState(300),
|
|
28
|
+
containerHeight = _React$useState3[0],
|
|
29
|
+
setContainerHeight = _React$useState3[1];
|
|
45
30
|
|
|
46
31
|
React.useEffect(function () {
|
|
47
32
|
if (isFirstRender) {
|
|
@@ -66,7 +51,7 @@ var Unit = function Unit(_ref) {
|
|
|
66
51
|
if (selectedCellRef.current && unitContainerRef.current) {
|
|
67
52
|
var offsetToParent = selectedCellRef.current.offsetTop - unitContainerRef.current.offsetTop;
|
|
68
53
|
var scrollBehaviour = isFirstRender || !containerHeight ? 'auto' : 'smooth';
|
|
69
|
-
(unitContainerRef
|
|
54
|
+
(unitContainerRef == null ? void 0 : unitContainerRef.current) && unitContainerRef.current.scrollTo({
|
|
70
55
|
top: offsetToParent,
|
|
71
56
|
behavior: scrollBehaviour
|
|
72
57
|
});
|
|
@@ -74,15 +59,15 @@ var Unit = function Unit(_ref) {
|
|
|
74
59
|
}
|
|
75
60
|
}, [selectedCellRef, unitContainerRef, isFirstRender, forceUpdate, containerHeight]);
|
|
76
61
|
return /*#__PURE__*/React.createElement(S.Unit, {
|
|
77
|
-
"data-testid": "ds-time-picker-unit-"
|
|
62
|
+
"data-testid": "ds-time-picker-unit-" + unit,
|
|
78
63
|
ref: unitContainerRef,
|
|
79
64
|
onScroll: debounce(scrollHandler, DEBOUNCE_DELAY)
|
|
80
65
|
}, options.map(function (option) {
|
|
81
|
-
var normalizedStringValue = option < 10 ? "0"
|
|
66
|
+
var normalizedStringValue = option < 10 ? "0" + option : option.toString();
|
|
82
67
|
var isDisabled = disabled && disabled.includes(option);
|
|
83
68
|
var isSelected = selected === option;
|
|
84
69
|
return /*#__PURE__*/React.createElement(S.Cell, {
|
|
85
|
-
key:
|
|
70
|
+
key: unit + "-" + option,
|
|
86
71
|
disabled: isDisabled,
|
|
87
72
|
onClick: function onClick() {
|
|
88
73
|
onSelect(option);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-time-picker",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.3",
|
|
4
4
|
"description": "TimePicker UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-dropdown": "^0.17.
|
|
36
|
-
"@synerise/ds-icon": "^0.46.
|
|
37
|
-
"@synerise/ds-input": "^0.18.
|
|
38
|
-
"@synerise/ds-search-bar": "^0.5.
|
|
39
|
-
"@synerise/ds-typography": "^0.12.
|
|
35
|
+
"@synerise/ds-dropdown": "^0.17.3",
|
|
36
|
+
"@synerise/ds-icon": "^0.46.2",
|
|
37
|
+
"@synerise/ds-input": "^0.18.2",
|
|
38
|
+
"@synerise/ds-search-bar": "^0.5.2",
|
|
39
|
+
"@synerise/ds-typography": "^0.12.2",
|
|
40
40
|
"dayjs": "^1.8.19",
|
|
41
41
|
"debounce": "^1.2.0"
|
|
42
42
|
},
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@types/debounce": "^1.2.0"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a"
|
|
51
51
|
}
|