@commercetools-uikit/date-input 12.2.1 → 12.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -10,20 +10,19 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
10
10
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
11
11
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
12
12
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
13
|
-
var _extends = require('@babel/runtime-corejs3/helpers/extends');
|
|
14
13
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
15
14
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
16
15
|
var _fillInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/fill');
|
|
17
16
|
var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
|
|
18
17
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
19
|
-
var
|
|
18
|
+
var react = require('react');
|
|
20
19
|
var PropTypes = require('prop-types');
|
|
21
20
|
var Downshift = require('downshift');
|
|
22
21
|
var reactIntl = require('react-intl');
|
|
23
22
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
24
23
|
var utils = require('@commercetools-uikit/utils');
|
|
25
24
|
var calendarUtils = require('@commercetools-uikit/calendar-utils');
|
|
26
|
-
var
|
|
25
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
27
26
|
|
|
28
27
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
29
28
|
|
|
@@ -38,7 +37,6 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
|
|
|
38
37
|
var _fillInstanceProperty__default = /*#__PURE__*/_interopDefault(_fillInstanceProperty);
|
|
39
38
|
var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
|
|
40
39
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
41
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
42
40
|
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
43
41
|
var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
|
|
44
42
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
@@ -51,9 +49,9 @@ var messages = reactIntl.defineMessages({
|
|
|
51
49
|
}
|
|
52
50
|
});
|
|
53
51
|
|
|
54
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
52
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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
53
|
|
|
56
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default[
|
|
54
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context3; _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; }
|
|
57
55
|
|
|
58
56
|
var preventDownshiftDefault = function preventDownshiftDefault(event) {
|
|
59
57
|
// eslint-disable-next-line no-param-reassign
|
|
@@ -63,24 +61,24 @@ var preventDownshiftDefault = function preventDownshiftDefault(event) {
|
|
|
63
61
|
var DateInput = function DateInput(props) {
|
|
64
62
|
var intl = reactIntl.useIntl();
|
|
65
63
|
|
|
66
|
-
var
|
|
67
|
-
|
|
68
|
-
calendarDate =
|
|
69
|
-
setCalendarDate =
|
|
64
|
+
var _useState = react.useState(props.value || calendarUtils.getToday()),
|
|
65
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
66
|
+
calendarDate = _useState2[0],
|
|
67
|
+
setCalendarDate = _useState2[1];
|
|
70
68
|
|
|
71
|
-
var
|
|
72
|
-
|
|
73
|
-
suggestedItems =
|
|
74
|
-
setSuggestedItems =
|
|
69
|
+
var _useState3 = react.useState([]),
|
|
70
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
71
|
+
suggestedItems = _useState4[0],
|
|
72
|
+
setSuggestedItems = _useState4[1];
|
|
75
73
|
|
|
76
|
-
var
|
|
77
|
-
|
|
78
|
-
highlightedIndex =
|
|
79
|
-
setHighlightedIndex =
|
|
74
|
+
var _useState5 = react.useState(props.value === '' ? null : calendarUtils.getDateInMonth(props.value) - 1),
|
|
75
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
76
|
+
highlightedIndex = _useState6[0],
|
|
77
|
+
setHighlightedIndex = _useState6[1];
|
|
80
78
|
|
|
81
|
-
var inputRef =
|
|
79
|
+
var inputRef = react.useRef();
|
|
82
80
|
var onChange = props.onChange;
|
|
83
|
-
var emit =
|
|
81
|
+
var emit = react.useCallback(function (value) {
|
|
84
82
|
return onChange({
|
|
85
83
|
target: {
|
|
86
84
|
id: props.id,
|
|
@@ -91,12 +89,12 @@ var DateInput = function DateInput(props) {
|
|
|
91
89
|
}
|
|
92
90
|
});
|
|
93
91
|
}, [onChange, props.id, props.name]);
|
|
94
|
-
var handleChange =
|
|
92
|
+
var handleChange = react.useCallback(function (date) {
|
|
95
93
|
inputRef.current.setSelectionRange(0, 100);
|
|
96
94
|
emit(date);
|
|
97
95
|
}, [inputRef, emit]);
|
|
98
96
|
var onBlur = props.onBlur;
|
|
99
|
-
var handleBlur =
|
|
97
|
+
var handleBlur = react.useCallback(function () {
|
|
100
98
|
if (onBlur) onBlur({
|
|
101
99
|
target: {
|
|
102
100
|
id: props.id,
|
|
@@ -119,192 +117,196 @@ var DateInput = function DateInput(props) {
|
|
|
119
117
|
setHighlightedIndex(dayToHighlight);
|
|
120
118
|
};
|
|
121
119
|
|
|
122
|
-
return
|
|
123
|
-
max: props.horizontalConstraint
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
120
|
+
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
121
|
+
max: props.horizontalConstraint,
|
|
122
|
+
children: jsxRuntime.jsx(Downshift__default["default"], {
|
|
123
|
+
inputId: props.id,
|
|
124
|
+
itemToString: calendarUtils.createItemToString(intl.locale),
|
|
125
|
+
selectedItem: props.value === '' ? null : props.value,
|
|
126
|
+
highlightedIndex: highlightedIndex,
|
|
127
|
+
onChange: handleChange,
|
|
128
|
+
onStateChange: function onStateChange(changes) {
|
|
129
|
+
/* eslint-disable no-prototype-builtins */
|
|
130
|
+
if (changes.hasOwnProperty('inputValue')) {
|
|
131
|
+
// input changed because user typed
|
|
132
|
+
if (changes.type === Downshift__default["default"].stateChangeTypes.changeInput) {
|
|
133
|
+
var date = calendarUtils.parseInputToDate(changes.inputValue, intl.locale);
|
|
134
|
+
|
|
135
|
+
if (date === '') {
|
|
136
|
+
setSuggestedItems([]);
|
|
137
|
+
setHighlightedIndex(null);
|
|
138
|
+
} else {
|
|
139
|
+
setSuggestedItems([date]);
|
|
140
|
+
|
|
141
|
+
if (calendarUtils.getIsDateInRange(date, props.minValue, props.maxValue)) {
|
|
142
|
+
setHighlightedIndex(calendarUtils.getDateInMonth(date) - 1);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
setCalendarDate(date);
|
|
146
|
+
}
|
|
147
|
+
} else {
|
|
148
|
+
// input changed because user selected a date
|
|
139
149
|
setSuggestedItems([]);
|
|
140
150
|
setHighlightedIndex(null);
|
|
141
|
-
} else {
|
|
142
|
-
setSuggestedItems([date]);
|
|
143
|
-
|
|
144
|
-
if (calendarUtils.getIsDateInRange(date, props.minValue, props.maxValue)) {
|
|
145
|
-
setHighlightedIndex(calendarUtils.getDateInMonth(date) - 1);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
setCalendarDate(date);
|
|
149
151
|
}
|
|
150
|
-
} else {
|
|
151
|
-
// input changed because user selected a date
|
|
152
|
-
setSuggestedItems([]);
|
|
153
|
-
setHighlightedIndex(null);
|
|
154
152
|
}
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
if (changes.hasOwnProperty('highlightedIndex')) {
|
|
158
|
-
setHighlightedIndex(changes.highlightedIndex);
|
|
159
|
-
}
|
|
160
|
-
/* eslint-enable no-prototype-builtins */
|
|
161
|
-
|
|
162
|
-
}
|
|
163
|
-
}, function (_ref) {
|
|
164
|
-
var _context;
|
|
165
|
-
|
|
166
|
-
var getInputProps = _ref.getInputProps,
|
|
167
|
-
getMenuProps = _ref.getMenuProps,
|
|
168
|
-
getItemProps = _ref.getItemProps,
|
|
169
|
-
getToggleButtonProps = _ref.getToggleButtonProps,
|
|
170
|
-
clearSelection = _ref.clearSelection,
|
|
171
|
-
downshiftHighlightedIndex = _ref.highlightedIndex,
|
|
172
|
-
openMenu = _ref.openMenu,
|
|
173
|
-
setDownshiftHighlightedIndex = _ref.setHighlightedIndex,
|
|
174
|
-
selectedItem = _ref.selectedItem,
|
|
175
|
-
isOpen = _ref.isOpen,
|
|
176
|
-
inputValue = _ref.inputValue;
|
|
177
|
-
var calendarItems = calendarUtils.createCalendarItems(calendarDate, intl);
|
|
178
|
-
var paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
|
|
179
|
-
|
|
180
|
-
var paddingDays = _fillInstanceProperty__default['default'](_context = Array(paddingDayCount)).call(_context);
|
|
181
|
-
|
|
182
|
-
var weekdays = calendarUtils.getWeekdayNames(intl.locale);
|
|
183
|
-
var today = calendarUtils.getToday();
|
|
184
|
-
return react.jsx("div", {
|
|
185
|
-
onFocus: props.onFocus,
|
|
186
|
-
onBlur: handleBlur
|
|
187
|
-
}, react.jsx(calendarUtils.CalendarBody, {
|
|
188
|
-
inputRef: inputRef,
|
|
189
|
-
inputProps: getInputProps(_objectSpread({
|
|
190
|
-
// Unset the aria-labelledby as it interfers with the link
|
|
191
|
-
// between the <label for> and the <input id>.
|
|
192
|
-
'aria-labelledby': undefined,
|
|
193
|
-
name: props.name,
|
|
194
|
-
placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder),
|
|
195
|
-
onMouseEnter: function onMouseEnter() {
|
|
196
|
-
// we remove the highlight so that the user can use the
|
|
197
|
-
// arrow keys to move the cursor when hovering
|
|
198
|
-
if (isOpen) setDownshiftHighlightedIndex(null);
|
|
199
|
-
},
|
|
200
|
-
onKeyDown: function onKeyDown(event) {
|
|
201
|
-
if (props.isReadOnly) {
|
|
202
|
-
preventDownshiftDefault(event);
|
|
203
|
-
return;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
if (event.key === 'Enter' && _trimInstanceProperty__default['default'](inputValue).call(inputValue) === '') {
|
|
207
|
-
clearSelection();
|
|
208
|
-
} // ArrowDown
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
if (event.keyCode === 40) {
|
|
212
|
-
var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[highlightedIndex]);
|
|
213
153
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
return;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
if (highlightedIndex + 1 >= calendarItems.length) {
|
|
222
|
-
// if it's the end of the month
|
|
223
|
-
// then bypass normal arrow navigation
|
|
224
|
-
preventDownshiftDefault(event); // then jump to start of next month
|
|
225
|
-
|
|
226
|
-
jumpMonth(1, 0);
|
|
227
|
-
}
|
|
228
|
-
} // ArrowUp
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
if (event.keyCode === 38) {
|
|
232
|
-
var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
|
|
233
|
-
|
|
234
|
-
if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
|
|
235
|
-
// if the date to highlight is disabled
|
|
236
|
-
// then do nothing
|
|
237
|
-
preventDownshiftDefault(event);
|
|
238
|
-
return;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
if (highlightedIndex <= 0) {
|
|
242
|
-
// if it's the start of the month
|
|
243
|
-
// then bypass normal arrow navigation
|
|
244
|
-
preventDownshiftDefault(event);
|
|
245
|
-
var numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
|
|
154
|
+
if (changes.hasOwnProperty('highlightedIndex')) {
|
|
155
|
+
setHighlightedIndex(changes.highlightedIndex);
|
|
156
|
+
}
|
|
157
|
+
/* eslint-enable no-prototype-builtins */
|
|
246
158
|
|
|
247
|
-
jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
},
|
|
251
|
-
// we only do this for readOnly because the input
|
|
252
|
-
// doesn't ignore these events, unlike when its disabled
|
|
253
|
-
onClick: props.isReadOnly ? undefined : openMenu
|
|
254
|
-
}, utils.filterDataAttributes(props))),
|
|
255
|
-
hasSelection: Boolean(selectedItem),
|
|
256
|
-
onClear: clearSelection,
|
|
257
|
-
isOpen: isOpen,
|
|
258
|
-
isDisabled: props.isDisabled,
|
|
259
|
-
isReadOnly: props.isReadOnly,
|
|
260
|
-
toggleButtonProps: getToggleButtonProps(),
|
|
261
|
-
hasError: props.hasError,
|
|
262
|
-
hasWarning: props.hasWarning
|
|
263
|
-
}), isOpen && !props.isDisabled && !props.isReadOnly && react.jsx(calendarUtils.CalendarMenu, _extends({}, getMenuProps(), {
|
|
264
|
-
hasError: props.hasError,
|
|
265
|
-
hasWarning: props.hasWarning
|
|
266
|
-
}), react.jsx(calendarUtils.CalendarHeader, {
|
|
267
|
-
monthLabel: calendarUtils.getMonthCalendarLabel(calendarDate, intl.locale),
|
|
268
|
-
yearLabel: calendarUtils.getYearCalendarLabel(calendarDate, intl.locale),
|
|
269
|
-
onPrevMonthClick: function onPrevMonthClick() {
|
|
270
|
-
return jumpMonth(-1);
|
|
271
159
|
},
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
160
|
+
children: function children(_ref) {
|
|
161
|
+
var _context;
|
|
162
|
+
|
|
163
|
+
var getInputProps = _ref.getInputProps,
|
|
164
|
+
getMenuProps = _ref.getMenuProps,
|
|
165
|
+
getItemProps = _ref.getItemProps,
|
|
166
|
+
getToggleButtonProps = _ref.getToggleButtonProps,
|
|
167
|
+
clearSelection = _ref.clearSelection,
|
|
168
|
+
downshiftHighlightedIndex = _ref.highlightedIndex,
|
|
169
|
+
openMenu = _ref.openMenu,
|
|
170
|
+
setDownshiftHighlightedIndex = _ref.setHighlightedIndex,
|
|
171
|
+
selectedItem = _ref.selectedItem,
|
|
172
|
+
isOpen = _ref.isOpen,
|
|
173
|
+
inputValue = _ref.inputValue;
|
|
174
|
+
var calendarItems = calendarUtils.createCalendarItems(calendarDate, intl);
|
|
175
|
+
var paddingDayCount = calendarUtils.getPaddingDayCount(calendarDate, intl.locale);
|
|
176
|
+
|
|
177
|
+
var paddingDays = _fillInstanceProperty__default["default"](_context = Array(paddingDayCount)).call(_context);
|
|
178
|
+
|
|
179
|
+
var weekdays = calendarUtils.getWeekdayNames(intl.locale);
|
|
180
|
+
var today = calendarUtils.getToday();
|
|
181
|
+
return jsxRuntime.jsxs("div", {
|
|
182
|
+
onFocus: props.onFocus,
|
|
183
|
+
onBlur: handleBlur,
|
|
184
|
+
children: [jsxRuntime.jsx(calendarUtils.CalendarBody, {
|
|
185
|
+
inputRef: inputRef,
|
|
186
|
+
inputProps: getInputProps(_objectSpread({
|
|
187
|
+
// Unset the aria-labelledby as it interfers with the link
|
|
188
|
+
// between the <label for> and the <input id>.
|
|
189
|
+
'aria-labelledby': undefined,
|
|
190
|
+
name: props.name,
|
|
191
|
+
placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder),
|
|
192
|
+
onMouseEnter: function onMouseEnter() {
|
|
193
|
+
// we remove the highlight so that the user can use the
|
|
194
|
+
// arrow keys to move the cursor when hovering
|
|
195
|
+
if (isOpen) setDownshiftHighlightedIndex(null);
|
|
196
|
+
},
|
|
197
|
+
onKeyDown: function onKeyDown(event) {
|
|
198
|
+
if (props.isReadOnly) {
|
|
199
|
+
preventDownshiftDefault(event);
|
|
200
|
+
return;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
if (event.key === 'Enter' && _trimInstanceProperty__default["default"](inputValue).call(inputValue) === '') {
|
|
204
|
+
clearSelection();
|
|
205
|
+
} // ArrowDown
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
if (event.keyCode === 40) {
|
|
209
|
+
var nextDayToHighlight = calendarUtils.getNextDay(calendarItems[highlightedIndex]);
|
|
210
|
+
|
|
211
|
+
if (!calendarUtils.getIsDateInRange(nextDayToHighlight, props.minValue, props.maxValue)) {
|
|
212
|
+
// if the date to highlight is disabled
|
|
213
|
+
// then do nothing
|
|
214
|
+
preventDownshiftDefault(event);
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
if (highlightedIndex + 1 >= calendarItems.length) {
|
|
219
|
+
// if it's the end of the month
|
|
220
|
+
// then bypass normal arrow navigation
|
|
221
|
+
preventDownshiftDefault(event); // then jump to start of next month
|
|
222
|
+
|
|
223
|
+
jumpMonth(1, 0);
|
|
224
|
+
}
|
|
225
|
+
} // ArrowUp
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
if (event.keyCode === 38) {
|
|
229
|
+
var previousDay = calendarUtils.getPreviousDay(calendarItems[highlightedIndex]);
|
|
230
|
+
|
|
231
|
+
if (!calendarUtils.getIsDateInRange(previousDay, props.minValue, props.maxValue)) {
|
|
232
|
+
// if the date to highlight is disabled
|
|
233
|
+
// then do nothing
|
|
234
|
+
preventDownshiftDefault(event);
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
if (highlightedIndex <= 0) {
|
|
239
|
+
// if it's the start of the month
|
|
240
|
+
// then bypass normal arrow navigation
|
|
241
|
+
preventDownshiftDefault(event);
|
|
242
|
+
var numberOfDaysOfPrevMonth = calendarUtils.getDaysInMonth(previousDay); // then jump to the last day of the previous month
|
|
243
|
+
|
|
244
|
+
jumpMonth(-1, numberOfDaysOfPrevMonth - 1);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
},
|
|
248
|
+
// we only do this for readOnly because the input
|
|
249
|
+
// doesn't ignore these events, unlike when its disabled
|
|
250
|
+
onClick: props.isReadOnly ? undefined : openMenu
|
|
251
|
+
}, utils.filterDataAttributes(props))),
|
|
252
|
+
hasSelection: Boolean(selectedItem),
|
|
253
|
+
onClear: clearSelection,
|
|
254
|
+
isOpen: isOpen,
|
|
255
|
+
isDisabled: props.isDisabled,
|
|
256
|
+
isReadOnly: props.isReadOnly,
|
|
257
|
+
toggleButtonProps: getToggleButtonProps(),
|
|
258
|
+
hasError: props.hasError,
|
|
259
|
+
hasWarning: props.hasWarning
|
|
260
|
+
}), isOpen && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsxs(calendarUtils.CalendarMenu, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
|
|
261
|
+
hasError: props.hasError,
|
|
262
|
+
hasWarning: props.hasWarning,
|
|
263
|
+
children: [jsxRuntime.jsx(calendarUtils.CalendarHeader, {
|
|
264
|
+
monthLabel: calendarUtils.getMonthCalendarLabel(calendarDate, intl.locale),
|
|
265
|
+
yearLabel: calendarUtils.getYearCalendarLabel(calendarDate, intl.locale),
|
|
266
|
+
onPrevMonthClick: function onPrevMonthClick() {
|
|
267
|
+
return jumpMonth(-1);
|
|
268
|
+
},
|
|
269
|
+
onTodayClick: showToday,
|
|
270
|
+
onNextMonthClick: function onNextMonthClick() {
|
|
271
|
+
return jumpMonth(1);
|
|
272
|
+
},
|
|
273
|
+
onPrevYearClick: function onPrevYearClick() {
|
|
274
|
+
return jumpMonth(-12);
|
|
275
|
+
},
|
|
276
|
+
onNextYearClick: function onNextYearClick() {
|
|
277
|
+
return jumpMonth(12);
|
|
278
|
+
}
|
|
279
|
+
}), jsxRuntime.jsxs(calendarUtils.CalendarContent, {
|
|
280
|
+
children: [_mapInstanceProperty__default["default"](weekdays).call(weekdays, function (weekday) {
|
|
281
|
+
return jsxRuntime.jsx(calendarUtils.CalendarDay, {
|
|
282
|
+
type: "heading",
|
|
283
|
+
children: weekday
|
|
284
|
+
}, weekday);
|
|
285
|
+
}), _mapInstanceProperty__default["default"](paddingDays).call(paddingDays, function (day, index) {
|
|
286
|
+
return jsxRuntime.jsx(calendarUtils.CalendarDay, {
|
|
287
|
+
type: "spacing"
|
|
288
|
+
}, index);
|
|
289
|
+
}), _mapInstanceProperty__default["default"](calendarItems).call(calendarItems, function (item, index) {
|
|
290
|
+
return jsxRuntime.jsx(calendarUtils.CalendarDay, _objectSpread(_objectSpread({
|
|
291
|
+
isToday: calendarUtils.isSameDay(today, item)
|
|
292
|
+
}, getItemProps({
|
|
293
|
+
disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
|
|
294
|
+
item: item,
|
|
295
|
+
onMouseOut: function onMouseOut() {
|
|
296
|
+
setDownshiftHighlightedIndex(null);
|
|
297
|
+
}
|
|
298
|
+
})), {}, {
|
|
299
|
+
isHighlighted: index === downshiftHighlightedIndex,
|
|
300
|
+
isSelected: calendarUtils.isSameDay(item, props.value),
|
|
301
|
+
children: calendarUtils.getCalendarDayLabel(item)
|
|
302
|
+
}), item);
|
|
303
|
+
})]
|
|
304
|
+
})]
|
|
305
|
+
}))]
|
|
306
|
+
});
|
|
281
307
|
}
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
key: weekday,
|
|
285
|
-
type: "heading"
|
|
286
|
-
}, weekday);
|
|
287
|
-
}), _mapInstanceProperty__default['default'](paddingDays).call(paddingDays, function (day, index) {
|
|
288
|
-
return react.jsx(calendarUtils.CalendarDay, {
|
|
289
|
-
key: index,
|
|
290
|
-
type: "spacing"
|
|
291
|
-
});
|
|
292
|
-
}), _mapInstanceProperty__default['default'](calendarItems).call(calendarItems, function (item, index) {
|
|
293
|
-
return react.jsx(calendarUtils.CalendarDay, _extends({
|
|
294
|
-
key: item,
|
|
295
|
-
isToday: calendarUtils.isSameDay(today, item)
|
|
296
|
-
}, getItemProps({
|
|
297
|
-
disabled: !calendarUtils.getIsDateInRange(item, props.minValue, props.maxValue),
|
|
298
|
-
item: item,
|
|
299
|
-
onMouseOut: function onMouseOut() {
|
|
300
|
-
setDownshiftHighlightedIndex(null);
|
|
301
|
-
}
|
|
302
|
-
}), {
|
|
303
|
-
isHighlighted: index === downshiftHighlightedIndex,
|
|
304
|
-
isSelected: calendarUtils.isSameDay(item, props.value)
|
|
305
|
-
}), calendarUtils.getCalendarDayLabel(item));
|
|
306
|
-
}))));
|
|
307
|
-
}));
|
|
308
|
+
}, intl.locale)
|
|
309
|
+
});
|
|
308
310
|
};
|
|
309
311
|
|
|
310
312
|
DateInput.displayName = 'DateInput';
|
|
@@ -317,78 +319,79 @@ DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
317
319
|
/**
|
|
318
320
|
* Horizontal size limit of the input field.
|
|
319
321
|
*/
|
|
320
|
-
horizontalConstraint: PropTypes__default[
|
|
322
|
+
horizontalConstraint: PropTypes__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
321
323
|
|
|
322
324
|
/**
|
|
323
325
|
* The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD".
|
|
324
326
|
*/
|
|
325
|
-
value: PropTypes__default[
|
|
327
|
+
value: PropTypes__default["default"].string.isRequired,
|
|
326
328
|
|
|
327
329
|
/**
|
|
328
330
|
* Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD".
|
|
329
331
|
* <br />
|
|
330
332
|
* Signature: `(event) => void`
|
|
331
333
|
*/
|
|
332
|
-
onChange: PropTypes__default[
|
|
334
|
+
onChange: PropTypes__default["default"].func.isRequired,
|
|
333
335
|
|
|
334
336
|
/**
|
|
335
337
|
* Called when the date input gains focus.
|
|
336
338
|
*/
|
|
337
|
-
onFocus: PropTypes__default[
|
|
339
|
+
onFocus: PropTypes__default["default"].func,
|
|
338
340
|
|
|
339
341
|
/**
|
|
340
342
|
* Called when the date input loses focus.
|
|
341
343
|
*/
|
|
342
|
-
onBlur: PropTypes__default[
|
|
344
|
+
onBlur: PropTypes__default["default"].func,
|
|
343
345
|
|
|
344
346
|
/**
|
|
345
347
|
* Used as the HTML `id` attribute.
|
|
346
348
|
*/
|
|
347
|
-
id: PropTypes__default[
|
|
349
|
+
id: PropTypes__default["default"].string,
|
|
348
350
|
|
|
349
351
|
/**
|
|
350
352
|
* Used as the HTML `name` attribute.
|
|
351
353
|
*/
|
|
352
|
-
name: PropTypes__default[
|
|
354
|
+
name: PropTypes__default["default"].string,
|
|
353
355
|
|
|
354
356
|
/**
|
|
355
357
|
* Placeholder value to show in the input field
|
|
356
358
|
*/
|
|
357
|
-
placeholder: PropTypes__default[
|
|
359
|
+
placeholder: PropTypes__default["default"].string,
|
|
358
360
|
|
|
359
361
|
/**
|
|
360
362
|
* Disables the date picker
|
|
361
363
|
*/
|
|
362
|
-
isDisabled: PropTypes__default[
|
|
364
|
+
isDisabled: PropTypes__default["default"].bool,
|
|
363
365
|
|
|
364
366
|
/**
|
|
365
367
|
* Disables the date picker menu and makes input field read-only
|
|
366
368
|
*/
|
|
367
|
-
isReadOnly: PropTypes__default[
|
|
369
|
+
isReadOnly: PropTypes__default["default"].bool,
|
|
368
370
|
|
|
369
371
|
/**
|
|
370
372
|
* Indicates the input field has an error
|
|
371
373
|
*/
|
|
372
|
-
hasError: PropTypes__default[
|
|
374
|
+
hasError: PropTypes__default["default"].bool,
|
|
373
375
|
|
|
374
376
|
/**
|
|
375
377
|
* Indicates the input field has a warning
|
|
376
378
|
*/
|
|
377
|
-
hasWarning: PropTypes__default[
|
|
379
|
+
hasWarning: PropTypes__default["default"].bool,
|
|
378
380
|
|
|
379
381
|
/**
|
|
380
382
|
* A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
|
|
381
383
|
*/
|
|
382
|
-
minValue: PropTypes__default[
|
|
384
|
+
minValue: PropTypes__default["default"].string,
|
|
383
385
|
|
|
384
386
|
/**
|
|
385
387
|
* A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
|
|
386
388
|
*/
|
|
387
|
-
maxValue: PropTypes__default[
|
|
389
|
+
maxValue: PropTypes__default["default"].string
|
|
388
390
|
} : {};
|
|
391
|
+
var DateInput$1 = DateInput;
|
|
389
392
|
|
|
390
|
-
// NOTE: This string will be replaced
|
|
391
|
-
var version =
|
|
393
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
394
|
+
var version = "12.2.5";
|
|
392
395
|
|
|
393
|
-
exports
|
|
396
|
+
exports["default"] = DateInput$1;
|
|
394
397
|
exports.version = version;
|