@entur/datepicker 3.0.8 → 3.0.10
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/CHANGELOG.md +681 -0
- package/dist/TimePicker/utils.d.ts +2 -2
- package/dist/datepicker.cjs.development.js +243 -163
- package/dist/datepicker.cjs.development.js.map +1 -1
- package/dist/datepicker.cjs.production.min.js.map +1 -1
- package/dist/datepicker.esm.js +243 -163
- package/dist/datepicker.esm.js.map +1 -1
- package/dist/styles.css +67 -67
- package/package.json +19 -17
package/dist/datepicker.esm.js
CHANGED
|
@@ -19,39 +19,46 @@ function _extends() {
|
|
|
19
19
|
_extends = Object.assign || function (target) {
|
|
20
20
|
for (var i = 1; i < arguments.length; i++) {
|
|
21
21
|
var source = arguments[i];
|
|
22
|
+
|
|
22
23
|
for (var key in source) {
|
|
23
24
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
24
25
|
target[key] = source[key];
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
}
|
|
29
|
+
|
|
28
30
|
return target;
|
|
29
31
|
};
|
|
32
|
+
|
|
30
33
|
return _extends.apply(this, arguments);
|
|
31
34
|
}
|
|
35
|
+
|
|
32
36
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
33
37
|
if (source == null) return {};
|
|
34
38
|
var target = {};
|
|
35
39
|
var sourceKeys = Object.keys(source);
|
|
36
40
|
var key, i;
|
|
41
|
+
|
|
37
42
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
38
43
|
key = sourceKeys[i];
|
|
39
44
|
if (excluded.indexOf(key) >= 0) continue;
|
|
40
45
|
target[key] = source[key];
|
|
41
46
|
}
|
|
47
|
+
|
|
42
48
|
return target;
|
|
43
49
|
}
|
|
44
50
|
|
|
45
51
|
var DatePickerHeader = function DatePickerHeader(_ref) {
|
|
46
52
|
var _date$getMonth;
|
|
53
|
+
|
|
47
54
|
var date = _ref.date,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
decreaseMonth = _ref.decreaseMonth,
|
|
56
|
+
increaseMonth = _ref.increaseMonth,
|
|
57
|
+
prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
|
|
58
|
+
nextMonthButtonDisabled = _ref.nextMonthButtonDisabled,
|
|
59
|
+
nextMonthAriaLabel = _ref.nextMonthAriaLabel,
|
|
60
|
+
previousMonthAriaLabel = _ref.previousMonthAriaLabel,
|
|
61
|
+
locale = _ref.locale;
|
|
55
62
|
var currentMonthIndex = (_date$getMonth = date == null ? void 0 : date.getMonth()) != null ? _date$getMonth : 0;
|
|
56
63
|
return React.createElement("div", {
|
|
57
64
|
className: "eds-datepicker__calender__header"
|
|
@@ -73,6 +80,7 @@ var DatePickerHeader = function DatePickerHeader(_ref) {
|
|
|
73
80
|
"aria-label": nextMonthAriaLabel + " (" + getMonthName(currentMonthIndex + 1, locale) + ")"
|
|
74
81
|
}, React.createElement(RightArrowIcon, null)));
|
|
75
82
|
};
|
|
83
|
+
|
|
76
84
|
function getMonthName(monthIndex, locale) {
|
|
77
85
|
var year = new Date().getFullYear();
|
|
78
86
|
var formatter = new Intl.DateTimeFormat(locale.code, {
|
|
@@ -84,68 +92,79 @@ function getMonthName(monthIndex, locale) {
|
|
|
84
92
|
var _excluded$4 = ["style", "label", "inputPlaceholder", "prepend", "feedback", "variant", "disabled", "calendarButtonTooltipOpen", "calendarButtonTooltipClose", "hideCalendarButton", "disableLabelAnimation", "inputRef", "calendarButtonId", "forwardRef", "toggleCalendarGUI", "onKeyDownInput", "onBlurInput", "selectedDate", "setFocusToCalendarGUI", "setShouldFocusOnCalendarButtonAfterSelect", "calendarGUIIsOpen", "placeholder", "onClick", "aria-labelledby"];
|
|
85
93
|
var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
86
94
|
var style = _ref.style,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
95
|
+
label = _ref.label,
|
|
96
|
+
inputPlaceholder = _ref.inputPlaceholder,
|
|
97
|
+
prepend = _ref.prepend,
|
|
98
|
+
feedback = _ref.feedback,
|
|
99
|
+
variant = _ref.variant,
|
|
100
|
+
disabled = _ref.disabled,
|
|
101
|
+
calendarButtonTooltipOpen = _ref.calendarButtonTooltipOpen,
|
|
102
|
+
calendarButtonTooltipClose = _ref.calendarButtonTooltipClose,
|
|
103
|
+
hideCalendarButton = _ref.hideCalendarButton,
|
|
104
|
+
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
105
|
+
inputRef = _ref.inputRef,
|
|
106
|
+
calendarButtonId = _ref.calendarButtonId,
|
|
107
|
+
forwardRef = _ref.forwardRef,
|
|
108
|
+
toggleCalendarGUI = _ref.toggleCalendarGUI,
|
|
109
|
+
onKeyDownInput = _ref.onKeyDownInput,
|
|
110
|
+
onBlurInput = _ref.onBlurInput,
|
|
111
|
+
selectedDate = _ref.selectedDate,
|
|
112
|
+
setFocusToCalendarGUI = _ref.setFocusToCalendarGUI,
|
|
113
|
+
setShouldFocusOnCalendarButtonAfterSelect = _ref.setShouldFocusOnCalendarButtonAfterSelect,
|
|
114
|
+
calendarGUIIsOpen = _ref.calendarGUIIsOpen,
|
|
115
|
+
onClick = _ref.onClick,
|
|
116
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
117
|
+
|
|
109
118
|
React.useEffect(function () {
|
|
110
119
|
var _inputRef$current, _inputRef$current2, _inputRef$current3;
|
|
120
|
+
|
|
111
121
|
(_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.addEventListener('keydown', handleOnKeyDown);
|
|
112
122
|
(_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.addEventListener('blur', handleOnBlur);
|
|
113
123
|
(_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.addEventListener('focus', handleOnFocus);
|
|
114
124
|
return function () {
|
|
115
125
|
var _inputRef$current4, _inputRef$current5, _inputRef$current6;
|
|
126
|
+
|
|
116
127
|
(_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.removeEventListener('keydown', handleOnKeyDown);
|
|
117
128
|
(_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.removeEventListener('blur', handleOnBlur);
|
|
118
129
|
(_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.removeEventListener('focus', handleOnFocus);
|
|
119
|
-
};
|
|
120
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
130
|
+
}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
121
131
|
}, [inputRef, selectedDate]);
|
|
132
|
+
|
|
122
133
|
function handleOnKeyDown(event) {
|
|
123
134
|
onKeyDownInput(event);
|
|
124
135
|
}
|
|
136
|
+
|
|
125
137
|
function handleOnBlur(event) {
|
|
126
138
|
onBlurInput(event);
|
|
127
139
|
}
|
|
140
|
+
|
|
128
141
|
var handleOnFocus = function handleOnFocus() {
|
|
129
142
|
return requestAnimationFrame(function () {
|
|
130
143
|
var _inputRef$current7;
|
|
144
|
+
|
|
131
145
|
return (_inputRef$current7 = inputRef.current) == null ? void 0 : _inputRef$current7.select();
|
|
132
146
|
});
|
|
133
147
|
};
|
|
148
|
+
|
|
134
149
|
var handleOnClickInputField = function handleOnClickInputField(event) {
|
|
135
150
|
setShouldFocusOnCalendarButtonAfterSelect(false);
|
|
136
151
|
onClick && onClick(event);
|
|
137
152
|
};
|
|
153
|
+
|
|
138
154
|
var handleOnClickCalendarButton = function handleOnClickCalendarButton() {
|
|
139
155
|
toggleCalendarGUI();
|
|
140
156
|
setFocusToCalendarGUI();
|
|
141
157
|
setShouldFocusOnCalendarButtonAfterSelect(true);
|
|
142
158
|
};
|
|
159
|
+
|
|
143
160
|
var calendarButtonAriaLabel = function calendarButtonAriaLabel() {
|
|
144
161
|
var _inputRef$current8;
|
|
162
|
+
|
|
145
163
|
var buttonStateText = calendarGUIIsOpen() ? calendarButtonTooltipClose : calendarButtonTooltipOpen;
|
|
146
164
|
var currentSelectionText = selectedDate ? ((_inputRef$current8 = inputRef.current) == null ? void 0 : _inputRef$current8.value) + " valgt" : 'Ingen dato valgt';
|
|
147
165
|
return buttonStateText + ", " + currentSelectionText;
|
|
148
166
|
};
|
|
167
|
+
|
|
149
168
|
return React.createElement(TextField, _extends({
|
|
150
169
|
style: style,
|
|
151
170
|
label: label,
|
|
@@ -176,85 +195,95 @@ var _excluded$3 = ["style", "className", "selectedDate", "label", "placeholder",
|
|
|
176
195
|
registerLocale('nb', nb);
|
|
177
196
|
var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
178
197
|
var style = _ref.style,
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
198
|
+
className = _ref.className,
|
|
199
|
+
selectedDate = _ref.selectedDate,
|
|
200
|
+
label = _ref.label,
|
|
201
|
+
_ref$placeholder = _ref.placeholder,
|
|
202
|
+
placeholder = _ref$placeholder === void 0 ? 'dd.mm.yyyy' : _ref$placeholder,
|
|
203
|
+
onChange = _ref.onChange,
|
|
204
|
+
_ref$onKeyDown = _ref.onKeyDown,
|
|
205
|
+
onKeyDown = _ref$onKeyDown === void 0 ? function () {
|
|
206
|
+
return null;
|
|
207
|
+
} : _ref$onKeyDown,
|
|
208
|
+
_ref$dateFormats = _ref.dateFormats,
|
|
209
|
+
dateFormats = _ref$dateFormats === void 0 ? ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy'] : _ref$dateFormats,
|
|
210
|
+
minDate = _ref.minDate,
|
|
211
|
+
maxDate = _ref.maxDate,
|
|
212
|
+
_ref$inline = _ref.inline,
|
|
213
|
+
inline = _ref$inline === void 0 ? false : _ref$inline,
|
|
214
|
+
disabled = _ref.disabled,
|
|
215
|
+
prepend = _ref.prepend,
|
|
216
|
+
_ref$feedback = _ref.feedback,
|
|
217
|
+
feedback = _ref$feedback === void 0 ? '' : _ref$feedback,
|
|
218
|
+
variant = _ref.variant,
|
|
219
|
+
_ref$validationFeedba = _ref.validationFeedback,
|
|
220
|
+
validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
|
|
221
|
+
_ref$validationVarian = _ref.validationVariant,
|
|
222
|
+
validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
|
|
223
|
+
_ref$disableLabelAnim = _ref.disableLabelAnimation,
|
|
224
|
+
disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
|
|
225
|
+
_ref$calendarButtonTo = _ref.calendarButtonTooltipOpen,
|
|
226
|
+
calendarButtonTooltipOpen = _ref$calendarButtonTo === void 0 ? 'Åpne\xa0kalender' : _ref$calendarButtonTo,
|
|
227
|
+
_ref$calendarButtonTo2 = _ref.calendarButtonTooltipClose,
|
|
228
|
+
calendarButtonTooltipClose = _ref$calendarButtonTo2 === void 0 ? 'Lukk\xa0kalender' : _ref$calendarButtonTo2,
|
|
229
|
+
_ref$hideCalendarButt = _ref.hideCalendarButton,
|
|
230
|
+
hideCalendarButton = _ref$hideCalendarButt === void 0 ? false : _ref$hideCalendarButt,
|
|
231
|
+
_ref$hideCalendar = _ref.hideCalendar,
|
|
232
|
+
hideCalendar = _ref$hideCalendar === void 0 ? false : _ref$hideCalendar,
|
|
233
|
+
_ref$hideValidation = _ref.hideValidation,
|
|
234
|
+
hideValidation = _ref$hideValidation === void 0 ? false : _ref$hideValidation,
|
|
235
|
+
_ref$weekLabel = _ref.weekLabel,
|
|
236
|
+
weekLabel = _ref$weekLabel === void 0 ? 'uke' : _ref$weekLabel,
|
|
237
|
+
_ref$chooseDayAriaLab = _ref.chooseDayAriaLabelPrefix,
|
|
238
|
+
chooseDayAriaLabelPrefix = _ref$chooseDayAriaLab === void 0 ? 'Velg' : _ref$chooseDayAriaLab,
|
|
239
|
+
_ref$previousMonthAri = _ref.previousMonthAriaLabel,
|
|
240
|
+
previousMonthAriaLabel = _ref$previousMonthAri === void 0 ? 'Forrige måned' : _ref$previousMonthAri,
|
|
241
|
+
_ref$nextMonthAriaLab = _ref.nextMonthAriaLabel,
|
|
242
|
+
nextMonthAriaLabel = _ref$nextMonthAriaLab === void 0 ? 'Neste måned' : _ref$nextMonthAriaLab,
|
|
243
|
+
_ref$locale = _ref.locale,
|
|
244
|
+
locale = _ref$locale === void 0 ? nb : _ref$locale,
|
|
245
|
+
open = _ref.open,
|
|
246
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
247
|
+
|
|
228
248
|
var datepickerId = useRandomId('eds-datepicker');
|
|
229
249
|
var datepickerRef = useRef(null);
|
|
230
250
|
var inputRef = React.useRef(null);
|
|
231
251
|
var calendarButton = document.getElementById(datepickerId + '-button');
|
|
252
|
+
|
|
232
253
|
var _useState = useState(false),
|
|
233
|
-
|
|
234
|
-
|
|
254
|
+
showValidation = _useState[0],
|
|
255
|
+
setShowValidation = _useState[1];
|
|
256
|
+
|
|
235
257
|
var _useState2 = useState(false),
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
258
|
+
shouldFocusOnCalendarButtonAfterSelect = _useState2[0],
|
|
259
|
+
setShouldFocusOnCalendarButtonAfterSelect = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
260
|
+
|
|
261
|
+
|
|
239
262
|
React.useEffect(function () {
|
|
240
263
|
return validateInput();
|
|
241
264
|
}, [selectedDate]);
|
|
265
|
+
|
|
242
266
|
var handleOnChange = function handleOnChange(date, event) {
|
|
243
267
|
var _inputRef$current;
|
|
268
|
+
|
|
244
269
|
if (shouldFocusOnCalendarButtonAfterSelect && !hideCalendarButton) {
|
|
245
270
|
calendarButton == null ? void 0 : calendarButton.focus();
|
|
246
271
|
setShouldFocusOnCalendarButtonAfterSelect(false);
|
|
247
272
|
} else (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
|
|
273
|
+
|
|
248
274
|
onChange(date, event);
|
|
249
275
|
};
|
|
276
|
+
|
|
250
277
|
var handleOnKeyDown = function handleOnKeyDown(event) {
|
|
251
278
|
setShowValidation(false);
|
|
279
|
+
|
|
252
280
|
if (event.key === 'Enter') {
|
|
253
281
|
if (!datePickerGUIIsOpen()) {
|
|
254
282
|
// onBlurInput will validate if calendar is open
|
|
255
283
|
validateInput();
|
|
256
284
|
forceUpdateInputFormat();
|
|
257
285
|
}
|
|
286
|
+
|
|
258
287
|
focusAndSelectInputField();
|
|
259
288
|
} else if (event.key === 'Tab' && datePickerGUIIsOpen()) {
|
|
260
289
|
forceUpdateInputFormat();
|
|
@@ -263,18 +292,23 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
263
292
|
focusAndSelectInputField();
|
|
264
293
|
if (datePickerGUIIsOpen()) toggleCalendarGUI();
|
|
265
294
|
}
|
|
295
|
+
|
|
266
296
|
onKeyDown(event);
|
|
267
297
|
};
|
|
298
|
+
|
|
268
299
|
var handleOnClickOutside = function handleOnClickOutside() {
|
|
269
300
|
return setShouldFocusOnCalendarButtonAfterSelect(false);
|
|
270
301
|
};
|
|
302
|
+
|
|
271
303
|
var handleOnBlurInput = function handleOnBlurInput() {
|
|
272
304
|
if (datePickerGUIIsOpen()) return;
|
|
273
305
|
validateInput();
|
|
274
306
|
forceUpdateInputFormat();
|
|
275
307
|
};
|
|
308
|
+
|
|
276
309
|
var validateInput = function validateInput() {
|
|
277
310
|
var _inputRef$current2;
|
|
311
|
+
|
|
278
312
|
setShowValidation(false);
|
|
279
313
|
var inputValue = (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value;
|
|
280
314
|
if (!inputValue) return;
|
|
@@ -286,6 +320,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
286
320
|
var parsedDateFromInputIsTheSameAsSelectedDate = selectedDate && inputValueParsedWithAllDateFormats.some(function (dateFormat) {
|
|
287
321
|
return isSameDay(dateFormat, selectedDate);
|
|
288
322
|
});
|
|
323
|
+
|
|
289
324
|
if (parsedDateFromInputIsTheSameAsSelectedDate) {
|
|
290
325
|
// valid date inputted
|
|
291
326
|
setShowValidation(false);
|
|
@@ -294,6 +329,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
294
329
|
setShowValidation(true);
|
|
295
330
|
}
|
|
296
331
|
};
|
|
332
|
+
|
|
297
333
|
var getFeedbackAndVariant = function getFeedbackAndVariant() {
|
|
298
334
|
if (feedback) return {
|
|
299
335
|
feedback: feedback,
|
|
@@ -308,32 +344,42 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
308
344
|
variant: undefined
|
|
309
345
|
};
|
|
310
346
|
};
|
|
347
|
+
|
|
311
348
|
var focusAndSelectInputField = function focusAndSelectInputField() {
|
|
312
349
|
return requestAnimationFrame(function () {
|
|
313
350
|
var _inputRef$current3;
|
|
351
|
+
|
|
314
352
|
return (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.select();
|
|
315
353
|
});
|
|
316
354
|
};
|
|
355
|
+
|
|
317
356
|
var forceUpdateInputFormat = function forceUpdateInputFormat() {
|
|
318
357
|
var _datepickerRef$curren;
|
|
358
|
+
|
|
319
359
|
return (_datepickerRef$curren = datepickerRef.current) == null ? void 0 : _datepickerRef$curren.setState({
|
|
320
360
|
inputValue: null
|
|
321
361
|
});
|
|
322
362
|
};
|
|
363
|
+
|
|
323
364
|
var toggleCalendarGUI = function toggleCalendarGUI() {
|
|
324
365
|
var _datepickerRef$curren2;
|
|
366
|
+
|
|
325
367
|
return (_datepickerRef$curren2 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren2.setOpen(!datePickerGUIIsOpen());
|
|
326
368
|
};
|
|
369
|
+
|
|
327
370
|
var setFocusToCalendarGUI = function setFocusToCalendarGUI() {
|
|
328
|
-
if (inline || hideCalendar || datePickerGUIIsOpen()) return;
|
|
329
|
-
|
|
371
|
+
if (inline || hideCalendar || datePickerGUIIsOpen()) return; // 1 frame delay to allow calendar to spawn
|
|
372
|
+
|
|
330
373
|
requestAnimationFrame(function () {
|
|
331
374
|
var _datepickerRef$curren3;
|
|
375
|
+
|
|
332
376
|
var datepickerGUIWrapper = // @ts-expect-error .calendar does actually exist in ReactDatePicker ref
|
|
333
377
|
(_datepickerRef$curren3 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren3.calendar.componentNode;
|
|
334
378
|
var dateToSetFocusTo = selectedDate ? datepickerGUIWrapper.querySelector('.eds-datepicker__calender__day[tabindex="0"]') : datepickerGUIWrapper.querySelector('.eds-datepicker__calender__day[aria-current="date"]');
|
|
379
|
+
|
|
335
380
|
if (dateToSetFocusTo !== null) {
|
|
336
381
|
var _datepickerRef$curren4;
|
|
382
|
+
|
|
337
383
|
(_datepickerRef$curren4 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren4.setBlur();
|
|
338
384
|
dateToSetFocusTo.focus({
|
|
339
385
|
preventScroll: true
|
|
@@ -343,10 +389,13 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
343
389
|
setShouldFocusOnCalendarButtonAfterSelect(true);
|
|
344
390
|
setShowValidation(false);
|
|
345
391
|
};
|
|
392
|
+
|
|
346
393
|
var datePickerGUIIsOpen = function datePickerGUIIsOpen() {
|
|
347
394
|
var _datepickerRef$curren5;
|
|
395
|
+
|
|
348
396
|
return (_datepickerRef$curren5 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren5.isCalendarOpen();
|
|
349
397
|
};
|
|
398
|
+
|
|
350
399
|
return React.createElement(React.Fragment, null, React.createElement(ReactDatepicker, _extends({
|
|
351
400
|
selected: selectedDate,
|
|
352
401
|
minDate: minDate,
|
|
@@ -381,12 +430,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
381
430
|
}],
|
|
382
431
|
renderCustomHeader: function renderCustomHeader(_ref2) {
|
|
383
432
|
var date = _ref2.date,
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
433
|
+
changeYear = _ref2.changeYear,
|
|
434
|
+
changeMonth = _ref2.changeMonth,
|
|
435
|
+
decreaseMonth = _ref2.decreaseMonth,
|
|
436
|
+
increaseMonth = _ref2.increaseMonth,
|
|
437
|
+
prevMonthButtonDisabled = _ref2.prevMonthButtonDisabled,
|
|
438
|
+
nextMonthButtonDisabled = _ref2.nextMonthButtonDisabled;
|
|
390
439
|
return React.createElement(DatePickerHeader, {
|
|
391
440
|
date: date,
|
|
392
441
|
changeYear: changeYear,
|
|
@@ -427,20 +476,21 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
427
476
|
});
|
|
428
477
|
|
|
429
478
|
var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
|
|
430
|
-
|
|
479
|
+
_excluded2$1 = ["onChange", "variant", "value"];
|
|
431
480
|
var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
432
481
|
var className = _ref.className,
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
482
|
+
style = _ref.style,
|
|
483
|
+
label = _ref.label,
|
|
484
|
+
onChange = _ref.onChange,
|
|
485
|
+
feedback = _ref.feedback,
|
|
486
|
+
variant = _ref.variant,
|
|
487
|
+
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
488
|
+
_ref$prepend = _ref.prepend,
|
|
489
|
+
prepend = _ref$prepend === void 0 ? React.createElement(DateIcon, {
|
|
490
|
+
inline: true
|
|
491
|
+
}) : _ref$prepend,
|
|
492
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
493
|
+
|
|
444
494
|
var nativedatepickerId = useRandomId('eds-nativetimepicker');
|
|
445
495
|
return React.createElement(BaseFormControl, {
|
|
446
496
|
style: style,
|
|
@@ -461,14 +511,17 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
461
511
|
});
|
|
462
512
|
var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
463
513
|
var onChange = _ref2.onChange,
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
514
|
+
variant = _ref2.variant,
|
|
515
|
+
value = _ref2.value,
|
|
516
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
|
|
517
|
+
|
|
467
518
|
var contextVariant = useVariant();
|
|
468
519
|
var currentVariant = variant || contextVariant;
|
|
520
|
+
|
|
469
521
|
var _useInputGroupContext = useInputGroupContext(),
|
|
470
|
-
|
|
471
|
-
|
|
522
|
+
isDatepickerFilled = _useInputGroupContext.isFilled,
|
|
523
|
+
setFiller = _useInputGroupContext.setFilled;
|
|
524
|
+
|
|
472
525
|
useOnMount(function () {
|
|
473
526
|
setFiller && !isDatepickerFilled && setFiller(true);
|
|
474
527
|
});
|
|
@@ -479,16 +532,19 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
479
532
|
setFiller && isDatepickerFilled && setFiller(false);
|
|
480
533
|
}
|
|
481
534
|
}, [value, setFiller, isDatepickerFilled]);
|
|
535
|
+
|
|
482
536
|
var handleChange = function handleChange(event) {
|
|
483
537
|
if (isFilled(event.target)) {
|
|
484
538
|
setFiller && !isDatepickerFilled && setFiller(true);
|
|
485
539
|
} else {
|
|
486
540
|
setFiller && isDatepickerFilled && setFiller(false);
|
|
487
541
|
}
|
|
542
|
+
|
|
488
543
|
if (onChange) {
|
|
489
544
|
onChange(event);
|
|
490
545
|
}
|
|
491
546
|
};
|
|
547
|
+
|
|
492
548
|
return React.createElement("input", _extends({
|
|
493
549
|
ref: ref,
|
|
494
550
|
"aria-invalid": currentVariant === 'error',
|
|
@@ -501,19 +557,23 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
501
557
|
|
|
502
558
|
var TimeSegment = function TimeSegment(_ref) {
|
|
503
559
|
var segment = _ref.segment,
|
|
504
|
-
|
|
560
|
+
state = _ref.state;
|
|
505
561
|
var ref = useRef(null);
|
|
562
|
+
|
|
506
563
|
var _useDateSegment = useDateSegment(segment, state, ref),
|
|
507
|
-
|
|
564
|
+
segmentProps = _useDateSegment.segmentProps;
|
|
565
|
+
|
|
508
566
|
var is12HourFormatted = state.segments.some(function (segment) {
|
|
509
567
|
return segment.text === 'AM' || segment.text === 'PM';
|
|
510
568
|
});
|
|
569
|
+
|
|
511
570
|
var segmentDisplayText = function segmentDisplayText() {
|
|
512
|
-
if (is12HourFormatted) return segment.text;
|
|
513
|
-
|
|
571
|
+
if (is12HourFormatted) return segment.text; // if number add '0' padding to start when one digit
|
|
572
|
+
|
|
514
573
|
if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
|
|
515
574
|
return segment.text;
|
|
516
575
|
};
|
|
576
|
+
|
|
517
577
|
return React.createElement("div", _extends({}, segmentProps, {
|
|
518
578
|
ref: ref,
|
|
519
579
|
className: classNames('eds-timepicker__segment', {
|
|
@@ -524,9 +584,9 @@ var TimeSegment = function TimeSegment(_ref) {
|
|
|
524
584
|
|
|
525
585
|
var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
|
|
526
586
|
var direction = _ref.direction,
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
587
|
+
onClick = _ref.onClick,
|
|
588
|
+
disabled = _ref.disabled,
|
|
589
|
+
ariaLabel = _ref['aria-label'];
|
|
530
590
|
return React.createElement(IconButton, {
|
|
531
591
|
className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
|
|
532
592
|
'eds-timepicker__arrowbutton--disabled': disabled
|
|
@@ -542,25 +602,27 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
|
|
|
542
602
|
var _excluded$1 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel"];
|
|
543
603
|
var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
544
604
|
var selectedTime = _ref.selectedTime,
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
605
|
+
onChange = _ref.onChange,
|
|
606
|
+
disabled = _ref.disabled,
|
|
607
|
+
className = _ref.className,
|
|
608
|
+
style = _ref.style,
|
|
609
|
+
label = _ref.label,
|
|
610
|
+
labelTooltip = _ref.labelTooltip,
|
|
611
|
+
feedback = _ref.feedback,
|
|
612
|
+
variant = _ref.variant,
|
|
613
|
+
customLocale = _ref.locale,
|
|
614
|
+
showTimeZone = _ref.showTimeZone,
|
|
615
|
+
_ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
|
|
616
|
+
minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
|
|
617
|
+
_ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
|
|
618
|
+
leftArrowButtonAriaLabel = _ref$leftArrowButtonA === void 0 ? "Trekk fra " + minuteIncrementForArrowButtons + " minutter" : _ref$leftArrowButtonA,
|
|
619
|
+
_ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
|
|
620
|
+
rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
|
|
621
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
622
|
+
|
|
562
623
|
var _useLocale = useLocale(),
|
|
563
|
-
|
|
624
|
+
locale = _useLocale.locale;
|
|
625
|
+
|
|
564
626
|
if (customLocale) locale = customLocale;
|
|
565
627
|
var state = useTimeFieldState(_extends({
|
|
566
628
|
onChange: onChange,
|
|
@@ -571,12 +633,15 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
571
633
|
isDisabled: disabled
|
|
572
634
|
}, rest));
|
|
573
635
|
var timeFieldRef = useRef(null);
|
|
636
|
+
|
|
574
637
|
var _useTimeField = useTimeField(_extends({}, rest, {
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
638
|
+
label: label
|
|
639
|
+
}), state, timeFieldRef),
|
|
640
|
+
labelProps = _useTimeField.labelProps,
|
|
641
|
+
fieldProps = _useTimeField.fieldProps;
|
|
642
|
+
|
|
579
643
|
var id = useRandomId('timepicker');
|
|
644
|
+
|
|
580
645
|
var handleOnClickArrowButton = function handleOnClickArrowButton(minutes) {
|
|
581
646
|
if (someSegmentIsUndefined) {
|
|
582
647
|
setTimeToNearestMinuteIncrement();
|
|
@@ -584,9 +649,11 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
584
649
|
addMinutesToSelectedTime(minutes);
|
|
585
650
|
}
|
|
586
651
|
};
|
|
652
|
+
|
|
587
653
|
var someSegmentIsUndefined = state.segments.some(function (segment) {
|
|
588
654
|
return segment.text === '––';
|
|
589
655
|
});
|
|
656
|
+
|
|
590
657
|
var setTimeToNearestMinuteIncrement = function setTimeToNearestMinuteIncrement() {
|
|
591
658
|
var currentTime = now(getLocalTimeZone());
|
|
592
659
|
var roundedMinute = Math.floor(currentTime.minute / minuteIncrementForArrowButtons) * minuteIncrementForArrowButtons;
|
|
@@ -595,12 +662,15 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
595
662
|
});
|
|
596
663
|
onChange(newTime);
|
|
597
664
|
};
|
|
665
|
+
|
|
598
666
|
var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
|
|
599
667
|
var _state$value;
|
|
668
|
+
|
|
600
669
|
state.value && state.setValue((_state$value = state.value) == null ? void 0 : _state$value.add({
|
|
601
670
|
minutes: minutes
|
|
602
671
|
}));
|
|
603
672
|
};
|
|
673
|
+
|
|
604
674
|
return React.createElement(I18nProvider, {
|
|
605
675
|
locale: locale
|
|
606
676
|
}, React.createElement("div", {
|
|
@@ -642,16 +712,17 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
642
712
|
});
|
|
643
713
|
|
|
644
714
|
var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
|
|
645
|
-
|
|
715
|
+
_excluded2 = ["onChange", "value"];
|
|
646
716
|
var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
647
717
|
var className = _ref.className,
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
718
|
+
style = _ref.style,
|
|
719
|
+
onChange = _ref.onChange,
|
|
720
|
+
label = _ref.label,
|
|
721
|
+
feedback = _ref.feedback,
|
|
722
|
+
variant = _ref.variant,
|
|
723
|
+
prepend = _ref.prepend,
|
|
724
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
725
|
+
|
|
655
726
|
var nativetimepickerId = useRandomId('eds-native-timepicker');
|
|
656
727
|
return React.createElement(BaseFormControl, {
|
|
657
728
|
style: style,
|
|
@@ -670,13 +741,16 @@ var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
670
741
|
});
|
|
671
742
|
var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
672
743
|
var onChange = _ref2.onChange,
|
|
673
|
-
|
|
674
|
-
|
|
744
|
+
value = _ref2.value,
|
|
745
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
746
|
+
|
|
675
747
|
var contextVariant = useVariant();
|
|
676
748
|
var currentVariant = rest.variant || contextVariant;
|
|
749
|
+
|
|
677
750
|
var _useInputGroupContext = useInputGroupContext(),
|
|
678
|
-
|
|
679
|
-
|
|
751
|
+
isTimepickerFilled = _useInputGroupContext.isFilled,
|
|
752
|
+
setFiller = _useInputGroupContext.setFilled;
|
|
753
|
+
|
|
680
754
|
useOnMount(function () {
|
|
681
755
|
setFiller && !isTimepickerFilled && setFiller(true);
|
|
682
756
|
});
|
|
@@ -687,16 +761,19 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
687
761
|
setFiller && isTimepickerFilled && setFiller(false);
|
|
688
762
|
}
|
|
689
763
|
}, [value, setFiller, isTimepickerFilled]);
|
|
764
|
+
|
|
690
765
|
var handleChange = function handleChange(event) {
|
|
691
766
|
if (isFilled(event.target)) {
|
|
692
767
|
setFiller && !isTimepickerFilled && setFiller(true);
|
|
693
768
|
} else {
|
|
694
769
|
setFiller && isTimepickerFilled && setFiller(false);
|
|
695
770
|
}
|
|
771
|
+
|
|
696
772
|
if (onChange) {
|
|
697
773
|
onChange(event);
|
|
698
774
|
}
|
|
699
775
|
};
|
|
776
|
+
|
|
700
777
|
return React.createElement("input", _extends({
|
|
701
778
|
ref: ref,
|
|
702
779
|
"aria-invalid": currentVariant === 'error',
|
|
@@ -715,16 +792,20 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
715
792
|
* @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
|
|
716
793
|
* @returns {Time | CalendarDateTime | ZonedDateTime} et av TimeValue-objektene med verdier fra date
|
|
717
794
|
*/
|
|
795
|
+
|
|
718
796
|
var nativeDateToTimeValue = function nativeDateToTimeValue(date, noDateOnlyTime, timeZone, offset) {
|
|
719
797
|
if (noDateOnlyTime === void 0) {
|
|
720
798
|
noDateOnlyTime = false;
|
|
721
799
|
}
|
|
800
|
+
|
|
722
801
|
if (timeZone) {
|
|
723
802
|
if (offset) {
|
|
724
803
|
return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds());
|
|
725
804
|
}
|
|
805
|
+
|
|
726
806
|
return parseAbsolute(date.toISOString(), timeZone);
|
|
727
807
|
}
|
|
808
|
+
|
|
728
809
|
if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), 0);
|
|
729
810
|
return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
|
|
730
811
|
};
|
|
@@ -735,6 +816,7 @@ var nativeDateToTimeValue = function nativeDateToTimeValue(date, noDateOnlyTime,
|
|
|
735
816
|
* @returns {Date} et Date-objekt med verdier fra time
|
|
736
817
|
*/
|
|
737
818
|
// This function uses a lot of @ts-expect-error to make it work with all TimeValue types. Sorry ...
|
|
819
|
+
|
|
738
820
|
var timeValueToNativeDate = function timeValueToNativeDate(time, timeZoneForCalendarDateTime) {
|
|
739
821
|
// @ts-expect-error .day does not exist on Time-object
|
|
740
822
|
if (!time.day) {
|
|
@@ -744,22 +826,20 @@ var timeValueToNativeDate = function timeValueToNativeDate(time, timeZoneForCale
|
|
|
744
826
|
date.setMinutes(time.minute);
|
|
745
827
|
date.setSeconds(time.second);
|
|
746
828
|
return date;
|
|
747
|
-
}
|
|
748
|
-
|
|
829
|
+
} // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
|
|
830
|
+
|
|
831
|
+
|
|
749
832
|
if (!time.timeZone) {
|
|
750
833
|
// type is CalendarDateTime
|
|
751
|
-
if (timeZoneForCalendarDateTime)
|
|
752
|
-
// @ts-expect-error .toDate(timeZone) does not exist in type Time
|
|
834
|
+
if (timeZoneForCalendarDateTime) // @ts-expect-error .toDate(timeZone) does not exist in type Time
|
|
753
835
|
return time.toDate(timeZoneForCalendarDateTime);
|
|
754
|
-
return new Date(
|
|
755
|
-
// @ts-expect-error not in type Time
|
|
756
|
-
time.
|
|
757
|
-
// @ts-expect-error not in type Time
|
|
758
|
-
time.month - 1,
|
|
759
|
-
// @ts-expect-error not in type Time
|
|
836
|
+
return new Date( // @ts-expect-error not in type Time
|
|
837
|
+
time.year, // @ts-expect-error not in type Time
|
|
838
|
+
time.month - 1, // @ts-expect-error not in type Time
|
|
760
839
|
time.day, time.hour, time.minute, time.second);
|
|
761
|
-
}
|
|
762
|
-
|
|
840
|
+
} // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
|
|
841
|
+
|
|
842
|
+
|
|
763
843
|
return time.toDate();
|
|
764
844
|
};
|
|
765
845
|
|