@entur/datepicker 4.0.0 → 4.0.2
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/LICENSE.md +0 -71
- package/dist/DatePicker/Calendar.d.ts +1 -1
- package/dist/DatePicker/CalendarCell.d.ts +1 -1
- package/dist/DatePicker/CalendarGrid.d.ts +1 -1
- package/dist/DatePicker/DateField.d.ts +1 -1
- package/dist/DatePicker/DatePicker.d.ts +1 -1
- package/dist/DatePicker/NativeDatePicker.d.ts +1 -1
- package/dist/TimePicker/NativeTimePicker.d.ts +1 -1
- package/dist/TimePicker/TimePicker.d.ts +1 -1
- package/dist/TimePicker/TimePickerArrowButton.d.ts +1 -1
- package/dist/datepicker.cjs.development.js +197 -268
- package/dist/datepicker.cjs.development.js.map +1 -1
- package/dist/datepicker.cjs.production.min.js +1 -1
- package/dist/datepicker.cjs.production.min.js.map +1 -1
- package/dist/datepicker.esm.js +197 -268
- package/dist/datepicker.esm.js.map +1 -1
- package/dist/shared/CalendarButton.d.ts +1 -1
- package/dist/shared/FieldSegment.d.ts +1 -1
- package/dist/shared/utils.d.ts +2 -2
- package/dist/styles.css +65 -66
- package/package.json +14 -14
- package/CHANGELOG.md +0 -761
package/dist/datepicker.esm.js
CHANGED
|
@@ -18,57 +18,47 @@ import { space, zIndexes } from '@entur/tokens';
|
|
|
18
18
|
import { Modal } from '@entur/modal';
|
|
19
19
|
|
|
20
20
|
function _extends() {
|
|
21
|
-
_extends = Object.assign
|
|
21
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
22
22
|
for (var i = 1; i < arguments.length; i++) {
|
|
23
23
|
var source = arguments[i];
|
|
24
|
-
|
|
25
24
|
for (var key in source) {
|
|
26
25
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
27
26
|
target[key] = source[key];
|
|
28
27
|
}
|
|
29
28
|
}
|
|
30
29
|
}
|
|
31
|
-
|
|
32
30
|
return target;
|
|
33
31
|
};
|
|
34
|
-
|
|
35
32
|
return _extends.apply(this, arguments);
|
|
36
33
|
}
|
|
37
|
-
|
|
38
34
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
39
35
|
if (source == null) return {};
|
|
40
36
|
var target = {};
|
|
41
37
|
var sourceKeys = Object.keys(source);
|
|
42
38
|
var key, i;
|
|
43
|
-
|
|
44
39
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
45
40
|
key = sourceKeys[i];
|
|
46
41
|
if (excluded.indexOf(key) >= 0) continue;
|
|
47
42
|
target[key] = source[key];
|
|
48
43
|
}
|
|
49
|
-
|
|
50
44
|
return target;
|
|
51
45
|
}
|
|
52
46
|
|
|
53
47
|
var FieldSegment = function FieldSegment(_ref) {
|
|
54
48
|
var segment = _ref.segment,
|
|
55
|
-
|
|
49
|
+
state = _ref.state;
|
|
56
50
|
var ref = useRef(null);
|
|
57
|
-
|
|
58
51
|
var _useDateSegment = useDateSegment(segment, state, ref),
|
|
59
|
-
|
|
60
|
-
|
|
52
|
+
segmentProps = _useDateSegment.segmentProps;
|
|
61
53
|
var is12HourFormatted = state.segments.some(function (segment) {
|
|
62
54
|
return segment.text === 'AM' || segment.text === 'PM';
|
|
63
55
|
});
|
|
64
|
-
|
|
65
56
|
var segmentDisplayText = function segmentDisplayText() {
|
|
66
|
-
if (is12HourFormatted) return segment.text;
|
|
67
|
-
|
|
57
|
+
if (is12HourFormatted) return segment.text;
|
|
58
|
+
// if number add '0' padding to start when one digit
|
|
68
59
|
if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
|
|
69
60
|
return segment.text;
|
|
70
61
|
};
|
|
71
|
-
|
|
72
62
|
return React.createElement("div", _extends({}, segmentProps, {
|
|
73
63
|
ref: ref,
|
|
74
64
|
className: classNames('eds-date-and-time-field__segment', {
|
|
@@ -88,24 +78,19 @@ var FieldSegment = function FieldSegment(_ref) {
|
|
|
88
78
|
* @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.
|
|
89
79
|
* @returns {Time | CalendarDateTime | ZonedDateTime | CalendarDate} et av Time- eller DateValue-objektene med verdier fra date
|
|
90
80
|
*/
|
|
91
|
-
|
|
92
81
|
var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date, noDateOnlyTime, noTimeOnlyDate, timeZone, offset) {
|
|
93
82
|
if (noDateOnlyTime === void 0) {
|
|
94
83
|
noDateOnlyTime = false;
|
|
95
84
|
}
|
|
96
|
-
|
|
97
85
|
if (noTimeOnlyDate === void 0) {
|
|
98
86
|
noTimeOnlyDate = false;
|
|
99
87
|
}
|
|
100
|
-
|
|
101
88
|
if (timeZone) {
|
|
102
89
|
if (offset) {
|
|
103
90
|
return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds());
|
|
104
91
|
}
|
|
105
|
-
|
|
106
92
|
return parseAbsolute(date.toISOString(), timeZone);
|
|
107
93
|
}
|
|
108
|
-
|
|
109
94
|
if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), 0);
|
|
110
95
|
if (noTimeOnlyDate) return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
|
|
111
96
|
return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
|
|
@@ -117,54 +102,55 @@ var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date, noD
|
|
|
117
102
|
* @returns {Date} et Date-objekt med verdier fra time
|
|
118
103
|
*/
|
|
119
104
|
// This function uses a lot of @ts-expect-error to make it work with all Date- and TimeValue types. Sorry ...
|
|
120
|
-
|
|
121
105
|
var timeOrDateValueToNativeDate = function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
|
|
122
106
|
// @ts-expect-error .day does not exist on Time-object
|
|
123
107
|
if (!value.day) {
|
|
124
108
|
// type is Time
|
|
125
|
-
var date = new Date();
|
|
126
|
-
|
|
127
|
-
date.setHours(value.hour);
|
|
128
|
-
|
|
129
|
-
date.setMinutes(value.minute);
|
|
130
|
-
|
|
109
|
+
var date = new Date();
|
|
110
|
+
// @ts-expect-error hour does not exist on CalendarDate
|
|
111
|
+
date.setHours(value.hour);
|
|
112
|
+
// @ts-expect-error minute does not exist on CalendarDate
|
|
113
|
+
date.setMinutes(value.minute);
|
|
114
|
+
// @ts-expect-error second does not exist on CalendarDate
|
|
131
115
|
date.setSeconds(value.second);
|
|
132
116
|
return date;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
|
|
117
|
+
}
|
|
118
|
+
// @ts-expect-error .day does not exist on Time-object
|
|
136
119
|
if (!value.hour) {
|
|
137
120
|
// type is CalendarDate
|
|
138
121
|
// @ts-expect-error .toDate(timeZone) does not exist in type Time
|
|
139
122
|
return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : getLocalTimeZone());
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
|
|
123
|
+
}
|
|
124
|
+
// @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
|
|
143
125
|
if (!value.timeZone) {
|
|
144
126
|
// type is CalendarDateTime
|
|
145
|
-
if (timeZoneForCalendarDateTime)
|
|
127
|
+
if (timeZoneForCalendarDateTime)
|
|
128
|
+
// @ts-expect-error .toDate(timeZone) does not exist in type Time
|
|
146
129
|
return value.toDate(timeZoneForCalendarDateTime);
|
|
147
|
-
return new Date(
|
|
148
|
-
|
|
149
|
-
value.
|
|
150
|
-
|
|
151
|
-
value.
|
|
152
|
-
|
|
130
|
+
return new Date(
|
|
131
|
+
// @ts-expect-error not in type Time
|
|
132
|
+
value.year,
|
|
133
|
+
// @ts-expect-error not in type Time
|
|
134
|
+
value.month - 1,
|
|
135
|
+
// @ts-expect-error not in type Time
|
|
136
|
+
value.day,
|
|
137
|
+
// @ts-expect-error not in type CalendarDate
|
|
138
|
+
value.hour,
|
|
139
|
+
// @ts-expect-error not in type CalendarDate
|
|
140
|
+
value.minute,
|
|
141
|
+
// @ts-expect-error not in type CalendarDate
|
|
153
142
|
value.second);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
|
|
143
|
+
}
|
|
144
|
+
// @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
|
|
157
145
|
return value.toDate();
|
|
158
146
|
};
|
|
159
147
|
var createCalendar = function createCalendar(identifier) {
|
|
160
148
|
if (identifier === void 0) {
|
|
161
149
|
identifier = 'gregory';
|
|
162
150
|
}
|
|
163
|
-
|
|
164
151
|
switch (identifier) {
|
|
165
152
|
case 'gregory':
|
|
166
153
|
return new GregorianCalendar();
|
|
167
|
-
|
|
168
154
|
default:
|
|
169
155
|
throw new Error("Unsupported calendar " + identifier);
|
|
170
156
|
}
|
|
@@ -177,31 +163,29 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
|
|
|
177
163
|
var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
|
|
178
164
|
var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
179
165
|
var value = _ref.selectedDate,
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
166
|
+
label = _ref.label,
|
|
167
|
+
customLocale = _ref.locale,
|
|
168
|
+
showTimeZone = _ref.showTimeZone,
|
|
169
|
+
showTime = _ref.showTime,
|
|
170
|
+
_ref$granularity = _ref.granularity,
|
|
171
|
+
granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
|
|
172
|
+
disabled = _ref.disabled,
|
|
173
|
+
variant = _ref.variant,
|
|
174
|
+
feedback = _ref.feedback,
|
|
175
|
+
_ref$validationVarian = _ref.validationVariant,
|
|
176
|
+
validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
|
|
177
|
+
_ref$validationFeedba = _ref.validationFeedback,
|
|
178
|
+
validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
|
|
179
|
+
labelTooltip = _ref.labelTooltip,
|
|
180
|
+
minValue = _ref.minDate,
|
|
181
|
+
maxValue = _ref.maxDate,
|
|
182
|
+
style = _ref.style,
|
|
183
|
+
className = _ref.className,
|
|
184
|
+
parentLabelProps = _ref.labelProps,
|
|
185
|
+
append = _ref.append,
|
|
186
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
202
187
|
var _useLocale = useLocale(),
|
|
203
|
-
|
|
204
|
-
|
|
188
|
+
locale = _useLocale.locale;
|
|
205
189
|
var state = useDateFieldState(_extends({}, rest, {
|
|
206
190
|
locale: customLocale != null ? customLocale : locale,
|
|
207
191
|
createCalendar: createCalendar,
|
|
@@ -212,14 +196,12 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
212
196
|
maxValue: maxValue
|
|
213
197
|
}));
|
|
214
198
|
var dateFieldRef = useRef(null);
|
|
215
|
-
|
|
216
199
|
var _useDateField = useDateField(_extends({}, rest, {
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
200
|
+
label: label,
|
|
201
|
+
isDisabled: disabled || rest.isDisabled
|
|
202
|
+
}), state, dateFieldRef),
|
|
203
|
+
labelProps = _useDateField.labelProps,
|
|
204
|
+
fieldProps = _useDateField.fieldProps;
|
|
223
205
|
var id = useRandomId('datefield');
|
|
224
206
|
return React.createElement(ConditionalWrapper, {
|
|
225
207
|
condition: customLocale !== undefined,
|
|
@@ -255,15 +237,12 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
255
237
|
var _excluded$7 = ["children", "className", "style"];
|
|
256
238
|
var CalendarButton = function CalendarButton(_ref) {
|
|
257
239
|
var children = _ref.children,
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
240
|
+
className = _ref.className,
|
|
241
|
+
style = _ref.style,
|
|
242
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
262
243
|
var ref = useRef(null);
|
|
263
|
-
|
|
264
244
|
var _useButton = useButton(props, ref),
|
|
265
|
-
|
|
266
|
-
|
|
245
|
+
buttonProps = _useButton.buttonProps;
|
|
267
246
|
return React.createElement(IconButton, _extends({}, buttonProps, {
|
|
268
247
|
ref: ref,
|
|
269
248
|
className: className,
|
|
@@ -274,28 +253,24 @@ var CalendarButton = function CalendarButton(_ref) {
|
|
|
274
253
|
var _excluded$6 = ["state", "date", "onSelectedCellClick"];
|
|
275
254
|
var CalendarCell = function CalendarCell(_ref) {
|
|
276
255
|
var _state$timeZone;
|
|
277
|
-
|
|
278
256
|
var state = _ref.state,
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
257
|
+
date = _ref.date,
|
|
258
|
+
_ref$onSelectedCellCl = _ref.onSelectedCellClick,
|
|
259
|
+
onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
|
|
260
|
+
return;
|
|
261
|
+
} : _ref$onSelectedCellCl,
|
|
262
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
286
263
|
var cellRef = useRef(null);
|
|
287
|
-
|
|
288
264
|
var _useCalendarCell = useCalendarCell({
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
265
|
+
date: date
|
|
266
|
+
}, state, cellRef),
|
|
267
|
+
cellProps = _useCalendarCell.cellProps,
|
|
268
|
+
buttonProps = _useCalendarCell.buttonProps,
|
|
269
|
+
isSelected = _useCalendarCell.isSelected,
|
|
270
|
+
isOutsideVisibleRange = _useCalendarCell.isOutsideVisibleRange,
|
|
271
|
+
isDisabled = _useCalendarCell.isDisabled,
|
|
272
|
+
isUnavailable = _useCalendarCell.isUnavailable,
|
|
273
|
+
formattedDate = _useCalendarCell.formattedDate;
|
|
299
274
|
return React.createElement("td", _extends({}, cellProps, {
|
|
300
275
|
className: "eds-datepicker__calendar__grid__cell__td"
|
|
301
276
|
}), React.createElement("div", _extends({}, buttonProps, {
|
|
@@ -322,45 +297,36 @@ var CalendarCell = function CalendarCell(_ref) {
|
|
|
322
297
|
var _excluded$5 = ["state", "navigationDescription", "onSelectedCellClick"];
|
|
323
298
|
var CalendarGrid = function CalendarGrid(_ref) {
|
|
324
299
|
var state = _ref.state,
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
300
|
+
navigationDescription = _ref.navigationDescription,
|
|
301
|
+
_ref$onSelectedCellCl = _ref.onSelectedCellClick,
|
|
302
|
+
onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
|
|
303
|
+
return;
|
|
304
|
+
} : _ref$onSelectedCellCl,
|
|
305
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
332
306
|
var calendarGridId = useRandomId('eds-calendar');
|
|
333
|
-
|
|
334
307
|
var _useLocale = useLocale(),
|
|
335
|
-
|
|
336
|
-
|
|
308
|
+
locale = _useLocale.locale;
|
|
337
309
|
var _useCalendarGrid = useCalendarGrid(rest, state),
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
310
|
+
gridProps = _useCalendarGrid.gridProps,
|
|
311
|
+
headerProps = _useCalendarGrid.headerProps,
|
|
312
|
+
weekDays = _useCalendarGrid.weekDays;
|
|
342
313
|
var weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
|
|
343
314
|
var weeksArray = Array.from(Array(weeksInMonth).keys());
|
|
344
|
-
|
|
345
315
|
var weekDaysMapped = function weekDaysMapped() {
|
|
346
316
|
if (locale.toLowerCase().includes('no')) return ['ma', 'ti', 'on', 'to', 'fr', 'lø', 'sø'];
|
|
347
|
-
|
|
348
317
|
if (locale.toLowerCase().includes('en')) {
|
|
349
318
|
if (weekDays[0] === 'M') return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
|
|
350
319
|
if (weekDays[0] === 'S') return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
351
320
|
}
|
|
352
|
-
|
|
353
321
|
return weekDays.map(function (day) {
|
|
354
322
|
return day.toLowerCase();
|
|
355
323
|
});
|
|
356
324
|
};
|
|
357
|
-
|
|
358
325
|
var getNavigationDescription = function getNavigationDescription() {
|
|
359
326
|
if (navigationDescription) return navigationDescription;
|
|
360
327
|
if (locale.toLowerCase().includes('en')) return 'Use the arrow keys to navigate between dates';
|
|
361
328
|
return 'Bruk piltastene til å navigere mellom datoer';
|
|
362
329
|
};
|
|
363
|
-
|
|
364
330
|
return React.createElement(React.Fragment, null, React.createElement("table", _extends({}, gridProps, {
|
|
365
331
|
cellSpacing: "0",
|
|
366
332
|
className: "eds-datepicker__calendar__grid"
|
|
@@ -390,30 +356,26 @@ var CalendarGrid = function CalendarGrid(_ref) {
|
|
|
390
356
|
var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
|
|
391
357
|
var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
392
358
|
var onChange = _ref.onChange,
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
359
|
+
customLocale = _ref.locale,
|
|
360
|
+
style = _ref.style,
|
|
361
|
+
navigationDescription = _ref.navigationDescription,
|
|
362
|
+
_ref$onSelectedCellCl = _ref.onSelectedCellClick,
|
|
363
|
+
onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
|
|
364
|
+
return;
|
|
365
|
+
} : _ref$onSelectedCellCl,
|
|
366
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
402
367
|
var _useLocale = useLocale(),
|
|
403
|
-
|
|
404
|
-
|
|
368
|
+
locale = _useLocale.locale;
|
|
405
369
|
var state = useCalendarState(_extends({}, rest, {
|
|
406
370
|
onChange: onChange,
|
|
407
371
|
locale: customLocale != null ? customLocale : locale,
|
|
408
372
|
createCalendar: createCalendar
|
|
409
373
|
}));
|
|
410
|
-
|
|
411
374
|
var _useCalendar = useCalendar(rest, state),
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
375
|
+
calendarProps = _useCalendar.calendarProps,
|
|
376
|
+
prevButtonProps = _useCalendar.prevButtonProps,
|
|
377
|
+
nextButtonProps = _useCalendar.nextButtonProps,
|
|
378
|
+
title = _useCalendar.title;
|
|
417
379
|
return React.createElement(ConditionalWrapper, {
|
|
418
380
|
condition: customLocale,
|
|
419
381
|
wrapper: function wrapper(child) {
|
|
@@ -445,82 +407,74 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
445
407
|
var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold"];
|
|
446
408
|
var DatePicker = function DatePicker(_ref) {
|
|
447
409
|
var value = _ref.selectedDate,
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
410
|
+
onChange = _ref.onChange,
|
|
411
|
+
locale = _ref.locale,
|
|
412
|
+
isDisabled = _ref.disabled,
|
|
413
|
+
showTime = _ref.showTime,
|
|
414
|
+
_ref$showTimeZone = _ref.showTimeZone,
|
|
415
|
+
showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
|
|
416
|
+
className = _ref.className,
|
|
417
|
+
variant = _ref.variant,
|
|
418
|
+
feedback = _ref.feedback,
|
|
419
|
+
validationVariant = _ref.validationVariant,
|
|
420
|
+
validationFeedback = _ref.validationFeedback,
|
|
421
|
+
_ref$disableModal = _ref.disableModal,
|
|
422
|
+
disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
|
|
423
|
+
labelTooltip = _ref.labelTooltip,
|
|
424
|
+
navigationDescription = _ref.navigationDescription,
|
|
425
|
+
minValue = _ref.minDate,
|
|
426
|
+
maxValue = _ref.maxDate,
|
|
427
|
+
_ref$modalTreshold = _ref.modalTreshold,
|
|
428
|
+
modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
|
|
429
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
469
430
|
var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
|
|
470
431
|
var datePickerRef = useRef(null);
|
|
471
432
|
var calendarRef = useRef(null);
|
|
472
433
|
var dateFieldRef = useRef(null);
|
|
473
|
-
|
|
474
434
|
var _useWindowDimensions = useWindowDimensions(),
|
|
475
|
-
|
|
476
|
-
|
|
435
|
+
width = _useWindowDimensions.width;
|
|
477
436
|
var state = useDatePickerState(_extends({}, rest, {
|
|
478
437
|
minValue: minValue,
|
|
479
438
|
maxValue: maxValue,
|
|
480
439
|
value: value,
|
|
481
440
|
onChange: onChange
|
|
482
441
|
}));
|
|
483
|
-
|
|
484
442
|
var _useDatePicker = useDatePicker(_extends({
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
443
|
+
isDisabled: isDisabled,
|
|
444
|
+
minValue: minValue,
|
|
445
|
+
maxValue: maxValue
|
|
446
|
+
}, rest), state, datePickerRef),
|
|
447
|
+
groupProps = _useDatePicker.groupProps,
|
|
448
|
+
labelProps = _useDatePicker.labelProps,
|
|
449
|
+
fieldProps = _useDatePicker.fieldProps,
|
|
450
|
+
buttonProps = _useDatePicker.buttonProps,
|
|
451
|
+
dialogProps = _useDatePicker.dialogProps,
|
|
452
|
+
calendarProps = _useDatePicker.calendarProps;
|
|
453
|
+
// calculations for floating-UI popover position
|
|
497
454
|
var _useFloating = useFloating({
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
455
|
+
whileElementsMounted: autoUpdate,
|
|
456
|
+
placement: 'bottom-start',
|
|
457
|
+
middleware: [offset(space.extraSmall), flip(), shift({
|
|
458
|
+
padding: space.extraSmall
|
|
459
|
+
})]
|
|
460
|
+
}),
|
|
461
|
+
x = _useFloating.x,
|
|
462
|
+
y = _useFloating.y,
|
|
463
|
+
reference = _useFloating.reference,
|
|
464
|
+
floating = _useFloating.floating,
|
|
465
|
+
strategy = _useFloating.strategy;
|
|
510
466
|
var onChangeCalendar = function onChangeCalendar(newSelectedDate) {
|
|
511
467
|
// Necessary to avoid state update on unmounted component
|
|
512
468
|
requestAnimationFrame(function () {
|
|
513
469
|
calendarProps.onChange && calendarProps.onChange(newSelectedDate);
|
|
514
470
|
});
|
|
515
471
|
};
|
|
516
|
-
|
|
517
472
|
useOnClickOutside([calendarRef], function () {
|
|
518
473
|
state.setOpen(false);
|
|
519
474
|
});
|
|
520
475
|
useOnEscape(calendarRef, function () {
|
|
521
476
|
state.setOpen(false);
|
|
522
477
|
});
|
|
523
|
-
|
|
524
478
|
var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
|
|
525
479
|
disabled: calendarProps.isDisabled,
|
|
526
480
|
navigationDescription: navigationDescription,
|
|
@@ -529,7 +483,6 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
529
483
|
},
|
|
530
484
|
onChange: onChangeCalendar
|
|
531
485
|
});
|
|
532
|
-
|
|
533
486
|
var useModal = width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
|
|
534
487
|
var popoverCalendar = React.createElement("div", {
|
|
535
488
|
// styling for floating-UI popover
|
|
@@ -598,21 +551,20 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
598
551
|
};
|
|
599
552
|
|
|
600
553
|
var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
|
|
601
|
-
|
|
554
|
+
_excluded2$1 = ["onChange", "variant", "value"];
|
|
602
555
|
var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
603
556
|
var className = _ref.className,
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
557
|
+
style = _ref.style,
|
|
558
|
+
label = _ref.label,
|
|
559
|
+
onChange = _ref.onChange,
|
|
560
|
+
feedback = _ref.feedback,
|
|
561
|
+
variant = _ref.variant,
|
|
562
|
+
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
563
|
+
_ref$prepend = _ref.prepend,
|
|
564
|
+
prepend = _ref$prepend === void 0 ? React.createElement(DateIcon, {
|
|
565
|
+
inline: true
|
|
566
|
+
}) : _ref$prepend,
|
|
567
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
616
568
|
var nativedatepickerId = useRandomId('eds-nativetimepicker');
|
|
617
569
|
return React.createElement(BaseFormControl, {
|
|
618
570
|
style: style,
|
|
@@ -633,17 +585,14 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
633
585
|
});
|
|
634
586
|
var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
635
587
|
var onChange = _ref2.onChange,
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
588
|
+
variant = _ref2.variant,
|
|
589
|
+
value = _ref2.value,
|
|
590
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
|
|
640
591
|
var contextVariant = useVariant();
|
|
641
592
|
var currentVariant = variant || contextVariant;
|
|
642
|
-
|
|
643
593
|
var _useInputGroupContext = useInputGroupContext(),
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
594
|
+
isDatepickerFilled = _useInputGroupContext.isFilled,
|
|
595
|
+
setFiller = _useInputGroupContext.setFilled;
|
|
647
596
|
useOnMount(function () {
|
|
648
597
|
setFiller && !isDatepickerFilled && setFiller(true);
|
|
649
598
|
});
|
|
@@ -654,19 +603,16 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
654
603
|
setFiller && isDatepickerFilled && setFiller(false);
|
|
655
604
|
}
|
|
656
605
|
}, [value, setFiller, isDatepickerFilled]);
|
|
657
|
-
|
|
658
606
|
var handleChange = function handleChange(event) {
|
|
659
607
|
if (isFilled(event.target)) {
|
|
660
608
|
setFiller && !isDatepickerFilled && setFiller(true);
|
|
661
609
|
} else {
|
|
662
610
|
setFiller && isDatepickerFilled && setFiller(false);
|
|
663
611
|
}
|
|
664
|
-
|
|
665
612
|
if (onChange) {
|
|
666
613
|
onChange(event);
|
|
667
614
|
}
|
|
668
615
|
};
|
|
669
|
-
|
|
670
616
|
return React.createElement("input", _extends({
|
|
671
617
|
ref: ref,
|
|
672
618
|
"aria-invalid": currentVariant === 'error',
|
|
@@ -679,9 +625,9 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
679
625
|
|
|
680
626
|
var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
|
|
681
627
|
var direction = _ref.direction,
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
628
|
+
onClick = _ref.onClick,
|
|
629
|
+
disabled = _ref.disabled,
|
|
630
|
+
ariaLabel = _ref['aria-label'];
|
|
685
631
|
return React.createElement(IconButton, {
|
|
686
632
|
className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
|
|
687
633
|
'eds-timepicker__arrowbutton--disabled': disabled
|
|
@@ -697,27 +643,25 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
|
|
|
697
643
|
var _excluded$1 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel"];
|
|
698
644
|
var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
699
645
|
var selectedTime = _ref.selectedTime,
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
646
|
+
onChange = _ref.onChange,
|
|
647
|
+
disabled = _ref.disabled,
|
|
648
|
+
className = _ref.className,
|
|
649
|
+
style = _ref.style,
|
|
650
|
+
label = _ref.label,
|
|
651
|
+
labelTooltip = _ref.labelTooltip,
|
|
652
|
+
feedback = _ref.feedback,
|
|
653
|
+
variant = _ref.variant,
|
|
654
|
+
customLocale = _ref.locale,
|
|
655
|
+
showTimeZone = _ref.showTimeZone,
|
|
656
|
+
_ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
|
|
657
|
+
minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
|
|
658
|
+
_ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
|
|
659
|
+
leftArrowButtonAriaLabel = _ref$leftArrowButtonA === void 0 ? "Trekk fra " + minuteIncrementForArrowButtons + " minutter" : _ref$leftArrowButtonA,
|
|
660
|
+
_ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
|
|
661
|
+
rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
|
|
662
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
718
663
|
var _useLocale = useLocale(),
|
|
719
|
-
|
|
720
|
-
|
|
664
|
+
locale = _useLocale.locale;
|
|
721
665
|
if (customLocale) locale = customLocale;
|
|
722
666
|
var state = useTimeFieldState(_extends({
|
|
723
667
|
onChange: onChange,
|
|
@@ -728,15 +672,12 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
728
672
|
isDisabled: disabled
|
|
729
673
|
}, rest));
|
|
730
674
|
var timeFieldRef = useRef(null);
|
|
731
|
-
|
|
732
675
|
var _useTimeField = useTimeField(_extends({}, rest, {
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
676
|
+
label: label
|
|
677
|
+
}), state, timeFieldRef),
|
|
678
|
+
labelProps = _useTimeField.labelProps,
|
|
679
|
+
fieldProps = _useTimeField.fieldProps;
|
|
738
680
|
var id = useRandomId('timepicker');
|
|
739
|
-
|
|
740
681
|
var handleOnClickArrowButton = function handleOnClickArrowButton(minutes) {
|
|
741
682
|
if (someSegmentIsUndefined) {
|
|
742
683
|
setTimeToNearestMinuteIncrement();
|
|
@@ -744,11 +685,9 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
744
685
|
addMinutesToSelectedTime(minutes);
|
|
745
686
|
}
|
|
746
687
|
};
|
|
747
|
-
|
|
748
688
|
var someSegmentIsUndefined = state.segments.some(function (segment) {
|
|
749
689
|
return segment.text === '––';
|
|
750
690
|
});
|
|
751
|
-
|
|
752
691
|
var setTimeToNearestMinuteIncrement = function setTimeToNearestMinuteIncrement() {
|
|
753
692
|
var currentTime = now(getLocalTimeZone());
|
|
754
693
|
var roundedMinute = Math.floor(currentTime.minute / minuteIncrementForArrowButtons) * minuteIncrementForArrowButtons;
|
|
@@ -757,15 +696,12 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
757
696
|
});
|
|
758
697
|
onChange(newTime);
|
|
759
698
|
};
|
|
760
|
-
|
|
761
699
|
var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
|
|
762
700
|
var _state$value;
|
|
763
|
-
|
|
764
701
|
state.value && state.setValue((_state$value = state.value) == null ? void 0 : _state$value.add({
|
|
765
702
|
minutes: minutes
|
|
766
703
|
}));
|
|
767
704
|
};
|
|
768
|
-
|
|
769
705
|
return React.createElement(I18nProvider, {
|
|
770
706
|
locale: locale
|
|
771
707
|
}, React.createElement("div", {
|
|
@@ -807,17 +743,16 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
807
743
|
});
|
|
808
744
|
|
|
809
745
|
var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
|
|
810
|
-
|
|
746
|
+
_excluded2 = ["onChange", "value"];
|
|
811
747
|
var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
812
748
|
var className = _ref.className,
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
749
|
+
style = _ref.style,
|
|
750
|
+
onChange = _ref.onChange,
|
|
751
|
+
label = _ref.label,
|
|
752
|
+
feedback = _ref.feedback,
|
|
753
|
+
variant = _ref.variant,
|
|
754
|
+
prepend = _ref.prepend,
|
|
755
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
821
756
|
var nativetimepickerId = useRandomId('eds-native-timepicker');
|
|
822
757
|
return React.createElement(BaseFormControl, {
|
|
823
758
|
style: style,
|
|
@@ -836,16 +771,13 @@ var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
836
771
|
});
|
|
837
772
|
var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
838
773
|
var onChange = _ref2.onChange,
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
774
|
+
value = _ref2.value,
|
|
775
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
842
776
|
var contextVariant = useVariant();
|
|
843
777
|
var currentVariant = rest.variant || contextVariant;
|
|
844
|
-
|
|
845
778
|
var _useInputGroupContext = useInputGroupContext(),
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
779
|
+
isTimepickerFilled = _useInputGroupContext.isFilled,
|
|
780
|
+
setFiller = _useInputGroupContext.setFilled;
|
|
849
781
|
useOnMount(function () {
|
|
850
782
|
setFiller && !isTimepickerFilled && setFiller(true);
|
|
851
783
|
});
|
|
@@ -856,19 +788,16 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
856
788
|
setFiller && isTimepickerFilled && setFiller(false);
|
|
857
789
|
}
|
|
858
790
|
}, [value, setFiller, isTimepickerFilled]);
|
|
859
|
-
|
|
860
791
|
var handleChange = function handleChange(event) {
|
|
861
792
|
if (isFilled(event.target)) {
|
|
862
793
|
setFiller && !isTimepickerFilled && setFiller(true);
|
|
863
794
|
} else {
|
|
864
795
|
setFiller && isTimepickerFilled && setFiller(false);
|
|
865
796
|
}
|
|
866
|
-
|
|
867
797
|
if (onChange) {
|
|
868
798
|
onChange(event);
|
|
869
799
|
}
|
|
870
800
|
};
|
|
871
|
-
|
|
872
801
|
return React.createElement("input", _extends({
|
|
873
802
|
ref: ref,
|
|
874
803
|
"aria-invalid": currentVariant === 'error',
|