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