@commercetools-uikit/date-time-input 19.11.0 → 19.12.1
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];
|
|
@@ -81,14 +79,17 @@ const preventDownshiftDefault = event => {
|
|
|
81
79
|
|
|
82
80
|
// This keeps the menu open when the user focuses the time input (thereby
|
|
83
81
|
// blurring the regular input/toggle button)
|
|
84
|
-
const createBlurHandler = timeInputRef
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
82
|
+
const createBlurHandler = function (timeInputRef) {
|
|
83
|
+
let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
|
|
84
|
+
return event => {
|
|
85
|
+
event.persist();
|
|
86
|
+
if (event.relatedTarget === timeInputRef.current) {
|
|
87
|
+
preventDownshiftDefault(event);
|
|
88
|
+
}
|
|
89
|
+
cb();
|
|
90
|
+
};
|
|
89
91
|
};
|
|
90
92
|
let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
91
|
-
_inherits(DateTimeInput, _Component);
|
|
92
93
|
function DateTimeInput() {
|
|
93
94
|
var _this;
|
|
94
95
|
_classCallCheck(this, DateTimeInput);
|
|
@@ -119,10 +120,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
119
120
|
_this.setState(prevState => ({
|
|
120
121
|
calendarDate: today,
|
|
121
122
|
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
|
-
});
|
|
123
|
+
}), () => _this.inputRef.current?.focus());
|
|
126
124
|
};
|
|
127
125
|
_this.handleBlur = () => {
|
|
128
126
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
@@ -146,24 +144,21 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
146
144
|
}
|
|
147
145
|
_this.emit(date);
|
|
148
146
|
};
|
|
149
|
-
_this.emit = value => {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
});
|
|
160
|
-
};
|
|
147
|
+
_this.emit = value => _this.props.onChange?.({
|
|
148
|
+
target: {
|
|
149
|
+
id: _this.props.id,
|
|
150
|
+
name: _this.props.name,
|
|
151
|
+
// when cleared the value is null, but we always want it to be an
|
|
152
|
+
// empty string when there is no value.
|
|
153
|
+
value: value || ''
|
|
154
|
+
}
|
|
155
|
+
});
|
|
161
156
|
return _this;
|
|
162
157
|
}
|
|
163
|
-
|
|
158
|
+
_inherits(DateTimeInput, _Component);
|
|
159
|
+
return _createClass(DateTimeInput, [{
|
|
164
160
|
key: "render",
|
|
165
161
|
value: function render() {
|
|
166
|
-
var _context;
|
|
167
162
|
if (!this.props.isReadOnly) {
|
|
168
163
|
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
164
|
}
|
|
@@ -225,14 +220,13 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
225
220
|
return null;
|
|
226
221
|
}, () => {
|
|
227
222
|
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);
|
|
223
|
+
this.timeInputRef.current?.focus();
|
|
224
|
+
this.timeInputRef.current?.setSelectionRange(0, this.state.timeString.length);
|
|
231
225
|
}
|
|
232
226
|
});
|
|
233
227
|
},
|
|
234
228
|
children: _ref => {
|
|
235
|
-
var
|
|
229
|
+
var _context;
|
|
236
230
|
let getInputProps = _ref.getInputProps,
|
|
237
231
|
getMenuProps = _ref.getMenuProps,
|
|
238
232
|
getItemProps = _ref.getItemProps,
|
|
@@ -248,7 +242,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
248
242
|
const suggestedItems = this.state.suggestedItems;
|
|
249
243
|
const calendarItems = calendarTimeUtils.createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
|
|
250
244
|
const paddingDayCount = calendarTimeUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
|
|
251
|
-
const paddingDays = _fillInstanceProperty__default["default"](
|
|
245
|
+
const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
|
|
252
246
|
const weekdays = calendarTimeUtils.getWeekdayNames(this.props.intl.locale);
|
|
253
247
|
const today = calendarTimeUtils.getToday(this.props.timeZone);
|
|
254
248
|
const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
|
|
@@ -281,6 +275,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
281
275
|
if (event.key === 'Enter' && highlightedIndex === null) {
|
|
282
276
|
preventDownshiftDefault(event);
|
|
283
277
|
const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
278
|
+
|
|
279
|
+
// If there is no parsed date, don't clear and submit. Instead, give
|
|
280
|
+
// the user a chance to fix the value.
|
|
281
|
+
if (!parsedDate) return;
|
|
284
282
|
this.emit(parsedDate);
|
|
285
283
|
closeMenu();
|
|
286
284
|
}
|
|
@@ -308,13 +306,18 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
308
306
|
}
|
|
309
307
|
},
|
|
310
308
|
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
311
|
-
|
|
309
|
+
// validate the input on blur, and emit the value if it's valid
|
|
310
|
+
onBlur: createBlurHandler(this.timeInputRef, () => {
|
|
311
|
+
const inputValue = this.inputRef.current?.value || '';
|
|
312
|
+
const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
313
|
+
if (inputValue.length > 0 && !parsedDate) return;
|
|
314
|
+
this.emit(parsedDate);
|
|
315
|
+
}),
|
|
312
316
|
onChange: event => {
|
|
313
|
-
var _event$target$value;
|
|
314
317
|
// keep timeInput and regular input in sync when user
|
|
315
318
|
// types into regular input
|
|
316
319
|
if (!isOpen) return;
|
|
317
|
-
const time =
|
|
320
|
+
const time = event.target.value?.split(' ')[1];
|
|
318
321
|
if (!time) return;
|
|
319
322
|
const parsedTime = utils.parseTime(time);
|
|
320
323
|
this.setState(() => {
|
|
@@ -381,16 +384,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
381
384
|
onChange: this.handleTimeChange,
|
|
382
385
|
onKeyDown: event => {
|
|
383
386
|
if (event.key === 'ArrowUp') {
|
|
384
|
-
var _this$inputRef$curren2;
|
|
385
387
|
setHighlightedIndex(-1);
|
|
386
|
-
|
|
388
|
+
this.inputRef.current?.focus();
|
|
387
389
|
return;
|
|
388
390
|
}
|
|
389
391
|
if (event.key === 'Enter') {
|
|
390
|
-
var _this$inputRef$curren3, _this$inputRef$curren4;
|
|
391
392
|
setHighlightedIndex(-1);
|
|
392
|
-
|
|
393
|
-
|
|
393
|
+
this.inputRef.current?.focus();
|
|
394
|
+
this.inputRef.current?.setSelectionRange(0, 100);
|
|
394
395
|
closeMenu();
|
|
395
396
|
}
|
|
396
397
|
}
|
|
@@ -398,11 +399,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
398
399
|
}))]
|
|
399
400
|
});
|
|
400
401
|
}
|
|
401
|
-
},
|
|
402
|
+
}, `${this.props.timeZone}:${this.props.intl.locale}`)
|
|
402
403
|
});
|
|
403
404
|
}
|
|
404
405
|
}]);
|
|
405
|
-
return DateTimeInput;
|
|
406
406
|
}(react$1.Component);
|
|
407
407
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
408
408
|
DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -427,7 +427,7 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
427
427
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
428
428
|
|
|
429
429
|
// NOTE: This string will be replaced on build time with the package version.
|
|
430
|
-
var version = "19.
|
|
430
|
+
var version = "19.12.1";
|
|
431
431
|
|
|
432
432
|
exports["default"] = dateTimeInput;
|
|
433
433
|
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];
|
|
@@ -77,14 +75,17 @@ const preventDownshiftDefault = event => {
|
|
|
77
75
|
|
|
78
76
|
// This keeps the menu open when the user focuses the time input (thereby
|
|
79
77
|
// blurring the regular input/toggle button)
|
|
80
|
-
const createBlurHandler = timeInputRef
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
78
|
+
const createBlurHandler = function (timeInputRef) {
|
|
79
|
+
let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
|
|
80
|
+
return event => {
|
|
81
|
+
event.persist();
|
|
82
|
+
if (event.relatedTarget === timeInputRef.current) {
|
|
83
|
+
preventDownshiftDefault(event);
|
|
84
|
+
}
|
|
85
|
+
cb();
|
|
86
|
+
};
|
|
85
87
|
};
|
|
86
88
|
let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
87
|
-
_inherits(DateTimeInput, _Component);
|
|
88
89
|
function DateTimeInput() {
|
|
89
90
|
var _this;
|
|
90
91
|
_classCallCheck(this, DateTimeInput);
|
|
@@ -115,10 +116,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
115
116
|
_this.setState(prevState => ({
|
|
116
117
|
calendarDate: today,
|
|
117
118
|
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
|
-
});
|
|
119
|
+
}), () => _this.inputRef.current?.focus());
|
|
122
120
|
};
|
|
123
121
|
_this.handleBlur = () => {
|
|
124
122
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
@@ -142,24 +140,21 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
142
140
|
}
|
|
143
141
|
_this.emit(date);
|
|
144
142
|
};
|
|
145
|
-
_this.emit = value => {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
}
|
|
155
|
-
});
|
|
156
|
-
};
|
|
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
|
+
});
|
|
157
152
|
return _this;
|
|
158
153
|
}
|
|
159
|
-
|
|
154
|
+
_inherits(DateTimeInput, _Component);
|
|
155
|
+
return _createClass(DateTimeInput, [{
|
|
160
156
|
key: "render",
|
|
161
157
|
value: function render() {
|
|
162
|
-
var _context;
|
|
163
158
|
if (!this.props.isReadOnly) ;
|
|
164
159
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
165
160
|
max: this.props.horizontalConstraint,
|
|
@@ -219,14 +214,13 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
219
214
|
return null;
|
|
220
215
|
}, () => {
|
|
221
216
|
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);
|
|
217
|
+
this.timeInputRef.current?.focus();
|
|
218
|
+
this.timeInputRef.current?.setSelectionRange(0, this.state.timeString.length);
|
|
225
219
|
}
|
|
226
220
|
});
|
|
227
221
|
},
|
|
228
222
|
children: _ref => {
|
|
229
|
-
var
|
|
223
|
+
var _context;
|
|
230
224
|
let getInputProps = _ref.getInputProps,
|
|
231
225
|
getMenuProps = _ref.getMenuProps,
|
|
232
226
|
getItemProps = _ref.getItemProps,
|
|
@@ -242,7 +236,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
242
236
|
const suggestedItems = this.state.suggestedItems;
|
|
243
237
|
const calendarItems = calendarTimeUtils.createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
|
|
244
238
|
const paddingDayCount = calendarTimeUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
|
|
245
|
-
const paddingDays = _fillInstanceProperty__default["default"](
|
|
239
|
+
const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
|
|
246
240
|
const weekdays = calendarTimeUtils.getWeekdayNames(this.props.intl.locale);
|
|
247
241
|
const today = calendarTimeUtils.getToday(this.props.timeZone);
|
|
248
242
|
const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
|
|
@@ -275,6 +269,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
275
269
|
if (event.key === 'Enter' && highlightedIndex === null) {
|
|
276
270
|
preventDownshiftDefault(event);
|
|
277
271
|
const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
272
|
+
|
|
273
|
+
// If there is no parsed date, don't clear and submit. Instead, give
|
|
274
|
+
// the user a chance to fix the value.
|
|
275
|
+
if (!parsedDate) return;
|
|
278
276
|
this.emit(parsedDate);
|
|
279
277
|
closeMenu();
|
|
280
278
|
}
|
|
@@ -302,13 +300,18 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
302
300
|
}
|
|
303
301
|
},
|
|
304
302
|
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
305
|
-
|
|
303
|
+
// validate the input on blur, and emit the value if it's valid
|
|
304
|
+
onBlur: createBlurHandler(this.timeInputRef, () => {
|
|
305
|
+
const inputValue = this.inputRef.current?.value || '';
|
|
306
|
+
const parsedDate = calendarTimeUtils.parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
307
|
+
if (inputValue.length > 0 && !parsedDate) return;
|
|
308
|
+
this.emit(parsedDate);
|
|
309
|
+
}),
|
|
306
310
|
onChange: event => {
|
|
307
|
-
var _event$target$value;
|
|
308
311
|
// keep timeInput and regular input in sync when user
|
|
309
312
|
// types into regular input
|
|
310
313
|
if (!isOpen) return;
|
|
311
|
-
const time =
|
|
314
|
+
const time = event.target.value?.split(' ')[1];
|
|
312
315
|
if (!time) return;
|
|
313
316
|
const parsedTime = utils.parseTime(time);
|
|
314
317
|
this.setState(() => {
|
|
@@ -375,16 +378,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
375
378
|
onChange: this.handleTimeChange,
|
|
376
379
|
onKeyDown: event => {
|
|
377
380
|
if (event.key === 'ArrowUp') {
|
|
378
|
-
var _this$inputRef$curren2;
|
|
379
381
|
setHighlightedIndex(-1);
|
|
380
|
-
|
|
382
|
+
this.inputRef.current?.focus();
|
|
381
383
|
return;
|
|
382
384
|
}
|
|
383
385
|
if (event.key === 'Enter') {
|
|
384
|
-
var _this$inputRef$curren3, _this$inputRef$curren4;
|
|
385
386
|
setHighlightedIndex(-1);
|
|
386
|
-
|
|
387
|
-
|
|
387
|
+
this.inputRef.current?.focus();
|
|
388
|
+
this.inputRef.current?.setSelectionRange(0, 100);
|
|
388
389
|
closeMenu();
|
|
389
390
|
}
|
|
390
391
|
}
|
|
@@ -392,18 +393,17 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
392
393
|
}))]
|
|
393
394
|
});
|
|
394
395
|
}
|
|
395
|
-
},
|
|
396
|
+
}, `${this.props.timeZone}:${this.props.intl.locale}`)
|
|
396
397
|
});
|
|
397
398
|
}
|
|
398
399
|
}]);
|
|
399
|
-
return DateTimeInput;
|
|
400
400
|
}(react$1.Component);
|
|
401
401
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
402
402
|
DateTimeInput.propTypes = {};
|
|
403
403
|
var dateTimeInput = reactIntl.injectIntl(DateTimeInput);
|
|
404
404
|
|
|
405
405
|
// NOTE: This string will be replaced on build time with the package version.
|
|
406
|
-
var version = "19.
|
|
406
|
+
var version = "19.12.1";
|
|
407
407
|
|
|
408
408
|
exports["default"] = dateTimeInput;
|
|
409
409
|
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];
|
|
@@ -58,14 +57,17 @@ const preventDownshiftDefault = event => {
|
|
|
58
57
|
|
|
59
58
|
// This keeps the menu open when the user focuses the time input (thereby
|
|
60
59
|
// blurring the regular input/toggle button)
|
|
61
|
-
const createBlurHandler = timeInputRef
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
60
|
+
const createBlurHandler = function (timeInputRef) {
|
|
61
|
+
let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
|
|
62
|
+
return event => {
|
|
63
|
+
event.persist();
|
|
64
|
+
if (event.relatedTarget === timeInputRef.current) {
|
|
65
|
+
preventDownshiftDefault(event);
|
|
66
|
+
}
|
|
67
|
+
cb();
|
|
68
|
+
};
|
|
66
69
|
};
|
|
67
70
|
let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
68
|
-
_inherits(DateTimeInput, _Component);
|
|
69
71
|
function DateTimeInput() {
|
|
70
72
|
var _this;
|
|
71
73
|
_classCallCheck(this, DateTimeInput);
|
|
@@ -96,10 +98,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
96
98
|
_this.setState(prevState => ({
|
|
97
99
|
calendarDate: today,
|
|
98
100
|
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
|
-
});
|
|
101
|
+
}), () => _this.inputRef.current?.focus());
|
|
103
102
|
};
|
|
104
103
|
_this.handleBlur = () => {
|
|
105
104
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
@@ -123,24 +122,21 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
123
122
|
}
|
|
124
123
|
_this.emit(date);
|
|
125
124
|
};
|
|
126
|
-
_this.emit = value => {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}
|
|
136
|
-
});
|
|
137
|
-
};
|
|
125
|
+
_this.emit = value => _this.props.onChange?.({
|
|
126
|
+
target: {
|
|
127
|
+
id: _this.props.id,
|
|
128
|
+
name: _this.props.name,
|
|
129
|
+
// when cleared the value is null, but we always want it to be an
|
|
130
|
+
// empty string when there is no value.
|
|
131
|
+
value: value || ''
|
|
132
|
+
}
|
|
133
|
+
});
|
|
138
134
|
return _this;
|
|
139
135
|
}
|
|
140
|
-
|
|
136
|
+
_inherits(DateTimeInput, _Component);
|
|
137
|
+
return _createClass(DateTimeInput, [{
|
|
141
138
|
key: "render",
|
|
142
139
|
value: function render() {
|
|
143
|
-
var _context;
|
|
144
140
|
if (!this.props.isReadOnly) {
|
|
145
141
|
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'DateTimeInput: `onChange` is required when input is not read only.') : void 0;
|
|
146
142
|
}
|
|
@@ -202,14 +198,13 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
202
198
|
return null;
|
|
203
199
|
}, () => {
|
|
204
200
|
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);
|
|
201
|
+
this.timeInputRef.current?.focus();
|
|
202
|
+
this.timeInputRef.current?.setSelectionRange(0, this.state.timeString.length);
|
|
208
203
|
}
|
|
209
204
|
});
|
|
210
205
|
},
|
|
211
206
|
children: _ref => {
|
|
212
|
-
var
|
|
207
|
+
var _context;
|
|
213
208
|
let getInputProps = _ref.getInputProps,
|
|
214
209
|
getMenuProps = _ref.getMenuProps,
|
|
215
210
|
getItemProps = _ref.getItemProps,
|
|
@@ -225,7 +220,7 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
225
220
|
const suggestedItems = this.state.suggestedItems;
|
|
226
221
|
const calendarItems = createCalendarItems(this.state.calendarDate, this.state.timeString, this.props.timeZone);
|
|
227
222
|
const paddingDayCount = getPaddingDayCount(this.state.calendarDate, this.props.intl.locale, this.props.timeZone);
|
|
228
|
-
const paddingDays = _fillInstanceProperty(
|
|
223
|
+
const paddingDays = _fillInstanceProperty(_context = Array(paddingDayCount)).call(_context, undefined);
|
|
229
224
|
const weekdays = getWeekdayNames(this.props.intl.locale);
|
|
230
225
|
const today = getToday(this.props.timeZone);
|
|
231
226
|
const isTimeInputVisible = Boolean(this.props.value) && this.props.value !== '';
|
|
@@ -258,6 +253,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
258
253
|
if (event.key === 'Enter' && highlightedIndex === null) {
|
|
259
254
|
preventDownshiftDefault(event);
|
|
260
255
|
const parsedDate = parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
256
|
+
|
|
257
|
+
// If there is no parsed date, don't clear and submit. Instead, give
|
|
258
|
+
// the user a chance to fix the value.
|
|
259
|
+
if (!parsedDate) return;
|
|
261
260
|
this.emit(parsedDate);
|
|
262
261
|
closeMenu();
|
|
263
262
|
}
|
|
@@ -285,13 +284,18 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
285
284
|
}
|
|
286
285
|
},
|
|
287
286
|
onClick: this.props.isReadOnly ? undefined : openMenu,
|
|
288
|
-
|
|
287
|
+
// validate the input on blur, and emit the value if it's valid
|
|
288
|
+
onBlur: createBlurHandler(this.timeInputRef, () => {
|
|
289
|
+
const inputValue = this.inputRef.current?.value || '';
|
|
290
|
+
const parsedDate = parseInputText(inputValue, this.props.intl.locale, this.props.timeZone);
|
|
291
|
+
if (inputValue.length > 0 && !parsedDate) return;
|
|
292
|
+
this.emit(parsedDate);
|
|
293
|
+
}),
|
|
289
294
|
onChange: event => {
|
|
290
|
-
var _event$target$value;
|
|
291
295
|
// keep timeInput and regular input in sync when user
|
|
292
296
|
// types into regular input
|
|
293
297
|
if (!isOpen) return;
|
|
294
|
-
const time =
|
|
298
|
+
const time = event.target.value?.split(' ')[1];
|
|
295
299
|
if (!time) return;
|
|
296
300
|
const parsedTime = parseTime(time);
|
|
297
301
|
this.setState(() => {
|
|
@@ -358,16 +362,14 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
358
362
|
onChange: this.handleTimeChange,
|
|
359
363
|
onKeyDown: event => {
|
|
360
364
|
if (event.key === 'ArrowUp') {
|
|
361
|
-
var _this$inputRef$curren2;
|
|
362
365
|
setHighlightedIndex(-1);
|
|
363
|
-
|
|
366
|
+
this.inputRef.current?.focus();
|
|
364
367
|
return;
|
|
365
368
|
}
|
|
366
369
|
if (event.key === 'Enter') {
|
|
367
|
-
var _this$inputRef$curren3, _this$inputRef$curren4;
|
|
368
370
|
setHighlightedIndex(-1);
|
|
369
|
-
|
|
370
|
-
|
|
371
|
+
this.inputRef.current?.focus();
|
|
372
|
+
this.inputRef.current?.setSelectionRange(0, 100);
|
|
371
373
|
closeMenu();
|
|
372
374
|
}
|
|
373
375
|
}
|
|
@@ -375,11 +377,10 @@ let DateTimeInput = /*#__PURE__*/function (_Component) {
|
|
|
375
377
|
}))]
|
|
376
378
|
});
|
|
377
379
|
}
|
|
378
|
-
},
|
|
380
|
+
}, `${this.props.timeZone}:${this.props.intl.locale}`)
|
|
379
381
|
});
|
|
380
382
|
}
|
|
381
383
|
}]);
|
|
382
|
-
return DateTimeInput;
|
|
383
384
|
}(Component);
|
|
384
385
|
DateTimeInput.displayName = 'DateTimeInput';
|
|
385
386
|
DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -404,6 +405,6 @@ DateTimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
404
405
|
var dateTimeInput = injectIntl(DateTimeInput);
|
|
405
406
|
|
|
406
407
|
// NOTE: This string will be replaced on build time with the package version.
|
|
407
|
-
var version = "19.
|
|
408
|
+
var version = "19.12.1";
|
|
408
409
|
|
|
409
410
|
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.1",
|
|
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.1",
|
|
25
|
+
"@commercetools-uikit/calendar-time-utils": "19.12.1",
|
|
26
|
+
"@commercetools-uikit/calendar-utils": "19.12.1",
|
|
27
|
+
"@commercetools-uikit/constraints": "19.12.1",
|
|
28
|
+
"@commercetools-uikit/design-system": "19.12.1",
|
|
29
|
+
"@commercetools-uikit/hooks": "19.12.1",
|
|
30
|
+
"@commercetools-uikit/icons": "19.12.1",
|
|
31
|
+
"@commercetools-uikit/secondary-icon-button": "19.12.1",
|
|
32
|
+
"@commercetools-uikit/select-utils": "19.12.1",
|
|
33
|
+
"@commercetools-uikit/spacings-inline": "19.12.1",
|
|
34
|
+
"@commercetools-uikit/text": "19.12.1",
|
|
35
|
+
"@commercetools-uikit/tooltip": "19.12.1",
|
|
36
|
+
"@commercetools-uikit/utils": "19.12.1",
|
|
37
37
|
"@emotion/react": "^11.10.5",
|
|
38
38
|
"@emotion/styled": "^11.10.5",
|
|
39
39
|
"downshift": "6.1.12",
|