@commercetools-uikit/date-range-input 16.0.0 → 16.1.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.
|
@@ -53,89 +53,68 @@ var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
|
|
|
53
53
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
54
54
|
|
|
55
55
|
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; }
|
|
56
|
-
|
|
57
56
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
58
|
-
|
|
59
57
|
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); }; }
|
|
60
|
-
|
|
61
58
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
62
|
-
|
|
63
59
|
const preventDownshiftDefault = event => {
|
|
64
60
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
65
61
|
};
|
|
66
|
-
|
|
67
62
|
const parseRangeText = (text, locale) => {
|
|
68
63
|
var _context, _context2;
|
|
69
|
-
|
|
70
64
|
const parts = _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = text.split(' - ')).call(_context2, part => {
|
|
71
65
|
const parsedDate = calendarUtils.parseInputToDate(_trimInstanceProperty__default["default"](part).call(part), locale);
|
|
72
66
|
return parsedDate === '' ? null : parsedDate;
|
|
73
67
|
})).call(_context, Boolean);
|
|
74
|
-
|
|
75
68
|
return parts;
|
|
76
69
|
};
|
|
77
|
-
|
|
78
70
|
const isSameRange = (a, b) => {
|
|
79
71
|
if (a.length !== b.length) return false;
|
|
80
72
|
if (a.length === 0) return true;
|
|
81
73
|
if (a[0] === b[0] && a[1] === b[1]) return true;
|
|
82
74
|
return false;
|
|
83
75
|
};
|
|
84
|
-
|
|
85
76
|
const getRange = _ref => {
|
|
86
77
|
let item = _ref.item,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
78
|
+
value = _ref.value,
|
|
79
|
+
startDate = _ref.startDate,
|
|
80
|
+
highlightedItem = _ref.highlightedItem;
|
|
90
81
|
const isRangeSelectionInProgress = startDate;
|
|
91
82
|
const hasSelection = value.length === 2;
|
|
92
83
|
const isStartDate = calendarUtils.isSameDay(item, startDate);
|
|
93
84
|
const isBetween = highlightedItem && calendarUtils.isBetween(item, startDate, highlightedItem);
|
|
94
85
|
let isRangeStart = false;
|
|
95
|
-
|
|
96
86
|
if (isRangeSelectionInProgress) {
|
|
97
87
|
isRangeStart = isStartDate;
|
|
98
88
|
} else if (hasSelection) {
|
|
99
89
|
isRangeStart = value[0] === item;
|
|
100
90
|
}
|
|
101
|
-
|
|
102
91
|
let isRangeBetween = false;
|
|
103
|
-
|
|
104
92
|
if (isRangeSelectionInProgress) {
|
|
105
93
|
isRangeBetween = isBetween;
|
|
106
94
|
} else if (hasSelection) {
|
|
107
95
|
isRangeBetween = calendarUtils.isBetween(item, value[0], value[1]);
|
|
108
96
|
}
|
|
109
|
-
|
|
110
97
|
let isRangeEnd = false;
|
|
111
|
-
|
|
112
98
|
if (isRangeSelectionInProgress) {
|
|
113
99
|
isRangeEnd = item === highlightedItem;
|
|
114
100
|
} else if (hasSelection) {
|
|
115
101
|
isRangeEnd = value[1] === item;
|
|
116
102
|
}
|
|
117
|
-
|
|
118
103
|
return {
|
|
119
104
|
isRangeStart,
|
|
120
105
|
isRangeBetween,
|
|
121
106
|
isRangeEnd
|
|
122
107
|
};
|
|
123
108
|
};
|
|
124
|
-
|
|
125
109
|
let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
126
110
|
_inherits(DateRangeInput, _Component);
|
|
127
|
-
|
|
128
111
|
var _super = _createSuper(DateRangeInput);
|
|
129
|
-
|
|
130
112
|
function DateRangeInput() {
|
|
131
113
|
var _this;
|
|
132
|
-
|
|
133
114
|
_classCallCheck(this, DateRangeInput);
|
|
134
|
-
|
|
135
115
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
136
116
|
args[_key] = arguments[_key];
|
|
137
117
|
}
|
|
138
|
-
|
|
139
118
|
_this = _super.call(this, ...args);
|
|
140
119
|
_this.inputRef = /*#__PURE__*/react.createRef();
|
|
141
120
|
_this.state = {
|
|
@@ -148,10 +127,8 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
148
127
|
prevValue: _this.props.value,
|
|
149
128
|
prevLocale: _this.props.intl.locale
|
|
150
129
|
};
|
|
151
|
-
|
|
152
130
|
_this.jumpMonth = function (amount) {
|
|
153
131
|
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
154
|
-
|
|
155
132
|
_this.setState(prevState => {
|
|
156
133
|
const nextDate = calendarUtils.changeMonth(prevState.calendarDate, amount);
|
|
157
134
|
return {
|
|
@@ -160,20 +137,16 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
160
137
|
};
|
|
161
138
|
});
|
|
162
139
|
};
|
|
163
|
-
|
|
164
140
|
_this.showToday = () => {
|
|
165
141
|
const today = calendarUtils.getToday();
|
|
166
|
-
|
|
167
142
|
_this.setState(prevState => ({
|
|
168
143
|
calendarDate: today,
|
|
169
144
|
highlightedIndex: prevState.suggestedItems.length + calendarUtils.getDateInMonth(today) - 1
|
|
170
145
|
}), () => {
|
|
171
146
|
var _this$inputRef$curren;
|
|
172
|
-
|
|
173
147
|
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
174
148
|
});
|
|
175
149
|
};
|
|
176
|
-
|
|
177
150
|
_this.handleBlur = () => {
|
|
178
151
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
179
152
|
target: {
|
|
@@ -182,10 +155,8 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
182
155
|
}
|
|
183
156
|
});
|
|
184
157
|
};
|
|
185
|
-
|
|
186
158
|
_this.emit = unsortedRange => {
|
|
187
159
|
var _this$props$onChange, _this$props;
|
|
188
|
-
|
|
189
160
|
(_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
|
|
190
161
|
target: {
|
|
191
162
|
id: _this.props.id,
|
|
@@ -194,10 +165,8 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
194
165
|
}
|
|
195
166
|
});
|
|
196
167
|
};
|
|
197
|
-
|
|
198
168
|
return _this;
|
|
199
169
|
}
|
|
200
|
-
|
|
201
170
|
_createClass(DateRangeInput, [{
|
|
202
171
|
key: "render",
|
|
203
172
|
value: function render() {
|
|
@@ -222,7 +191,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
222
191
|
inputValue,
|
|
223
192
|
startDate: null
|
|
224
193
|
};
|
|
225
|
-
|
|
226
194
|
if (parsedRange.length === 1) {
|
|
227
195
|
const calendarDate = parsedRange[0];
|
|
228
196
|
return {
|
|
@@ -233,7 +201,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
233
201
|
calendarDate
|
|
234
202
|
};
|
|
235
203
|
}
|
|
236
|
-
|
|
237
204
|
if (parsedRange.length === 2) {
|
|
238
205
|
const calendarDate = parsedRange[1];
|
|
239
206
|
return {
|
|
@@ -244,7 +211,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
244
211
|
calendarDate
|
|
245
212
|
};
|
|
246
213
|
}
|
|
247
|
-
|
|
248
214
|
return null;
|
|
249
215
|
});
|
|
250
216
|
},
|
|
@@ -257,7 +223,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
257
223
|
inputValue: calendarUtils.formatRange(this.props.value, this.props.intl.locale)
|
|
258
224
|
};
|
|
259
225
|
}
|
|
260
|
-
|
|
261
226
|
if (changes.hasOwnProperty('selectedItem')) {
|
|
262
227
|
const hasStartedRangeSelection = Boolean(!prevState.startDate && changes.selectedItem);
|
|
263
228
|
const hasFinishedRangeSelection = Boolean(prevState.startDate && changes.selectedItem);
|
|
@@ -270,16 +235,13 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
270
235
|
if (hasFinishedRangeSelection) {
|
|
271
236
|
return calendarUtils.formatRange([prevState.startDate, changes.selectedItem], this.props.intl.locale);
|
|
272
237
|
}
|
|
273
|
-
|
|
274
238
|
if (hasStartedRangeSelection) {
|
|
275
239
|
return calendarUtils.formatRange([changes.selectedItem], this.props.intl.locale);
|
|
276
240
|
}
|
|
277
|
-
|
|
278
241
|
return '';
|
|
279
242
|
})()
|
|
280
243
|
};
|
|
281
244
|
}
|
|
282
|
-
|
|
283
245
|
if (changes.hasOwnProperty('isOpen')) {
|
|
284
246
|
return {
|
|
285
247
|
isOpen: changes.isOpen,
|
|
@@ -292,13 +254,11 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
292
254
|
calendarDate: this.props.value.length === 2 ? this.props.value[0] : calendarUtils.getToday()
|
|
293
255
|
};
|
|
294
256
|
}
|
|
295
|
-
|
|
296
257
|
if (changes.hasOwnProperty('highlightedIndex')) {
|
|
297
258
|
return {
|
|
298
259
|
highlightedIndex: changes.highlightedIndex
|
|
299
260
|
};
|
|
300
261
|
}
|
|
301
|
-
|
|
302
262
|
return null;
|
|
303
263
|
});
|
|
304
264
|
},
|
|
@@ -312,23 +272,20 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
312
272
|
isOpen: this.state.isOpen,
|
|
313
273
|
children: _ref2 => {
|
|
314
274
|
var _context3, _context4;
|
|
315
|
-
|
|
316
275
|
let getInputProps = _ref2.getInputProps,
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
276
|
+
getMenuProps = _ref2.getMenuProps,
|
|
277
|
+
getItemProps = _ref2.getItemProps,
|
|
278
|
+
getToggleButtonProps = _ref2.getToggleButtonProps,
|
|
279
|
+
clearSelection = _ref2.clearSelection,
|
|
280
|
+
highlightedIndex = _ref2.highlightedIndex,
|
|
281
|
+
openMenu = _ref2.openMenu,
|
|
282
|
+
setHighlightedIndex = _ref2.setHighlightedIndex,
|
|
283
|
+
isOpen = _ref2.isOpen,
|
|
284
|
+
inputValue = _ref2.inputValue;
|
|
326
285
|
const calendarItems = calendarUtils.createCalendarItems(this.state.calendarDate);
|
|
327
286
|
const allItems = [...this.state.suggestedItems, ...calendarItems];
|
|
328
287
|
const paddingDayCount = calendarUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale);
|
|
329
|
-
|
|
330
288
|
const paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3, undefined);
|
|
331
|
-
|
|
332
289
|
const weekdays = calendarUtils.getWeekdayNames(this.props.intl.locale);
|
|
333
290
|
const today = calendarUtils.getToday();
|
|
334
291
|
return jsxRuntime.jsxs("div", {
|
|
@@ -356,36 +313,33 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
356
313
|
preventDownshiftDefault(event);
|
|
357
314
|
return;
|
|
358
315
|
}
|
|
359
|
-
|
|
360
|
-
|
|
316
|
+
if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty__default["default"](inputValue).call(inputValue)) === '' &&
|
|
317
|
+
// do not clear value when user presses Enter to
|
|
361
318
|
// select the end date (so only clear when there is no
|
|
362
319
|
// startDate)
|
|
363
320
|
!this.state.startDate && this.props.isClearable) {
|
|
364
321
|
clearSelection();
|
|
365
322
|
this.emit([]);
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
|
|
323
|
+
}
|
|
324
|
+
// ArrowDown
|
|
369
325
|
if (event.key === 'ArrowDown') {
|
|
370
326
|
if (highlightedIndex + 1 >= calendarItems.length) {
|
|
371
327
|
// if it's the end of the month
|
|
372
328
|
// then bypass normal arrow navigation
|
|
373
|
-
preventDownshiftDefault(event);
|
|
374
|
-
|
|
329
|
+
preventDownshiftDefault(event);
|
|
330
|
+
// then jump to start of next month
|
|
375
331
|
this.jumpMonth(1, 0);
|
|
376
332
|
}
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
|
|
333
|
+
}
|
|
334
|
+
// ArrowUp
|
|
380
335
|
if (event.key === 'ArrowUp') {
|
|
381
336
|
const previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
|
|
382
|
-
|
|
383
337
|
if (highlightedIndex <= 0) {
|
|
384
338
|
// if it's the start of the month
|
|
385
339
|
// then bypass normal arrow navigation
|
|
386
340
|
preventDownshiftDefault(event);
|
|
387
|
-
const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay);
|
|
388
|
-
|
|
341
|
+
const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay);
|
|
342
|
+
// then jump to the last day of the previous month
|
|
389
343
|
this.jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
|
|
390
344
|
}
|
|
391
345
|
}
|
|
@@ -428,17 +382,15 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
428
382
|
type: "spacing"
|
|
429
383
|
}, index)), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, (item, index) => {
|
|
430
384
|
const isHighlighted = this.state.suggestedItems.length + index === highlightedIndex;
|
|
431
|
-
|
|
432
385
|
const _getRange = getRange({
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
386
|
+
item,
|
|
387
|
+
value: this.props.value,
|
|
388
|
+
startDate: this.state.startDate,
|
|
389
|
+
highlightedItem: allItems[this.state.highlightedIndex || 0]
|
|
390
|
+
}),
|
|
391
|
+
isRangeStart = _getRange.isRangeStart,
|
|
392
|
+
isRangeBetween = _getRange.isRangeBetween,
|
|
393
|
+
isRangeEnd = _getRange.isRangeEnd;
|
|
442
394
|
return jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
|
|
443
395
|
isToday: calendarUtils.isSameDay(today, item)
|
|
444
396
|
}, getItemProps({
|
|
@@ -480,17 +432,13 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
480
432
|
};
|
|
481
433
|
}
|
|
482
434
|
}]);
|
|
483
|
-
|
|
484
435
|
return DateRangeInput;
|
|
485
436
|
}(react.Component);
|
|
486
|
-
|
|
487
437
|
DateRangeInput.displayName = 'DateRangeInput';
|
|
488
438
|
DateRangeInput.defaultProps = {
|
|
489
439
|
isClearable: true
|
|
490
440
|
};
|
|
491
|
-
|
|
492
441
|
DateRangeInput.isEmpty = range => range.length === 0;
|
|
493
|
-
|
|
494
442
|
DateRangeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
495
443
|
horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
496
444
|
value: _pt__default["default"].arrayOf(_pt__default["default"].any).isRequired,
|
|
@@ -511,7 +459,7 @@ DateRangeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
511
459
|
var dateRangeInput = reactIntl.injectIntl(DateRangeInput);
|
|
512
460
|
|
|
513
461
|
// NOTE: This string will be replaced on build time with the package version.
|
|
514
|
-
var version = "16.
|
|
462
|
+
var version = "16.1.0";
|
|
515
463
|
|
|
516
464
|
exports["default"] = dateRangeInput;
|
|
517
465
|
exports.version = version;
|
|
@@ -52,89 +52,68 @@ var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
|
|
|
52
52
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
53
53
|
|
|
54
54
|
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; }
|
|
55
|
-
|
|
56
55
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
57
|
-
|
|
58
56
|
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); }; }
|
|
59
|
-
|
|
60
57
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
61
|
-
|
|
62
58
|
const preventDownshiftDefault = event => {
|
|
63
59
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
64
60
|
};
|
|
65
|
-
|
|
66
61
|
const parseRangeText = (text, locale) => {
|
|
67
62
|
var _context, _context2;
|
|
68
|
-
|
|
69
63
|
const parts = _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = text.split(' - ')).call(_context2, part => {
|
|
70
64
|
const parsedDate = calendarUtils.parseInputToDate(_trimInstanceProperty__default["default"](part).call(part), locale);
|
|
71
65
|
return parsedDate === '' ? null : parsedDate;
|
|
72
66
|
})).call(_context, Boolean);
|
|
73
|
-
|
|
74
67
|
return parts;
|
|
75
68
|
};
|
|
76
|
-
|
|
77
69
|
const isSameRange = (a, b) => {
|
|
78
70
|
if (a.length !== b.length) return false;
|
|
79
71
|
if (a.length === 0) return true;
|
|
80
72
|
if (a[0] === b[0] && a[1] === b[1]) return true;
|
|
81
73
|
return false;
|
|
82
74
|
};
|
|
83
|
-
|
|
84
75
|
const getRange = _ref => {
|
|
85
76
|
let item = _ref.item,
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
77
|
+
value = _ref.value,
|
|
78
|
+
startDate = _ref.startDate,
|
|
79
|
+
highlightedItem = _ref.highlightedItem;
|
|
89
80
|
const isRangeSelectionInProgress = startDate;
|
|
90
81
|
const hasSelection = value.length === 2;
|
|
91
82
|
const isStartDate = calendarUtils.isSameDay(item, startDate);
|
|
92
83
|
const isBetween = highlightedItem && calendarUtils.isBetween(item, startDate, highlightedItem);
|
|
93
84
|
let isRangeStart = false;
|
|
94
|
-
|
|
95
85
|
if (isRangeSelectionInProgress) {
|
|
96
86
|
isRangeStart = isStartDate;
|
|
97
87
|
} else if (hasSelection) {
|
|
98
88
|
isRangeStart = value[0] === item;
|
|
99
89
|
}
|
|
100
|
-
|
|
101
90
|
let isRangeBetween = false;
|
|
102
|
-
|
|
103
91
|
if (isRangeSelectionInProgress) {
|
|
104
92
|
isRangeBetween = isBetween;
|
|
105
93
|
} else if (hasSelection) {
|
|
106
94
|
isRangeBetween = calendarUtils.isBetween(item, value[0], value[1]);
|
|
107
95
|
}
|
|
108
|
-
|
|
109
96
|
let isRangeEnd = false;
|
|
110
|
-
|
|
111
97
|
if (isRangeSelectionInProgress) {
|
|
112
98
|
isRangeEnd = item === highlightedItem;
|
|
113
99
|
} else if (hasSelection) {
|
|
114
100
|
isRangeEnd = value[1] === item;
|
|
115
101
|
}
|
|
116
|
-
|
|
117
102
|
return {
|
|
118
103
|
isRangeStart,
|
|
119
104
|
isRangeBetween,
|
|
120
105
|
isRangeEnd
|
|
121
106
|
};
|
|
122
107
|
};
|
|
123
|
-
|
|
124
108
|
let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
125
109
|
_inherits(DateRangeInput, _Component);
|
|
126
|
-
|
|
127
110
|
var _super = _createSuper(DateRangeInput);
|
|
128
|
-
|
|
129
111
|
function DateRangeInput() {
|
|
130
112
|
var _this;
|
|
131
|
-
|
|
132
113
|
_classCallCheck(this, DateRangeInput);
|
|
133
|
-
|
|
134
114
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
135
115
|
args[_key] = arguments[_key];
|
|
136
116
|
}
|
|
137
|
-
|
|
138
117
|
_this = _super.call(this, ...args);
|
|
139
118
|
_this.inputRef = /*#__PURE__*/react.createRef();
|
|
140
119
|
_this.state = {
|
|
@@ -147,10 +126,8 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
147
126
|
prevValue: _this.props.value,
|
|
148
127
|
prevLocale: _this.props.intl.locale
|
|
149
128
|
};
|
|
150
|
-
|
|
151
129
|
_this.jumpMonth = function (amount) {
|
|
152
130
|
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
153
|
-
|
|
154
131
|
_this.setState(prevState => {
|
|
155
132
|
const nextDate = calendarUtils.changeMonth(prevState.calendarDate, amount);
|
|
156
133
|
return {
|
|
@@ -159,20 +136,16 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
159
136
|
};
|
|
160
137
|
});
|
|
161
138
|
};
|
|
162
|
-
|
|
163
139
|
_this.showToday = () => {
|
|
164
140
|
const today = calendarUtils.getToday();
|
|
165
|
-
|
|
166
141
|
_this.setState(prevState => ({
|
|
167
142
|
calendarDate: today,
|
|
168
143
|
highlightedIndex: prevState.suggestedItems.length + calendarUtils.getDateInMonth(today) - 1
|
|
169
144
|
}), () => {
|
|
170
145
|
var _this$inputRef$curren;
|
|
171
|
-
|
|
172
146
|
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
173
147
|
});
|
|
174
148
|
};
|
|
175
|
-
|
|
176
149
|
_this.handleBlur = () => {
|
|
177
150
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
178
151
|
target: {
|
|
@@ -181,10 +154,8 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
181
154
|
}
|
|
182
155
|
});
|
|
183
156
|
};
|
|
184
|
-
|
|
185
157
|
_this.emit = unsortedRange => {
|
|
186
158
|
var _this$props$onChange, _this$props;
|
|
187
|
-
|
|
188
159
|
(_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
|
|
189
160
|
target: {
|
|
190
161
|
id: _this.props.id,
|
|
@@ -193,10 +164,8 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
193
164
|
}
|
|
194
165
|
});
|
|
195
166
|
};
|
|
196
|
-
|
|
197
167
|
return _this;
|
|
198
168
|
}
|
|
199
|
-
|
|
200
169
|
_createClass(DateRangeInput, [{
|
|
201
170
|
key: "render",
|
|
202
171
|
value: function render() {
|
|
@@ -221,7 +190,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
221
190
|
inputValue,
|
|
222
191
|
startDate: null
|
|
223
192
|
};
|
|
224
|
-
|
|
225
193
|
if (parsedRange.length === 1) {
|
|
226
194
|
const calendarDate = parsedRange[0];
|
|
227
195
|
return {
|
|
@@ -232,7 +200,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
232
200
|
calendarDate
|
|
233
201
|
};
|
|
234
202
|
}
|
|
235
|
-
|
|
236
203
|
if (parsedRange.length === 2) {
|
|
237
204
|
const calendarDate = parsedRange[1];
|
|
238
205
|
return {
|
|
@@ -243,7 +210,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
243
210
|
calendarDate
|
|
244
211
|
};
|
|
245
212
|
}
|
|
246
|
-
|
|
247
213
|
return null;
|
|
248
214
|
});
|
|
249
215
|
},
|
|
@@ -256,7 +222,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
256
222
|
inputValue: calendarUtils.formatRange(this.props.value, this.props.intl.locale)
|
|
257
223
|
};
|
|
258
224
|
}
|
|
259
|
-
|
|
260
225
|
if (changes.hasOwnProperty('selectedItem')) {
|
|
261
226
|
const hasStartedRangeSelection = Boolean(!prevState.startDate && changes.selectedItem);
|
|
262
227
|
const hasFinishedRangeSelection = Boolean(prevState.startDate && changes.selectedItem);
|
|
@@ -269,16 +234,13 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
269
234
|
if (hasFinishedRangeSelection) {
|
|
270
235
|
return calendarUtils.formatRange([prevState.startDate, changes.selectedItem], this.props.intl.locale);
|
|
271
236
|
}
|
|
272
|
-
|
|
273
237
|
if (hasStartedRangeSelection) {
|
|
274
238
|
return calendarUtils.formatRange([changes.selectedItem], this.props.intl.locale);
|
|
275
239
|
}
|
|
276
|
-
|
|
277
240
|
return '';
|
|
278
241
|
})()
|
|
279
242
|
};
|
|
280
243
|
}
|
|
281
|
-
|
|
282
244
|
if (changes.hasOwnProperty('isOpen')) {
|
|
283
245
|
return {
|
|
284
246
|
isOpen: changes.isOpen,
|
|
@@ -291,13 +253,11 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
291
253
|
calendarDate: this.props.value.length === 2 ? this.props.value[0] : calendarUtils.getToday()
|
|
292
254
|
};
|
|
293
255
|
}
|
|
294
|
-
|
|
295
256
|
if (changes.hasOwnProperty('highlightedIndex')) {
|
|
296
257
|
return {
|
|
297
258
|
highlightedIndex: changes.highlightedIndex
|
|
298
259
|
};
|
|
299
260
|
}
|
|
300
|
-
|
|
301
261
|
return null;
|
|
302
262
|
});
|
|
303
263
|
},
|
|
@@ -311,23 +271,20 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
311
271
|
isOpen: this.state.isOpen,
|
|
312
272
|
children: _ref2 => {
|
|
313
273
|
var _context3, _context4;
|
|
314
|
-
|
|
315
274
|
let getInputProps = _ref2.getInputProps,
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
275
|
+
getMenuProps = _ref2.getMenuProps,
|
|
276
|
+
getItemProps = _ref2.getItemProps,
|
|
277
|
+
getToggleButtonProps = _ref2.getToggleButtonProps,
|
|
278
|
+
clearSelection = _ref2.clearSelection,
|
|
279
|
+
highlightedIndex = _ref2.highlightedIndex,
|
|
280
|
+
openMenu = _ref2.openMenu,
|
|
281
|
+
setHighlightedIndex = _ref2.setHighlightedIndex,
|
|
282
|
+
isOpen = _ref2.isOpen,
|
|
283
|
+
inputValue = _ref2.inputValue;
|
|
325
284
|
const calendarItems = calendarUtils.createCalendarItems(this.state.calendarDate);
|
|
326
285
|
const allItems = [...this.state.suggestedItems, ...calendarItems];
|
|
327
286
|
const paddingDayCount = calendarUtils.getPaddingDayCount(this.state.calendarDate, this.props.intl.locale);
|
|
328
|
-
|
|
329
287
|
const paddingDays = _fillInstanceProperty__default["default"](_context3 = Array(paddingDayCount)).call(_context3, undefined);
|
|
330
|
-
|
|
331
288
|
const weekdays = calendarUtils.getWeekdayNames(this.props.intl.locale);
|
|
332
289
|
const today = calendarUtils.getToday();
|
|
333
290
|
return jsxRuntime.jsxs("div", {
|
|
@@ -355,36 +312,33 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
355
312
|
preventDownshiftDefault(event);
|
|
356
313
|
return;
|
|
357
314
|
}
|
|
358
|
-
|
|
359
|
-
|
|
315
|
+
if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty__default["default"](inputValue).call(inputValue)) === '' &&
|
|
316
|
+
// do not clear value when user presses Enter to
|
|
360
317
|
// select the end date (so only clear when there is no
|
|
361
318
|
// startDate)
|
|
362
319
|
!this.state.startDate && this.props.isClearable) {
|
|
363
320
|
clearSelection();
|
|
364
321
|
this.emit([]);
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
|
|
322
|
+
}
|
|
323
|
+
// ArrowDown
|
|
368
324
|
if (event.key === 'ArrowDown') {
|
|
369
325
|
if (highlightedIndex + 1 >= calendarItems.length) {
|
|
370
326
|
// if it's the end of the month
|
|
371
327
|
// then bypass normal arrow navigation
|
|
372
|
-
preventDownshiftDefault(event);
|
|
373
|
-
|
|
328
|
+
preventDownshiftDefault(event);
|
|
329
|
+
// then jump to start of next month
|
|
374
330
|
this.jumpMonth(1, 0);
|
|
375
331
|
}
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
|
|
332
|
+
}
|
|
333
|
+
// ArrowUp
|
|
379
334
|
if (event.key === 'ArrowUp') {
|
|
380
335
|
const previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
|
|
381
|
-
|
|
382
336
|
if (highlightedIndex <= 0) {
|
|
383
337
|
// if it's the start of the month
|
|
384
338
|
// then bypass normal arrow navigation
|
|
385
339
|
preventDownshiftDefault(event);
|
|
386
|
-
const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay);
|
|
387
|
-
|
|
340
|
+
const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay);
|
|
341
|
+
// then jump to the last day of the previous month
|
|
388
342
|
this.jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
|
|
389
343
|
}
|
|
390
344
|
}
|
|
@@ -427,17 +381,15 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
427
381
|
type: "spacing"
|
|
428
382
|
}, index)), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, (item, index) => {
|
|
429
383
|
const isHighlighted = this.state.suggestedItems.length + index === highlightedIndex;
|
|
430
|
-
|
|
431
384
|
const _getRange = getRange({
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
385
|
+
item,
|
|
386
|
+
value: this.props.value,
|
|
387
|
+
startDate: this.state.startDate,
|
|
388
|
+
highlightedItem: allItems[this.state.highlightedIndex || 0]
|
|
389
|
+
}),
|
|
390
|
+
isRangeStart = _getRange.isRangeStart,
|
|
391
|
+
isRangeBetween = _getRange.isRangeBetween,
|
|
392
|
+
isRangeEnd = _getRange.isRangeEnd;
|
|
441
393
|
return jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
|
|
442
394
|
isToday: calendarUtils.isSameDay(today, item)
|
|
443
395
|
}, getItemProps({
|
|
@@ -479,22 +431,18 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
479
431
|
};
|
|
480
432
|
}
|
|
481
433
|
}]);
|
|
482
|
-
|
|
483
434
|
return DateRangeInput;
|
|
484
435
|
}(react.Component);
|
|
485
|
-
|
|
486
436
|
DateRangeInput.displayName = 'DateRangeInput';
|
|
487
437
|
DateRangeInput.defaultProps = {
|
|
488
438
|
isClearable: true
|
|
489
439
|
};
|
|
490
|
-
|
|
491
440
|
DateRangeInput.isEmpty = range => range.length === 0;
|
|
492
|
-
|
|
493
441
|
DateRangeInput.propTypes = {};
|
|
494
442
|
var dateRangeInput = reactIntl.injectIntl(DateRangeInput);
|
|
495
443
|
|
|
496
444
|
// NOTE: This string will be replaced on build time with the package version.
|
|
497
|
-
var version = "16.
|
|
445
|
+
var version = "16.1.0";
|
|
498
446
|
|
|
499
447
|
exports["default"] = dateRangeInput;
|
|
500
448
|
exports.version = version;
|
|
@@ -29,89 +29,68 @@ import { getLocalizedDateTimeFormatPattern } from '@commercetools-uikit/calendar
|
|
|
29
29
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
30
30
|
|
|
31
31
|
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; }
|
|
32
|
-
|
|
33
32
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
34
|
-
|
|
35
33
|
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); }; }
|
|
36
|
-
|
|
37
34
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
38
|
-
|
|
39
35
|
const preventDownshiftDefault = event => {
|
|
40
36
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
41
37
|
};
|
|
42
|
-
|
|
43
38
|
const parseRangeText = (text, locale) => {
|
|
44
39
|
var _context, _context2;
|
|
45
|
-
|
|
46
40
|
const parts = _filterInstanceProperty(_context = _mapInstanceProperty(_context2 = text.split(' - ')).call(_context2, part => {
|
|
47
41
|
const parsedDate = parseInputToDate(_trimInstanceProperty(part).call(part), locale);
|
|
48
42
|
return parsedDate === '' ? null : parsedDate;
|
|
49
43
|
})).call(_context, Boolean);
|
|
50
|
-
|
|
51
44
|
return parts;
|
|
52
45
|
};
|
|
53
|
-
|
|
54
46
|
const isSameRange = (a, b) => {
|
|
55
47
|
if (a.length !== b.length) return false;
|
|
56
48
|
if (a.length === 0) return true;
|
|
57
49
|
if (a[0] === b[0] && a[1] === b[1]) return true;
|
|
58
50
|
return false;
|
|
59
51
|
};
|
|
60
|
-
|
|
61
52
|
const getRange = _ref => {
|
|
62
53
|
let item = _ref.item,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
value = _ref.value,
|
|
55
|
+
startDate = _ref.startDate,
|
|
56
|
+
highlightedItem = _ref.highlightedItem;
|
|
66
57
|
const isRangeSelectionInProgress = startDate;
|
|
67
58
|
const hasSelection = value.length === 2;
|
|
68
59
|
const isStartDate = isSameDay(item, startDate);
|
|
69
60
|
const isBetween$1 = highlightedItem && isBetween(item, startDate, highlightedItem);
|
|
70
61
|
let isRangeStart = false;
|
|
71
|
-
|
|
72
62
|
if (isRangeSelectionInProgress) {
|
|
73
63
|
isRangeStart = isStartDate;
|
|
74
64
|
} else if (hasSelection) {
|
|
75
65
|
isRangeStart = value[0] === item;
|
|
76
66
|
}
|
|
77
|
-
|
|
78
67
|
let isRangeBetween = false;
|
|
79
|
-
|
|
80
68
|
if (isRangeSelectionInProgress) {
|
|
81
69
|
isRangeBetween = isBetween$1;
|
|
82
70
|
} else if (hasSelection) {
|
|
83
71
|
isRangeBetween = isBetween(item, value[0], value[1]);
|
|
84
72
|
}
|
|
85
|
-
|
|
86
73
|
let isRangeEnd = false;
|
|
87
|
-
|
|
88
74
|
if (isRangeSelectionInProgress) {
|
|
89
75
|
isRangeEnd = item === highlightedItem;
|
|
90
76
|
} else if (hasSelection) {
|
|
91
77
|
isRangeEnd = value[1] === item;
|
|
92
78
|
}
|
|
93
|
-
|
|
94
79
|
return {
|
|
95
80
|
isRangeStart,
|
|
96
81
|
isRangeBetween,
|
|
97
82
|
isRangeEnd
|
|
98
83
|
};
|
|
99
84
|
};
|
|
100
|
-
|
|
101
85
|
let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
102
86
|
_inherits(DateRangeInput, _Component);
|
|
103
|
-
|
|
104
87
|
var _super = _createSuper(DateRangeInput);
|
|
105
|
-
|
|
106
88
|
function DateRangeInput() {
|
|
107
89
|
var _this;
|
|
108
|
-
|
|
109
90
|
_classCallCheck(this, DateRangeInput);
|
|
110
|
-
|
|
111
91
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
112
92
|
args[_key] = arguments[_key];
|
|
113
93
|
}
|
|
114
|
-
|
|
115
94
|
_this = _super.call(this, ...args);
|
|
116
95
|
_this.inputRef = /*#__PURE__*/createRef();
|
|
117
96
|
_this.state = {
|
|
@@ -124,10 +103,8 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
124
103
|
prevValue: _this.props.value,
|
|
125
104
|
prevLocale: _this.props.intl.locale
|
|
126
105
|
};
|
|
127
|
-
|
|
128
106
|
_this.jumpMonth = function (amount) {
|
|
129
107
|
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
130
|
-
|
|
131
108
|
_this.setState(prevState => {
|
|
132
109
|
const nextDate = changeMonth(prevState.calendarDate, amount);
|
|
133
110
|
return {
|
|
@@ -136,20 +113,16 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
136
113
|
};
|
|
137
114
|
});
|
|
138
115
|
};
|
|
139
|
-
|
|
140
116
|
_this.showToday = () => {
|
|
141
117
|
const today = getToday();
|
|
142
|
-
|
|
143
118
|
_this.setState(prevState => ({
|
|
144
119
|
calendarDate: today,
|
|
145
120
|
highlightedIndex: prevState.suggestedItems.length + getDateInMonth(today) - 1
|
|
146
121
|
}), () => {
|
|
147
122
|
var _this$inputRef$curren;
|
|
148
|
-
|
|
149
123
|
return (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
150
124
|
});
|
|
151
125
|
};
|
|
152
|
-
|
|
153
126
|
_this.handleBlur = () => {
|
|
154
127
|
if (_this.props.onBlur) _this.props.onBlur({
|
|
155
128
|
target: {
|
|
@@ -158,10 +131,8 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
158
131
|
}
|
|
159
132
|
});
|
|
160
133
|
};
|
|
161
|
-
|
|
162
134
|
_this.emit = unsortedRange => {
|
|
163
135
|
var _this$props$onChange, _this$props;
|
|
164
|
-
|
|
165
136
|
(_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
|
|
166
137
|
target: {
|
|
167
138
|
id: _this.props.id,
|
|
@@ -170,10 +141,8 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
170
141
|
}
|
|
171
142
|
});
|
|
172
143
|
};
|
|
173
|
-
|
|
174
144
|
return _this;
|
|
175
145
|
}
|
|
176
|
-
|
|
177
146
|
_createClass(DateRangeInput, [{
|
|
178
147
|
key: "render",
|
|
179
148
|
value: function render() {
|
|
@@ -198,7 +167,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
198
167
|
inputValue,
|
|
199
168
|
startDate: null
|
|
200
169
|
};
|
|
201
|
-
|
|
202
170
|
if (parsedRange.length === 1) {
|
|
203
171
|
const calendarDate = parsedRange[0];
|
|
204
172
|
return {
|
|
@@ -209,7 +177,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
209
177
|
calendarDate
|
|
210
178
|
};
|
|
211
179
|
}
|
|
212
|
-
|
|
213
180
|
if (parsedRange.length === 2) {
|
|
214
181
|
const calendarDate = parsedRange[1];
|
|
215
182
|
return {
|
|
@@ -220,7 +187,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
220
187
|
calendarDate
|
|
221
188
|
};
|
|
222
189
|
}
|
|
223
|
-
|
|
224
190
|
return null;
|
|
225
191
|
});
|
|
226
192
|
},
|
|
@@ -233,7 +199,6 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
233
199
|
inputValue: formatRange(this.props.value, this.props.intl.locale)
|
|
234
200
|
};
|
|
235
201
|
}
|
|
236
|
-
|
|
237
202
|
if (changes.hasOwnProperty('selectedItem')) {
|
|
238
203
|
const hasStartedRangeSelection = Boolean(!prevState.startDate && changes.selectedItem);
|
|
239
204
|
const hasFinishedRangeSelection = Boolean(prevState.startDate && changes.selectedItem);
|
|
@@ -246,16 +211,13 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
246
211
|
if (hasFinishedRangeSelection) {
|
|
247
212
|
return formatRange([prevState.startDate, changes.selectedItem], this.props.intl.locale);
|
|
248
213
|
}
|
|
249
|
-
|
|
250
214
|
if (hasStartedRangeSelection) {
|
|
251
215
|
return formatRange([changes.selectedItem], this.props.intl.locale);
|
|
252
216
|
}
|
|
253
|
-
|
|
254
217
|
return '';
|
|
255
218
|
})()
|
|
256
219
|
};
|
|
257
220
|
}
|
|
258
|
-
|
|
259
221
|
if (changes.hasOwnProperty('isOpen')) {
|
|
260
222
|
return {
|
|
261
223
|
isOpen: changes.isOpen,
|
|
@@ -268,13 +230,11 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
268
230
|
calendarDate: this.props.value.length === 2 ? this.props.value[0] : getToday()
|
|
269
231
|
};
|
|
270
232
|
}
|
|
271
|
-
|
|
272
233
|
if (changes.hasOwnProperty('highlightedIndex')) {
|
|
273
234
|
return {
|
|
274
235
|
highlightedIndex: changes.highlightedIndex
|
|
275
236
|
};
|
|
276
237
|
}
|
|
277
|
-
|
|
278
238
|
return null;
|
|
279
239
|
});
|
|
280
240
|
},
|
|
@@ -288,23 +248,20 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
288
248
|
isOpen: this.state.isOpen,
|
|
289
249
|
children: _ref2 => {
|
|
290
250
|
var _context3, _context4;
|
|
291
|
-
|
|
292
251
|
let getInputProps = _ref2.getInputProps,
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
252
|
+
getMenuProps = _ref2.getMenuProps,
|
|
253
|
+
getItemProps = _ref2.getItemProps,
|
|
254
|
+
getToggleButtonProps = _ref2.getToggleButtonProps,
|
|
255
|
+
clearSelection = _ref2.clearSelection,
|
|
256
|
+
highlightedIndex = _ref2.highlightedIndex,
|
|
257
|
+
openMenu = _ref2.openMenu,
|
|
258
|
+
setHighlightedIndex = _ref2.setHighlightedIndex,
|
|
259
|
+
isOpen = _ref2.isOpen,
|
|
260
|
+
inputValue = _ref2.inputValue;
|
|
302
261
|
const calendarItems = createCalendarItems(this.state.calendarDate);
|
|
303
262
|
const allItems = [...this.state.suggestedItems, ...calendarItems];
|
|
304
263
|
const paddingDayCount = getPaddingDayCount(this.state.calendarDate, this.props.intl.locale);
|
|
305
|
-
|
|
306
264
|
const paddingDays = _fillInstanceProperty(_context3 = Array(paddingDayCount)).call(_context3, undefined);
|
|
307
|
-
|
|
308
265
|
const weekdays = getWeekdayNames(this.props.intl.locale);
|
|
309
266
|
const today = getToday();
|
|
310
267
|
return jsxs("div", {
|
|
@@ -332,36 +289,33 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
332
289
|
preventDownshiftDefault(event);
|
|
333
290
|
return;
|
|
334
291
|
}
|
|
335
|
-
|
|
336
|
-
|
|
292
|
+
if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty(inputValue).call(inputValue)) === '' &&
|
|
293
|
+
// do not clear value when user presses Enter to
|
|
337
294
|
// select the end date (so only clear when there is no
|
|
338
295
|
// startDate)
|
|
339
296
|
!this.state.startDate && this.props.isClearable) {
|
|
340
297
|
clearSelection();
|
|
341
298
|
this.emit([]);
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
|
|
299
|
+
}
|
|
300
|
+
// ArrowDown
|
|
345
301
|
if (event.key === 'ArrowDown') {
|
|
346
302
|
if (highlightedIndex + 1 >= calendarItems.length) {
|
|
347
303
|
// if it's the end of the month
|
|
348
304
|
// then bypass normal arrow navigation
|
|
349
|
-
preventDownshiftDefault(event);
|
|
350
|
-
|
|
305
|
+
preventDownshiftDefault(event);
|
|
306
|
+
// then jump to start of next month
|
|
351
307
|
this.jumpMonth(1, 0);
|
|
352
308
|
}
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
|
|
309
|
+
}
|
|
310
|
+
// ArrowUp
|
|
356
311
|
if (event.key === 'ArrowUp') {
|
|
357
312
|
const previousDay = getPreviousDay(calendarItems[highlightedIndex]);
|
|
358
|
-
|
|
359
313
|
if (highlightedIndex <= 0) {
|
|
360
314
|
// if it's the start of the month
|
|
361
315
|
// then bypass normal arrow navigation
|
|
362
316
|
preventDownshiftDefault(event);
|
|
363
|
-
const numberOfDaysOfPrevMonth = getDaysInMonth(previousDay);
|
|
364
|
-
|
|
317
|
+
const numberOfDaysOfPrevMonth = getDaysInMonth(previousDay);
|
|
318
|
+
// then jump to the last day of the previous month
|
|
365
319
|
this.jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
|
|
366
320
|
}
|
|
367
321
|
}
|
|
@@ -404,17 +358,15 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
404
358
|
type: "spacing"
|
|
405
359
|
}, index)), _mapInstanceProperty(calendarItems).call(calendarItems, (item, index) => {
|
|
406
360
|
const isHighlighted = this.state.suggestedItems.length + index === highlightedIndex;
|
|
407
|
-
|
|
408
361
|
const _getRange = getRange({
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
362
|
+
item,
|
|
363
|
+
value: this.props.value,
|
|
364
|
+
startDate: this.state.startDate,
|
|
365
|
+
highlightedItem: allItems[this.state.highlightedIndex || 0]
|
|
366
|
+
}),
|
|
367
|
+
isRangeStart = _getRange.isRangeStart,
|
|
368
|
+
isRangeBetween = _getRange.isRangeBetween,
|
|
369
|
+
isRangeEnd = _getRange.isRangeEnd;
|
|
418
370
|
return jsx(CalendarDay, _objectSpread(_objectSpread({
|
|
419
371
|
isToday: isSameDay(today, item)
|
|
420
372
|
}, getItemProps({
|
|
@@ -456,17 +408,13 @@ let DateRangeInput = /*#__PURE__*/function (_Component) {
|
|
|
456
408
|
};
|
|
457
409
|
}
|
|
458
410
|
}]);
|
|
459
|
-
|
|
460
411
|
return DateRangeInput;
|
|
461
412
|
}(Component);
|
|
462
|
-
|
|
463
413
|
DateRangeInput.displayName = 'DateRangeInput';
|
|
464
414
|
DateRangeInput.defaultProps = {
|
|
465
415
|
isClearable: true
|
|
466
416
|
};
|
|
467
|
-
|
|
468
417
|
DateRangeInput.isEmpty = range => range.length === 0;
|
|
469
|
-
|
|
470
418
|
DateRangeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
471
419
|
horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
472
420
|
value: _pt.arrayOf(_pt.any).isRequired,
|
|
@@ -487,6 +435,6 @@ DateRangeInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
487
435
|
var dateRangeInput = injectIntl(DateRangeInput);
|
|
488
436
|
|
|
489
437
|
// NOTE: This string will be replaced on build time with the package version.
|
|
490
|
-
var version = "16.
|
|
438
|
+
var version = "16.1.0";
|
|
491
439
|
|
|
492
440
|
export { dateRangeInput as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/date-range-input",
|
|
3
3
|
"description": "The `DateRangeInput` component allows the user to select a date range.",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.1.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": "16.
|
|
25
|
-
"@commercetools-uikit/calendar-time-utils": "16.
|
|
26
|
-
"@commercetools-uikit/calendar-utils": "16.
|
|
27
|
-
"@commercetools-uikit/constraints": "16.
|
|
28
|
-
"@commercetools-uikit/design-system": "16.
|
|
29
|
-
"@commercetools-uikit/hooks": "16.
|
|
30
|
-
"@commercetools-uikit/icons": "16.
|
|
31
|
-
"@commercetools-uikit/secondary-icon-button": "16.
|
|
32
|
-
"@commercetools-uikit/select-utils": "16.
|
|
33
|
-
"@commercetools-uikit/spacings-inline": "16.
|
|
34
|
-
"@commercetools-uikit/text": "16.
|
|
35
|
-
"@commercetools-uikit/tooltip": "16.
|
|
36
|
-
"@commercetools-uikit/utils": "16.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "16.1.0",
|
|
25
|
+
"@commercetools-uikit/calendar-time-utils": "16.1.0",
|
|
26
|
+
"@commercetools-uikit/calendar-utils": "16.1.0",
|
|
27
|
+
"@commercetools-uikit/constraints": "16.1.0",
|
|
28
|
+
"@commercetools-uikit/design-system": "16.1.0",
|
|
29
|
+
"@commercetools-uikit/hooks": "16.1.0",
|
|
30
|
+
"@commercetools-uikit/icons": "16.1.0",
|
|
31
|
+
"@commercetools-uikit/secondary-icon-button": "16.1.0",
|
|
32
|
+
"@commercetools-uikit/select-utils": "16.1.0",
|
|
33
|
+
"@commercetools-uikit/spacings-inline": "16.1.0",
|
|
34
|
+
"@commercetools-uikit/text": "16.1.0",
|
|
35
|
+
"@commercetools-uikit/tooltip": "16.1.0",
|
|
36
|
+
"@commercetools-uikit/utils": "16.1.0",
|
|
37
37
|
"@emotion/react": "^11.10.5",
|
|
38
38
|
"@emotion/styled": "^11.10.5",
|
|
39
39
|
"downshift": "6.1.12",
|