@commercetools-uikit/date-time-input 12.2.8 → 13.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -18
- package/dist/commercetools-uikit-date-time-input.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-date-time-input.cjs.dev.js +52 -116
- package/dist/commercetools-uikit-date-time-input.cjs.prod.js +35 -37
- package/dist/commercetools-uikit-date-time-input.esm.js +51 -115
- package/dist/declarations/src/date-time-input.d.ts +28 -0
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/messages.d.ts +13 -0
- package/dist/declarations/src/time-input.d.ts +11 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +18 -18
package/README.md
CHANGED
|
@@ -48,24 +48,35 @@ export default Example;
|
|
|
48
48
|
|
|
49
49
|
## Properties
|
|
50
50
|
|
|
51
|
-
| Props | Type
|
|
52
|
-
| ---------------------- |
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
51
|
+
| Props | Type | Required | Default | Description |
|
|
52
|
+
| ---------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
53
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input field. |
|
|
54
|
+
| `value` | `string` | ✅ | | The selected date, must either be an empty string or a date formatted in ISO 8601 (e.g. "2018-10-04T09:00:00.000Z"). |
|
|
55
|
+
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | ✅ | | Called when the date changes. Called with an event containing an empty string (no value) or a string in this format: "YYYY-MM-DD".
<br /> |
|
|
56
|
+
| `onFocus` | `FocusEventHandler` | | | Called when the date input gains focus. |
|
|
57
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when the date input loses focus. |
|
|
58
|
+
| `timeZone` | `string` | ✅ | | Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed.
Get list of timezone with `moment.tz.names()` [See moment docs](https://momentjs.com/timezone/docs/#/data-loading/getting-zone-names/) |
|
|
59
|
+
| `id` | `string` | | | Used as the HTML `id` attribute. |
|
|
60
|
+
| `name` | `string` | | | Used as the HTML `name` attribute. |
|
|
61
|
+
| `placeholder` | `string` | | | Placeholder value to show in the input field |
|
|
62
|
+
| `isDisabled` | `boolean` | | | Disables the date picker |
|
|
63
|
+
| `isReadOnly` | `boolean` | | | Disables the date picker menu and sets the input field as read-only |
|
|
64
|
+
| `hasError` | `boolean` | | | Indicates the input field has an error |
|
|
65
|
+
| `hasWarning` | `boolean` | | | Indicates the input field has a warning |
|
|
66
|
+
|
|
67
|
+
## Signatures
|
|
68
|
+
|
|
69
|
+
### Signature `onChange`
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
(event: TEvent) => void
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Signature `onBlur`
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
(event: TEvent) => void
|
|
79
|
+
```
|
|
69
80
|
|
|
70
81
|
### `props.timeZone`
|
|
71
82
|
|
|
@@ -17,12 +17,12 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
|
17
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
18
18
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
19
19
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
20
|
+
var _pt = require('prop-types');
|
|
20
21
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
21
22
|
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
22
23
|
var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
|
|
23
24
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
24
25
|
var react$1 = require('react');
|
|
25
|
-
var PropTypes = require('prop-types');
|
|
26
26
|
var Downshift = require('downshift');
|
|
27
27
|
var reactIntl = require('react-intl');
|
|
28
28
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
@@ -44,16 +44,16 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
44
44
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
45
45
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
46
46
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
47
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
47
48
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
48
49
|
var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
|
|
49
50
|
var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
|
|
50
51
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
51
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
52
52
|
var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
|
|
53
53
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
54
54
|
|
|
55
55
|
var getInputStyles = function getInputStyles() {
|
|
56
|
-
return /*#__PURE__*/react.css("width:100%;text-align:center;border:0;border-top:1px solid ", designSystem.customProperties.colorNeutral90, ";padding:10px 0;outline:0;font-size:", designSystem.customProperties.fontSizeDefault, ";margin-top:", designSystem.customProperties.spacingS, ";color:", designSystem.customProperties.colorSolid, ";:disabled{background-color:", designSystem.customProperties.colorSurface, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
56
|
+
return /*#__PURE__*/react.css("width:100%;text-align:center;border:0;border-top:1px solid ", designSystem.customProperties.colorNeutral90, ";padding:10px 0;outline:0;font-size:", designSystem.customProperties.fontSizeDefault, ";margin-top:", designSystem.customProperties.spacingS, ";color:", designSystem.customProperties.colorSolid, ";:disabled{background-color:", designSystem.customProperties.colorSurface, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRpbWUtaW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1nQyIsImZpbGUiOiJ0aW1lLWlucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vLyA8cmVmZXJlbmNlIHR5cGVzPVwiQGVtb3Rpb24vcmVhY3QvdHlwZXMvY3NzLXByb3BcIiAvPlxuaW1wb3J0IHR5cGUgeyBLZXlib2FyZEV2ZW50SGFuZGxlciwgUmVmT2JqZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFREYXRlVGltZUlucHV0UHJvcHMgfSBmcm9tICcuL2RhdGUtdGltZS1pbnB1dCc7XG5cbmNvbnN0IGdldElucHV0U3R5bGVzID0gKCkgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBib3JkZXI6IDA7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAke3ZhcnMuY29sb3JOZXV0cmFsOTB9O1xuICBwYWRkaW5nOiAxMHB4IDA7XG4gIG91dGxpbmU6IDA7XG4gIGZvbnQtc2l6ZTogJHt2YXJzLmZvbnRTaXplRGVmYXVsdH07XG4gIG1hcmdpbi10b3A6ICR7dmFycy5zcGFjaW5nU307XG4gIGNvbG9yOiAke3ZhcnMuY29sb3JTb2xpZH07XG5cbiAgOmRpc2FibGVkIHtcbiAgICAvKiBGaXhlcyBiYWNrZ3JvdW5kIGNvbG9yIGluIEZpcmVmb3ggKi9cbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JTdXJmYWNlfTtcbiAgfVxuYDtcblxudHlwZSBURGF0ZUNhbGVuZGFyVGltZUlucHV0UHJvcHMgPSB7XG4gIHRpbWVJbnB1dFJlZjogUmVmT2JqZWN0PEhUTUxJbnB1dEVsZW1lbnQ+O1xuICBvbktleURvd246IEtleWJvYXJkRXZlbnRIYW5kbGVyPEhUTUxJbnB1dEVsZW1lbnQ+O1xufSAmIFBpY2s8XG4gIFREYXRlVGltZUlucHV0UHJvcHMsXG4gICdpc0Rpc2FibGVkJyB8ICdvbkNoYW5nZScgfCAndmFsdWUnIHwgJ3BsYWNlaG9sZGVyJ1xuPjtcblxuY29uc3QgRGF0ZUNhbGVuZGFyVGltZUlucHV0ID0gKHByb3BzOiBURGF0ZUNhbGVuZGFyVGltZUlucHV0UHJvcHMpID0+IChcbiAgPGlucHV0XG4gICAgZGlzYWJsZWQ9e3Byb3BzLmlzRGlzYWJsZWR9XG4gICAgcmVmPXtwcm9wcy50aW1lSW5wdXRSZWZ9XG4gICAgdHlwZT1cInRleHRcIlxuICAgIHZhbHVlPXtwcm9wcy52YWx1ZX1cbiAgICBvbkNoYW5nZT17cHJvcHMub25DaGFuZ2V9XG4gICAgb25LZXlEb3duPXtwcm9wcy5vbktleURvd259XG4gICAgcGxhY2Vob2xkZXI9e3Byb3BzLnBsYWNlaG9sZGVyfVxuICAgIGNzcz17Z2V0SW5wdXRTdHlsZXMoKX1cbiAgLz5cbik7XG5cbkRhdGVDYWxlbmRhclRpbWVJbnB1dC5kaXNwbGF5TmFtZSA9ICdEYXRlQ2FsZW5kYXJUaW1lSW5wdXQnO1xuXG5leHBvcnQgZGVmYXVsdCBEYXRlQ2FsZW5kYXJUaW1lSW5wdXQ7XG4iXX0= */");
|
|
57
57
|
};
|
|
58
58
|
|
|
59
59
|
var DateCalendarTimeInput = function DateCalendarTimeInput(props) {
|
|
@@ -69,15 +69,11 @@ var DateCalendarTimeInput = function DateCalendarTimeInput(props) {
|
|
|
69
69
|
});
|
|
70
70
|
};
|
|
71
71
|
|
|
72
|
-
DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
73
72
|
DateCalendarTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
onKeyDown: PropTypes__default["default"].func.isRequired,
|
|
77
|
-
onChange: PropTypes__default["default"].func.isRequired,
|
|
78
|
-
value: PropTypes__default["default"].string.isRequired,
|
|
79
|
-
placeholder: PropTypes__default["default"].string
|
|
73
|
+
timeInputRef: _pt__default["default"].any.isRequired,
|
|
74
|
+
onKeyDown: _pt__default["default"].func.isRequired
|
|
80
75
|
} : {};
|
|
76
|
+
DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
81
77
|
var TimeInput = DateCalendarTimeInput;
|
|
82
78
|
|
|
83
79
|
var messages = reactIntl.defineMessages({
|
|
@@ -93,9 +89,9 @@ var messages = reactIntl.defineMessages({
|
|
|
93
89
|
}
|
|
94
90
|
});
|
|
95
91
|
|
|
96
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object);
|
|
92
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
97
93
|
|
|
98
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
94
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
99
95
|
|
|
100
96
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
101
97
|
|
|
@@ -103,7 +99,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_R
|
|
|
103
99
|
var activationTypes = [Downshift__default["default"].stateChangeTypes.keyDownEnter, Downshift__default["default"].stateChangeTypes.clickItem];
|
|
104
100
|
|
|
105
101
|
var preventDownshiftDefault = function preventDownshiftDefault(event) {
|
|
106
|
-
// eslint-disable-next-line no-param-reassign
|
|
107
102
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
108
103
|
}; // This keeps the menu open when the user focuses the time input (thereby
|
|
109
104
|
// blurring the regular input/toggle button)
|
|
@@ -163,10 +158,12 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
163
158
|
_this.setState(function (prevState) {
|
|
164
159
|
return {
|
|
165
160
|
calendarDate: today,
|
|
166
|
-
highlightedIndex: prevState.suggestedItems.length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
|
|
161
|
+
highlightedIndex: (prevState.suggestedItems || []).length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
|
|
167
162
|
};
|
|
168
163
|
}, function () {
|
|
169
|
-
|
|
164
|
+
var _this$inputRef$curren;
|
|
165
|
+
|
|
166
|
+
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
170
167
|
});
|
|
171
168
|
};
|
|
172
169
|
|
|
@@ -231,7 +228,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
231
228
|
selectedItem: this.props.value === '' ? null : this.props.value,
|
|
232
229
|
highlightedIndex: this.state.highlightedIndex,
|
|
233
230
|
onChange: this.emit,
|
|
234
|
-
stateReducer: function stateReducer(
|
|
231
|
+
stateReducer: function stateReducer(_, changes) {
|
|
235
232
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
236
233
|
return _objectSpread(_objectSpread({}, changes), {}, {
|
|
237
234
|
isOpen: true
|
|
@@ -241,7 +238,6 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
241
238
|
return changes;
|
|
242
239
|
},
|
|
243
240
|
onStateChange: function onStateChange(changes) {
|
|
244
|
-
/* eslint-disable no-prototype-builtins */
|
|
245
241
|
_this2.setState(function (prevState) {
|
|
246
242
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
247
243
|
return {
|
|
@@ -267,7 +263,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
267
263
|
timeString: changes.isOpen && _this2.props.value !== '' ? calendarTimeUtils.formatTime(_this2.props.value, _this2.props.intl.locale, _this2.props.timeZone) : '',
|
|
268
264
|
// ensure calendar always opens on selected item, or on
|
|
269
265
|
// current month when there is no selected item
|
|
270
|
-
calendarDate: _this2.props.value === '' ? calendarTimeUtils.getToday() : _this2.props.value
|
|
266
|
+
calendarDate: _this2.props.value === '' ? calendarTimeUtils.getToday(_this2.props.timeZone) : _this2.props.value
|
|
271
267
|
};
|
|
272
268
|
}
|
|
273
269
|
|
|
@@ -280,13 +276,12 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
280
276
|
return null;
|
|
281
277
|
}, function () {
|
|
282
278
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
283
|
-
_this2
|
|
279
|
+
var _this2$timeInputRef$c, _this2$timeInputRef$c2;
|
|
284
280
|
|
|
285
|
-
_this2.timeInputRef.current
|
|
281
|
+
(_this2$timeInputRef$c = _this2.timeInputRef.current) === null || _this2$timeInputRef$c === void 0 ? void 0 : _this2$timeInputRef$c.focus();
|
|
282
|
+
(_this2$timeInputRef$c2 = _this2.timeInputRef.current) === null || _this2$timeInputRef$c2 === void 0 ? void 0 : _this2$timeInputRef$c2.setSelectionRange(0, _this2.state.timeString.length);
|
|
286
283
|
}
|
|
287
284
|
});
|
|
288
|
-
/* eslint-enable no-prototype-builtins */
|
|
289
|
-
|
|
290
285
|
},
|
|
291
286
|
children: function children(_ref) {
|
|
292
287
|
var _context3;
|
|
@@ -307,10 +302,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
307
302
|
var calendarItems = calendarTimeUtils.createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.intl, _this2.props.timeZone);
|
|
308
303
|
var paddingDayCount = calendarTimeUtils.getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale, _this2.props.timeZone);
|
|
309
304
|
|
|
310
|
-
var paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3);
|
|
305
|
+
var paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3, undefined);
|
|
311
306
|
|
|
312
307
|
var weekdays = calendarTimeUtils.getWeekdayNames(_this2.props.intl.locale);
|
|
313
|
-
var today = calendarTimeUtils.getToday();
|
|
308
|
+
var today = calendarTimeUtils.getToday(_this2.props.timeZone);
|
|
314
309
|
var isTimeInputVisible = Boolean(_this2.props.value) && _this2.props.value !== '';
|
|
315
310
|
return jsxRuntime.jsxs("div", {
|
|
316
311
|
onFocus: _this2.props.onFocus,
|
|
@@ -326,7 +321,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
326
321
|
onMouseEnter: function onMouseEnter() {
|
|
327
322
|
// we remove the highlight so that the user can use the
|
|
328
323
|
// arrow keys to move the cursor when hovering
|
|
329
|
-
if (isOpen) setHighlightedIndex(
|
|
324
|
+
if (isOpen) setHighlightedIndex(-1);
|
|
330
325
|
},
|
|
331
326
|
onKeyDown: function onKeyDown(event) {
|
|
332
327
|
if (_this2.props.isReadOnly) {
|
|
@@ -347,11 +342,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
347
342
|
|
|
348
343
|
|
|
349
344
|
if (event.keyCode === 40) {
|
|
350
|
-
if (highlightedIndex + 1 >= calendarItems.length) {
|
|
345
|
+
if (Number(highlightedIndex) + 1 >= calendarItems.length) {
|
|
351
346
|
// if it's the end of the month
|
|
352
347
|
// then bypass normal arrow navigation
|
|
353
|
-
preventDownshiftDefault(event); //
|
|
354
|
-
// then jump to start of next month
|
|
348
|
+
preventDownshiftDefault(event); // then jump to start of next month
|
|
355
349
|
|
|
356
350
|
_this2.jumpMonths(1, 0);
|
|
357
351
|
}
|
|
@@ -359,14 +353,13 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
359
353
|
|
|
360
354
|
|
|
361
355
|
if (event.keyCode === 38) {
|
|
362
|
-
var previousDay = calendarTimeUtils.getPreviousDay(calendarItems[highlightedIndex]);
|
|
356
|
+
var previousDay = calendarTimeUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
|
|
363
357
|
|
|
364
|
-
if (highlightedIndex <= 0) {
|
|
358
|
+
if (Number(highlightedIndex) <= 0) {
|
|
365
359
|
// if it's the start of the month
|
|
366
360
|
// then bypass normal arrow navigation
|
|
367
|
-
preventDownshiftDefault(event);
|
|
368
|
-
|
|
369
|
-
var numberOfDaysOfPrevMonth = calendarTimeUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
|
|
361
|
+
preventDownshiftDefault(event);
|
|
362
|
+
var numberOfDaysOfPrevMonth = calendarTimeUtils.getDaysInMonth(previousDay, _this2.props.timeZone); // then jump to the last day of the previous month
|
|
370
363
|
|
|
371
364
|
_this2.jumpMonths(-1, numberOfDaysOfPrevMonth - 1);
|
|
372
365
|
}
|
|
@@ -375,10 +368,12 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
375
368
|
onClick: _this2.props.isReadOnly ? undefined : openMenu,
|
|
376
369
|
onBlur: createBlurHandler(_this2.timeInputRef),
|
|
377
370
|
onChange: function onChange(event) {
|
|
371
|
+
var _event$target$value;
|
|
372
|
+
|
|
378
373
|
// keep timeInput and regular input in sync when user
|
|
379
374
|
// types into regular input
|
|
380
375
|
if (!isOpen) return;
|
|
381
|
-
var time = event.target.value.split(' ')[1];
|
|
376
|
+
var time = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.split(' ')[1];
|
|
382
377
|
if (!time) return;
|
|
383
378
|
var parsedTime = utils.parseTime(time);
|
|
384
379
|
|
|
@@ -434,7 +429,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
434
429
|
type: "heading",
|
|
435
430
|
children: weekday
|
|
436
431
|
}, weekday);
|
|
437
|
-
}), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (
|
|
432
|
+
}), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (_, index) {
|
|
438
433
|
return jsxRuntime.jsx(calendarUtils.CalendarDay, {
|
|
439
434
|
type: "spacing"
|
|
440
435
|
}, index);
|
|
@@ -445,7 +440,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
445
440
|
disabled: _this2.props.isDisabled,
|
|
446
441
|
item: item,
|
|
447
442
|
onMouseOut: function onMouseOut() {
|
|
448
|
-
setHighlightedIndex(
|
|
443
|
+
setHighlightedIndex(-1);
|
|
449
444
|
}
|
|
450
445
|
})), {}, {
|
|
451
446
|
isHighlighted: suggestedItems.length + index === highlightedIndex,
|
|
@@ -461,20 +456,19 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
461
456
|
onChange: _this2.handleTimeChange,
|
|
462
457
|
onKeyDown: function onKeyDown(event) {
|
|
463
458
|
if (event.key === 'ArrowUp') {
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
_this2.inputRef.current.focus();
|
|
459
|
+
var _this2$inputRef$curre;
|
|
467
460
|
|
|
461
|
+
setHighlightedIndex(-1);
|
|
462
|
+
(_this2$inputRef$curre = _this2.inputRef.current) === null || _this2$inputRef$curre === void 0 ? void 0 : _this2$inputRef$curre.focus();
|
|
468
463
|
return;
|
|
469
464
|
}
|
|
470
465
|
|
|
471
466
|
if (event.key === 'Enter') {
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
_this2.inputRef.current.focus();
|
|
475
|
-
|
|
476
|
-
_this2.inputRef.current.setSelectionRange(0, 100);
|
|
467
|
+
var _this2$inputRef$curre2, _this2$inputRef$curre3;
|
|
477
468
|
|
|
469
|
+
setHighlightedIndex(-1);
|
|
470
|
+
(_this2$inputRef$curre2 = _this2.inputRef.current) === null || _this2$inputRef$curre2 === void 0 ? void 0 : _this2$inputRef$curre2.focus();
|
|
471
|
+
(_this2$inputRef$curre3 = _this2.inputRef.current) === null || _this2$inputRef$curre3 === void 0 ? void 0 : _this2$inputRef$curre3.setSelectionRange(0, 100);
|
|
478
472
|
closeMenu();
|
|
479
473
|
}
|
|
480
474
|
}
|
|
@@ -492,82 +486,24 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
492
486
|
|
|
493
487
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
494
488
|
DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
value: PropTypes__default["default"].string.isRequired,
|
|
509
|
-
|
|
510
|
-
/**
|
|
511
|
-
* Called when the date changes. Called with an event containing an empty string (no value) or a string in this format: "YYYY-MM-DD".
|
|
512
|
-
* <br />
|
|
513
|
-
* Signature: `(event) => void`
|
|
514
|
-
*/
|
|
515
|
-
onChange: PropTypes__default["default"].func.isRequired,
|
|
516
|
-
|
|
517
|
-
/**
|
|
518
|
-
* Called when the date input gains focus.
|
|
519
|
-
*/
|
|
520
|
-
onFocus: PropTypes__default["default"].func,
|
|
521
|
-
|
|
522
|
-
/**
|
|
523
|
-
* Called when the date input loses focus.
|
|
524
|
-
*/
|
|
525
|
-
onBlur: PropTypes__default["default"].func,
|
|
526
|
-
|
|
527
|
-
/**
|
|
528
|
-
* Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed.
|
|
529
|
-
*/
|
|
530
|
-
timeZone: PropTypes__default["default"].string.isRequired,
|
|
531
|
-
|
|
532
|
-
/**
|
|
533
|
-
* Used as the HTML `id` attribute.
|
|
534
|
-
*/
|
|
535
|
-
id: PropTypes__default["default"].string,
|
|
536
|
-
|
|
537
|
-
/**
|
|
538
|
-
* Used as the HTML `name` attribute.
|
|
539
|
-
*/
|
|
540
|
-
name: PropTypes__default["default"].string,
|
|
541
|
-
|
|
542
|
-
/**
|
|
543
|
-
* Placeholder value to show in the input field
|
|
544
|
-
*/
|
|
545
|
-
placeholder: PropTypes__default["default"].string,
|
|
546
|
-
|
|
547
|
-
/**
|
|
548
|
-
* Disables the date picker
|
|
549
|
-
*/
|
|
550
|
-
isDisabled: PropTypes__default["default"].bool,
|
|
551
|
-
|
|
552
|
-
/**
|
|
553
|
-
* Disables the date picker menu and sets the input field as read-only
|
|
554
|
-
*/
|
|
555
|
-
isReadOnly: PropTypes__default["default"].bool,
|
|
556
|
-
|
|
557
|
-
/**
|
|
558
|
-
* Indicates the input field has an error
|
|
559
|
-
*/
|
|
560
|
-
hasError: PropTypes__default["default"].bool,
|
|
561
|
-
|
|
562
|
-
/**
|
|
563
|
-
* Indicates the input field has a warning
|
|
564
|
-
*/
|
|
565
|
-
hasWarning: PropTypes__default["default"].bool
|
|
489
|
+
horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
490
|
+
value: _pt__default["default"].string.isRequired,
|
|
491
|
+
onChange: _pt__default["default"].func.isRequired,
|
|
492
|
+
onFocus: _pt__default["default"].func,
|
|
493
|
+
onBlur: _pt__default["default"].func,
|
|
494
|
+
timeZone: _pt__default["default"].string.isRequired,
|
|
495
|
+
id: _pt__default["default"].string,
|
|
496
|
+
name: _pt__default["default"].string,
|
|
497
|
+
placeholder: _pt__default["default"].string,
|
|
498
|
+
isDisabled: _pt__default["default"].bool,
|
|
499
|
+
isReadOnly: _pt__default["default"].bool,
|
|
500
|
+
hasError: _pt__default["default"].bool,
|
|
501
|
+
hasWarning: _pt__default["default"].bool
|
|
566
502
|
} : {};
|
|
567
503
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
568
504
|
|
|
569
505
|
// NOTE: This string will be replaced on build time with the package version.
|
|
570
|
-
var version = "
|
|
506
|
+
var version = "13.0.2";
|
|
571
507
|
|
|
572
508
|
exports["default"] = dateTimeInput;
|
|
573
509
|
exports.version = version;
|
|
@@ -17,12 +17,12 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
|
17
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
18
18
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
19
19
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
20
|
+
require('prop-types');
|
|
20
21
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
21
22
|
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
22
23
|
var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
|
|
23
24
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
24
25
|
var react$1 = require('react');
|
|
25
|
-
require('prop-types');
|
|
26
26
|
var Downshift = require('downshift');
|
|
27
27
|
var reactIntl = require('react-intl');
|
|
28
28
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
@@ -68,8 +68,8 @@ var DateCalendarTimeInput = function DateCalendarTimeInput(props) {
|
|
|
68
68
|
});
|
|
69
69
|
};
|
|
70
70
|
|
|
71
|
-
DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
72
71
|
DateCalendarTimeInput.propTypes = {};
|
|
72
|
+
DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
73
73
|
var TimeInput = DateCalendarTimeInput;
|
|
74
74
|
|
|
75
75
|
var messages = reactIntl.defineMessages({
|
|
@@ -85,9 +85,9 @@ var messages = reactIntl.defineMessages({
|
|
|
85
85
|
}
|
|
86
86
|
});
|
|
87
87
|
|
|
88
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object);
|
|
88
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
89
89
|
|
|
90
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
90
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
91
91
|
|
|
92
92
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
93
93
|
|
|
@@ -95,7 +95,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_R
|
|
|
95
95
|
var activationTypes = [Downshift__default["default"].stateChangeTypes.keyDownEnter, Downshift__default["default"].stateChangeTypes.clickItem];
|
|
96
96
|
|
|
97
97
|
var preventDownshiftDefault = function preventDownshiftDefault(event) {
|
|
98
|
-
// eslint-disable-next-line no-param-reassign
|
|
99
98
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
100
99
|
}; // This keeps the menu open when the user focuses the time input (thereby
|
|
101
100
|
// blurring the regular input/toggle button)
|
|
@@ -155,10 +154,12 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
155
154
|
_this.setState(function (prevState) {
|
|
156
155
|
return {
|
|
157
156
|
calendarDate: today,
|
|
158
|
-
highlightedIndex: prevState.suggestedItems.length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
|
|
157
|
+
highlightedIndex: (prevState.suggestedItems || []).length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
|
|
159
158
|
};
|
|
160
159
|
}, function () {
|
|
161
|
-
|
|
160
|
+
var _this$inputRef$curren;
|
|
161
|
+
|
|
162
|
+
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
162
163
|
});
|
|
163
164
|
};
|
|
164
165
|
|
|
@@ -223,7 +224,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
223
224
|
selectedItem: this.props.value === '' ? null : this.props.value,
|
|
224
225
|
highlightedIndex: this.state.highlightedIndex,
|
|
225
226
|
onChange: this.emit,
|
|
226
|
-
stateReducer: function stateReducer(
|
|
227
|
+
stateReducer: function stateReducer(_, changes) {
|
|
227
228
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
228
229
|
return _objectSpread(_objectSpread({}, changes), {}, {
|
|
229
230
|
isOpen: true
|
|
@@ -233,7 +234,6 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
233
234
|
return changes;
|
|
234
235
|
},
|
|
235
236
|
onStateChange: function onStateChange(changes) {
|
|
236
|
-
/* eslint-disable no-prototype-builtins */
|
|
237
237
|
_this2.setState(function (prevState) {
|
|
238
238
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
239
239
|
return {
|
|
@@ -259,7 +259,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
259
259
|
timeString: changes.isOpen && _this2.props.value !== '' ? calendarTimeUtils.formatTime(_this2.props.value, _this2.props.intl.locale, _this2.props.timeZone) : '',
|
|
260
260
|
// ensure calendar always opens on selected item, or on
|
|
261
261
|
// current month when there is no selected item
|
|
262
|
-
calendarDate: _this2.props.value === '' ? calendarTimeUtils.getToday() : _this2.props.value
|
|
262
|
+
calendarDate: _this2.props.value === '' ? calendarTimeUtils.getToday(_this2.props.timeZone) : _this2.props.value
|
|
263
263
|
};
|
|
264
264
|
}
|
|
265
265
|
|
|
@@ -272,13 +272,12 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
272
272
|
return null;
|
|
273
273
|
}, function () {
|
|
274
274
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
275
|
-
_this2
|
|
275
|
+
var _this2$timeInputRef$c, _this2$timeInputRef$c2;
|
|
276
276
|
|
|
277
|
-
_this2.timeInputRef.current
|
|
277
|
+
(_this2$timeInputRef$c = _this2.timeInputRef.current) === null || _this2$timeInputRef$c === void 0 ? void 0 : _this2$timeInputRef$c.focus();
|
|
278
|
+
(_this2$timeInputRef$c2 = _this2.timeInputRef.current) === null || _this2$timeInputRef$c2 === void 0 ? void 0 : _this2$timeInputRef$c2.setSelectionRange(0, _this2.state.timeString.length);
|
|
278
279
|
}
|
|
279
280
|
});
|
|
280
|
-
/* eslint-enable no-prototype-builtins */
|
|
281
|
-
|
|
282
281
|
},
|
|
283
282
|
children: function children(_ref) {
|
|
284
283
|
var _context3;
|
|
@@ -299,10 +298,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
299
298
|
var calendarItems = calendarTimeUtils.createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.intl, _this2.props.timeZone);
|
|
300
299
|
var paddingDayCount = calendarTimeUtils.getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale, _this2.props.timeZone);
|
|
301
300
|
|
|
302
|
-
var paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3);
|
|
301
|
+
var paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3, undefined);
|
|
303
302
|
|
|
304
303
|
var weekdays = calendarTimeUtils.getWeekdayNames(_this2.props.intl.locale);
|
|
305
|
-
var today = calendarTimeUtils.getToday();
|
|
304
|
+
var today = calendarTimeUtils.getToday(_this2.props.timeZone);
|
|
306
305
|
var isTimeInputVisible = Boolean(_this2.props.value) && _this2.props.value !== '';
|
|
307
306
|
return jsxRuntime.jsxs("div", {
|
|
308
307
|
onFocus: _this2.props.onFocus,
|
|
@@ -318,7 +317,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
318
317
|
onMouseEnter: function onMouseEnter() {
|
|
319
318
|
// we remove the highlight so that the user can use the
|
|
320
319
|
// arrow keys to move the cursor when hovering
|
|
321
|
-
if (isOpen) setHighlightedIndex(
|
|
320
|
+
if (isOpen) setHighlightedIndex(-1);
|
|
322
321
|
},
|
|
323
322
|
onKeyDown: function onKeyDown(event) {
|
|
324
323
|
if (_this2.props.isReadOnly) {
|
|
@@ -339,11 +338,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
339
338
|
|
|
340
339
|
|
|
341
340
|
if (event.keyCode === 40) {
|
|
342
|
-
if (highlightedIndex + 1 >= calendarItems.length) {
|
|
341
|
+
if (Number(highlightedIndex) + 1 >= calendarItems.length) {
|
|
343
342
|
// if it's the end of the month
|
|
344
343
|
// then bypass normal arrow navigation
|
|
345
|
-
preventDownshiftDefault(event); //
|
|
346
|
-
// then jump to start of next month
|
|
344
|
+
preventDownshiftDefault(event); // then jump to start of next month
|
|
347
345
|
|
|
348
346
|
_this2.jumpMonths(1, 0);
|
|
349
347
|
}
|
|
@@ -351,14 +349,13 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
351
349
|
|
|
352
350
|
|
|
353
351
|
if (event.keyCode === 38) {
|
|
354
|
-
var previousDay = calendarTimeUtils.getPreviousDay(calendarItems[highlightedIndex]);
|
|
352
|
+
var previousDay = calendarTimeUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
|
|
355
353
|
|
|
356
|
-
if (highlightedIndex <= 0) {
|
|
354
|
+
if (Number(highlightedIndex) <= 0) {
|
|
357
355
|
// if it's the start of the month
|
|
358
356
|
// then bypass normal arrow navigation
|
|
359
|
-
preventDownshiftDefault(event);
|
|
360
|
-
|
|
361
|
-
var numberOfDaysOfPrevMonth = calendarTimeUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
|
|
357
|
+
preventDownshiftDefault(event);
|
|
358
|
+
var numberOfDaysOfPrevMonth = calendarTimeUtils.getDaysInMonth(previousDay, _this2.props.timeZone); // then jump to the last day of the previous month
|
|
362
359
|
|
|
363
360
|
_this2.jumpMonths(-1, numberOfDaysOfPrevMonth - 1);
|
|
364
361
|
}
|
|
@@ -367,10 +364,12 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
367
364
|
onClick: _this2.props.isReadOnly ? undefined : openMenu,
|
|
368
365
|
onBlur: createBlurHandler(_this2.timeInputRef),
|
|
369
366
|
onChange: function onChange(event) {
|
|
367
|
+
var _event$target$value;
|
|
368
|
+
|
|
370
369
|
// keep timeInput and regular input in sync when user
|
|
371
370
|
// types into regular input
|
|
372
371
|
if (!isOpen) return;
|
|
373
|
-
var time = event.target.value.split(' ')[1];
|
|
372
|
+
var time = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.split(' ')[1];
|
|
374
373
|
if (!time) return;
|
|
375
374
|
var parsedTime = utils.parseTime(time);
|
|
376
375
|
|
|
@@ -426,7 +425,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
426
425
|
type: "heading",
|
|
427
426
|
children: weekday
|
|
428
427
|
}, weekday);
|
|
429
|
-
}), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (
|
|
428
|
+
}), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (_, index) {
|
|
430
429
|
return jsxRuntime.jsx(calendarUtils.CalendarDay, {
|
|
431
430
|
type: "spacing"
|
|
432
431
|
}, index);
|
|
@@ -437,7 +436,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
437
436
|
disabled: _this2.props.isDisabled,
|
|
438
437
|
item: item,
|
|
439
438
|
onMouseOut: function onMouseOut() {
|
|
440
|
-
setHighlightedIndex(
|
|
439
|
+
setHighlightedIndex(-1);
|
|
441
440
|
}
|
|
442
441
|
})), {}, {
|
|
443
442
|
isHighlighted: suggestedItems.length + index === highlightedIndex,
|
|
@@ -453,20 +452,19 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
453
452
|
onChange: _this2.handleTimeChange,
|
|
454
453
|
onKeyDown: function onKeyDown(event) {
|
|
455
454
|
if (event.key === 'ArrowUp') {
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
_this2.inputRef.current.focus();
|
|
455
|
+
var _this2$inputRef$curre;
|
|
459
456
|
|
|
457
|
+
setHighlightedIndex(-1);
|
|
458
|
+
(_this2$inputRef$curre = _this2.inputRef.current) === null || _this2$inputRef$curre === void 0 ? void 0 : _this2$inputRef$curre.focus();
|
|
460
459
|
return;
|
|
461
460
|
}
|
|
462
461
|
|
|
463
462
|
if (event.key === 'Enter') {
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
_this2.inputRef.current.focus();
|
|
467
|
-
|
|
468
|
-
_this2.inputRef.current.setSelectionRange(0, 100);
|
|
463
|
+
var _this2$inputRef$curre2, _this2$inputRef$curre3;
|
|
469
464
|
|
|
465
|
+
setHighlightedIndex(-1);
|
|
466
|
+
(_this2$inputRef$curre2 = _this2.inputRef.current) === null || _this2$inputRef$curre2 === void 0 ? void 0 : _this2$inputRef$curre2.focus();
|
|
467
|
+
(_this2$inputRef$curre3 = _this2.inputRef.current) === null || _this2$inputRef$curre3 === void 0 ? void 0 : _this2$inputRef$curre3.setSelectionRange(0, 100);
|
|
470
468
|
closeMenu();
|
|
471
469
|
}
|
|
472
470
|
}
|
|
@@ -487,7 +485,7 @@ DateTimeInput.propTypes = {};
|
|
|
487
485
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
488
486
|
|
|
489
487
|
// NOTE: This string will be replaced on build time with the package version.
|
|
490
|
-
var version = "
|
|
488
|
+
var version = "13.0.2";
|
|
491
489
|
|
|
492
490
|
exports["default"] = dateTimeInput;
|
|
493
491
|
exports.version = version;
|
|
@@ -13,12 +13,12 @@ import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
|
|
|
13
13
|
import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
|
|
14
14
|
import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
|
|
15
15
|
import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
|
|
16
|
+
import _pt from 'prop-types';
|
|
16
17
|
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
17
18
|
import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
|
|
18
19
|
import _fillInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/fill';
|
|
19
20
|
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
20
21
|
import { createRef, Component } from 'react';
|
|
21
|
-
import PropTypes from 'prop-types';
|
|
22
22
|
import Downshift from 'downshift';
|
|
23
23
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
24
24
|
import Constraints from '@commercetools-uikit/constraints';
|
|
@@ -30,7 +30,7 @@ import { customProperties } from '@commercetools-uikit/design-system';
|
|
|
30
30
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
31
31
|
|
|
32
32
|
var getInputStyles = function getInputStyles() {
|
|
33
|
-
return /*#__PURE__*/css("width:100%;text-align:center;border:0;border-top:1px solid ", customProperties.colorNeutral90, ";padding:10px 0;outline:0;font-size:", customProperties.fontSizeDefault, ";margin-top:", customProperties.spacingS, ";color:", customProperties.colorSolid, ";:disabled{background-color:", customProperties.colorSurface, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
33
|
+
return /*#__PURE__*/css("width:100%;text-align:center;border:0;border-top:1px solid ", customProperties.colorNeutral90, ";padding:10px 0;outline:0;font-size:", customProperties.fontSizeDefault, ";margin-top:", customProperties.spacingS, ";color:", customProperties.colorSolid, ";:disabled{background-color:", customProperties.colorSurface, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRpbWUtaW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1nQyIsImZpbGUiOiJ0aW1lLWlucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vLyA8cmVmZXJlbmNlIHR5cGVzPVwiQGVtb3Rpb24vcmVhY3QvdHlwZXMvY3NzLXByb3BcIiAvPlxuaW1wb3J0IHR5cGUgeyBLZXlib2FyZEV2ZW50SGFuZGxlciwgUmVmT2JqZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFREYXRlVGltZUlucHV0UHJvcHMgfSBmcm9tICcuL2RhdGUtdGltZS1pbnB1dCc7XG5cbmNvbnN0IGdldElucHV0U3R5bGVzID0gKCkgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBib3JkZXI6IDA7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAke3ZhcnMuY29sb3JOZXV0cmFsOTB9O1xuICBwYWRkaW5nOiAxMHB4IDA7XG4gIG91dGxpbmU6IDA7XG4gIGZvbnQtc2l6ZTogJHt2YXJzLmZvbnRTaXplRGVmYXVsdH07XG4gIG1hcmdpbi10b3A6ICR7dmFycy5zcGFjaW5nU307XG4gIGNvbG9yOiAke3ZhcnMuY29sb3JTb2xpZH07XG5cbiAgOmRpc2FibGVkIHtcbiAgICAvKiBGaXhlcyBiYWNrZ3JvdW5kIGNvbG9yIGluIEZpcmVmb3ggKi9cbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3ZhcnMuY29sb3JTdXJmYWNlfTtcbiAgfVxuYDtcblxudHlwZSBURGF0ZUNhbGVuZGFyVGltZUlucHV0UHJvcHMgPSB7XG4gIHRpbWVJbnB1dFJlZjogUmVmT2JqZWN0PEhUTUxJbnB1dEVsZW1lbnQ+O1xuICBvbktleURvd246IEtleWJvYXJkRXZlbnRIYW5kbGVyPEhUTUxJbnB1dEVsZW1lbnQ+O1xufSAmIFBpY2s8XG4gIFREYXRlVGltZUlucHV0UHJvcHMsXG4gICdpc0Rpc2FibGVkJyB8ICdvbkNoYW5nZScgfCAndmFsdWUnIHwgJ3BsYWNlaG9sZGVyJ1xuPjtcblxuY29uc3QgRGF0ZUNhbGVuZGFyVGltZUlucHV0ID0gKHByb3BzOiBURGF0ZUNhbGVuZGFyVGltZUlucHV0UHJvcHMpID0+IChcbiAgPGlucHV0XG4gICAgZGlzYWJsZWQ9e3Byb3BzLmlzRGlzYWJsZWR9XG4gICAgcmVmPXtwcm9wcy50aW1lSW5wdXRSZWZ9XG4gICAgdHlwZT1cInRleHRcIlxuICAgIHZhbHVlPXtwcm9wcy52YWx1ZX1cbiAgICBvbkNoYW5nZT17cHJvcHMub25DaGFuZ2V9XG4gICAgb25LZXlEb3duPXtwcm9wcy5vbktleURvd259XG4gICAgcGxhY2Vob2xkZXI9e3Byb3BzLnBsYWNlaG9sZGVyfVxuICAgIGNzcz17Z2V0SW5wdXRTdHlsZXMoKX1cbiAgLz5cbik7XG5cbkRhdGVDYWxlbmRhclRpbWVJbnB1dC5kaXNwbGF5TmFtZSA9ICdEYXRlQ2FsZW5kYXJUaW1lSW5wdXQnO1xuXG5leHBvcnQgZGVmYXVsdCBEYXRlQ2FsZW5kYXJUaW1lSW5wdXQ7XG4iXX0= */");
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
var DateCalendarTimeInput = function DateCalendarTimeInput(props) {
|
|
@@ -46,15 +46,11 @@ var DateCalendarTimeInput = function DateCalendarTimeInput(props) {
|
|
|
46
46
|
});
|
|
47
47
|
};
|
|
48
48
|
|
|
49
|
-
DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
50
49
|
DateCalendarTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
onKeyDown: PropTypes.func.isRequired,
|
|
54
|
-
onChange: PropTypes.func.isRequired,
|
|
55
|
-
value: PropTypes.string.isRequired,
|
|
56
|
-
placeholder: PropTypes.string
|
|
50
|
+
timeInputRef: _pt.any.isRequired,
|
|
51
|
+
onKeyDown: _pt.func.isRequired
|
|
57
52
|
} : {};
|
|
53
|
+
DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
58
54
|
var TimeInput = DateCalendarTimeInput;
|
|
59
55
|
|
|
60
56
|
var messages = defineMessages({
|
|
@@ -70,9 +66,9 @@ var messages = defineMessages({
|
|
|
70
66
|
}
|
|
71
67
|
});
|
|
72
68
|
|
|
73
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object);
|
|
69
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
74
70
|
|
|
75
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
71
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
76
72
|
|
|
77
73
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
78
74
|
|
|
@@ -80,7 +76,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_R
|
|
|
80
76
|
var activationTypes = [Downshift.stateChangeTypes.keyDownEnter, Downshift.stateChangeTypes.clickItem];
|
|
81
77
|
|
|
82
78
|
var preventDownshiftDefault = function preventDownshiftDefault(event) {
|
|
83
|
-
// eslint-disable-next-line no-param-reassign
|
|
84
79
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
85
80
|
}; // This keeps the menu open when the user focuses the time input (thereby
|
|
86
81
|
// blurring the regular input/toggle button)
|
|
@@ -140,10 +135,12 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
140
135
|
_this.setState(function (prevState) {
|
|
141
136
|
return {
|
|
142
137
|
calendarDate: today,
|
|
143
|
-
highlightedIndex: prevState.suggestedItems.length + getDateInMonth(today, _this.props.timeZone) - 1
|
|
138
|
+
highlightedIndex: (prevState.suggestedItems || []).length + getDateInMonth(today, _this.props.timeZone) - 1
|
|
144
139
|
};
|
|
145
140
|
}, function () {
|
|
146
|
-
|
|
141
|
+
var _this$inputRef$curren;
|
|
142
|
+
|
|
143
|
+
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
147
144
|
});
|
|
148
145
|
};
|
|
149
146
|
|
|
@@ -208,7 +205,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
208
205
|
selectedItem: this.props.value === '' ? null : this.props.value,
|
|
209
206
|
highlightedIndex: this.state.highlightedIndex,
|
|
210
207
|
onChange: this.emit,
|
|
211
|
-
stateReducer: function stateReducer(
|
|
208
|
+
stateReducer: function stateReducer(_, changes) {
|
|
212
209
|
if (_includesInstanceProperty(activationTypes).call(activationTypes, changes.type)) {
|
|
213
210
|
return _objectSpread(_objectSpread({}, changes), {}, {
|
|
214
211
|
isOpen: true
|
|
@@ -218,7 +215,6 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
218
215
|
return changes;
|
|
219
216
|
},
|
|
220
217
|
onStateChange: function onStateChange(changes) {
|
|
221
|
-
/* eslint-disable no-prototype-builtins */
|
|
222
218
|
_this2.setState(function (prevState) {
|
|
223
219
|
if (_includesInstanceProperty(activationTypes).call(activationTypes, changes.type)) {
|
|
224
220
|
return {
|
|
@@ -244,7 +240,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
244
240
|
timeString: changes.isOpen && _this2.props.value !== '' ? formatTime(_this2.props.value, _this2.props.intl.locale, _this2.props.timeZone) : '',
|
|
245
241
|
// ensure calendar always opens on selected item, or on
|
|
246
242
|
// current month when there is no selected item
|
|
247
|
-
calendarDate: _this2.props.value === '' ? getToday() : _this2.props.value
|
|
243
|
+
calendarDate: _this2.props.value === '' ? getToday(_this2.props.timeZone) : _this2.props.value
|
|
248
244
|
};
|
|
249
245
|
}
|
|
250
246
|
|
|
@@ -257,13 +253,12 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
257
253
|
return null;
|
|
258
254
|
}, function () {
|
|
259
255
|
if (_includesInstanceProperty(activationTypes).call(activationTypes, changes.type)) {
|
|
260
|
-
_this2
|
|
256
|
+
var _this2$timeInputRef$c, _this2$timeInputRef$c2;
|
|
261
257
|
|
|
262
|
-
_this2.timeInputRef.current
|
|
258
|
+
(_this2$timeInputRef$c = _this2.timeInputRef.current) === null || _this2$timeInputRef$c === void 0 ? void 0 : _this2$timeInputRef$c.focus();
|
|
259
|
+
(_this2$timeInputRef$c2 = _this2.timeInputRef.current) === null || _this2$timeInputRef$c2 === void 0 ? void 0 : _this2$timeInputRef$c2.setSelectionRange(0, _this2.state.timeString.length);
|
|
263
260
|
}
|
|
264
261
|
});
|
|
265
|
-
/* eslint-enable no-prototype-builtins */
|
|
266
|
-
|
|
267
262
|
},
|
|
268
263
|
children: function children(_ref) {
|
|
269
264
|
var _context3;
|
|
@@ -284,10 +279,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
284
279
|
var calendarItems = createCalendarItems(_this2.state.calendarDate, _this2.state.timeString, _this2.props.intl, _this2.props.timeZone);
|
|
285
280
|
var paddingDayCount = getPaddingDayCount(_this2.state.calendarDate, _this2.props.intl.locale, _this2.props.timeZone);
|
|
286
281
|
|
|
287
|
-
var paddingDays = _fillInstanceProperty(_context3 = Array(paddingDayCount)).call(_context3);
|
|
282
|
+
var paddingDays = _fillInstanceProperty(_context3 = Array(paddingDayCount)).call(_context3, undefined);
|
|
288
283
|
|
|
289
284
|
var weekdays = getWeekdayNames(_this2.props.intl.locale);
|
|
290
|
-
var today = getToday();
|
|
285
|
+
var today = getToday(_this2.props.timeZone);
|
|
291
286
|
var isTimeInputVisible = Boolean(_this2.props.value) && _this2.props.value !== '';
|
|
292
287
|
return jsxs("div", {
|
|
293
288
|
onFocus: _this2.props.onFocus,
|
|
@@ -303,7 +298,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
303
298
|
onMouseEnter: function onMouseEnter() {
|
|
304
299
|
// we remove the highlight so that the user can use the
|
|
305
300
|
// arrow keys to move the cursor when hovering
|
|
306
|
-
if (isOpen) setHighlightedIndex(
|
|
301
|
+
if (isOpen) setHighlightedIndex(-1);
|
|
307
302
|
},
|
|
308
303
|
onKeyDown: function onKeyDown(event) {
|
|
309
304
|
if (_this2.props.isReadOnly) {
|
|
@@ -324,11 +319,10 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
324
319
|
|
|
325
320
|
|
|
326
321
|
if (event.keyCode === 40) {
|
|
327
|
-
if (highlightedIndex + 1 >= calendarItems.length) {
|
|
322
|
+
if (Number(highlightedIndex) + 1 >= calendarItems.length) {
|
|
328
323
|
// if it's the end of the month
|
|
329
324
|
// then bypass normal arrow navigation
|
|
330
|
-
preventDownshiftDefault(event); //
|
|
331
|
-
// then jump to start of next month
|
|
325
|
+
preventDownshiftDefault(event); // then jump to start of next month
|
|
332
326
|
|
|
333
327
|
_this2.jumpMonths(1, 0);
|
|
334
328
|
}
|
|
@@ -336,14 +330,13 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
336
330
|
|
|
337
331
|
|
|
338
332
|
if (event.keyCode === 38) {
|
|
339
|
-
var previousDay = getPreviousDay(calendarItems[highlightedIndex]);
|
|
333
|
+
var previousDay = getPreviousDay(calendarItems[Number(highlightedIndex)]);
|
|
340
334
|
|
|
341
|
-
if (highlightedIndex <= 0) {
|
|
335
|
+
if (Number(highlightedIndex) <= 0) {
|
|
342
336
|
// if it's the start of the month
|
|
343
337
|
// then bypass normal arrow navigation
|
|
344
|
-
preventDownshiftDefault(event);
|
|
345
|
-
|
|
346
|
-
var numberOfDaysOfPrevMonth = getDaysInMonth(previousDay); // then jump to the last day of the previous month
|
|
338
|
+
preventDownshiftDefault(event);
|
|
339
|
+
var numberOfDaysOfPrevMonth = getDaysInMonth(previousDay, _this2.props.timeZone); // then jump to the last day of the previous month
|
|
347
340
|
|
|
348
341
|
_this2.jumpMonths(-1, numberOfDaysOfPrevMonth - 1);
|
|
349
342
|
}
|
|
@@ -352,10 +345,12 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
352
345
|
onClick: _this2.props.isReadOnly ? undefined : openMenu,
|
|
353
346
|
onBlur: createBlurHandler(_this2.timeInputRef),
|
|
354
347
|
onChange: function onChange(event) {
|
|
348
|
+
var _event$target$value;
|
|
349
|
+
|
|
355
350
|
// keep timeInput and regular input in sync when user
|
|
356
351
|
// types into regular input
|
|
357
352
|
if (!isOpen) return;
|
|
358
|
-
var time = event.target.value.split(' ')[1];
|
|
353
|
+
var time = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.split(' ')[1];
|
|
359
354
|
if (!time) return;
|
|
360
355
|
var parsedTime = parseTime(time);
|
|
361
356
|
|
|
@@ -411,7 +406,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
411
406
|
type: "heading",
|
|
412
407
|
children: weekday
|
|
413
408
|
}, weekday);
|
|
414
|
-
}), _mapInstanceProperty(paddingDays).call(paddingDays, function (
|
|
409
|
+
}), _mapInstanceProperty(paddingDays).call(paddingDays, function (_, index) {
|
|
415
410
|
return jsx(CalendarDay, {
|
|
416
411
|
type: "spacing"
|
|
417
412
|
}, index);
|
|
@@ -422,7 +417,7 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
422
417
|
disabled: _this2.props.isDisabled,
|
|
423
418
|
item: item,
|
|
424
419
|
onMouseOut: function onMouseOut() {
|
|
425
|
-
setHighlightedIndex(
|
|
420
|
+
setHighlightedIndex(-1);
|
|
426
421
|
}
|
|
427
422
|
})), {}, {
|
|
428
423
|
isHighlighted: suggestedItems.length + index === highlightedIndex,
|
|
@@ -438,20 +433,19 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
438
433
|
onChange: _this2.handleTimeChange,
|
|
439
434
|
onKeyDown: function onKeyDown(event) {
|
|
440
435
|
if (event.key === 'ArrowUp') {
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
_this2.inputRef.current.focus();
|
|
436
|
+
var _this2$inputRef$curre;
|
|
444
437
|
|
|
438
|
+
setHighlightedIndex(-1);
|
|
439
|
+
(_this2$inputRef$curre = _this2.inputRef.current) === null || _this2$inputRef$curre === void 0 ? void 0 : _this2$inputRef$curre.focus();
|
|
445
440
|
return;
|
|
446
441
|
}
|
|
447
442
|
|
|
448
443
|
if (event.key === 'Enter') {
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
_this2.inputRef.current.focus();
|
|
452
|
-
|
|
453
|
-
_this2.inputRef.current.setSelectionRange(0, 100);
|
|
444
|
+
var _this2$inputRef$curre2, _this2$inputRef$curre3;
|
|
454
445
|
|
|
446
|
+
setHighlightedIndex(-1);
|
|
447
|
+
(_this2$inputRef$curre2 = _this2.inputRef.current) === null || _this2$inputRef$curre2 === void 0 ? void 0 : _this2$inputRef$curre2.focus();
|
|
448
|
+
(_this2$inputRef$curre3 = _this2.inputRef.current) === null || _this2$inputRef$curre3 === void 0 ? void 0 : _this2$inputRef$curre3.setSelectionRange(0, 100);
|
|
455
449
|
closeMenu();
|
|
456
450
|
}
|
|
457
451
|
}
|
|
@@ -469,81 +463,23 @@ var DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
469
463
|
|
|
470
464
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
471
465
|
DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
value: PropTypes.string.isRequired,
|
|
486
|
-
|
|
487
|
-
/**
|
|
488
|
-
* Called when the date changes. Called with an event containing an empty string (no value) or a string in this format: "YYYY-MM-DD".
|
|
489
|
-
* <br />
|
|
490
|
-
* Signature: `(event) => void`
|
|
491
|
-
*/
|
|
492
|
-
onChange: PropTypes.func.isRequired,
|
|
493
|
-
|
|
494
|
-
/**
|
|
495
|
-
* Called when the date input gains focus.
|
|
496
|
-
*/
|
|
497
|
-
onFocus: PropTypes.func,
|
|
498
|
-
|
|
499
|
-
/**
|
|
500
|
-
* Called when the date input loses focus.
|
|
501
|
-
*/
|
|
502
|
-
onBlur: PropTypes.func,
|
|
503
|
-
|
|
504
|
-
/**
|
|
505
|
-
* Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed.
|
|
506
|
-
*/
|
|
507
|
-
timeZone: PropTypes.string.isRequired,
|
|
508
|
-
|
|
509
|
-
/**
|
|
510
|
-
* Used as the HTML `id` attribute.
|
|
511
|
-
*/
|
|
512
|
-
id: PropTypes.string,
|
|
513
|
-
|
|
514
|
-
/**
|
|
515
|
-
* Used as the HTML `name` attribute.
|
|
516
|
-
*/
|
|
517
|
-
name: PropTypes.string,
|
|
518
|
-
|
|
519
|
-
/**
|
|
520
|
-
* Placeholder value to show in the input field
|
|
521
|
-
*/
|
|
522
|
-
placeholder: PropTypes.string,
|
|
523
|
-
|
|
524
|
-
/**
|
|
525
|
-
* Disables the date picker
|
|
526
|
-
*/
|
|
527
|
-
isDisabled: PropTypes.bool,
|
|
528
|
-
|
|
529
|
-
/**
|
|
530
|
-
* Disables the date picker menu and sets the input field as read-only
|
|
531
|
-
*/
|
|
532
|
-
isReadOnly: PropTypes.bool,
|
|
533
|
-
|
|
534
|
-
/**
|
|
535
|
-
* Indicates the input field has an error
|
|
536
|
-
*/
|
|
537
|
-
hasError: PropTypes.bool,
|
|
538
|
-
|
|
539
|
-
/**
|
|
540
|
-
* Indicates the input field has a warning
|
|
541
|
-
*/
|
|
542
|
-
hasWarning: PropTypes.bool
|
|
466
|
+
horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
467
|
+
value: _pt.string.isRequired,
|
|
468
|
+
onChange: _pt.func.isRequired,
|
|
469
|
+
onFocus: _pt.func,
|
|
470
|
+
onBlur: _pt.func,
|
|
471
|
+
timeZone: _pt.string.isRequired,
|
|
472
|
+
id: _pt.string,
|
|
473
|
+
name: _pt.string,
|
|
474
|
+
placeholder: _pt.string,
|
|
475
|
+
isDisabled: _pt.bool,
|
|
476
|
+
isReadOnly: _pt.bool,
|
|
477
|
+
hasError: _pt.bool,
|
|
478
|
+
hasWarning: _pt.bool
|
|
543
479
|
} : {};
|
|
544
480
|
var dateTimeInput = injectIntl(DateTimeInput);
|
|
545
481
|
|
|
546
482
|
// NOTE: This string will be replaced on build time with the package version.
|
|
547
|
-
var version = "
|
|
483
|
+
var version = "13.0.2";
|
|
548
484
|
|
|
549
485
|
export { dateTimeInput as default, version };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { type FocusEventHandler } from 'react';
|
|
2
|
+
import { type WrappedComponentProps } from 'react-intl';
|
|
3
|
+
declare type TEvent = {
|
|
4
|
+
target: {
|
|
5
|
+
id?: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
value?: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
export declare type TDateTimeInputProps = {
|
|
11
|
+
horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
12
|
+
value: string;
|
|
13
|
+
onChange: (event: TEvent) => void;
|
|
14
|
+
onFocus?: FocusEventHandler;
|
|
15
|
+
onBlur?: (event: TEvent) => void;
|
|
16
|
+
timeZone: string;
|
|
17
|
+
id?: string;
|
|
18
|
+
name?: string;
|
|
19
|
+
placeholder?: string;
|
|
20
|
+
isDisabled?: boolean;
|
|
21
|
+
isReadOnly?: boolean;
|
|
22
|
+
hasError?: boolean;
|
|
23
|
+
hasWarning?: boolean;
|
|
24
|
+
} & WrappedComponentProps;
|
|
25
|
+
declare const _default: import("react").FC<import("react-intl").WithIntlProps<TDateTimeInputProps>> & {
|
|
26
|
+
WrappedComponent: import("react").ComponentType<TDateTimeInputProps>;
|
|
27
|
+
};
|
|
28
|
+
export default _default;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { KeyboardEventHandler, RefObject } from 'react';
|
|
2
|
+
import type { TDateTimeInputProps } from './date-time-input';
|
|
3
|
+
declare type TDateCalendarTimeInputProps = {
|
|
4
|
+
timeInputRef: RefObject<HTMLInputElement>;
|
|
5
|
+
onKeyDown: KeyboardEventHandler<HTMLInputElement>;
|
|
6
|
+
} & Pick<TDateTimeInputProps, 'isDisabled' | 'onChange' | 'value' | 'placeholder'>;
|
|
7
|
+
declare const DateCalendarTimeInput: {
|
|
8
|
+
(props: TDateCalendarTimeInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
9
|
+
displayName: string;
|
|
10
|
+
};
|
|
11
|
+
export default DateCalendarTimeInput;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/date-time-input",
|
|
3
3
|
"description": "The `DateTimeInput` component allows the user to select a date. This component also supports multiple date selection.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "13.0.2",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -19,26 +19,26 @@
|
|
|
19
19
|
"module": "dist/commercetools-uikit-date-time-input.esm.js",
|
|
20
20
|
"files": ["dist"],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "7.
|
|
23
|
-
"@babel/runtime-corejs3": "7.
|
|
24
|
-
"@commercetools-uikit/accessible-button": "
|
|
25
|
-
"@commercetools-uikit/calendar-time-utils": "
|
|
26
|
-
"@commercetools-uikit/calendar-utils": "
|
|
27
|
-
"@commercetools-uikit/constraints": "
|
|
28
|
-
"@commercetools-uikit/design-system": "
|
|
29
|
-
"@commercetools-uikit/hooks": "
|
|
30
|
-
"@commercetools-uikit/icons": "
|
|
31
|
-
"@commercetools-uikit/secondary-icon-button": "
|
|
32
|
-
"@commercetools-uikit/select-utils": "
|
|
33
|
-
"@commercetools-uikit/spacings-inline": "
|
|
34
|
-
"@commercetools-uikit/text": "
|
|
35
|
-
"@commercetools-uikit/tooltip": "
|
|
36
|
-
"@commercetools-uikit/utils": "
|
|
22
|
+
"@babel/runtime": "7.17.2",
|
|
23
|
+
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
+
"@commercetools-uikit/accessible-button": "13.0.2",
|
|
25
|
+
"@commercetools-uikit/calendar-time-utils": "13.0.2",
|
|
26
|
+
"@commercetools-uikit/calendar-utils": "13.0.2",
|
|
27
|
+
"@commercetools-uikit/constraints": "13.0.2",
|
|
28
|
+
"@commercetools-uikit/design-system": "13.0.0",
|
|
29
|
+
"@commercetools-uikit/hooks": "13.0.2",
|
|
30
|
+
"@commercetools-uikit/icons": "13.0.2",
|
|
31
|
+
"@commercetools-uikit/secondary-icon-button": "13.0.2",
|
|
32
|
+
"@commercetools-uikit/select-utils": "13.0.2",
|
|
33
|
+
"@commercetools-uikit/spacings-inline": "13.0.2",
|
|
34
|
+
"@commercetools-uikit/text": "13.0.2",
|
|
35
|
+
"@commercetools-uikit/tooltip": "13.0.2",
|
|
36
|
+
"@commercetools-uikit/utils": "13.0.2",
|
|
37
37
|
"@emotion/react": "^11.4.0",
|
|
38
38
|
"@emotion/styled": "^11.3.0",
|
|
39
39
|
"common-tags": "1.8.2",
|
|
40
40
|
"downshift": "6.1.7",
|
|
41
|
-
"prop-types": "15.
|
|
41
|
+
"prop-types": "15.8.1",
|
|
42
42
|
"react-is": "17.0.2",
|
|
43
43
|
"react-required-if": "1.0.3",
|
|
44
44
|
"warning": "4.0.3"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"moment": "2.29.1",
|
|
48
48
|
"react": "17.0.2",
|
|
49
|
-
"react-intl": "5.
|
|
49
|
+
"react-intl": "5.24.6"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"moment": "2.x",
|