@commercetools-uikit/date-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.
|
@@ -43,37 +43,28 @@ var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
|
|
|
43
43
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
44
44
|
|
|
45
45
|
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; }
|
|
46
|
-
|
|
47
46
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
48
|
-
|
|
49
47
|
const preventDownshiftDefault = event => {
|
|
50
48
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
51
49
|
};
|
|
52
|
-
|
|
53
50
|
const DateInput = props => {
|
|
54
51
|
const intl = reactIntl.useIntl();
|
|
55
|
-
|
|
56
52
|
const _useState = react.useState(props.value || calendarUtils.getToday()),
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
54
|
+
calendarDate = _useState2[0],
|
|
55
|
+
setCalendarDate = _useState2[1];
|
|
61
56
|
const _useState3 = react.useState([]),
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
57
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
58
|
+
suggestedItems = _useState4[0],
|
|
59
|
+
setSuggestedItems = _useState4[1];
|
|
66
60
|
const _useState5 = react.useState(props.value === '' ? null : calendarUtils.getDateInMonth(props.value) - 1),
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
61
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
62
|
+
highlightedIndex = _useState6[0],
|
|
63
|
+
setHighlightedIndex = _useState6[1];
|
|
71
64
|
const inputRef = react.useRef(null);
|
|
72
|
-
|
|
73
65
|
if (!props.isReadOnly) {
|
|
74
66
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
|
|
75
67
|
}
|
|
76
|
-
|
|
77
68
|
const onChange = props.onChange;
|
|
78
69
|
const emit = react.useCallback(value => onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
79
70
|
target: {
|
|
@@ -86,7 +77,6 @@ const DateInput = props => {
|
|
|
86
77
|
}), [onChange, props.id, props.name]);
|
|
87
78
|
const handleChange = react.useCallback(date => {
|
|
88
79
|
var _inputRef$current;
|
|
89
|
-
|
|
90
80
|
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(0, 100);
|
|
91
81
|
emit(date);
|
|
92
82
|
}, [inputRef, emit]);
|
|
@@ -99,23 +89,19 @@ const DateInput = props => {
|
|
|
99
89
|
}
|
|
100
90
|
});
|
|
101
91
|
}, [onBlur, props.id, props.name]);
|
|
102
|
-
|
|
103
92
|
const showToday = () => {
|
|
104
93
|
var _inputRef$current2;
|
|
105
|
-
|
|
106
94
|
const today = calendarUtils.getToday();
|
|
107
95
|
setCalendarDate(today);
|
|
108
96
|
setHighlightedIndex(suggestedItems.length + calendarUtils.getDateInMonth(today) - 1);
|
|
109
97
|
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
|
|
110
98
|
};
|
|
111
|
-
|
|
112
99
|
const jumpMonth = function (amount) {
|
|
113
100
|
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
114
101
|
const nextDate = calendarUtils.changeMonth(calendarDate, amount);
|
|
115
102
|
setCalendarDate(nextDate);
|
|
116
103
|
setHighlightedIndex(dayToHighlight);
|
|
117
104
|
};
|
|
118
|
-
|
|
119
105
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
120
106
|
max: props.horizontalConstraint,
|
|
121
107
|
children: jsxRuntime.jsx(Downshift__default["default"], {
|
|
@@ -129,17 +115,14 @@ const DateInput = props => {
|
|
|
129
115
|
// input changed because user typed
|
|
130
116
|
if (changes.type === Downshift__default["default"].stateChangeTypes.changeInput) {
|
|
131
117
|
const date = calendarUtils.parseInputToDate(changes.inputValue, intl.locale);
|
|
132
|
-
|
|
133
118
|
if (date === '') {
|
|
134
119
|
setSuggestedItems([]);
|
|
135
120
|
setHighlightedIndex(null);
|
|
136
121
|
} else {
|
|
137
122
|
setSuggestedItems([date]);
|
|
138
|
-
|
|
139
123
|
if (calendarUtils.getIsDateInRange(date, props.minValue, props.maxValue)) {
|
|
140
124
|
setHighlightedIndex(calendarUtils.getDateInMonth(date) - 1);
|
|
141
125
|
}
|
|
142
|
-
|
|
143
126
|
setCalendarDate(date);
|
|
144
127
|
}
|
|
145
128
|
} else {
|
|
@@ -152,30 +135,26 @@ const DateInput = props => {
|
|
|
152
135
|
* We check the downshift changes property to be sure it has highlightedIndex That is not null before updating it,
|
|
153
136
|
* otherwise it may override the initially set highlightedIndex from the inputValue and set it to null.
|
|
154
137
|
*/
|
|
155
|
-
|
|
156
138
|
} else if (changes.hasOwnProperty('highlightedIndex')) {
|
|
157
139
|
setHighlightedIndex(changes.highlightedIndex);
|
|
158
140
|
}
|
|
159
141
|
},
|
|
160
142
|
children: _ref => {
|
|
161
143
|
var _context;
|
|
162
|
-
|
|
163
144
|
let getInputProps = _ref.getInputProps,
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
145
|
+
getMenuProps = _ref.getMenuProps,
|
|
146
|
+
getItemProps = _ref.getItemProps,
|
|
147
|
+
getToggleButtonProps = _ref.getToggleButtonProps,
|
|
148
|
+
clearSelection = _ref.clearSelection,
|
|
149
|
+
downshiftHighlightedIndex = _ref.highlightedIndex,
|
|
150
|
+
openMenu = _ref.openMenu,
|
|
151
|
+
setDownshiftHighlightedIndex = _ref.setHighlightedIndex,
|
|
152
|
+
selectedItem = _ref.selectedItem,
|
|
153
|
+
isOpen = _ref.isOpen,
|
|
154
|
+
inputValue = _ref.inputValue;
|
|
174
155
|
const calendarItems = calendarUtils.createCalendarItems(calendarDate);
|
|
175
156
|
const paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
|
|
176
|
-
|
|
177
157
|
const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
|
|
178
|
-
|
|
179
158
|
const weekdays = calendarUtils.getWeekdayNames(intl.locale);
|
|
180
159
|
const today = calendarUtils.getToday();
|
|
181
160
|
return jsxRuntime.jsxs("div", {
|
|
@@ -203,48 +182,41 @@ const DateInput = props => {
|
|
|
203
182
|
preventDownshiftDefault(event);
|
|
204
183
|
return;
|
|
205
184
|
}
|
|
206
|
-
|
|
207
185
|
if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty__default["default"](inputValue).call(inputValue)) === '') {
|
|
208
186
|
clearSelection();
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
|
|
187
|
+
}
|
|
188
|
+
// ArrowDown
|
|
212
189
|
if (event.key === 'ArrowDown') {
|
|
213
190
|
const nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
|
|
214
|
-
|
|
215
191
|
if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
|
|
216
192
|
// if the date to highlight is disabled
|
|
217
193
|
// then do nothing
|
|
218
194
|
preventDownshiftDefault(event);
|
|
219
195
|
return;
|
|
220
196
|
}
|
|
221
|
-
|
|
222
197
|
if (Number(highlightedIndex) + 1 >= calendarItems.length) {
|
|
223
198
|
// if it's the end of the month
|
|
224
199
|
// then bypass normal arrow navigation
|
|
225
|
-
preventDownshiftDefault(event);
|
|
226
|
-
|
|
200
|
+
preventDownshiftDefault(event);
|
|
201
|
+
// then jump to start of next month
|
|
227
202
|
jumpMonth(1, 0);
|
|
228
203
|
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
|
|
204
|
+
}
|
|
205
|
+
// ArrowUp
|
|
232
206
|
if (event.key === 'ArrowUp') {
|
|
233
207
|
const previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
|
|
234
|
-
|
|
235
208
|
if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
|
|
236
209
|
// if the date to highlight is disabled
|
|
237
210
|
// then do nothing
|
|
238
211
|
preventDownshiftDefault(event);
|
|
239
212
|
return;
|
|
240
213
|
}
|
|
241
|
-
|
|
242
214
|
if (Number(highlightedIndex) <= 0) {
|
|
243
215
|
// if it's the start of the month
|
|
244
216
|
// then bypass normal arrow navigation
|
|
245
217
|
preventDownshiftDefault(event);
|
|
246
|
-
const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay);
|
|
247
|
-
|
|
218
|
+
const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay);
|
|
219
|
+
// then jump to the last day of the previous month
|
|
248
220
|
jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
|
|
249
221
|
}
|
|
250
222
|
}
|
|
@@ -299,7 +271,6 @@ const DateInput = props => {
|
|
|
299
271
|
}, intl.locale)
|
|
300
272
|
});
|
|
301
273
|
};
|
|
302
|
-
|
|
303
274
|
DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
304
275
|
horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
305
276
|
value: _pt__default["default"].string.isRequired,
|
|
@@ -319,13 +290,11 @@ DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
319
290
|
maxValue: _pt__default["default"].string
|
|
320
291
|
} : {};
|
|
321
292
|
DateInput.displayName = 'DateInput';
|
|
322
|
-
|
|
323
293
|
DateInput.isEmpty = value => value === '';
|
|
324
|
-
|
|
325
294
|
var DateInput$1 = DateInput;
|
|
326
295
|
|
|
327
296
|
// NOTE: This string will be replaced on build time with the package version.
|
|
328
|
-
var version = "16.
|
|
297
|
+
var version = "16.1.0";
|
|
329
298
|
|
|
330
299
|
exports["default"] = DateInput$1;
|
|
331
300
|
exports.version = version;
|
|
@@ -42,35 +42,26 @@ var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
|
|
|
42
42
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
43
43
|
|
|
44
44
|
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; }
|
|
45
|
-
|
|
46
45
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
47
|
-
|
|
48
46
|
const preventDownshiftDefault = event => {
|
|
49
47
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
50
48
|
};
|
|
51
|
-
|
|
52
49
|
const DateInput = props => {
|
|
53
50
|
const intl = reactIntl.useIntl();
|
|
54
|
-
|
|
55
51
|
const _useState = react.useState(props.value || calendarUtils.getToday()),
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
52
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
53
|
+
calendarDate = _useState2[0],
|
|
54
|
+
setCalendarDate = _useState2[1];
|
|
60
55
|
const _useState3 = react.useState([]),
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
56
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
57
|
+
suggestedItems = _useState4[0],
|
|
58
|
+
setSuggestedItems = _useState4[1];
|
|
65
59
|
const _useState5 = react.useState(props.value === '' ? null : calendarUtils.getDateInMonth(props.value) - 1),
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
60
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
61
|
+
highlightedIndex = _useState6[0],
|
|
62
|
+
setHighlightedIndex = _useState6[1];
|
|
70
63
|
const inputRef = react.useRef(null);
|
|
71
|
-
|
|
72
64
|
if (!props.isReadOnly) ;
|
|
73
|
-
|
|
74
65
|
const onChange = props.onChange;
|
|
75
66
|
const emit = react.useCallback(value => onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
76
67
|
target: {
|
|
@@ -83,7 +74,6 @@ const DateInput = props => {
|
|
|
83
74
|
}), [onChange, props.id, props.name]);
|
|
84
75
|
const handleChange = react.useCallback(date => {
|
|
85
76
|
var _inputRef$current;
|
|
86
|
-
|
|
87
77
|
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(0, 100);
|
|
88
78
|
emit(date);
|
|
89
79
|
}, [inputRef, emit]);
|
|
@@ -96,23 +86,19 @@ const DateInput = props => {
|
|
|
96
86
|
}
|
|
97
87
|
});
|
|
98
88
|
}, [onBlur, props.id, props.name]);
|
|
99
|
-
|
|
100
89
|
const showToday = () => {
|
|
101
90
|
var _inputRef$current2;
|
|
102
|
-
|
|
103
91
|
const today = calendarUtils.getToday();
|
|
104
92
|
setCalendarDate(today);
|
|
105
93
|
setHighlightedIndex(suggestedItems.length + calendarUtils.getDateInMonth(today) - 1);
|
|
106
94
|
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
|
|
107
95
|
};
|
|
108
|
-
|
|
109
96
|
const jumpMonth = function (amount) {
|
|
110
97
|
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
111
98
|
const nextDate = calendarUtils.changeMonth(calendarDate, amount);
|
|
112
99
|
setCalendarDate(nextDate);
|
|
113
100
|
setHighlightedIndex(dayToHighlight);
|
|
114
101
|
};
|
|
115
|
-
|
|
116
102
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
117
103
|
max: props.horizontalConstraint,
|
|
118
104
|
children: jsxRuntime.jsx(Downshift__default["default"], {
|
|
@@ -126,17 +112,14 @@ const DateInput = props => {
|
|
|
126
112
|
// input changed because user typed
|
|
127
113
|
if (changes.type === Downshift__default["default"].stateChangeTypes.changeInput) {
|
|
128
114
|
const date = calendarUtils.parseInputToDate(changes.inputValue, intl.locale);
|
|
129
|
-
|
|
130
115
|
if (date === '') {
|
|
131
116
|
setSuggestedItems([]);
|
|
132
117
|
setHighlightedIndex(null);
|
|
133
118
|
} else {
|
|
134
119
|
setSuggestedItems([date]);
|
|
135
|
-
|
|
136
120
|
if (calendarUtils.getIsDateInRange(date, props.minValue, props.maxValue)) {
|
|
137
121
|
setHighlightedIndex(calendarUtils.getDateInMonth(date) - 1);
|
|
138
122
|
}
|
|
139
|
-
|
|
140
123
|
setCalendarDate(date);
|
|
141
124
|
}
|
|
142
125
|
} else {
|
|
@@ -149,30 +132,26 @@ const DateInput = props => {
|
|
|
149
132
|
* We check the downshift changes property to be sure it has highlightedIndex That is not null before updating it,
|
|
150
133
|
* otherwise it may override the initially set highlightedIndex from the inputValue and set it to null.
|
|
151
134
|
*/
|
|
152
|
-
|
|
153
135
|
} else if (changes.hasOwnProperty('highlightedIndex')) {
|
|
154
136
|
setHighlightedIndex(changes.highlightedIndex);
|
|
155
137
|
}
|
|
156
138
|
},
|
|
157
139
|
children: _ref => {
|
|
158
140
|
var _context;
|
|
159
|
-
|
|
160
141
|
let getInputProps = _ref.getInputProps,
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
142
|
+
getMenuProps = _ref.getMenuProps,
|
|
143
|
+
getItemProps = _ref.getItemProps,
|
|
144
|
+
getToggleButtonProps = _ref.getToggleButtonProps,
|
|
145
|
+
clearSelection = _ref.clearSelection,
|
|
146
|
+
downshiftHighlightedIndex = _ref.highlightedIndex,
|
|
147
|
+
openMenu = _ref.openMenu,
|
|
148
|
+
setDownshiftHighlightedIndex = _ref.setHighlightedIndex,
|
|
149
|
+
selectedItem = _ref.selectedItem,
|
|
150
|
+
isOpen = _ref.isOpen,
|
|
151
|
+
inputValue = _ref.inputValue;
|
|
171
152
|
const calendarItems = calendarUtils.createCalendarItems(calendarDate);
|
|
172
153
|
const paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
|
|
173
|
-
|
|
174
154
|
const paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context, undefined);
|
|
175
|
-
|
|
176
155
|
const weekdays = calendarUtils.getWeekdayNames(intl.locale);
|
|
177
156
|
const today = calendarUtils.getToday();
|
|
178
157
|
return jsxRuntime.jsxs("div", {
|
|
@@ -200,48 +179,41 @@ const DateInput = props => {
|
|
|
200
179
|
preventDownshiftDefault(event);
|
|
201
180
|
return;
|
|
202
181
|
}
|
|
203
|
-
|
|
204
182
|
if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty__default["default"](inputValue).call(inputValue)) === '') {
|
|
205
183
|
clearSelection();
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
|
|
184
|
+
}
|
|
185
|
+
// ArrowDown
|
|
209
186
|
if (event.key === 'ArrowDown') {
|
|
210
187
|
const nextDayToHighlight = calendarUtils.getNextDay(calendarItems[Number(highlightedIndex)]);
|
|
211
|
-
|
|
212
188
|
if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
|
|
213
189
|
// if the date to highlight is disabled
|
|
214
190
|
// then do nothing
|
|
215
191
|
preventDownshiftDefault(event);
|
|
216
192
|
return;
|
|
217
193
|
}
|
|
218
|
-
|
|
219
194
|
if (Number(highlightedIndex) + 1 >= calendarItems.length) {
|
|
220
195
|
// if it's the end of the month
|
|
221
196
|
// then bypass normal arrow navigation
|
|
222
|
-
preventDownshiftDefault(event);
|
|
223
|
-
|
|
197
|
+
preventDownshiftDefault(event);
|
|
198
|
+
// then jump to start of next month
|
|
224
199
|
jumpMonth(1, 0);
|
|
225
200
|
}
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
|
|
201
|
+
}
|
|
202
|
+
// ArrowUp
|
|
229
203
|
if (event.key === 'ArrowUp') {
|
|
230
204
|
const previousDay = calendarUtils.getPreviousDay(calendarItems[Number(highlightedIndex)]);
|
|
231
|
-
|
|
232
205
|
if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
|
|
233
206
|
// if the date to highlight is disabled
|
|
234
207
|
// then do nothing
|
|
235
208
|
preventDownshiftDefault(event);
|
|
236
209
|
return;
|
|
237
210
|
}
|
|
238
|
-
|
|
239
211
|
if (Number(highlightedIndex) <= 0) {
|
|
240
212
|
// if it's the start of the month
|
|
241
213
|
// then bypass normal arrow navigation
|
|
242
214
|
preventDownshiftDefault(event);
|
|
243
|
-
const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay);
|
|
244
|
-
|
|
215
|
+
const numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay);
|
|
216
|
+
// then jump to the last day of the previous month
|
|
245
217
|
jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
|
|
246
218
|
}
|
|
247
219
|
}
|
|
@@ -296,16 +268,13 @@ const DateInput = props => {
|
|
|
296
268
|
}, intl.locale)
|
|
297
269
|
});
|
|
298
270
|
};
|
|
299
|
-
|
|
300
271
|
DateInput.propTypes = {};
|
|
301
272
|
DateInput.displayName = 'DateInput';
|
|
302
|
-
|
|
303
273
|
DateInput.isEmpty = value => value === '';
|
|
304
|
-
|
|
305
274
|
var DateInput$1 = DateInput;
|
|
306
275
|
|
|
307
276
|
// NOTE: This string will be replaced on build time with the package version.
|
|
308
|
-
var version = "16.
|
|
277
|
+
var version = "16.1.0";
|
|
309
278
|
|
|
310
279
|
exports["default"] = DateInput$1;
|
|
311
280
|
exports.version = version;
|
|
@@ -22,37 +22,28 @@ import { getLocalizedDateTimeFormatPattern } from '@commercetools-uikit/calendar
|
|
|
22
22
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
23
23
|
|
|
24
24
|
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; }
|
|
25
|
-
|
|
26
25
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
27
|
-
|
|
28
26
|
const preventDownshiftDefault = event => {
|
|
29
27
|
event.nativeEvent.preventDownshiftDefault = true;
|
|
30
28
|
};
|
|
31
|
-
|
|
32
29
|
const DateInput = props => {
|
|
33
30
|
const intl = useIntl();
|
|
34
|
-
|
|
35
31
|
const _useState = useState(props.value || getToday()),
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
33
|
+
calendarDate = _useState2[0],
|
|
34
|
+
setCalendarDate = _useState2[1];
|
|
40
35
|
const _useState3 = useState([]),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
37
|
+
suggestedItems = _useState4[0],
|
|
38
|
+
setSuggestedItems = _useState4[1];
|
|
45
39
|
const _useState5 = useState(props.value === '' ? null : getDateInMonth(props.value) - 1),
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
40
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
41
|
+
highlightedIndex = _useState6[0],
|
|
42
|
+
setHighlightedIndex = _useState6[1];
|
|
50
43
|
const inputRef = useRef(null);
|
|
51
|
-
|
|
52
44
|
if (!props.isReadOnly) {
|
|
53
45
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'DateInput: `onChange` is required when input is not read only.') : void 0;
|
|
54
46
|
}
|
|
55
|
-
|
|
56
47
|
const onChange = props.onChange;
|
|
57
48
|
const emit = useCallback(value => onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
58
49
|
target: {
|
|
@@ -65,7 +56,6 @@ const DateInput = props => {
|
|
|
65
56
|
}), [onChange, props.id, props.name]);
|
|
66
57
|
const handleChange = useCallback(date => {
|
|
67
58
|
var _inputRef$current;
|
|
68
|
-
|
|
69
59
|
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(0, 100);
|
|
70
60
|
emit(date);
|
|
71
61
|
}, [inputRef, emit]);
|
|
@@ -78,23 +68,19 @@ const DateInput = props => {
|
|
|
78
68
|
}
|
|
79
69
|
});
|
|
80
70
|
}, [onBlur, props.id, props.name]);
|
|
81
|
-
|
|
82
71
|
const showToday = () => {
|
|
83
72
|
var _inputRef$current2;
|
|
84
|
-
|
|
85
73
|
const today = getToday();
|
|
86
74
|
setCalendarDate(today);
|
|
87
75
|
setHighlightedIndex(suggestedItems.length + getDateInMonth(today) - 1);
|
|
88
76
|
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
|
|
89
77
|
};
|
|
90
|
-
|
|
91
78
|
const jumpMonth = function (amount) {
|
|
92
79
|
let dayToHighlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
93
80
|
const nextDate = changeMonth(calendarDate, amount);
|
|
94
81
|
setCalendarDate(nextDate);
|
|
95
82
|
setHighlightedIndex(dayToHighlight);
|
|
96
83
|
};
|
|
97
|
-
|
|
98
84
|
return jsx(Constraints.Horizontal, {
|
|
99
85
|
max: props.horizontalConstraint,
|
|
100
86
|
children: jsx(Downshift, {
|
|
@@ -108,17 +94,14 @@ const DateInput = props => {
|
|
|
108
94
|
// input changed because user typed
|
|
109
95
|
if (changes.type === Downshift.stateChangeTypes.changeInput) {
|
|
110
96
|
const date = parseInputToDate(changes.inputValue, intl.locale);
|
|
111
|
-
|
|
112
97
|
if (date === '') {
|
|
113
98
|
setSuggestedItems([]);
|
|
114
99
|
setHighlightedIndex(null);
|
|
115
100
|
} else {
|
|
116
101
|
setSuggestedItems([date]);
|
|
117
|
-
|
|
118
102
|
if (getIsDateInRange(date, props.minValue, props.maxValue)) {
|
|
119
103
|
setHighlightedIndex(getDateInMonth(date) - 1);
|
|
120
104
|
}
|
|
121
|
-
|
|
122
105
|
setCalendarDate(date);
|
|
123
106
|
}
|
|
124
107
|
} else {
|
|
@@ -131,30 +114,26 @@ const DateInput = props => {
|
|
|
131
114
|
* We check the downshift changes property to be sure it has highlightedIndex That is not null before updating it,
|
|
132
115
|
* otherwise it may override the initially set highlightedIndex from the inputValue and set it to null.
|
|
133
116
|
*/
|
|
134
|
-
|
|
135
117
|
} else if (changes.hasOwnProperty('highlightedIndex')) {
|
|
136
118
|
setHighlightedIndex(changes.highlightedIndex);
|
|
137
119
|
}
|
|
138
120
|
},
|
|
139
121
|
children: _ref => {
|
|
140
122
|
var _context;
|
|
141
|
-
|
|
142
123
|
let getInputProps = _ref.getInputProps,
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
124
|
+
getMenuProps = _ref.getMenuProps,
|
|
125
|
+
getItemProps = _ref.getItemProps,
|
|
126
|
+
getToggleButtonProps = _ref.getToggleButtonProps,
|
|
127
|
+
clearSelection = _ref.clearSelection,
|
|
128
|
+
downshiftHighlightedIndex = _ref.highlightedIndex,
|
|
129
|
+
openMenu = _ref.openMenu,
|
|
130
|
+
setDownshiftHighlightedIndex = _ref.setHighlightedIndex,
|
|
131
|
+
selectedItem = _ref.selectedItem,
|
|
132
|
+
isOpen = _ref.isOpen,
|
|
133
|
+
inputValue = _ref.inputValue;
|
|
153
134
|
const calendarItems = createCalendarItems(calendarDate);
|
|
154
135
|
const paddingDayCount = getPaddingDayCount(calendarDate, intl.locale);
|
|
155
|
-
|
|
156
136
|
const paddingDays = _fillInstanceProperty(_context = Array(paddingDayCount)).call(_context, undefined);
|
|
157
|
-
|
|
158
137
|
const weekdays = getWeekdayNames(intl.locale);
|
|
159
138
|
const today = getToday();
|
|
160
139
|
return jsxs("div", {
|
|
@@ -182,48 +161,41 @@ const DateInput = props => {
|
|
|
182
161
|
preventDownshiftDefault(event);
|
|
183
162
|
return;
|
|
184
163
|
}
|
|
185
|
-
|
|
186
164
|
if (event.key === 'Enter' && (inputValue === null || inputValue === void 0 ? void 0 : _trimInstanceProperty(inputValue).call(inputValue)) === '') {
|
|
187
165
|
clearSelection();
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
|
|
166
|
+
}
|
|
167
|
+
// ArrowDown
|
|
191
168
|
if (event.key === 'ArrowDown') {
|
|
192
169
|
const nextDayToHighlight = getNextDay(calendarItems[Number(highlightedIndex)]);
|
|
193
|
-
|
|
194
170
|
if (!getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
|
|
195
171
|
// if the date to highlight is disabled
|
|
196
172
|
// then do nothing
|
|
197
173
|
preventDownshiftDefault(event);
|
|
198
174
|
return;
|
|
199
175
|
}
|
|
200
|
-
|
|
201
176
|
if (Number(highlightedIndex) + 1 >= calendarItems.length) {
|
|
202
177
|
// if it's the end of the month
|
|
203
178
|
// then bypass normal arrow navigation
|
|
204
|
-
preventDownshiftDefault(event);
|
|
205
|
-
|
|
179
|
+
preventDownshiftDefault(event);
|
|
180
|
+
// then jump to start of next month
|
|
206
181
|
jumpMonth(1, 0);
|
|
207
182
|
}
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
|
|
183
|
+
}
|
|
184
|
+
// ArrowUp
|
|
211
185
|
if (event.key === 'ArrowUp') {
|
|
212
186
|
const previousDay = getPreviousDay(calendarItems[Number(highlightedIndex)]);
|
|
213
|
-
|
|
214
187
|
if (!getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
|
|
215
188
|
// if the date to highlight is disabled
|
|
216
189
|
// then do nothing
|
|
217
190
|
preventDownshiftDefault(event);
|
|
218
191
|
return;
|
|
219
192
|
}
|
|
220
|
-
|
|
221
193
|
if (Number(highlightedIndex) <= 0) {
|
|
222
194
|
// if it's the start of the month
|
|
223
195
|
// then bypass normal arrow navigation
|
|
224
196
|
preventDownshiftDefault(event);
|
|
225
|
-
const numberOfDaysOfPrevMonth = getDaysInMonth(previousDay);
|
|
226
|
-
|
|
197
|
+
const numberOfDaysOfPrevMonth = getDaysInMonth(previousDay);
|
|
198
|
+
// then jump to the last day of the previous month
|
|
227
199
|
jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
|
|
228
200
|
}
|
|
229
201
|
}
|
|
@@ -278,7 +250,6 @@ const DateInput = props => {
|
|
|
278
250
|
}, intl.locale)
|
|
279
251
|
});
|
|
280
252
|
};
|
|
281
|
-
|
|
282
253
|
DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
283
254
|
horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
284
255
|
value: _pt.string.isRequired,
|
|
@@ -298,12 +269,10 @@ DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
298
269
|
maxValue: _pt.string
|
|
299
270
|
} : {};
|
|
300
271
|
DateInput.displayName = 'DateInput';
|
|
301
|
-
|
|
302
272
|
DateInput.isEmpty = value => value === '';
|
|
303
|
-
|
|
304
273
|
var DateInput$1 = DateInput;
|
|
305
274
|
|
|
306
275
|
// NOTE: This string will be replaced on build time with the package version.
|
|
307
|
-
var version = "16.
|
|
276
|
+
var version = "16.1.0";
|
|
308
277
|
|
|
309
278
|
export { DateInput$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/date-input",
|
|
3
3
|
"description": "The `DateInput` component allows the user to select a date. It formats the selected date depending on the users' locale.",
|
|
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",
|