@commercetools-uikit/date-time-input 19.10.0 → 19.12.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.
|
@@ -18,7 +18,6 @@ var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibl
|
|
|
18
18
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
19
19
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
20
20
|
var _pt = require('prop-types');
|
|
21
|
-
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
22
21
|
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
23
22
|
var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
|
|
24
23
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
@@ -45,7 +44,6 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
|
|
|
45
44
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
46
45
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
47
46
|
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
48
|
-
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
49
47
|
var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
|
|
50
48
|
var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
|
|
51
49
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
@@ -71,7 +69,7 @@ DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
|
71
69
|
var TimeInput = DateCalendarTimeInput;
|
|
72
70
|
|
|
73
71
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
74
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
72
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
75
73
|
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
76
74
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
|
|
77
75
|
const activationTypes = [Downshift__default["default"].stateChangeTypes.keyDownEnter, Downshift__default["default"].stateChangeTypes.clickItem];
|
|
@@ -88,7 +86,6 @@ const createBlurHandler = timeInputRef => event => {
|
|
|
88
86
|
}
|
|
89
87
|
};
|
|
90
88
|
let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
91
|
-
_inherits(DateTimeInput, _Component);
|
|
92
89
|
function DateTimeInput() {
|
|
93
90
|
var _this;
|
|
94
91
|
_classCallCheck(this, DateTimeInput);
|
|
@@ -119,10 +116,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
119
116
|
_this.setState(prevState => ({
|
|
120
117
|
calendarDate: today,
|
|
121
118
|
highlightedIndex: (prevState.suggestedItems || []).length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
|
|
122
|
-
}), () =>
|
|
123
|
-
var _this$inputRef$curren;
|
|
124
|
-
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
125
|
-
});
|
|
119
|
+
}), () => _this.inputRef.current?.focus());
|
|
126
120
|
};
|
|
127
121
|
_this.handleBlur = () => {
|
|
128
122
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
@@ -146,24 +140,21 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
146
140
|
}
|
|
147
141
|
_this.emit(date);
|
|
148
142
|
};
|
|
149
|
-
_this.emit = value => {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
});
|
|
160
|
-
};
|
|
143
|
+
_this.emit = value => _this.props.onChange?.({
|
|
144
|
+
target: {
|
|
145
|
+
id: _this.props.id,
|
|
146
|
+
name: _this.props.name,
|
|
147
|
+
// when cleared the value is null, but we always want it to be an
|
|
148
|
+
// empty string when there is no value.
|
|
149
|
+
value: value || ''
|
|
150
|
+
}
|
|
151
|
+
});
|
|
161
152
|
return _this;
|
|
162
153
|
}
|
|
163
|
-
|
|
154
|
+
_inherits(DateTimeInput, _Component);
|
|
155
|
+
return _createClass(DateTimeInput, [{
|
|
164
156
|
key: "render",
|
|
165
157
|
value: function render() {
|
|
166
|
-
var _context;
|
|
167
158
|
if (!this.props.isReadOnly) {
|
|
168
159
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
|
|
169
160
|
}
|
|
@@ -225,14 +216,13 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
225
216
|
return null;
|
|
226
217
|
}, () => {
|
|
227
218
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
(_this$timeInputRef$cu2 = this.timeInputRef.current) === null || _this$timeInputRef$cu2 === void 0 || _this$timeInputRef$cu2.setSelectionRange(0, this.state.timeString.length);
|
|
219
|
+
this.timeInputRef.current?.focus();
|
|
220
|
+
this.timeInputRef.current?.setSelectionRange(0, this.state.timeString.length);
|
|
231
221
|
}
|
|
232
222
|
});
|
|
233
223
|
},
|
|
234
224
|
children: _ref => {
|
|
235
|
-
var
|
|
225
|
+
var _context;
|
|
236
226
|
let getInputProps = _ref.getInputProps,
|
|
237
227
|
getMenuProps = _ref.getMenuProps,
|
|
238
228
|
getItemProps = _ref.getItemProps,
|
|
@@ -248,7 +238,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
248
238
|
const suggestedItems = this.state.suggestedItems;
|
|
249
239
|
const calendarItems = calendarTimeUtils.createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
|
|
250
240
|
const paddingDayCount = calendarTimeUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
|
|
251
|
-
const paddingDays = _fillInstanceProperty__default["default"](
|
|
241
|
+
const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
|
|
252
242
|
const weekdays = calendarTimeUtils.getWeekdayNames(this.props.intl.locale);
|
|
253
243
|
const today = calendarTimeUtils.getToday(this.props.timeZone);
|
|
254
244
|
const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
|
|
@@ -310,11 +300,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
310
300
|
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
311
301
|
onBlur: createBlurHandler(this.timeInputRef),
|
|
312
302
|
onChange: event => {
|
|
313
|
-
var _event$target$value;
|
|
314
303
|
// keep timeInput and regular input in sync when user
|
|
315
304
|
// types into regular input
|
|
316
305
|
if (!isOpen) return;
|
|
317
|
-
const time =
|
|
306
|
+
const time = event.target.value?.split(' ')[1];
|
|
318
307
|
if (!time) return;
|
|
319
308
|
const parsedTime = utils.parseTime(time);
|
|
320
309
|
this.setState(() => {
|
|
@@ -381,16 +370,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
381
370
|
onChange: this.handleTimeChange,
|
|
382
371
|
onKeyDown: event => {
|
|
383
372
|
if (event.key === 'ArrowUp') {
|
|
384
|
-
var _this$inputRef$curren2;
|
|
385
373
|
setHighlightedIndex(-1);
|
|
386
|
-
|
|
374
|
+
this.inputRef.current?.focus();
|
|
387
375
|
return;
|
|
388
376
|
}
|
|
389
377
|
if (event.key === 'Enter') {
|
|
390
|
-
var _this$inputRef$curren3, _this$inputRef$curren4;
|
|
391
378
|
setHighlightedIndex(-1);
|
|
392
|
-
|
|
393
|
-
|
|
379
|
+
this.inputRef.current?.focus();
|
|
380
|
+
this.inputRef.current?.setSelectionRange(0, 100);
|
|
394
381
|
closeMenu();
|
|
395
382
|
}
|
|
396
383
|
}
|
|
@@ -398,11 +385,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
398
385
|
}))]
|
|
399
386
|
});
|
|
400
387
|
}
|
|
401
|
-
},
|
|
388
|
+
}, `${this.props.timeZone}:${this.props.intl.locale}`)
|
|
402
389
|
});
|
|
403
390
|
}
|
|
404
391
|
}]);
|
|
405
|
-
return DateTimeInput;
|
|
406
392
|
}(react$1.Component);
|
|
407
393
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
408
394
|
DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -427,7 +413,7 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
427
413
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
428
414
|
|
|
429
415
|
// NOTE: This string will be replaced on build time with the package version.
|
|
430
|
-
var version = "19.
|
|
416
|
+
var version = "19.11.0";
|
|
431
417
|
|
|
432
418
|
exports["default"] = dateTimeInput;
|
|
433
419
|
exports.version = version;
|
|
@@ -18,7 +18,6 @@ var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibl
|
|
|
18
18
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
19
19
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
20
20
|
require('prop-types');
|
|
21
|
-
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
22
21
|
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
23
22
|
var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
|
|
24
23
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
@@ -44,7 +43,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
44
43
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
45
44
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
46
45
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
47
|
-
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
48
46
|
var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
|
|
49
47
|
var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
|
|
50
48
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
@@ -67,7 +65,7 @@ DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
|
67
65
|
var TimeInput = DateCalendarTimeInput;
|
|
68
66
|
|
|
69
67
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
70
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
68
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
71
69
|
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
72
70
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
|
|
73
71
|
const activationTypes = [Downshift__default["default"].stateChangeTypes.keyDownEnter, Downshift__default["default"].stateChangeTypes.clickItem];
|
|
@@ -84,7 +82,6 @@ const createBlurHandler = timeInputRef => event => {
|
|
|
84
82
|
}
|
|
85
83
|
};
|
|
86
84
|
let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
87
|
-
_inherits(DateTimeInput, _Component);
|
|
88
85
|
function DateTimeInput() {
|
|
89
86
|
var _this;
|
|
90
87
|
_classCallCheck(this, DateTimeInput);
|
|
@@ -115,10 +112,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
115
112
|
_this.setState(prevState => ({
|
|
116
113
|
calendarDate: today,
|
|
117
114
|
highlightedIndex: (prevState.suggestedItems || []).length + calendarTimeUtils.getDateInMonth(today, _this.props.timeZone) - 1
|
|
118
|
-
}), () =>
|
|
119
|
-
var _this$inputRef$curren;
|
|
120
|
-
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
121
|
-
});
|
|
115
|
+
}), () => _this.inputRef.current?.focus());
|
|
122
116
|
};
|
|
123
117
|
_this.handleBlur = () => {
|
|
124
118
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
@@ -142,24 +136,21 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
142
136
|
}
|
|
143
137
|
_this.emit(date);
|
|
144
138
|
};
|
|
145
|
-
_this.emit = value => {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
}
|
|
155
|
-
});
|
|
156
|
-
};
|
|
139
|
+
_this.emit = value => _this.props.onChange?.({
|
|
140
|
+
target: {
|
|
141
|
+
id: _this.props.id,
|
|
142
|
+
name: _this.props.name,
|
|
143
|
+
// when cleared the value is null, but we always want it to be an
|
|
144
|
+
// empty string when there is no value.
|
|
145
|
+
value: value || ''
|
|
146
|
+
}
|
|
147
|
+
});
|
|
157
148
|
return _this;
|
|
158
149
|
}
|
|
159
|
-
|
|
150
|
+
_inherits(DateTimeInput, _Component);
|
|
151
|
+
return _createClass(DateTimeInput, [{
|
|
160
152
|
key: "render",
|
|
161
153
|
value: function render() {
|
|
162
|
-
var _context;
|
|
163
154
|
if (!this.props.isReadOnly) ;
|
|
164
155
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
165
156
|
max: this.props.horizontalConstraint,
|
|
@@ -219,14 +210,13 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
219
210
|
return null;
|
|
220
211
|
}, () => {
|
|
221
212
|
if (_includesInstanceProperty__default["default"](activationTypes).call(activationTypes, changes.type)) {
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
(_this$timeInputRef$cu2 = this.timeInputRef.current) === null || _this$timeInputRef$cu2 === void 0 || _this$timeInputRef$cu2.setSelectionRange(0, this.state.timeString.length);
|
|
213
|
+
this.timeInputRef.current?.focus();
|
|
214
|
+
this.timeInputRef.current?.setSelectionRange(0, this.state.timeString.length);
|
|
225
215
|
}
|
|
226
216
|
});
|
|
227
217
|
},
|
|
228
218
|
children: _ref => {
|
|
229
|
-
var
|
|
219
|
+
var _context;
|
|
230
220
|
let getInputProps = _ref.getInputProps,
|
|
231
221
|
getMenuProps = _ref.getMenuProps,
|
|
232
222
|
getItemProps = _ref.getItemProps,
|
|
@@ -242,7 +232,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
242
232
|
const suggestedItems = this.state.suggestedItems;
|
|
243
233
|
const calendarItems = calendarTimeUtils.createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
|
|
244
234
|
const paddingDayCount = calendarTimeUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
|
|
245
|
-
const paddingDays = _fillInstanceProperty__default["default"](
|
|
235
|
+
const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
|
|
246
236
|
const weekdays = calendarTimeUtils.getWeekdayNames(this.props.intl.locale);
|
|
247
237
|
const today = calendarTimeUtils.getToday(this.props.timeZone);
|
|
248
238
|
const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
|
|
@@ -304,11 +294,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
304
294
|
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
305
295
|
onBlur: createBlurHandler(this.timeInputRef),
|
|
306
296
|
onChange: event => {
|
|
307
|
-
var _event$target$value;
|
|
308
297
|
// keep timeInput and regular input in sync when user
|
|
309
298
|
// types into regular input
|
|
310
299
|
if (!isOpen) return;
|
|
311
|
-
const time =
|
|
300
|
+
const time = event.target.value?.split(' ')[1];
|
|
312
301
|
if (!time) return;
|
|
313
302
|
const parsedTime = utils.parseTime(time);
|
|
314
303
|
this.setState(() => {
|
|
@@ -375,16 +364,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
375
364
|
onChange: this.handleTimeChange,
|
|
376
365
|
onKeyDown: event => {
|
|
377
366
|
if (event.key === 'ArrowUp') {
|
|
378
|
-
var _this$inputRef$curren2;
|
|
379
367
|
setHighlightedIndex(-1);
|
|
380
|
-
|
|
368
|
+
this.inputRef.current?.focus();
|
|
381
369
|
return;
|
|
382
370
|
}
|
|
383
371
|
if (event.key === 'Enter') {
|
|
384
|
-
var _this$inputRef$curren3, _this$inputRef$curren4;
|
|
385
372
|
setHighlightedIndex(-1);
|
|
386
|
-
|
|
387
|
-
|
|
373
|
+
this.inputRef.current?.focus();
|
|
374
|
+
this.inputRef.current?.setSelectionRange(0, 100);
|
|
388
375
|
closeMenu();
|
|
389
376
|
}
|
|
390
377
|
}
|
|
@@ -392,18 +379,17 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
392
379
|
}))]
|
|
393
380
|
});
|
|
394
381
|
}
|
|
395
|
-
},
|
|
382
|
+
}, `${this.props.timeZone}:${this.props.intl.locale}`)
|
|
396
383
|
});
|
|
397
384
|
}
|
|
398
385
|
}]);
|
|
399
|
-
return DateTimeInput;
|
|
400
386
|
}(react$1.Component);
|
|
401
387
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
402
388
|
DateTimeInput.propTypes = {};
|
|
403
389
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
404
390
|
|
|
405
391
|
// NOTE: This string will be replaced on build time with the package version.
|
|
406
|
-
var version = "19.
|
|
392
|
+
var version = "19.11.0";
|
|
407
393
|
|
|
408
394
|
exports["default"] = dateTimeInput;
|
|
409
395
|
exports.version = version;
|
|
@@ -14,16 +14,15 @@ import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possi
|
|
|
14
14
|
import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
|
|
15
15
|
import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
|
|
16
16
|
import _pt from 'prop-types';
|
|
17
|
-
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
18
17
|
import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
|
|
19
18
|
import _fillInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/fill';
|
|
20
19
|
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
21
|
-
import {
|
|
20
|
+
import { Component, createRef } from 'react';
|
|
22
21
|
import Downshift from 'downshift';
|
|
23
22
|
import { injectIntl } from 'react-intl';
|
|
24
23
|
import Constraints from '@commercetools-uikit/constraints';
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
24
|
+
import { warning, filterDataAttributes, parseTime } from '@commercetools-uikit/utils';
|
|
25
|
+
import { createItemDateTimeToString, formatTime, createSuggestedItems, getToday, createCalendarItems, getPaddingDayCount, getWeekdayNames, getLocalizedDateTimeFormatPattern, parseInputText, getPreviousDay, getDaysInMonth, changeTime, getMonthCalendarLabel, getYearCalendarLabel, isSameDay, getCalendarDayLabel, getDateInMonth, formatDefaultTime, changeMonth, getStartOf } from '@commercetools-uikit/calendar-time-utils';
|
|
27
26
|
import { CalendarBody, CalendarMenu, CalendarHeader, CalendarContent, CalendarDay } from '@commercetools-uikit/calendar-utils';
|
|
28
27
|
import { css } from '@emotion/react';
|
|
29
28
|
import { designTokens } from '@commercetools-uikit/design-system';
|
|
@@ -48,7 +47,7 @@ DateCalendarTimeInput.displayName = 'DateCalendarTimeInput';
|
|
|
48
47
|
var TimeInput = DateCalendarTimeInput;
|
|
49
48
|
|
|
50
49
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
51
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
50
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
52
51
|
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
53
52
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
|
|
54
53
|
const activationTypes = [Downshift.stateChangeTypes.keyDownEnter, Downshift.stateChangeTypes.clickItem];
|
|
@@ -65,7 +64,6 @@ const createBlurHandler = timeInputRef => event => {
|
|
|
65
64
|
}
|
|
66
65
|
};
|
|
67
66
|
let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
68
|
-
_inherits(DateTimeInput, _Component);
|
|
69
67
|
function DateTimeInput() {
|
|
70
68
|
var _this;
|
|
71
69
|
_classCallCheck(this, DateTimeInput);
|
|
@@ -96,10 +94,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
96
94
|
_this.setState(prevState => ({
|
|
97
95
|
calendarDate: today,
|
|
98
96
|
highlightedIndex: (prevState.suggestedItems || []).length + getDateInMonth(today, _this.props.timeZone) - 1
|
|
99
|
-
}), () =>
|
|
100
|
-
var _this$inputRef$curren;
|
|
101
|
-
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
102
|
-
});
|
|
97
|
+
}), () => _this.inputRef.current?.focus());
|
|
103
98
|
};
|
|
104
99
|
_this.handleBlur = () => {
|
|
105
100
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
@@ -123,24 +118,21 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
123
118
|
}
|
|
124
119
|
_this.emit(date);
|
|
125
120
|
};
|
|
126
|
-
_this.emit = value => {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}
|
|
136
|
-
});
|
|
137
|
-
};
|
|
121
|
+
_this.emit = value => _this.props.onChange?.({
|
|
122
|
+
target: {
|
|
123
|
+
id: _this.props.id,
|
|
124
|
+
name: _this.props.name,
|
|
125
|
+
// when cleared the value is null, but we always want it to be an
|
|
126
|
+
// empty string when there is no value.
|
|
127
|
+
value: value || ''
|
|
128
|
+
}
|
|
129
|
+
});
|
|
138
130
|
return _this;
|
|
139
131
|
}
|
|
140
|
-
|
|
132
|
+
_inherits(DateTimeInput, _Component);
|
|
133
|
+
return _createClass(DateTimeInput, [{
|
|
141
134
|
key: "render",
|
|
142
135
|
value: function render() {
|
|
143
|
-
var _context;
|
|
144
136
|
if (!this.props.isReadOnly) {
|
|
145
137
|
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
|
|
146
138
|
}
|
|
@@ -202,14 +194,13 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
202
194
|
return null;
|
|
203
195
|
}, () => {
|
|
204
196
|
if (_includesInstanceProperty(activationTypes).call(activationTypes, changes.type)) {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
(_this$timeInputRef$cu2 = this.timeInputRef.current) === null || _this$timeInputRef$cu2 === void 0 || _this$timeInputRef$cu2.setSelectionRange(0, this.state.timeString.length);
|
|
197
|
+
this.timeInputRef.current?.focus();
|
|
198
|
+
this.timeInputRef.current?.setSelectionRange(0, this.state.timeString.length);
|
|
208
199
|
}
|
|
209
200
|
});
|
|
210
201
|
},
|
|
211
202
|
children: _ref => {
|
|
212
|
-
var
|
|
203
|
+
var _context;
|
|
213
204
|
let getInputProps = _ref.getInputProps,
|
|
214
205
|
getMenuProps = _ref.getMenuProps,
|
|
215
206
|
getItemProps = _ref.getItemProps,
|
|
@@ -225,7 +216,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
225
216
|
const suggestedItems = this.state.suggestedItems;
|
|
226
217
|
const calendarItems = createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
|
|
227
218
|
const paddingDayCount = getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
|
|
228
|
-
const paddingDays = _fillInstanceProperty(
|
|
219
|
+
const paddingDays = _fillInstanceProperty(_context = Array(paddingDayCount)).call(_context, undefined);
|
|
229
220
|
const weekdays = getWeekdayNames(this.props.intl.locale);
|
|
230
221
|
const today = getToday(this.props.timeZone);
|
|
231
222
|
const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
|
|
@@ -287,11 +278,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
287
278
|
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
288
279
|
onBlur: createBlurHandler(this.timeInputRef),
|
|
289
280
|
onChange: event => {
|
|
290
|
-
var _event$target$value;
|
|
291
281
|
// keep timeInput and regular input in sync when user
|
|
292
282
|
// types into regular input
|
|
293
283
|
if (!isOpen) return;
|
|
294
|
-
const time =
|
|
284
|
+
const time = event.target.value?.split(' ')[1];
|
|
295
285
|
if (!time) return;
|
|
296
286
|
const parsedTime = parseTime(time);
|
|
297
287
|
this.setState(() => {
|
|
@@ -358,16 +348,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
358
348
|
onChange: this.handleTimeChange,
|
|
359
349
|
onKeyDown: event => {
|
|
360
350
|
if (event.key === 'ArrowUp') {
|
|
361
|
-
var _this$inputRef$curren2;
|
|
362
351
|
setHighlightedIndex(-1);
|
|
363
|
-
|
|
352
|
+
this.inputRef.current?.focus();
|
|
364
353
|
return;
|
|
365
354
|
}
|
|
366
355
|
if (event.key === 'Enter') {
|
|
367
|
-
var _this$inputRef$curren3, _this$inputRef$curren4;
|
|
368
356
|
setHighlightedIndex(-1);
|
|
369
|
-
|
|
370
|
-
|
|
357
|
+
this.inputRef.current?.focus();
|
|
358
|
+
this.inputRef.current?.setSelectionRange(0, 100);
|
|
371
359
|
closeMenu();
|
|
372
360
|
}
|
|
373
361
|
}
|
|
@@ -375,11 +363,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
375
363
|
}))]
|
|
376
364
|
});
|
|
377
365
|
}
|
|
378
|
-
},
|
|
366
|
+
}, `${this.props.timeZone}:${this.props.intl.locale}`)
|
|
379
367
|
});
|
|
380
368
|
}
|
|
381
369
|
}]);
|
|
382
|
-
return DateTimeInput;
|
|
383
370
|
}(Component);
|
|
384
371
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
385
372
|
DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -404,6 +391,6 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
404
391
|
var dateTimeInput = injectIntl(DateTimeInput);
|
|
405
392
|
|
|
406
393
|
// NOTE: This string will be replaced on build time with the package version.
|
|
407
|
-
var version = "19.
|
|
394
|
+
var version = "19.11.0";
|
|
408
395
|
|
|
409
396
|
export { dateTimeInput as default, version };
|
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": "19.
|
|
4
|
+
"version": "19.12.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,19 +21,19 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "19.
|
|
25
|
-
"@commercetools-uikit/calendar-time-utils": "19.
|
|
26
|
-
"@commercetools-uikit/calendar-utils": "19.
|
|
27
|
-
"@commercetools-uikit/constraints": "19.
|
|
28
|
-
"@commercetools-uikit/design-system": "19.
|
|
29
|
-
"@commercetools-uikit/hooks": "19.
|
|
30
|
-
"@commercetools-uikit/icons": "19.
|
|
31
|
-
"@commercetools-uikit/secondary-icon-button": "19.
|
|
32
|
-
"@commercetools-uikit/select-utils": "19.
|
|
33
|
-
"@commercetools-uikit/spacings-inline": "19.
|
|
34
|
-
"@commercetools-uikit/text": "19.
|
|
35
|
-
"@commercetools-uikit/tooltip": "19.
|
|
36
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "19.12.0",
|
|
25
|
+
"@commercetools-uikit/calendar-time-utils": "19.12.0",
|
|
26
|
+
"@commercetools-uikit/calendar-utils": "19.12.0",
|
|
27
|
+
"@commercetools-uikit/constraints": "19.12.0",
|
|
28
|
+
"@commercetools-uikit/design-system": "19.12.0",
|
|
29
|
+
"@commercetools-uikit/hooks": "19.12.0",
|
|
30
|
+
"@commercetools-uikit/icons": "19.12.0",
|
|
31
|
+
"@commercetools-uikit/secondary-icon-button": "19.12.0",
|
|
32
|
+
"@commercetools-uikit/select-utils": "19.12.0",
|
|
33
|
+
"@commercetools-uikit/spacings-inline": "19.12.0",
|
|
34
|
+
"@commercetools-uikit/text": "19.12.0",
|
|
35
|
+
"@commercetools-uikit/tooltip": "19.12.0",
|
|
36
|
+
"@commercetools-uikit/utils": "19.12.0",
|
|
37
37
|
"@emotion/react": "^11.10.5",
|
|
38
38
|
"@emotion/styled": "^11.10.5",
|
|
39
39
|
"downshift": "6.1.12",
|