@stenajs-webui/calendar 14.1.1 → 15.0.0-alpha.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/dist/components/calendar/CalendarMonth.d.ts +3 -3
- package/dist/components/calendar/CalendarWeek.d.ts +3 -3
- package/dist/components/calendar/DisabledDayWrapper.d.ts +7 -0
- package/dist/components/calendar-types/date-range-calendar/DateRangeCalendar.d.ts +4 -11
- package/dist/components/calendar-types/date-range-calendar/DateRangeCalendar.stories.d.ts +2 -0
- package/dist/components/calendar-types/date-range-calendar/hooks/UseDateRangeSelection.d.ts +1 -1
- package/dist/components/calendar-types/date-range-exclusion-calendar/DateRangeExclusionCalendar.d.ts +2 -3
- package/dist/components/calendar-types/date-range-exclusion-calendar/UseDateRangeExclusionSelection.d.ts +1 -1
- package/dist/components/input-types/date-input/DateInput.d.ts +2 -1
- package/dist/components/input-types/date-input/DateInput.stories.d.ts +2 -0
- package/dist/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.d.ts +8 -4
- package/dist/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.stories.d.ts +5 -2
- package/dist/components/input-types/date-range-input/DateRangeInput.d.ts +7 -8
- package/dist/components/input-types/date-range-input/DateRangeInput.stories.d.ts +2 -1
- package/dist/components/input-types/date-range-input/hooks/UseDateRangeInput.d.ts +3 -2
- package/dist/components/input-types/date-text-input/DateTextInput.d.ts +2 -1
- package/dist/components/input-types/date-time-input/DateTimeInput.d.ts +2 -1
- package/dist/components/input-types/date-time-input/DateTimeInput.stories.d.ts +1 -0
- package/dist/config/DefaultMaxDate.d.ts +1 -0
- package/dist/features/date-range/hooks/UseDateRangeOnClickDayHandler.d.ts +2 -5
- package/dist/features/dual-text-input/DualTextInput.d.ts +4 -0
- package/dist/features/month-switcher/CalendarWithMonthSwitcher.d.ts +2 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.es.js +341 -321
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +367 -324
- package/dist/index.js.map +1 -1
- package/dist/types/CalendarTypes.d.ts +21 -1
- package/dist/types/DateRange.d.ts +16 -0
- package/dist/util/calendar/StateModifier.d.ts +1 -0
- package/dist/util/date/DateMinMaxValidator.d.ts +1 -0
- package/dist/util/date/__tests__/DateMinMaxValidator.test.d.ts +1 -0
- package/dist/util/date-range/DateRangeTransformer.d.ts +3 -0
- package/dist/util/date-range/DateRangeValidator.d.ts +4 -0
- package/dist/util/date-range/__tests__/DateRangeValidator.test.d.ts +1 -0
- package/package.json +8 -9
- package/dist/components/calendar-types/date-range-calendar/util/IntervalSwitcher.d.ts +0 -4
- package/dist/util/calendar/CalendarIntervalValidator.d.ts +0 -11
package/dist/index.js
CHANGED
|
@@ -14,18 +14,37 @@ var faAngleDoubleLeft = require('@fortawesome/free-solid-svg-icons/faAngleDouble
|
|
|
14
14
|
var faAngleDoubleRight = require('@fortawesome/free-solid-svg-icons/faAngleDoubleRight');
|
|
15
15
|
var faCaretLeft = require('@fortawesome/free-solid-svg-icons/faCaretLeft');
|
|
16
16
|
var faCaretRight = require('@fortawesome/free-solid-svg-icons/faCaretRight');
|
|
17
|
-
var faCalendarAlt = require('@fortawesome/free-
|
|
17
|
+
var faCalendarAlt = require('@fortawesome/free-regular-svg-icons/faCalendarAlt');
|
|
18
18
|
var forms = require('@stenajs-webui/forms');
|
|
19
19
|
var tooltip = require('@stenajs-webui/tooltip');
|
|
20
|
+
var faCalendarAlt$1 = require('@fortawesome/free-solid-svg-icons/faCalendarAlt');
|
|
20
21
|
var theme = require('@stenajs-webui/theme');
|
|
21
22
|
var faLongArrowAltRight = require('@fortawesome/free-solid-svg-icons/faLongArrowAltRight');
|
|
22
23
|
var faClock = require('@fortawesome/free-solid-svg-icons/faClock');
|
|
23
24
|
var faClock$1 = require('@fortawesome/free-regular-svg-icons/faClock');
|
|
24
|
-
var faCalendarAlt$1 = require('@fortawesome/free-regular-svg-icons/faCalendarAlt');
|
|
25
25
|
var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
|
|
26
26
|
|
|
27
27
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
28
28
|
|
|
29
|
+
function _interopNamespace(e) {
|
|
30
|
+
if (e && e.__esModule) return e;
|
|
31
|
+
var n = Object.create(null);
|
|
32
|
+
if (e) {
|
|
33
|
+
Object.keys(e).forEach(function (k) {
|
|
34
|
+
if (k !== 'default') {
|
|
35
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
36
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () { return e[k]; }
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
n["default"] = e;
|
|
44
|
+
return Object.freeze(n);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
29
48
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
30
49
|
|
|
31
50
|
/*! *****************************************************************************
|
|
@@ -66,12 +85,14 @@ function __rest(s, e) {
|
|
|
66
85
|
return t;
|
|
67
86
|
}
|
|
68
87
|
|
|
69
|
-
function
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
88
|
+
function __spreadArray(to, from, pack) {
|
|
89
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
90
|
+
if (ar || !(i in from)) {
|
|
91
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
92
|
+
ar[i] = from[i];
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
75
96
|
}
|
|
76
97
|
|
|
77
98
|
var DateFormats = {
|
|
@@ -83,7 +104,7 @@ var DateFormats = {
|
|
|
83
104
|
weekDayName: "EEEE",
|
|
84
105
|
weekDayNameShort: "EEE",
|
|
85
106
|
dateAndMonth: "d MMM",
|
|
86
|
-
monthAndDate: "MMM do",
|
|
107
|
+
monthAndDate: "MMM do", // Jan 2nd
|
|
87
108
|
};
|
|
88
109
|
|
|
89
110
|
var buildDayStateForDateRange = function (statePerMonth, start, end) {
|
|
@@ -155,11 +176,13 @@ var addDayStateHighlights = function (calendarState, date, highlights) {
|
|
|
155
176
|
calendarState[monthString] &&
|
|
156
177
|
calendarState[monthString][weekNumber] &&
|
|
157
178
|
calendarState[monthString][weekNumber][dayInMonth];
|
|
158
|
-
var newHighlights = dayState && dayState.highlights
|
|
159
|
-
? __spreadArrays(dayState.highlights, highlights) : highlights;
|
|
160
179
|
return __assign(__assign({}, calendarState), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = __assign(__assign({}, (calendarState &&
|
|
161
180
|
calendarState[monthString] &&
|
|
162
|
-
calendarState[monthString][weekNumber])), (_c = {}, _c[dayInMonth] =
|
|
181
|
+
calendarState[monthString][weekNumber])), (_c = {}, _c[dayInMonth] = addDayStateHighlightsOnSingleDay(dayState, highlights), _c)), _b)), _a));
|
|
182
|
+
};
|
|
183
|
+
var addDayStateHighlightsOnSingleDay = function (dayState, highlights) {
|
|
184
|
+
var _a;
|
|
185
|
+
return __assign(__assign({}, dayState), { highlights: __spreadArray(__spreadArray([], ((_a = dayState === null || dayState === void 0 ? void 0 : dayState.highlights) !== null && _a !== void 0 ? _a : []), true), highlights, true) });
|
|
163
186
|
};
|
|
164
187
|
var addWeekStateHighlights = function (calendarState, week, highlights) {
|
|
165
188
|
var _a, _b;
|
|
@@ -173,7 +196,7 @@ var addWeekStateHighlights = function (calendarState, week, highlights) {
|
|
|
173
196
|
});
|
|
174
197
|
var weekState = state && state[monthString] ? state[monthString][weekNumber] : undefined;
|
|
175
198
|
var newHighlights = weekState && weekState.highlights
|
|
176
|
-
?
|
|
199
|
+
? __spreadArray(__spreadArray([], weekState.highlights, true), highlights, true) : highlights;
|
|
177
200
|
var newWeekState = __assign(__assign({}, weekState), { highlights: newHighlights });
|
|
178
201
|
return __assign(__assign({}, state), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = newWeekState, _b)), _a));
|
|
179
202
|
};
|
|
@@ -195,6 +218,7 @@ var useHighlightToday = function (enabled, statePerMonth) {
|
|
|
195
218
|
}, [enabled, statePerMonth]);
|
|
196
219
|
};
|
|
197
220
|
|
|
221
|
+
exports.Month = void 0;
|
|
198
222
|
(function (Month) {
|
|
199
223
|
Month[Month["JANUARY"] = 0] = "JANUARY";
|
|
200
224
|
Month[Month["FEBRUARY"] = 1] = "FEBRUARY";
|
|
@@ -209,6 +233,7 @@ var useHighlightToday = function (enabled, statePerMonth) {
|
|
|
209
233
|
Month[Month["NOVEMBER"] = 10] = "NOVEMBER";
|
|
210
234
|
Month[Month["DECEMBER"] = 11] = "DECEMBER";
|
|
211
235
|
})(exports.Month || (exports.Month = {}));
|
|
236
|
+
exports.WeekDay = void 0;
|
|
212
237
|
(function (WeekDay) {
|
|
213
238
|
WeekDay[WeekDay["SUNDAY"] = 0] = "SUNDAY";
|
|
214
239
|
WeekDay[WeekDay["MONDAY"] = 1] = "MONDAY";
|
|
@@ -405,79 +430,99 @@ var defaultCalendarTheme = {
|
|
|
405
430
|
};
|
|
406
431
|
var extranetCalendarTheme = __assign(__assign({}, defaultCalendarTheme), { width: "37px", height: "37px" });
|
|
407
432
|
|
|
433
|
+
var isDateInMinMaxRange = function (date, min, max) {
|
|
434
|
+
if (min && dateFns.isBefore(date, min)) {
|
|
435
|
+
return dateFns.isSameDay(date, min);
|
|
436
|
+
}
|
|
437
|
+
if (max && dateFns.isAfter(date, max)) {
|
|
438
|
+
return dateFns.isSameDay(date, max);
|
|
439
|
+
}
|
|
440
|
+
return true;
|
|
441
|
+
};
|
|
442
|
+
|
|
443
|
+
var DisabledDayWrapper = function DisabledDayWrapper(_a) {
|
|
444
|
+
var DayComponent = _a.dayComponent, minDate = _a.minDate, maxDate = _a.maxDate, dayState = _a.dayState, day = _a.day, props = __rest(_a, ["dayComponent", "minDate", "maxDate", "dayState", "day"]);
|
|
445
|
+
var activeDayState = React.useMemo(function () {
|
|
446
|
+
return !isDateInMinMaxRange(day.date, minDate, maxDate)
|
|
447
|
+
? addDayStateHighlightsOnSingleDay(dayState, ["disabled"])
|
|
448
|
+
: dayState;
|
|
449
|
+
}, [day.date, dayState, maxDate, minDate]);
|
|
450
|
+
return React__namespace.createElement(DayComponent, __assign({ day: day }, props, { dayState: activeDayState }));
|
|
451
|
+
};
|
|
452
|
+
|
|
408
453
|
var WeekNumberCell = function (_a) {
|
|
409
454
|
var onClickWeek = _a.onClickWeek, theme = _a.theme, week = _a.week, background = _a.background, backgroundColor = _a.backgroundColor, prefix = _a.prefix;
|
|
410
|
-
var content = (
|
|
411
|
-
background &&
|
|
412
|
-
|
|
413
|
-
|
|
455
|
+
var content = (React__namespace.createElement(core.Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
456
|
+
background && React__namespace.createElement(core.Box, { position: "absolute" }, background),
|
|
457
|
+
React__namespace.createElement(core.Box, { position: "absolute" },
|
|
458
|
+
React__namespace.createElement(core.Text, { color: onClickWeek
|
|
414
459
|
? theme.WeekNumber.clickableTextColor
|
|
415
460
|
: theme.WeekNumber.textColor },
|
|
416
461
|
prefix,
|
|
417
462
|
week.weekNumber))));
|
|
418
|
-
return (
|
|
463
|
+
return (React__namespace.createElement(core.Box, { background: backgroundColor || theme.WeekNumber.backgroundColor, position: "relative" }, onClickWeek ? (React__namespace.createElement(core.Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeek(week, ev); }, disableFocusHighlight: !onClickWeek }, content)) : (content)));
|
|
419
464
|
};
|
|
420
465
|
|
|
421
466
|
function CalendarWeek(_a) {
|
|
422
|
-
var week = _a.week, month = _a.month,
|
|
423
|
-
return (
|
|
424
|
-
theme.WeekNumber.show && (
|
|
425
|
-
week.days.map(function (day) { return (
|
|
467
|
+
var week = _a.week, month = _a.month, dayComponent = _a.dayComponent, statePerWeekDay = _a.statePerWeekDay, userDataPerWeekDay = _a.userDataPerWeekDay, minDate = _a.minDate, maxDate = _a.maxDate, onClickWeek = _a.onClickWeek, onClickDay = _a.onClickDay, theme = _a.theme, renderWeekNumber = _a.renderWeekNumber, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
|
|
468
|
+
return (React__namespace.createElement("tr", { key: week.weekNumber },
|
|
469
|
+
theme.WeekNumber.show && (React__namespace.createElement("td", null, renderWeekNumber ? (renderWeekNumber(week, theme, onClickWeek)) : (React__namespace.createElement(WeekNumberCell, { week: week, onClickWeek: onClickWeek, theme: theme })))),
|
|
470
|
+
week.days.map(function (day) { return (React__namespace.createElement(DisabledDayWrapper, { dayComponent: dayComponent, key: day.dateString, day: day, week: week, month: month, dayState: statePerWeekDay && statePerWeekDay[day.dayOfMonth], userData: userDataPerWeekDay && userDataPerWeekDay[day.dayOfMonth], onClickDay: onClickDay, theme: theme, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights, minDate: minDate, maxDate: maxDate })); })));
|
|
426
471
|
}
|
|
427
472
|
|
|
428
473
|
var WeekDayCell = function (_a) {
|
|
429
474
|
var onClickWeekDay = _a.onClickWeekDay, day = _a.day, theme = _a.theme;
|
|
430
|
-
var content = (
|
|
431
|
-
|
|
475
|
+
var content = (React__namespace.createElement(core.Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
476
|
+
React__namespace.createElement(core.Text, { size: "small", color: onClickWeekDay
|
|
432
477
|
? theme.WeekDay.clickableTextColor
|
|
433
478
|
: theme.WeekDay.textColor }, day.name)));
|
|
434
479
|
if (onClickWeekDay) {
|
|
435
|
-
return (
|
|
480
|
+
return (React__namespace.createElement(core.Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeekDay(day.dayOfWeek, ev); }, disableFocusHighlight: !onClickWeekDay }, content));
|
|
436
481
|
}
|
|
437
482
|
return content;
|
|
438
483
|
};
|
|
439
484
|
|
|
440
|
-
var CalendarDay = function (_a) {
|
|
485
|
+
var CalendarDay = function CalendarDay(_a) {
|
|
441
486
|
var day = _a.day, week = _a.week, month = _a.month, dayState = _a.dayState, userData = _a.userData, onClickDay = _a.onClickDay, theme = _a.theme, ExtraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
|
|
442
|
-
var content = (
|
|
443
|
-
|
|
487
|
+
var content = (React__namespace.createElement(core.Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
488
|
+
React__namespace.createElement(core.Text, __assign({}, (theme.CalendarDay.textProps &&
|
|
444
489
|
theme.CalendarDay.textProps(defaultHighlights, dayState, day, week, month, userData))), day.dayOfMonth)));
|
|
445
|
-
var WrapperTd = styled__default[
|
|
490
|
+
var WrapperTd = styled__default["default"].td(__assign({}, (theme.CalendarDay.tdStyle &&
|
|
446
491
|
theme.CalendarDay.tdStyle(defaultHighlights, dayState, day, week, month, userData))));
|
|
447
|
-
var InnerWrapperDiv = styled__default[
|
|
492
|
+
var InnerWrapperDiv = styled__default["default"].div(__assign(__assign({}, (theme.CalendarDay.innerWrapperStyle &&
|
|
448
493
|
theme.CalendarDay.innerWrapperStyle(defaultHighlights, dayState, day, week, month, userData))), { width: "100%", height: "100%" }));
|
|
449
|
-
var CellWrapperDiv = styled__default[
|
|
494
|
+
var CellWrapperDiv = styled__default["default"].div(__assign(__assign({}, (theme.CalendarDay.cellWrapperStyle &&
|
|
450
495
|
theme.CalendarDay.cellWrapperStyle(defaultHighlights, dayState, day, week, month, userData))), { width: "100%", height: "100%", position: "relative" }));
|
|
451
|
-
return (
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
ExtraDayContent && (
|
|
455
|
-
onClickDay && isClickable(defaultHighlights, dayState) ? (
|
|
496
|
+
return (React__namespace.createElement(WrapperTd, null,
|
|
497
|
+
React__namespace.createElement(InnerWrapperDiv, null,
|
|
498
|
+
React__namespace.createElement(CellWrapperDiv, null, day.month === month.monthInYear && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
499
|
+
ExtraDayContent && (React__namespace.createElement(ExtraDayContent, { week: week, month: month, day: day, dayState: dayState, theme: theme, userData: userData })),
|
|
500
|
+
onClickDay && isClickable(defaultHighlights, dayState) ? (React__namespace.createElement(core.Clickable, { onClick: function (ev) { return onClickDay(day, userData, ev); }, style: { width: "100%", height: "100%" }, borderRadius: "var(--swui-calendar-day-border-radius)" }, content)) : (React__namespace.createElement(React__namespace.Fragment, null, content))))))));
|
|
456
501
|
};
|
|
457
502
|
var isClickable = function (defaultHighlights, dayState) {
|
|
458
503
|
return !!dayHighlightSelect(dayState, defaultHighlights, ["enabled", "disabled"], [true, false], true);
|
|
459
504
|
};
|
|
460
505
|
|
|
461
506
|
function CalendarMonth(_a) {
|
|
462
|
-
var month = _a.month, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, statePerWeek = _a.statePerWeek, userDataPerWeek = _a.userDataPerWeek, onClickDay = _a.onClickDay, onClickWeek = _a.onClickWeek, onClickWeekDay = _a.onClickWeekDay, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekNumber = _a.renderWeekNumber, renderWeekDay = _a.renderWeekDay, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
|
|
507
|
+
var month = _a.month, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, statePerWeek = _a.statePerWeek, userDataPerWeek = _a.userDataPerWeek, minDate = _a.minDate, maxDate = _a.maxDate, onClickDay = _a.onClickDay, onClickWeek = _a.onClickWeek, onClickWeekDay = _a.onClickWeekDay, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekNumber = _a.renderWeekNumber, renderWeekDay = _a.renderWeekDay, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
|
|
463
508
|
var showWeekNumber = theme.WeekNumber.show;
|
|
464
|
-
return (
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
showWeekNumber && (
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
month.weeks[0].days.map(function (day) { return (
|
|
480
|
-
month.weeks.map(function (week) { return (
|
|
509
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
510
|
+
React__namespace.createElement(core.Box, { alignItems: "stretch" },
|
|
511
|
+
React__namespace.createElement(core.Row, { justifyContent: "space-between", alignItems: "center", height: "32px" },
|
|
512
|
+
React__namespace.createElement(core.Box, { alignItems: "center" }, headerLeftContent),
|
|
513
|
+
React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
514
|
+
React__namespace.createElement(core.Row, { width: "104px", justifyContent: "center" }, onClickMonth ? (React__namespace.createElement(elements.FlatButton, { onClick: function () { return onClickMonth(month); }, label: month.name })) : (React__namespace.createElement(core.Text, null, month.name))),
|
|
515
|
+
React__namespace.createElement(core.Space, null),
|
|
516
|
+
React__namespace.createElement(core.Row, { width: "64px", justifyContent: "center" }, onClickYear ? (React__namespace.createElement(elements.FlatButton, { onClick: function () { return onClickYear(month.year); }, label: String(month.year) })) : (React__namespace.createElement(core.Text, null, month.year)))),
|
|
517
|
+
React__namespace.createElement(core.Box, { alignItems: "center" }, headerRightContent)),
|
|
518
|
+
React__namespace.createElement("table", null,
|
|
519
|
+
React__namespace.createElement("tbody", null,
|
|
520
|
+
React__namespace.createElement("tr", null,
|
|
521
|
+
showWeekNumber && (React__namespace.createElement("td", null,
|
|
522
|
+
React__namespace.createElement(core.Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
523
|
+
React__namespace.createElement(core.Text, { size: "small", color: theme.CalendarMonth.headerTextColor }, "W")))),
|
|
524
|
+
month.weeks[0].days.map(function (day) { return (React__namespace.createElement("td", { key: day.name }, renderWeekDay ? (renderWeekDay(day.name, theme, onClickWeekDay)) : (React__namespace.createElement(WeekDayCell, { day: day, onClickWeekDay: onClickWeekDay, theme: theme })))); })),
|
|
525
|
+
month.weeks.map(function (week) { return (React__namespace.createElement(CalendarWeek, { key: week.weekNumber, month: month, week: week, dayComponent: dayComponent, statePerWeekDay: statePerWeek && statePerWeek[week.weekNumber], userDataPerWeekDay: userDataPerWeek && userDataPerWeek[week.weekNumber], onClickDay: onClickDay, onClickWeek: onClickWeek, theme: theme, renderWeekNumber: renderWeekNumber, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights, minDate: minDate, maxDate: maxDate })); }))))));
|
|
481
526
|
}
|
|
482
527
|
|
|
483
528
|
function styleInject(css, ref) {
|
|
@@ -507,23 +552,25 @@ function styleInject(css, ref) {
|
|
|
507
552
|
}
|
|
508
553
|
}
|
|
509
554
|
|
|
510
|
-
var css_248z = ".Calendar-module_calendar__Ztvgm {\n --swui-calendar-day-width: 40px;\n --swui-calendar-day-height: 38px;\n --swui-calendar-day-border-radius: 4px;\n\n /* Week number */\n\n --swui-calendar-week-number-bg-color: transparent;\n --swui-calendar-week-number-text-color: var(--lhds-color-ui-500);\n --swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);\n\n /* Week day */\n\n --swui-calendar-week-day-text-color: var(--lhds-color-ui-500);\n --swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);\n\n /* Wrapper */\n\n --swui-calendar-wrapper-selected-border: var(--swui-primary-action-color);\n --swui-calendar-wrapper-selected-background: var(--swui-primary-action-color);\n --swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);\n --swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);\n --swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);\n --swui-calendar-wrapper-today-background: var(--lhds-color-ui-200);\n\n /* Text */\n\n --swui-calendar-text-selected-color: #fff;\n --swui-calendar-text-disabled-color: var(--swui-text-disabled-color);\n --swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color);\n}\n\n .Calendar-module_calendar__Ztvgm table {\n border-spacing: 0 4px;\n }\n\n .Calendar-module_calendar__Ztvgm span {\n line-height: 100%;\n }\n\n .Calendar-module_calendar__Ztvgm tr td:last-child {\n border-top-right-radius: var(--swui-calendar-day-border-radius);\n border-bottom-right-radius: var(--swui-calendar-day-border-radius);\n }\n\n .Calendar-module_calendar__Ztvgm tr td:nth-child(2) {\n border-top-left-radius: var(--swui-calendar-day-border-radius);\n border-bottom-left-radius: var(--swui-calendar-day-border-radius);\n }\n\n .Calendar-module_calendar__Ztvgm td {\n padding: 0;\n width: var(--swui-calendar-day-width);\n height: var(--swui-calendar-day-height);\n }\n";
|
|
511
|
-
var styles = {"calendar":"Calendar-module_calendar__Ztvgm"};
|
|
512
|
-
styleInject(css_248z);
|
|
555
|
+
var css_248z$1 = ".Calendar-module_calendar__Ztvgm {\n --swui-calendar-day-width: 40px;\n --swui-calendar-day-height: 38px;\n --swui-calendar-day-border-radius: 4px;\n\n /* Week number */\n\n --swui-calendar-week-number-bg-color: transparent;\n --swui-calendar-week-number-text-color: var(--lhds-color-ui-500);\n --swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);\n\n /* Week day */\n\n --swui-calendar-week-day-text-color: var(--lhds-color-ui-500);\n --swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);\n\n /* Wrapper */\n\n --swui-calendar-wrapper-selected-border: var(--swui-primary-action-color);\n --swui-calendar-wrapper-selected-background: var(--swui-primary-action-color);\n --swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);\n --swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);\n --swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);\n --swui-calendar-wrapper-today-background: var(--lhds-color-ui-200);\n\n /* Text */\n\n --swui-calendar-text-selected-color: #fff;\n --swui-calendar-text-disabled-color: var(--swui-text-disabled-color);\n --swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color);\n}\n\n .Calendar-module_calendar__Ztvgm table {\n border-spacing: 0 4px;\n }\n\n .Calendar-module_calendar__Ztvgm span {\n line-height: 100%;\n }\n\n .Calendar-module_calendar__Ztvgm tr td:last-child {\n border-top-right-radius: var(--swui-calendar-day-border-radius);\n border-bottom-right-radius: var(--swui-calendar-day-border-radius);\n }\n\n .Calendar-module_calendar__Ztvgm tr td:nth-child(2) {\n border-top-left-radius: var(--swui-calendar-day-border-radius);\n border-bottom-left-radius: var(--swui-calendar-day-border-radius);\n }\n\n .Calendar-module_calendar__Ztvgm td {\n padding: 0;\n width: var(--swui-calendar-day-width);\n height: var(--swui-calendar-day-height);\n }\n";
|
|
556
|
+
var styles$1 = {"calendar":"Calendar-module_calendar__Ztvgm"};
|
|
557
|
+
styleInject(css_248z$1);
|
|
513
558
|
|
|
514
559
|
function CalendarPanel(_a) {
|
|
515
|
-
var monthRows = _a.monthRows, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, userDataPerMonth = _a.userDataPerMonth, statePerMonth = _a.statePerMonth, onClickDay = _a.onClickDay, onClickWeekDay = _a.onClickWeekDay, onClickWeek = _a.onClickWeek, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekDay = _a.renderWeekDay, renderWeekNumber = _a.renderWeekNumber, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c;
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
560
|
+
var monthRows = _a.monthRows, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, userDataPerMonth = _a.userDataPerMonth, statePerMonth = _a.statePerMonth, minDate = _a.minDate, maxDate = _a.maxDate, onClickDay = _a.onClickDay, onClickWeekDay = _a.onClickWeekDay, onClickWeek = _a.onClickWeek, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekDay = _a.renderWeekDay, renderWeekNumber = _a.renderWeekNumber, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c;
|
|
561
|
+
var minDateObj = React.useMemo(function () { return (minDate ? dateFns.parse(minDate, "yyyy-MM-dd", new Date()) : undefined); }, [minDate]);
|
|
562
|
+
var maxDateObj = React.useMemo(function () { return (maxDate ? dateFns.parse(maxDate, "yyyy-MM-dd", new Date()) : undefined); }, [maxDate]);
|
|
563
|
+
return (React__namespace.createElement("div", { className: styles$1.calendar }, monthRows.map(function (monthRow, rowIndex) { return (React__namespace.createElement(core.Spacing, { key: rowIndex },
|
|
564
|
+
React__namespace.createElement(core.Row, null, monthRow.map(function (month, index) { return (React__namespace.createElement(React__namespace.Fragment, { key: month.name },
|
|
565
|
+
index > 0 && React__namespace.createElement(core.Space, null),
|
|
566
|
+
React__namespace.createElement(CalendarMonth, { month: month, dayComponent: dayComponent, userDataPerWeek: userDataPerMonth && userDataPerMonth[month.monthString], statePerWeek: statePerMonth && statePerMonth[month.monthString], onClickDay: onClickDay, onClickWeekDay: onClickWeekDay, onClickWeek: onClickWeek, onClickMonth: onClickMonth, onClickYear: onClickYear, theme: theme, renderWeekNumber: renderWeekNumber, renderWeekDay: renderWeekDay, headerLeftContent: headerLeftContent, headerRightContent: headerRightContent, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights, minDate: minDateObj, maxDate: maxDateObj }))); })))); })));
|
|
520
567
|
}
|
|
521
568
|
function Calendar(props) {
|
|
522
569
|
var initialDate = getInitialDate(props.year, props.month, props.date);
|
|
523
570
|
var _a = calculateOverflowingMonth(initialDate.year, initialDate.month), year = _a.year, month = _a.month;
|
|
524
571
|
var monthRows = getMonthRows(year, month, props.numMonths, props.monthsPerRow);
|
|
525
572
|
var statePerMonth = useHighlightToday(props.highlightToday, props.statePerMonth);
|
|
526
|
-
return (
|
|
573
|
+
return (React__namespace.createElement(CalendarPanel, __assign({ year: year, month: month, monthRows: monthRows }, props, { statePerMonth: statePerMonth })));
|
|
527
574
|
}
|
|
528
575
|
var getInitialDate = function (year, month, date) {
|
|
529
576
|
if (month && year) {
|
|
@@ -583,18 +630,18 @@ var useSelectedMonthStepperLogic = function (dateInFocus, setDateInFocus, months
|
|
|
583
630
|
|
|
584
631
|
var WithMonthSwitcherBelow = function (_a) {
|
|
585
632
|
var children = _a.children, prevMonth = _a.prevMonth, nextMonth = _a.nextMonth, prevYear = _a.prevYear, nextYear = _a.nextYear;
|
|
586
|
-
return (
|
|
633
|
+
return (React__namespace.createElement("div", null,
|
|
587
634
|
children,
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
635
|
+
React__namespace.createElement(core.Indent, null,
|
|
636
|
+
React__namespace.createElement(core.Row, null,
|
|
637
|
+
React__namespace.createElement(elements.FlatButton, { onClick: prevYear, leftIcon: faAngleDoubleLeft.faAngleDoubleLeft }),
|
|
638
|
+
React__namespace.createElement(core.Space, null),
|
|
639
|
+
React__namespace.createElement(elements.FlatButton, { onClick: prevMonth, leftIcon: faAngleLeft.faAngleLeft }),
|
|
640
|
+
React__namespace.createElement(core.Indent, { num: 2 }),
|
|
641
|
+
React__namespace.createElement(elements.FlatButton, { onClick: nextMonth, leftIcon: faAngleRight.faAngleRight }),
|
|
642
|
+
React__namespace.createElement(core.Space, null),
|
|
643
|
+
React__namespace.createElement(elements.FlatButton, { onClick: nextYear, leftIcon: faAngleDoubleRight.faAngleDoubleRight }))),
|
|
644
|
+
React__namespace.createElement(core.Space, null)));
|
|
598
645
|
};
|
|
599
646
|
|
|
600
647
|
var MonthPickerCell = function (_a) {
|
|
@@ -604,7 +651,7 @@ var MonthPickerCell = function (_a) {
|
|
|
604
651
|
now.setMonth(month);
|
|
605
652
|
return dateFns.format(now, "MMM");
|
|
606
653
|
}, [month]);
|
|
607
|
-
return (
|
|
654
|
+
return (React__namespace.createElement(core.Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === month ? (React__namespace.createElement(elements.PrimaryButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } })) : (React__namespace.createElement(elements.FlatButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } }))));
|
|
608
655
|
};
|
|
609
656
|
|
|
610
657
|
var monthMatrix = [
|
|
@@ -615,7 +662,7 @@ var monthMatrix = [
|
|
|
615
662
|
];
|
|
616
663
|
var MonthPicker = function (_a) {
|
|
617
664
|
var value = _a.value, onValueChange = _a.onValueChange;
|
|
618
|
-
return (
|
|
665
|
+
return (React__namespace.createElement(core.Column, null, monthMatrix.map(function (monthRow) { return (React__namespace.createElement(core.Row, { key: monthRow[0] }, monthRow.map(function (month) { return (React__namespace.createElement(MonthPickerCell, { key: month, month: month, onValueChange: onValueChange, value: value })); }))); })));
|
|
619
666
|
};
|
|
620
667
|
|
|
621
668
|
var createStandardDateRangePresets = function (now) { return [
|
|
@@ -645,21 +692,21 @@ var PresetPicker = function (_a) {
|
|
|
645
692
|
var _c = React.useState(0), pageIndex = _c[0], setPageIndex = _c[1];
|
|
646
693
|
var pages = React.useMemo(function () { return createStandardDateRangePresets(new Date()); }, []);
|
|
647
694
|
var currentPage = (_b = pages[pageIndex]) !== null && _b !== void 0 ? _b : pages[0];
|
|
648
|
-
return (
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
695
|
+
return (React__namespace.createElement(core.Column, null,
|
|
696
|
+
React__namespace.createElement(core.Row, { justifyContent: "space-between", alignItems: "center", width: "200px" },
|
|
697
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", leftIcon: faAngleLeft.faAngleLeft, disabled: pageIndex === 0, onClick: function () { return setPageIndex(pageIndex - 1); } }),
|
|
698
|
+
React__namespace.createElement(core.Text, null, currentPage.label),
|
|
699
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", leftIcon: faAngleRight.faAngleRight, disabled: pageIndex === pages.length - 1, onClick: function () { return setPageIndex(pageIndex + 1); } })),
|
|
700
|
+
React__namespace.createElement(core.Space, null),
|
|
701
|
+
React__namespace.createElement(core.Column, { alignItems: "center" }, currentPage.presets.map(function (preset) { return (React__namespace.createElement(React__namespace.Fragment, { key: preset.label },
|
|
702
|
+
React__namespace.createElement(elements.PrimaryButton, { label: preset.label, onClick: function () { return onClickPreset(preset); } }),
|
|
703
|
+
React__namespace.createElement(core.Space, null))); }))));
|
|
657
704
|
};
|
|
658
705
|
|
|
659
706
|
var YearPickerCell = function (_a) {
|
|
660
707
|
var value = _a.value, onValueChange = _a.onValueChange, year = _a.year;
|
|
661
708
|
var label = String(year);
|
|
662
|
-
return (
|
|
709
|
+
return (React__namespace.createElement(core.Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === year ? (React__namespace.createElement(elements.PrimaryButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } })) : (React__namespace.createElement(elements.FlatButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } }))));
|
|
663
710
|
};
|
|
664
711
|
|
|
665
712
|
var YearPicker = function (_a) {
|
|
@@ -677,12 +724,12 @@ var YearPicker = function (_a) {
|
|
|
677
724
|
React.useEffect(function () {
|
|
678
725
|
setLastYear(function (prev) { return calculateLastYearInFocus(value, prev); });
|
|
679
726
|
}, [value]);
|
|
680
|
-
return (
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
727
|
+
return (React__namespace.createElement(core.Row, null,
|
|
728
|
+
React__namespace.createElement(core.Column, { justifyContent: "center" },
|
|
729
|
+
React__namespace.createElement(elements.FlatButton, { leftIcon: faCaretLeft.faCaretLeft, onClick: function () { return setLastYear(lastYear - 3); } })),
|
|
730
|
+
React__namespace.createElement(core.Column, null, yearRows.map(function (yearRow) { return (React__namespace.createElement(core.Row, { key: yearRow[0] }, yearRow.map(function (year) { return (React__namespace.createElement(YearPickerCell, { key: year, year: year, onValueChange: onValueChange, value: value })); }))); })),
|
|
731
|
+
React__namespace.createElement(core.Column, { justifyContent: "center" },
|
|
732
|
+
React__namespace.createElement(elements.FlatButton, { leftIcon: faCaretRight.faCaretRight, onClick: function () { return setLastYear(lastYear + 3); } }))));
|
|
686
733
|
};
|
|
687
734
|
var calculateLastYearInFocus = function (value, lastYear) {
|
|
688
735
|
if (value == null) {
|
|
@@ -730,42 +777,42 @@ var CalendarWithMonthYearPickers = function CalendarWithMonthYearPickers(_a) {
|
|
|
730
777
|
}, [setCurrentPanel]);
|
|
731
778
|
switch (currentPanel) {
|
|
732
779
|
case "calendar":
|
|
733
|
-
return (
|
|
734
|
-
|
|
780
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
781
|
+
React__namespace.createElement(Calendar, __assign({}, props, { date: dateInFocus, onClickYear: onClickYear, onClickMonth: onClickMonth }))));
|
|
735
782
|
case "month":
|
|
736
|
-
return (
|
|
783
|
+
return (React__namespace.createElement(MonthPicker, { value: dateInFocus.getMonth(), onValueChange: onChangeSelectedMonth }));
|
|
737
784
|
case "year":
|
|
738
|
-
return (
|
|
785
|
+
return (React__namespace.createElement(YearPicker, { value: dateInFocus.getFullYear(), onValueChange: onChangeSelectedYear }));
|
|
739
786
|
case "presets":
|
|
740
|
-
return
|
|
787
|
+
return React__namespace.createElement(PresetPicker, { onClickPreset: function () { } });
|
|
741
788
|
default:
|
|
742
|
-
return (
|
|
743
|
-
|
|
789
|
+
return (React__namespace.createElement(core.Box, null,
|
|
790
|
+
React__namespace.createElement(elements.PrimaryButton, { label: "Show calendar", onClick: function () { return setCurrentPanel("calendar"); } })));
|
|
744
791
|
}
|
|
745
792
|
};
|
|
746
793
|
|
|
747
794
|
var noop = function () { };
|
|
748
795
|
function CalendarWithMonthSwitcher(_a) {
|
|
749
|
-
var monthSwitcherPlacement = _a.monthSwitcherPlacement, _b = _a.theme, theme = _b === void 0 ? defaultCalendarTheme : _b, dateInFocus = _a.dateInFocus, setDateInFocus = _a.setDateInFocus, currentPanel = _a.currentPanel, setCurrentPanel = _a.setCurrentPanel, _c = _a.onSelectPreset, onSelectPreset = _c === void 0 ? noop : _c, calendarProps = __rest(_a, ["monthSwitcherPlacement", "theme", "dateInFocus", "setDateInFocus", "currentPanel", "setCurrentPanel", "onSelectPreset"]);
|
|
750
|
-
var
|
|
796
|
+
var monthSwitcherPlacement = _a.monthSwitcherPlacement, _b = _a.theme, theme = _b === void 0 ? defaultCalendarTheme : _b, dateInFocus = _a.dateInFocus, setDateInFocus = _a.setDateInFocus, currentPanel = _a.currentPanel, setCurrentPanel = _a.setCurrentPanel, _c = _a.onSelectPreset, onSelectPreset = _c === void 0 ? noop : _c, _d = _a.hideYearPagination, hideYearPagination = _d === void 0 ? false : _d, calendarProps = __rest(_a, ["monthSwitcherPlacement", "theme", "dateInFocus", "setDateInFocus", "currentPanel", "setCurrentPanel", "onSelectPreset", "hideYearPagination"]);
|
|
797
|
+
var _e = useSelectedMonthStepperLogic(dateInFocus, setDateInFocus, calendarProps.monthsPerRow, calendarProps.numMonths), nextMonth = _e.nextMonth, prevMonth = _e.prevMonth, nextYear = _e.nextYear, prevYear = _e.prevYear;
|
|
751
798
|
var placement = fallbackIfNoPlacement(monthSwitcherPlacement, calendarProps.numMonths);
|
|
752
799
|
switch (placement) {
|
|
753
800
|
case "below": {
|
|
754
|
-
return (
|
|
755
|
-
|
|
801
|
+
return (React__namespace.createElement(WithMonthSwitcherBelow, { theme: theme, nextMonth: nextMonth, prevMonth: prevMonth, nextYear: nextYear, prevYear: prevYear },
|
|
802
|
+
React__namespace.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus }))));
|
|
756
803
|
}
|
|
757
804
|
case "header": {
|
|
758
|
-
return (
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
805
|
+
return (React__namespace.createElement(core.Column, null,
|
|
806
|
+
React__namespace.createElement(CalendarWithMonthYearPickers, __assign({}, calendarProps, { theme: theme, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, onSelectPreset: onSelectPreset, headerLeftContent: React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
807
|
+
!hideYearPagination && (React__namespace.createElement(elements.FlatButton, { size: "small", onClick: prevYear, leftIcon: faAngleDoubleLeft.faAngleDoubleLeft })),
|
|
808
|
+
React__namespace.createElement(core.Space, null),
|
|
809
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", onClick: prevMonth, leftIcon: faAngleLeft.faAngleLeft })), headerRightContent: React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
810
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", onClick: nextMonth, leftIcon: faAngleRight.faAngleRight }),
|
|
811
|
+
React__namespace.createElement(core.Space, null),
|
|
812
|
+
!hideYearPagination && (React__namespace.createElement(elements.FlatButton, { size: "small", onClick: nextYear, leftIcon: faAngleDoubleRight.faAngleDoubleRight }))) }))));
|
|
766
813
|
}
|
|
767
814
|
default: {
|
|
768
|
-
return (
|
|
815
|
+
return (React__namespace.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus })));
|
|
769
816
|
}
|
|
770
817
|
}
|
|
771
818
|
}
|
|
@@ -773,97 +820,65 @@ var fallbackIfNoPlacement = function (monthSwitcherPlacement, numMonths) {
|
|
|
773
820
|
return monthSwitcherPlacement || (numMonths || 1) > 1 ? "below" : "header";
|
|
774
821
|
};
|
|
775
822
|
|
|
776
|
-
var
|
|
777
|
-
startDate:
|
|
778
|
-
|
|
823
|
+
var dateRangeToStrings = function (dateRange) { return ({
|
|
824
|
+
startDate: dateRange.startDate
|
|
825
|
+
? dateFns.format(dateRange.startDate, "yyyy-MM-dd")
|
|
826
|
+
: undefined,
|
|
827
|
+
endDate: dateRange.endDate
|
|
828
|
+
? dateFns.format(dateRange.endDate, "yyyy-MM-dd")
|
|
829
|
+
: undefined,
|
|
779
830
|
}); };
|
|
780
|
-
var
|
|
831
|
+
var stringsToDateRange = function (_a) {
|
|
832
|
+
var startDate = _a.startDate, endDate = _a.endDate;
|
|
781
833
|
var now = new Date();
|
|
782
834
|
return {
|
|
783
|
-
startDate: (
|
|
784
|
-
|
|
785
|
-
undefined,
|
|
786
|
-
endDate: (interval.endDate &&
|
|
787
|
-
dateFns.parse(interval.endDate, DateFormats.fullDate, now)) ||
|
|
788
|
-
undefined,
|
|
835
|
+
startDate: startDate ? dateFns.parse(startDate, "yyyy-MM-dd", now) : undefined,
|
|
836
|
+
endDate: endDate ? dateFns.parse(endDate, "yyyy-MM-dd", now) : undefined,
|
|
789
837
|
};
|
|
838
|
+
};
|
|
839
|
+
|
|
840
|
+
var isDateRangeInvalid = function (_a) {
|
|
841
|
+
var startDate = _a.startDate, endDate = _a.endDate;
|
|
842
|
+
return Boolean(startDate &&
|
|
843
|
+
endDate &&
|
|
844
|
+
!dateFns.isSameDay(startDate, endDate) &&
|
|
845
|
+
dateFns.isAfter(startDate, endDate));
|
|
790
846
|
};
|
|
791
|
-
var
|
|
792
|
-
if (
|
|
793
|
-
interval.endDate &&
|
|
794
|
-
dateFns.isAfter(interval.startDate, interval.endDate)) {
|
|
847
|
+
var toggleDatesIfEndIsEarlierThanStart = function (dateRange) {
|
|
848
|
+
if (isDateRangeInvalid(dateRange)) {
|
|
795
849
|
return {
|
|
796
|
-
startDate:
|
|
797
|
-
endDate:
|
|
850
|
+
startDate: dateRange.endDate,
|
|
851
|
+
endDate: dateRange.startDate,
|
|
798
852
|
};
|
|
799
853
|
}
|
|
800
|
-
return
|
|
854
|
+
return dateRange;
|
|
855
|
+
};
|
|
856
|
+
var toggleDateStringsIfEndIsEarlierThanStart = function (dateRange) {
|
|
857
|
+
if (dateRange.startDate && dateRange.endDate) {
|
|
858
|
+
return dateRangeToStrings(toggleDatesIfEndIsEarlierThanStart(stringsToDateRange(dateRange)));
|
|
859
|
+
}
|
|
860
|
+
return dateRange;
|
|
801
861
|
};
|
|
802
862
|
|
|
803
|
-
var useDateRangeOnClickDayHandler = function (
|
|
863
|
+
var useDateRangeOnClickDayHandler = function (value, onValueChange, focusedInput, setFocusedInput) {
|
|
804
864
|
return React.useCallback(function (day) {
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
}
|
|
812
|
-
}
|
|
813
|
-
else {
|
|
814
|
-
setStartDate(day.date);
|
|
815
|
-
setFocusedInput("endDate");
|
|
816
|
-
if (onChange) {
|
|
817
|
-
onChange(ensureStartIsFirst({
|
|
818
|
-
startDate: day.date,
|
|
819
|
-
endDate: endDate,
|
|
820
|
-
}));
|
|
821
|
-
}
|
|
822
|
-
}
|
|
823
|
-
}
|
|
824
|
-
else if (focusedInput === "endDate") {
|
|
825
|
-
if (startDate && dateFns.isAfter(startDate, day.date)) {
|
|
826
|
-
setStartDate(day.date);
|
|
827
|
-
setEndDate(startDate);
|
|
828
|
-
if (onChange) {
|
|
829
|
-
onChange({ startDate: day.date, endDate: startDate });
|
|
830
|
-
}
|
|
831
|
-
}
|
|
832
|
-
else {
|
|
833
|
-
setEndDate(day.date);
|
|
834
|
-
setFocusedInput("startDate");
|
|
835
|
-
if (onChange) {
|
|
836
|
-
onChange(ensureStartIsFirst({
|
|
837
|
-
startDate: startDate,
|
|
838
|
-
endDate: day.date,
|
|
839
|
-
}));
|
|
840
|
-
}
|
|
841
|
-
}
|
|
865
|
+
var dateRange = {
|
|
866
|
+
startDate: focusedInput === "startDate" ? day.date : value === null || value === void 0 ? void 0 : value.startDate,
|
|
867
|
+
endDate: focusedInput === "endDate" ? day.date : value === null || value === void 0 ? void 0 : value.endDate,
|
|
868
|
+
};
|
|
869
|
+
if (!isDateRangeInvalid(dateRange)) {
|
|
870
|
+
setFocusedInput(focusedInput === "startDate" ? "endDate" : "startDate");
|
|
842
871
|
}
|
|
872
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(toggleDatesIfEndIsEarlierThanStart(dateRange));
|
|
843
873
|
}, [
|
|
844
874
|
focusedInput,
|
|
845
|
-
|
|
846
|
-
startDate,
|
|
847
|
-
setStartDate,
|
|
848
|
-
setEndDate,
|
|
849
|
-
onChange,
|
|
875
|
+
onValueChange,
|
|
850
876
|
setFocusedInput,
|
|
877
|
+
value === null || value === void 0 ? void 0 : value.endDate,
|
|
878
|
+
value === null || value === void 0 ? void 0 : value.startDate,
|
|
851
879
|
]);
|
|
852
880
|
};
|
|
853
881
|
|
|
854
|
-
var toggleDatesIfEndIsEarlierThanStart = function (startDate, endDate) {
|
|
855
|
-
if (startDate && endDate && dateFns.isAfter(startDate, endDate)) {
|
|
856
|
-
return {
|
|
857
|
-
startDate: endDate,
|
|
858
|
-
endDate: startDate,
|
|
859
|
-
};
|
|
860
|
-
}
|
|
861
|
-
return {
|
|
862
|
-
startDate: startDate,
|
|
863
|
-
endDate: endDate,
|
|
864
|
-
};
|
|
865
|
-
};
|
|
866
|
-
|
|
867
882
|
var useInternalPanelState = function (onChangePanel) {
|
|
868
883
|
var _a = React.useState("calendar"), currentPanel = _a[0], _setCurrentPanel = _a[1];
|
|
869
884
|
var setCurrentPanel = React.useCallback(function (currentPanel) {
|
|
@@ -877,14 +892,13 @@ var useInternalPanelState = function (onChangePanel) {
|
|
|
877
892
|
};
|
|
878
893
|
|
|
879
894
|
var useDateRangeSelection = function (_a) {
|
|
880
|
-
var focusedInput = _a.focusedInput,
|
|
895
|
+
var focusedInput = _a.focusedInput, value = _a.value, onValueChange = _a.onValueChange, setFocusedInput = _a.setFocusedInput, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
|
|
881
896
|
var _b = useInternalPanelState(onChangePanel), currentPanel = _b.currentPanel, setCurrentPanel = _b.setCurrentPanel;
|
|
882
897
|
var _c = React.useState(function () { return new Date(); }), dateInFocus = _c[0], setDateInFocus = _c[1];
|
|
883
|
-
var onClickDay = useDateRangeOnClickDayHandler(
|
|
884
|
-
var dates = React.useMemo(function () { return toggleDatesIfEndIsEarlierThanStart(startDate, endDate); }, [startDate, endDate]);
|
|
898
|
+
var onClickDay = useDateRangeOnClickDayHandler(value, onValueChange, focusedInput, setFocusedInput);
|
|
885
899
|
var statePerMonthWithSelection = React.useMemo(function () {
|
|
886
|
-
return buildDayStateForDateRange(statePerMonth,
|
|
887
|
-
}, [statePerMonth,
|
|
900
|
+
return buildDayStateForDateRange(statePerMonth, value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate);
|
|
901
|
+
}, [statePerMonth, value === null || value === void 0 ? void 0 : value.endDate, value === null || value === void 0 ? void 0 : value.startDate]);
|
|
888
902
|
return {
|
|
889
903
|
onClickDay: onClickDay,
|
|
890
904
|
statePerMonth: statePerMonthWithSelection,
|
|
@@ -897,7 +911,7 @@ var useDateRangeSelection = function (_a) {
|
|
|
897
911
|
|
|
898
912
|
function DateRangeCalendar(props) {
|
|
899
913
|
var dateRangeSelectionProps = useDateRangeSelection(props);
|
|
900
|
-
return (
|
|
914
|
+
return (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, dateRangeSelectionProps)));
|
|
901
915
|
}
|
|
902
916
|
|
|
903
917
|
var useDateRangeCalendarState = function () {
|
|
@@ -944,7 +958,7 @@ var useSingleDateSelection = function (_a) {
|
|
|
944
958
|
|
|
945
959
|
function SingleDateCalendar(props) {
|
|
946
960
|
var singleDateSelectionProps = useSingleDateSelection(props);
|
|
947
|
-
return (
|
|
961
|
+
return (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleDateSelectionProps)));
|
|
948
962
|
}
|
|
949
963
|
|
|
950
964
|
var useMultiDateSelection = function (_a) {
|
|
@@ -960,7 +974,7 @@ var useMultiDateSelection = function (_a) {
|
|
|
960
974
|
onChange(value.filter(function (v) { return !dateFns.isSameDay(v, day.date); }));
|
|
961
975
|
}
|
|
962
976
|
else {
|
|
963
|
-
onChange(
|
|
977
|
+
onChange(__spreadArray(__spreadArray([], (value || []), true), [day.date], false));
|
|
964
978
|
}
|
|
965
979
|
}, [onChange, value]);
|
|
966
980
|
var statePerMonthWithSelectedDate = React.useMemo(function () {
|
|
@@ -981,7 +995,7 @@ var useMultiDateSelection = function (_a) {
|
|
|
981
995
|
|
|
982
996
|
function MultiDateCalendar(props) {
|
|
983
997
|
var selectionProps = useMultiDateSelection(props);
|
|
984
|
-
return
|
|
998
|
+
return React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
|
|
985
999
|
}
|
|
986
1000
|
|
|
987
1001
|
var useSingleWeekSelection = function (_a) {
|
|
@@ -1046,7 +1060,7 @@ var getWeekDataFromWeekString = function (week) {
|
|
|
1046
1060
|
|
|
1047
1061
|
function SingleWeekCalendar(props) {
|
|
1048
1062
|
var singleWeekSelectionProps = useSingleWeekSelection(props);
|
|
1049
|
-
return (
|
|
1063
|
+
return (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleWeekSelectionProps)));
|
|
1050
1064
|
}
|
|
1051
1065
|
|
|
1052
1066
|
var removeDateIfExist = function (list, date) {
|
|
@@ -1057,46 +1071,46 @@ var listContainsDate = function (list, date) {
|
|
|
1057
1071
|
};
|
|
1058
1072
|
|
|
1059
1073
|
var useDateRangeExclusionSelection = function (_a) {
|
|
1060
|
-
var
|
|
1061
|
-
var _b = React.useState(),
|
|
1062
|
-
var _c = React.useState(),
|
|
1063
|
-
var _d =
|
|
1064
|
-
var _e =
|
|
1065
|
-
var _f = React.useState(function () { var _a; return (_a = (focusedInput && (value === null || value === void 0 ? void 0 : value[focusedInput]))) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _f[0], setDateInFocus = _f[1];
|
|
1074
|
+
var value = _a.value, onValueChange = _a.onValueChange, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
|
|
1075
|
+
var _b = React.useState(), dateRange = _b[0], setDateRange = _b[1];
|
|
1076
|
+
var _c = React.useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
|
|
1077
|
+
var _d = useInternalPanelState(onChangePanel), currentPanel = _d.currentPanel, setCurrentPanel = _d.setCurrentPanel;
|
|
1078
|
+
var _e = React.useState(function () { var _a; return (_a = (focusedInput && (value === null || value === void 0 ? void 0 : value[focusedInput]))) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _e[0], setDateInFocus = _e[1];
|
|
1066
1079
|
var onChangeHandler = React.useCallback(function (value) {
|
|
1080
|
+
setDateRange(value);
|
|
1067
1081
|
var startDate = value.startDate, endDate = value.endDate;
|
|
1068
|
-
if (
|
|
1082
|
+
if (onValueChange) {
|
|
1069
1083
|
if (startDate && endDate) {
|
|
1070
1084
|
var dates = dateFns.eachDayOfInterval({ start: startDate, end: endDate });
|
|
1071
|
-
|
|
1085
|
+
onValueChange(dates);
|
|
1072
1086
|
}
|
|
1073
1087
|
else if (startDate) {
|
|
1074
|
-
|
|
1088
|
+
onValueChange([startDate]);
|
|
1075
1089
|
}
|
|
1076
1090
|
else if (endDate) {
|
|
1077
|
-
|
|
1091
|
+
onValueChange([endDate]);
|
|
1078
1092
|
}
|
|
1079
1093
|
}
|
|
1080
|
-
}, [
|
|
1081
|
-
var onClickDayRange = useDateRangeOnClickDayHandler(
|
|
1094
|
+
}, [onValueChange]);
|
|
1095
|
+
var onClickDayRange = useDateRangeOnClickDayHandler(dateRange, onChangeHandler, focusedInput, setFocusedInput);
|
|
1082
1096
|
var onClickDay = React.useCallback(function (day, userData, ev) {
|
|
1083
|
-
if (
|
|
1097
|
+
if (onValueChange) {
|
|
1084
1098
|
if (ev.ctrlKey || ev.metaKey) {
|
|
1085
1099
|
if (!value) {
|
|
1086
|
-
|
|
1100
|
+
onValueChange([day.date]);
|
|
1087
1101
|
}
|
|
1088
1102
|
else if (listContainsDate(value, day.date)) {
|
|
1089
|
-
|
|
1103
|
+
onValueChange(removeDateIfExist(value, day.date));
|
|
1090
1104
|
}
|
|
1091
1105
|
else {
|
|
1092
|
-
|
|
1106
|
+
onValueChange(__spreadArray(__spreadArray([], value, true), [day.date], false));
|
|
1093
1107
|
}
|
|
1094
1108
|
}
|
|
1095
1109
|
else {
|
|
1096
1110
|
onClickDayRange(day, userData, ev);
|
|
1097
1111
|
}
|
|
1098
1112
|
}
|
|
1099
|
-
}, [
|
|
1113
|
+
}, [onValueChange, onClickDayRange, value]);
|
|
1100
1114
|
var statePerMonthWithSelectedDate = React.useMemo(function () {
|
|
1101
1115
|
return addHighlighting(statePerMonth, value);
|
|
1102
1116
|
}, [statePerMonth, value]);
|
|
@@ -1120,7 +1134,7 @@ var addHighlighting = function (statePerMonth, dateList) {
|
|
|
1120
1134
|
|
|
1121
1135
|
function DateRangeExclusionCalendar(props) {
|
|
1122
1136
|
var selectionProps = useDateRangeExclusionSelection(props);
|
|
1123
|
-
return
|
|
1137
|
+
return React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
|
|
1124
1138
|
}
|
|
1125
1139
|
|
|
1126
1140
|
var defaultPopoverPlacement = "bottom";
|
|
@@ -1163,16 +1177,18 @@ var useDateInput = function (onChange, onClose, openOnMount) {
|
|
|
1163
1177
|
};
|
|
1164
1178
|
};
|
|
1165
1179
|
|
|
1180
|
+
var defaultMaxDate = "2999-12-31";
|
|
1181
|
+
|
|
1166
1182
|
var DateInput = function (_a) {
|
|
1167
|
-
var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "Enter date" : _c, value = _a.value, _d = _a.zIndex, zIndex = _d === void 0 ? 100 : _d, _e = _a.calendarTheme, calendarTheme = _e === void 0 ? defaultCalendarTheme : _e, calendarProps = _a.calendarProps, openOnMount = _a.openOnMount, onClose = _a.onClose, onChange = _a.onChange, portalTarget = _a.portalTarget, variant = _a.variant, width = _a.width;
|
|
1168
|
-
var
|
|
1169
|
-
var
|
|
1170
|
-
return (
|
|
1171
|
-
|
|
1172
|
-
|
|
1183
|
+
var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "Enter date" : _c, value = _a.value, _d = _a.zIndex, zIndex = _d === void 0 ? 100 : _d, _e = _a.calendarTheme, calendarTheme = _e === void 0 ? defaultCalendarTheme : _e, calendarProps = _a.calendarProps, openOnMount = _a.openOnMount, onClose = _a.onClose, onChange = _a.onChange, portalTarget = _a.portalTarget, variant = _a.variant, width = _a.width, minDate = _a.minDate, _f = _a.maxDate, maxDate = _f === void 0 ? defaultMaxDate : _f;
|
|
1184
|
+
var _g = useDateInput(onChange, onClose, openOnMount), hideCalendar = _g.hideCalendar, showingCalendar = _g.showingCalendar, onSelectDate = _g.onSelectDate, showCalendar = _g.showCalendar;
|
|
1185
|
+
var _h = useCalendarPopoverUpdater(), tippyRef = _h.tippyRef, onChangePanel = _h.onChangePanel;
|
|
1186
|
+
return (React__namespace.createElement(core.Box, { width: width },
|
|
1187
|
+
React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, visible: showingCalendar, onClickOutside: hideCalendar, placement: defaultPopoverPlacement, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", tippyRef: tippyRef, content: React__namespace.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel, minDate: minDate, maxDate: maxDate })) },
|
|
1188
|
+
React__namespace.createElement(forms.TextInput, { type: "date", iconRight: faCalendarAlt.faCalendarAlt, onFocus: showCalendar, onClickRight: showCalendar, value: value ? dateFns.format(value, displayFormat) : "", placeholder: placeholder, size: 9, autoFocus: openOnMount, variant: variant, min: minDate, max: maxDate }))));
|
|
1173
1189
|
};
|
|
1174
1190
|
|
|
1175
|
-
var useDateRangeInput = function (value,
|
|
1191
|
+
var useDateRangeInput = function (value, onValueChange) {
|
|
1176
1192
|
var startDateInputRef = React.useRef(null);
|
|
1177
1193
|
var endDateInputRef = React.useRef(null);
|
|
1178
1194
|
var _a = React.useState(false), showingCalendar = _a[0], setShowingCalendar = _a[1];
|
|
@@ -1192,11 +1208,11 @@ var useDateRangeInput = function (value, onChange) {
|
|
|
1192
1208
|
}, [setShowingCalendar]);
|
|
1193
1209
|
var onClickDay = React.useCallback(function (day) {
|
|
1194
1210
|
if (focusedInput === "startDate") {
|
|
1195
|
-
|
|
1211
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
|
|
1196
1212
|
startDate: day.date,
|
|
1197
|
-
endDate: value.endDate,
|
|
1213
|
+
endDate: value === null || value === void 0 ? void 0 : value.endDate,
|
|
1198
1214
|
});
|
|
1199
|
-
if (!value.endDate) {
|
|
1215
|
+
if (!(value === null || value === void 0 ? void 0 : value.endDate)) {
|
|
1200
1216
|
setFocusedInput("endDate");
|
|
1201
1217
|
endDateInputRef.current && endDateInputRef.current.focus();
|
|
1202
1218
|
}
|
|
@@ -1205,11 +1221,11 @@ var useDateRangeInput = function (value, onChange) {
|
|
|
1205
1221
|
}
|
|
1206
1222
|
}
|
|
1207
1223
|
else if (focusedInput === "endDate") {
|
|
1208
|
-
|
|
1209
|
-
startDate: value.startDate,
|
|
1224
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
|
|
1225
|
+
startDate: value === null || value === void 0 ? void 0 : value.startDate,
|
|
1210
1226
|
endDate: day.date,
|
|
1211
1227
|
});
|
|
1212
|
-
if (!value.startDate) {
|
|
1228
|
+
if (!(value === null || value === void 0 ? void 0 : value.startDate)) {
|
|
1213
1229
|
setFocusedInput("startDate");
|
|
1214
1230
|
startDateInputRef.current && startDateInputRef.current.focus();
|
|
1215
1231
|
}
|
|
@@ -1217,12 +1233,12 @@ var useDateRangeInput = function (value, onChange) {
|
|
|
1217
1233
|
setTimeout(hideCalendar, 150);
|
|
1218
1234
|
}
|
|
1219
1235
|
}
|
|
1220
|
-
}, [focusedInput,
|
|
1236
|
+
}, [focusedInput, onValueChange, setFocusedInput, hideCalendar, value]);
|
|
1221
1237
|
var startDateIsAfterEnd = React.useMemo(function () {
|
|
1222
|
-
return value.startDate &&
|
|
1223
|
-
value.endDate &&
|
|
1238
|
+
return (value === null || value === void 0 ? void 0 : value.startDate) &&
|
|
1239
|
+
(value === null || value === void 0 ? void 0 : value.endDate) &&
|
|
1224
1240
|
dateFns.isAfter(value.startDate, value.endDate);
|
|
1225
|
-
}, [value.startDate, value.endDate]);
|
|
1241
|
+
}, [value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate]);
|
|
1226
1242
|
return {
|
|
1227
1243
|
showingCalendar: showingCalendar,
|
|
1228
1244
|
hideCalendar: hideCalendar,
|
|
@@ -1241,24 +1257,26 @@ var useDateRangeInput = function (value, onChange) {
|
|
|
1241
1257
|
* @deprecated Please use DateRangeDualTextInput instead.
|
|
1242
1258
|
*/
|
|
1243
1259
|
var DateRangeInput = function (_a) {
|
|
1244
|
-
var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholderStartDate, placeholderStartDate = _c === void 0 ? "Start date" : _c, _d = _a.placeholderEndDate, placeholderEndDate = _d === void 0 ? "End date" : _d, portalTarget = _a.portalTarget, value = _a.value,
|
|
1245
|
-
var
|
|
1246
|
-
var
|
|
1247
|
-
var
|
|
1248
|
-
var statePerMonth = React.useMemo(function () {
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1260
|
+
var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholderStartDate, placeholderStartDate = _c === void 0 ? "Start date" : _c, _d = _a.placeholderEndDate, placeholderEndDate = _d === void 0 ? "End date" : _d, portalTarget = _a.portalTarget, value = _a.value, onValueChange = _a.onValueChange, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, width = _a.width, _f = _a.calendarTheme, calendarTheme = _f === void 0 ? defaultCalendarTheme : _f, calendarProps = _a.calendarProps, minDate = _a.minDate, _g = _a.maxDate, maxDate = _g === void 0 ? defaultMaxDate : _g;
|
|
1261
|
+
var _h = React.useState(function () { var _a; return (_a = (focusedInput && (value === null || value === void 0 ? void 0 : value[focusedInput]))) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _h[0], setDateInFocus = _h[1];
|
|
1262
|
+
var _j = React.useState("calendar"), currentPanel = _j[0], setCurrentPanel = _j[1];
|
|
1263
|
+
var _k = useDateRangeInput(value, onValueChange), hideCalendar = _k.hideCalendar, showCalendarEndDate = _k.showCalendarEndDate, showCalendarStartDate = _k.showCalendarStartDate, showingCalendar = _k.showingCalendar, focusedInput = _k.focusedInput, startDateInputRef = _k.startDateInputRef, endDateInputRef = _k.endDateInputRef, onClickDay = _k.onClickDay, startDateIsAfterEnd = _k.startDateIsAfterEnd;
|
|
1264
|
+
var statePerMonth = React.useMemo(function () {
|
|
1265
|
+
return buildDayStateForDateRange(undefined, value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate);
|
|
1266
|
+
}, [value]);
|
|
1267
|
+
return (React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) },
|
|
1268
|
+
React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
1269
|
+
React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt$1.faCalendarAlt, onFocus: showCalendarStartDate, value: (value === null || value === void 0 ? void 0 : value.startDate) ? dateFns.format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
|
|
1270
|
+
React__namespace.createElement(core.Space, null),
|
|
1271
|
+
React__namespace.createElement(elements.Icon, { icon: faLongArrowAltRight.faLongArrowAltRight, color: theme.cssColor("--lhds-color-ui-500"), size: 14 }),
|
|
1272
|
+
React__namespace.createElement(core.Space, null),
|
|
1273
|
+
React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt$1.faCalendarAlt, onFocus: showCalendarEndDate, value: (value === null || value === void 0 ? void 0 : value.endDate) ? dateFns.format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
|
|
1256
1274
|
};
|
|
1257
1275
|
|
|
1258
1276
|
var DateTextInput = function (_a) {
|
|
1259
|
-
var calendarProps = _a.calendarProps, _b = _a.closeOnCalendarSelectDate, closeOnCalendarSelectDate = _b === void 0 ? true : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? DateFormats.fullDate : _c
|
|
1260
|
-
var
|
|
1261
|
-
var
|
|
1277
|
+
var calendarProps = _a.calendarProps, _b = _a.closeOnCalendarSelectDate, closeOnCalendarSelectDate = _b === void 0 ? true : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? DateFormats.fullDate : _c; _a.disableCalender; var onValueChange = _a.onValueChange, _e = _a.placeholder, placeholder = _e === void 0 ? "yyyy-mm-dd" : _e, portalTarget = _a.portalTarget, value = _a.value, _f = _a.width, width = _f === void 0 ? "130px" : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.calendarTheme, calendarTheme = _h === void 0 ? defaultCalendarTheme : _h, _j = _a.hideCalenderIcon, hideCalenderIcon = _j === void 0 ? false : _j, minDate = _a.minDate, _k = _a.maxDate, maxDate = _k === void 0 ? defaultMaxDate : _k, props = __rest(_a, ["calendarProps", "closeOnCalendarSelectDate", "dateFormat", "disableCalender", "onValueChange", "placeholder", "portalTarget", "value", "width", "zIndex", "calendarTheme", "hideCalenderIcon", "minDate", "maxDate"]);
|
|
1278
|
+
var _l = React.useState(false), open = _l[0], setOpen = _l[1];
|
|
1279
|
+
var _m = useCalendarPopoverUpdater(), tippyRef = _m.tippyRef, onChangePanel = _m.onChangePanel;
|
|
1262
1280
|
var toggleCalendar = React.useCallback(function () {
|
|
1263
1281
|
setOpen(!open);
|
|
1264
1282
|
}, [setOpen, open]);
|
|
@@ -1282,12 +1300,12 @@ var DateTextInput = function (_a) {
|
|
|
1282
1300
|
var dateIsValid = !!value && dateFns.isValid(dateFns.parse(value, dateFormat, new Date()));
|
|
1283
1301
|
var userInputCorrectLength = !!value && value.length >= dateFormat.length;
|
|
1284
1302
|
var invalid = (userInputCorrectLength && !dateIsValid) || inValidInput;
|
|
1285
|
-
return (
|
|
1286
|
-
|
|
1303
|
+
return (React__namespace.createElement(core.Box, { width: width },
|
|
1304
|
+
React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, visible: open, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", placement: defaultPopoverPlacement, onClickOutside: hideCalendar, tippyRef: tippyRef, content: React__namespace.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onCalendarSelectDate, onChangePanel: onChangePanel, value: value && dateIsValid
|
|
1287
1305
|
? dateFns.parse(value, dateFormat, new Date())
|
|
1288
|
-
: undefined, theme: calendarTheme })) },
|
|
1289
|
-
|
|
1290
|
-
|
|
1306
|
+
: undefined, minDate: minDate, maxDate: maxDate, theme: calendarTheme })) },
|
|
1307
|
+
React__namespace.createElement(forms.TextInput, __assign({}, props, { variant: invalid ? "error" : "standard", disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (React__namespace.createElement(core.Row, { alignItems: "center", indent: 0.5 },
|
|
1308
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", leftIcon: faCalendarAlt$1.faCalendarAlt, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", min: minDate, max: maxDate, size: 10 })))));
|
|
1291
1309
|
};
|
|
1292
1310
|
|
|
1293
1311
|
var formatHours = function (hours) {
|
|
@@ -1421,11 +1439,11 @@ var TimeTextInput = function (_a) {
|
|
|
1421
1439
|
onValueChange(time);
|
|
1422
1440
|
}
|
|
1423
1441
|
}, [onValueChange, setValid]);
|
|
1424
|
-
return (
|
|
1442
|
+
return (React__namespace.createElement(forms.TextInput, __assign({}, props, { type: "time", variant: !valid ? "error" : variant, iconLeft: useIcon ? faClock.faClock : undefined, value: value, placeholder: showPlaceholder ? timeFormat : undefined, onChange: onChangeHandler, onBlur: onBlur, width: width })));
|
|
1425
1443
|
};
|
|
1426
1444
|
|
|
1427
1445
|
var DualTextInput = function (_a) {
|
|
1428
|
-
var autoFocusLeft = _a.autoFocusLeft, autoFocusRight = _a.autoFocusRight, onEsc = _a.onEsc, onEnter = _a.onEnter, onValueChangeLeft = _a.onValueChangeLeft, onValueChangeRight = _a.onValueChangeRight, separatorIcon = _a.separatorIcon, placeholderLeft = _a.placeholderLeft, placeholderRight = _a.placeholderRight, typeLeft = _a.typeLeft, typeRight = _a.typeRight, onChangeLeft = _a.onChangeLeft, onChangeRight = _a.onChangeRight, valueLeft = _a.valueLeft, valueRight = _a.valueRight, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight, onClickCalendar = _a.onClickCalendar, onClickArrowDown = _a.onClickArrowDown, onBlurLeft = _a.onBlurLeft, onBlurRight = _a.onBlurRight, onFocusLeft = _a.onFocusLeft, onFocusRight = _a.onFocusRight, inputRefLeft = _a.inputRefLeft, inputRefRight = _a.inputRefRight, variant = _a.variant, variantLeft = _a.variantLeft, variantRight = _a.variantRight, onBlur = _a.onBlur, showPresets = _a.showPresets, widthLeft = _a.widthLeft, widthRight = _a.widthRight;
|
|
1446
|
+
var autoFocusLeft = _a.autoFocusLeft, autoFocusRight = _a.autoFocusRight, onEsc = _a.onEsc, onEnter = _a.onEnter, onValueChangeLeft = _a.onValueChangeLeft, onValueChangeRight = _a.onValueChangeRight, separatorIcon = _a.separatorIcon, placeholderLeft = _a.placeholderLeft, placeholderRight = _a.placeholderRight, typeLeft = _a.typeLeft, typeRight = _a.typeRight, onChangeLeft = _a.onChangeLeft, onChangeRight = _a.onChangeRight, valueLeft = _a.valueLeft, valueRight = _a.valueRight, minLeft = _a.minLeft, maxLeft = _a.maxLeft, minRight = _a.minRight, maxRight = _a.maxRight, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight, onClickCalendar = _a.onClickCalendar, onClickArrowDown = _a.onClickArrowDown, onBlurLeft = _a.onBlurLeft, onBlurRight = _a.onBlurRight, onFocusLeft = _a.onFocusLeft, onFocusRight = _a.onFocusRight, inputRefLeft = _a.inputRefLeft, inputRefRight = _a.inputRefRight, variant = _a.variant, variantLeft = _a.variantLeft, variantRight = _a.variantRight, onBlur = _a.onBlur, showPresets = _a.showPresets, widthLeft = _a.widthLeft, widthRight = _a.widthRight;
|
|
1429
1447
|
var focusCounter = React.useRef(0);
|
|
1430
1448
|
var tryTriggerOnBlur = React.useMemo(function () {
|
|
1431
1449
|
return lodash.debounce(function (focusCounter) {
|
|
@@ -1462,21 +1480,21 @@ var DualTextInput = function (_a) {
|
|
|
1462
1480
|
onBlurRight(ev);
|
|
1463
1481
|
}
|
|
1464
1482
|
}, [onBlurRight, focusCounter, tryTriggerOnBlur]);
|
|
1465
|
-
return (
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
showPresets ? (
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1483
|
+
return (React__namespace.createElement(core.Box, null,
|
|
1484
|
+
React__namespace.createElement(forms.TextInputBox, { disableContentPaddingRight: true, variant: variant, contentRight: React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
1485
|
+
React__namespace.createElement(core.Indent, { num: 0.5 },
|
|
1486
|
+
React__namespace.createElement(elements.FlatButton, { leftIcon: faCalendarAlt.faCalendarAlt, onClick: onClickCalendar, size: "small" })),
|
|
1487
|
+
showPresets ? (React__namespace.createElement(React__namespace.Fragment, null,
|
|
1488
|
+
React__namespace.createElement(core.Row, { height: "22px" },
|
|
1489
|
+
React__namespace.createElement(core.SeparatorLine, { vertical: true })),
|
|
1490
|
+
React__namespace.createElement(core.Indent, { num: 0.5 },
|
|
1491
|
+
React__namespace.createElement(elements.FlatButton, { leftIcon: faAngleDown.faAngleDown, onClick: onClickArrowDown, size: "small" })))) : null) },
|
|
1492
|
+
React__namespace.createElement(core.Box, { width: widthLeft },
|
|
1493
|
+
React__namespace.createElement(forms.TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickLeft, hideBorder: true, placeholder: placeholderLeft, value: valueLeft, onValueChange: onValueChangeLeft, onChange: onChangeLeft, onBlur: blurLeftHandler, onFocus: focusLeftHandler, inputRef: inputRefLeft, variant: variantLeft, type: typeLeft, autoFocus: autoFocusLeft, min: minLeft, max: maxLeft })),
|
|
1494
|
+
React__namespace.createElement(core.Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
|
|
1495
|
+
React__namespace.createElement(elements.Icon, { icon: separatorIcon, size: 12, color: theme.cssColor("--lhds-color-ui-500") })),
|
|
1496
|
+
React__namespace.createElement(core.Box, { width: widthRight },
|
|
1497
|
+
React__namespace.createElement(forms.TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickRight, hideBorder: true, placeholder: placeholderRight, value: valueRight, onValueChange: onValueChangeRight, onChange: onChangeRight, onBlur: blurRightHandler, onFocus: focusRightHandler, inputRef: inputRefRight, variant: variantRight, type: typeRight, autoFocus: autoFocusRight, min: minRight, max: maxRight })))));
|
|
1480
1498
|
};
|
|
1481
1499
|
|
|
1482
1500
|
var transformTimeStringToNumber = function (time) {
|
|
@@ -1538,9 +1556,9 @@ var transformTimeInDateToTimeString = function (date) {
|
|
|
1538
1556
|
return formatHours(String(date.getHours())) + ":" + formatMinutes(String(date.getMinutes()));
|
|
1539
1557
|
};
|
|
1540
1558
|
|
|
1541
|
-
var css_248z
|
|
1542
|
-
var styles
|
|
1543
|
-
styleInject(css_248z
|
|
1559
|
+
var css_248z = ".TimePicker-module_timePicker__1ElGu {\n overflow: hidden;\n width: 180px;\n}\n\n.TimePicker-module_timePickerColumn__2vfuE {\n overflow-y: hidden;\n -webkit-flex: 1;\n flex: 1;\n}\n\n.TimePicker-module_timePickerColumn__2vfuE:hover {\n overflow-y: scroll;\n }\n";
|
|
1560
|
+
var styles = {"timePicker":"TimePicker-module_timePicker__1ElGu","timePickerColumn":"TimePicker-module_timePickerColumn__2vfuE"};
|
|
1561
|
+
styleInject(css_248z);
|
|
1544
1562
|
|
|
1545
1563
|
var TimePickerCell = function (_a) {
|
|
1546
1564
|
var onClick = _a.onClick, item = _a.item, selected = _a.selected, columnRef = _a.columnRef, canScrollRef = _a.canScrollRef;
|
|
@@ -1555,13 +1573,13 @@ var TimePickerCell = function (_a) {
|
|
|
1555
1573
|
canScrollRef.current = false;
|
|
1556
1574
|
}
|
|
1557
1575
|
}, [columnRef, item, selected, canScrollRef]);
|
|
1558
|
-
return (
|
|
1576
|
+
return (React__namespace.createElement(core.Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5, ref: ref }, selected ? (React__namespace.createElement(elements.PrimaryButton, { label: String(item), onClick: function () { return onClick && onClick(item); } })) : (React__namespace.createElement(elements.FlatButton, { label: String(item), onClick: function () { return onClick && onClick(item); } }))));
|
|
1559
1577
|
};
|
|
1560
1578
|
|
|
1561
1579
|
var TimePickerColumn = function (_a) {
|
|
1562
1580
|
var onClick = _a.onClick, items = _a.items, selectedItem = _a.selectedItem, canScrollRef = _a.canScrollRef;
|
|
1563
1581
|
var columnRef = React.useRef(null);
|
|
1564
|
-
return (
|
|
1582
|
+
return (React__namespace.createElement(core.Column, { className: styles.timePickerColumn, ref: columnRef }, items.map(function (item) { return (React__namespace.createElement(TimePickerCell, { key: item, item: item, onClick: onClick, selected: item === selectedItem, columnRef: columnRef, canScrollRef: canScrollRef })); })));
|
|
1565
1583
|
};
|
|
1566
1584
|
|
|
1567
1585
|
var hours = lodash.range(0, 24);
|
|
@@ -1586,13 +1604,13 @@ var TimePicker = function (_a) {
|
|
|
1586
1604
|
setMinute(m);
|
|
1587
1605
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(formatHours(String(hour !== null && hour !== void 0 ? hour : 0)) + ":" + formatMinutes(String(m !== null && m !== void 0 ? m : 0)));
|
|
1588
1606
|
}, [hour, onValueChange]);
|
|
1589
|
-
return (
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1607
|
+
return (React__namespace.createElement(core.Row, { className: styles.timePicker },
|
|
1608
|
+
React__namespace.createElement(TimePickerColumn, { items: hours, onClick: onClickHour, selectedItem: hour, canScrollRef: canScrollRef }),
|
|
1609
|
+
React__namespace.createElement(core.Indent, null),
|
|
1610
|
+
React__namespace.createElement(TimePickerColumn, { items: minutes, onClick: onClickMinutes, selectedItem: minute, canScrollRef: canScrollRef })));
|
|
1593
1611
|
};
|
|
1594
1612
|
|
|
1595
|
-
var useDateRangeEffects = function (date, setDateInFocus, dateInputRef) {
|
|
1613
|
+
var useDateRangeEffects$1 = function (date, setDateInFocus, dateInputRef) {
|
|
1596
1614
|
React.useEffect(function moveFocusedDateWhenDateChanges() {
|
|
1597
1615
|
if (date) {
|
|
1598
1616
|
setDateInFocus(date);
|
|
@@ -1610,7 +1628,7 @@ var useDateRangeEffects = function (date, setDateInFocus, dateInputRef) {
|
|
|
1610
1628
|
}, [date, dateInputRef]);
|
|
1611
1629
|
};
|
|
1612
1630
|
|
|
1613
|
-
var useDateRangeHandlers = function (date, onValueChange, _a, dateInputRef) {
|
|
1631
|
+
var useDateRangeHandlers$1 = function (date, onValueChange, _a, dateInputRef) {
|
|
1614
1632
|
var setDateInFocus = _a.setDateInFocus, showCalendarInternal = _a.showCalendarInternal, hideCalendarInternal = _a.hideCalendarInternal, setFirstFocusedInput = _a.setFirstFocusedInput, setCurrentPanel = _a.setCurrentPanel, localTime = _a.localTime, setLocalTime = _a.setLocalTime, localDate = _a.localDate, setLocalDate = _a.setLocalDate;
|
|
1615
1633
|
var onChangeDate = React.useCallback(function (incomingDate) {
|
|
1616
1634
|
if (!incomingDate) {
|
|
@@ -1698,7 +1716,7 @@ var useDateRangeHandlers = function (date, onValueChange, _a, dateInputRef) {
|
|
|
1698
1716
|
};
|
|
1699
1717
|
};
|
|
1700
1718
|
|
|
1701
|
-
var useInputStates = function (date) {
|
|
1719
|
+
var useInputStates$1 = function (date) {
|
|
1702
1720
|
var _a = React.useState(undefined), localDate = _a[0], setLocalDate = _a[1];
|
|
1703
1721
|
var _b = React.useState(undefined), localTime = _b[0], setLocalTime = _b[1];
|
|
1704
1722
|
var _c = core.useBoolean(false), isCalendarVisible = _c[0], showCalendarInternal = _c[1], hideCalendarInternal = _c[2];
|
|
@@ -1726,7 +1744,7 @@ var useInputStates = function (date) {
|
|
|
1726
1744
|
};
|
|
1727
1745
|
};
|
|
1728
1746
|
|
|
1729
|
-
var useUserInputHandlers = function (onChangeDate, dateInputRef, showCalendar, hideCalendar, _a) {
|
|
1747
|
+
var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar, hideCalendar, _a) {
|
|
1730
1748
|
var isCalendarVisible = _a.isCalendarVisible, setCurrentPanel = _a.setCurrentPanel, showTimePicker = _a.showTimePicker, hideTimePicker = _a.hideTimePicker;
|
|
1731
1749
|
var onFocusLeft = React.useCallback(function () {
|
|
1732
1750
|
if (!isCalendarVisible) {
|
|
@@ -1781,14 +1799,14 @@ var useUserInputHandlers = function (onChangeDate, dateInputRef, showCalendar, h
|
|
|
1781
1799
|
};
|
|
1782
1800
|
|
|
1783
1801
|
var DateTimeInput = function (_a) {
|
|
1784
|
-
var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus;
|
|
1802
|
+
var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus, minDate = _a.minDate, _b = _a.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b;
|
|
1785
1803
|
var dateInputRef = React.useRef(null);
|
|
1786
1804
|
var timeInputRef = React.useRef(null);
|
|
1787
|
-
var states = useInputStates(value);
|
|
1805
|
+
var states = useInputStates$1(value);
|
|
1788
1806
|
var setCurrentPanel = states.setCurrentPanel, currentPanel = states.currentPanel, isCalendarVisible = states.isCalendarVisible, dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isTimePickerVisible = states.isTimePickerVisible, hideTimePicker = states.hideTimePicker, localTime = states.localTime, localDate = states.localDate;
|
|
1789
|
-
var
|
|
1790
|
-
var
|
|
1791
|
-
useDateRangeEffects(value, setDateInFocus, dateInputRef);
|
|
1807
|
+
var _c = useDateRangeHandlers$1(value, onValueChange, states, dateInputRef), showCalendar = _c.showCalendar, hideCalendar = _c.hideCalendar, inputLeftChangeHandler = _c.inputLeftChangeHandler, inputRightChangeHandler = _c.inputRightChangeHandler, onChangeTime = _c.onChangeTime, onChangeDate = _c.onChangeDate;
|
|
1808
|
+
var _d = useUserInputHandlers$1(onChangeDate, dateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _d.onKeyDownHandler, onFocusRight = _d.onFocusRight, onFocusLeft = _d.onFocusLeft, onClickDay = _d.onClickDay, onClickCalendarButton = _d.onClickCalendarButton, onClickArrowButton = _d.onClickArrowButton;
|
|
1809
|
+
useDateRangeEffects$1(value, setDateInFocus, dateInputRef);
|
|
1792
1810
|
var statePerMonth = React.useMemo(function () {
|
|
1793
1811
|
var dateToHighlight = value || localDate;
|
|
1794
1812
|
if (!dateToHighlight) {
|
|
@@ -1806,17 +1824,17 @@ var DateTimeInput = function (_a) {
|
|
|
1806
1824
|
var timeValue = React.useMemo(function () { return (value ? transformTimeInDateToTimeString(value) : localTime); }, [value, localTime]);
|
|
1807
1825
|
var delayedIsCalendarVisible = core.useDelayedFalse(isCalendarVisible, 300);
|
|
1808
1826
|
var delayedIsTimePickerVisible = core.useDelayedFalse(isTimePickerVisible, 300);
|
|
1809
|
-
return (
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1827
|
+
return (React__namespace.createElement(core.Box, { onKeyDown: onKeyDownHandler },
|
|
1828
|
+
React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (React__namespace.createElement(core.Column, null, delayedIsCalendarVisible ? (React__namespace.createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) : delayedIsTimePickerVisible ? (React__namespace.createElement(core.Column, null,
|
|
1829
|
+
React__namespace.createElement(core.Column, { overflow: "hidden", height: "250px" },
|
|
1830
|
+
React__namespace.createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
|
|
1831
|
+
React__namespace.createElement(core.Space, null),
|
|
1832
|
+
React__namespace.createElement(core.Row, { justifyContent: "flex-end" },
|
|
1833
|
+
React__namespace.createElement(elements.PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
|
|
1834
|
+
React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1.faClock, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: "104px", widthRight: "64px", minLeft: minDate, maxLeft: maxDate }))));
|
|
1817
1835
|
};
|
|
1818
1836
|
|
|
1819
|
-
var useDateRangeEffects
|
|
1837
|
+
var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
|
|
1820
1838
|
React.useEffect(function moveFocusedDateWhenStartDateChanges() {
|
|
1821
1839
|
if (startDate) {
|
|
1822
1840
|
setDateInFocus(startDate);
|
|
@@ -1849,7 +1867,7 @@ var useDateRangeEffects$1 = function (startDate, endDate, setDateInFocus, startD
|
|
|
1849
1867
|
}, [endDate, endDateInputRef]);
|
|
1850
1868
|
};
|
|
1851
1869
|
|
|
1852
|
-
var useDateRangeHandlers
|
|
1870
|
+
var useDateRangeHandlers = function (startDate, endDate, onValueChange, _a) {
|
|
1853
1871
|
var setDateInFocus = _a.setDateInFocus, showCalendarInternal = _a.showCalendarInternal, hideCalendarInternal = _a.hideCalendarInternal, setFirstFocusedInput = _a.setFirstFocusedInput, setCurrentPanel = _a.setCurrentPanel;
|
|
1854
1872
|
var inputLeftChangeHandler = React.useCallback(function (ev) {
|
|
1855
1873
|
var _a;
|
|
@@ -1902,7 +1920,7 @@ var useDateRangeHandlers$1 = function (startDate, endDate, onValueChange, _a) {
|
|
|
1902
1920
|
};
|
|
1903
1921
|
};
|
|
1904
1922
|
|
|
1905
|
-
var useInputStates
|
|
1923
|
+
var useInputStates = function (startDate, endDate) {
|
|
1906
1924
|
var _a = core.useBoolean(false), isCalendarVisible = _a[0], showCalendarInternal = _a[1], hideCalendarInternal = _a[2];
|
|
1907
1925
|
var _b = React.useState(undefined), firstFocusedInput = _b[0], setFirstFocusedInput = _b[1];
|
|
1908
1926
|
var _c = React.useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
|
|
@@ -1930,7 +1948,7 @@ var useInputStates$1 = function (startDate, endDate) {
|
|
|
1930
1948
|
};
|
|
1931
1949
|
};
|
|
1932
1950
|
|
|
1933
|
-
var useUserInputHandlers
|
|
1951
|
+
var useUserInputHandlers = function (startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, _a) {
|
|
1934
1952
|
var firstFocusedInput = _a.firstFocusedInput, setFirstFocusedInput = _a.setFirstFocusedInput, isCalendarVisible = _a.isCalendarVisible, setFocusedInput = _a.setFocusedInput, focusedInput = _a.focusedInput, setCurrentPanel = _a.setCurrentPanel;
|
|
1935
1953
|
var onFocusLeft = React.useCallback(function () {
|
|
1936
1954
|
if (firstFocusedInput == null) {
|
|
@@ -1963,30 +1981,52 @@ var useUserInputHandlers$1 = function (startDate, endDate, onValueChange, startD
|
|
|
1963
1981
|
firstFocusedInput,
|
|
1964
1982
|
]);
|
|
1965
1983
|
var onClickDay = React.useCallback(function (day) {
|
|
1966
|
-
var _a, _b;
|
|
1984
|
+
var _a, _b, _c, _d;
|
|
1967
1985
|
if (focusedInput === "startDate") {
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1986
|
+
if (endDate != null && dateFns.isAfter(day.date, endDate)) {
|
|
1987
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
|
|
1988
|
+
startDate: day.date,
|
|
1989
|
+
endDate: undefined,
|
|
1990
|
+
});
|
|
1973
1991
|
setFocusedInput("endDate");
|
|
1974
1992
|
(_a = endDateInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
1975
1993
|
}
|
|
1976
1994
|
else {
|
|
1977
|
-
|
|
1995
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
|
|
1996
|
+
startDate: day.date,
|
|
1997
|
+
endDate: endDate,
|
|
1998
|
+
});
|
|
1999
|
+
if (firstFocusedInput === "startDate") {
|
|
2000
|
+
setFocusedInput("endDate");
|
|
2001
|
+
(_b = endDateInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
2002
|
+
}
|
|
2003
|
+
else {
|
|
2004
|
+
setTimeout(hideCalendar, 50);
|
|
2005
|
+
}
|
|
1978
2006
|
}
|
|
1979
2007
|
}
|
|
1980
2008
|
else if (focusedInput === "endDate") {
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
2009
|
+
if (!startDate) {
|
|
2010
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
|
|
2011
|
+
startDate: startDate,
|
|
2012
|
+
endDate: day.date,
|
|
2013
|
+
});
|
|
1986
2014
|
setFocusedInput("startDate");
|
|
1987
|
-
(
|
|
2015
|
+
(_c = startDateInputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
|
|
2016
|
+
}
|
|
2017
|
+
else if (dateFns.isAfter(startDate, day.date)) {
|
|
2018
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
|
|
2019
|
+
startDate: day.date,
|
|
2020
|
+
endDate: undefined,
|
|
2021
|
+
});
|
|
2022
|
+
setFocusedInput("endDate");
|
|
2023
|
+
(_d = endDateInputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
|
|
1988
2024
|
}
|
|
1989
2025
|
else {
|
|
2026
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
|
|
2027
|
+
startDate: startDate,
|
|
2028
|
+
endDate: day.date,
|
|
2029
|
+
});
|
|
1990
2030
|
setTimeout(hideCalendar, 50);
|
|
1991
2031
|
}
|
|
1992
2032
|
}
|
|
@@ -2042,23 +2082,23 @@ var useUserInputHandlers$1 = function (startDate, endDate, onValueChange, startD
|
|
|
2042
2082
|
};
|
|
2043
2083
|
|
|
2044
2084
|
var DateRangeDualTextInput = function (_a) {
|
|
2045
|
-
var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc;
|
|
2046
|
-
var
|
|
2085
|
+
var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc, minDate = _a.minDate, _b = _a.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b, calendarProps = _a.calendarProps, _c = _a.widthLeft, widthLeft = _c === void 0 ? 128 : _c, _d = _a.widthRight, widthRight = _d === void 0 ? 128 : _d;
|
|
2086
|
+
var _e = value || {}, startDate = _e.startDate, endDate = _e.endDate;
|
|
2047
2087
|
var startDateInputRef = React.useRef(null);
|
|
2048
2088
|
var endDateInputRef = React.useRef(null);
|
|
2049
|
-
var states = useInputStates
|
|
2089
|
+
var states = useInputStates(startDate, endDate);
|
|
2050
2090
|
var dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isCalendarVisible = states.isCalendarVisible, currentPanel = states.currentPanel, setCurrentPanel = states.setCurrentPanel;
|
|
2051
|
-
var
|
|
2052
|
-
var
|
|
2053
|
-
useDateRangeEffects
|
|
2091
|
+
var _f = useDateRangeHandlers(startDate, endDate, onValueChange, states), showCalendar = _f.showCalendar, hideCalendar = _f.hideCalendar, inputLeftChangeHandler = _f.inputLeftChangeHandler, inputRightChangeHandler = _f.inputRightChangeHandler;
|
|
2092
|
+
var _g = useUserInputHandlers(startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _g.onKeyDownHandler, onFocusRight = _g.onFocusRight, onFocusLeft = _g.onFocusLeft, onClickDay = _g.onClickDay, onClickCalendarButton = _g.onClickCalendarButton, onClickArrowButton = _g.onClickArrowButton;
|
|
2093
|
+
useDateRangeEffects(startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef);
|
|
2054
2094
|
var startDateIsAfterEnd = React.useMemo(function () { return startDate && endDate && dateFns.isAfter(startDate, endDate); }, [startDate, endDate]);
|
|
2055
2095
|
var statePerMonth = React.useMemo(function () {
|
|
2056
|
-
return buildDayStateForSingleMonth(
|
|
2057
|
-
}, [startDate, endDate, dateInFocus]);
|
|
2096
|
+
return buildDayStateForSingleMonth(calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus);
|
|
2097
|
+
}, [calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus]);
|
|
2058
2098
|
var delayedIsCalendarVisible = core.useDelayedFalse(isCalendarVisible, 300);
|
|
2059
|
-
return (
|
|
2060
|
-
|
|
2061
|
-
|
|
2099
|
+
return (React__namespace.createElement(core.Box, { onKeyDown: onKeyDownHandler },
|
|
2100
|
+
React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate }, calendarProps, { statePerMonth: statePerMonth }))) },
|
|
2101
|
+
React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: elements.stenaArrowRight, typeLeft: "date", typeRight: "date", placeholderLeft: "Start date", placeholderRight: "End date", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: startDateInputRef, inputRefRight: endDateInputRef, variant: startDateIsAfterEnd ? "error" : undefined, widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
|
|
2062
2102
|
};
|
|
2063
2103
|
|
|
2064
2104
|
exports.Calendar = Calendar;
|
|
@@ -2080,6 +2120,7 @@ exports.WeekDayCell = WeekDayCell;
|
|
|
2080
2120
|
exports.WeekNumberCell = WeekNumberCell;
|
|
2081
2121
|
exports.YearPicker = YearPicker;
|
|
2082
2122
|
exports.addDayStateHighlights = addDayStateHighlights;
|
|
2123
|
+
exports.addDayStateHighlightsOnSingleDay = addDayStateHighlightsOnSingleDay;
|
|
2083
2124
|
exports.addWeekRangeHighlights = addWeekRangeHighlights;
|
|
2084
2125
|
exports.addWeekStateHighlights = addWeekStateHighlights;
|
|
2085
2126
|
exports.buildDayStateForDateRange = buildDayStateForDateRange;
|
|
@@ -2087,12 +2128,12 @@ exports.buildDayStateForRange = buildDayStateForRange;
|
|
|
2087
2128
|
exports.buildDayStateForSingleMonth = buildDayStateForSingleMonth;
|
|
2088
2129
|
exports.calculateOverflowingMonth = calculateOverflowingMonth;
|
|
2089
2130
|
exports.createDay = createDay;
|
|
2131
|
+
exports.dateRangeToStrings = dateRangeToStrings;
|
|
2090
2132
|
exports.dayHasHighlight = dayHasHighlight;
|
|
2091
2133
|
exports.dayHighlightSelect = dayHighlightSelect;
|
|
2092
2134
|
exports.defaultCalendarTheme = defaultCalendarTheme;
|
|
2093
2135
|
exports.defaultTextPropsProvider = defaultTextPropsProvider;
|
|
2094
2136
|
exports.defaultWrapperStyleProvider = defaultWrapperStyleProvider;
|
|
2095
|
-
exports.ensureStartIsFirst = ensureStartIsFirst;
|
|
2096
2137
|
exports.extranetCalendarTheme = extranetCalendarTheme;
|
|
2097
2138
|
exports.getDaysForWeekForDate = getDaysForWeekForDate;
|
|
2098
2139
|
exports.getMonthInYear = getMonthInYear;
|
|
@@ -2100,10 +2141,12 @@ exports.getMonthsInYear = getMonthsInYear;
|
|
|
2100
2141
|
exports.getStartDateOfISOWeek = getStartDateOfISOWeek;
|
|
2101
2142
|
exports.getWeekForDate = getWeekForDate;
|
|
2102
2143
|
exports.getWeeksForMonth = getWeeksForMonth;
|
|
2144
|
+
exports.isDateRangeInvalid = isDateRangeInvalid;
|
|
2103
2145
|
exports.setDayStateValue = setDayStateValue;
|
|
2104
2146
|
exports.setDayStateValueFunction = setDayStateValueFunction;
|
|
2105
|
-
exports.
|
|
2106
|
-
exports.
|
|
2147
|
+
exports.stringsToDateRange = stringsToDateRange;
|
|
2148
|
+
exports.toggleDateStringsIfEndIsEarlierThanStart = toggleDateStringsIfEndIsEarlierThanStart;
|
|
2149
|
+
exports.toggleDatesIfEndIsEarlierThanStart = toggleDatesIfEndIsEarlierThanStart;
|
|
2107
2150
|
exports.useDateRangeCalendarState = useDateRangeCalendarState;
|
|
2108
2151
|
exports.useDateRangeExclusionSelection = useDateRangeExclusionSelection;
|
|
2109
2152
|
exports.useDateRangeSelection = useDateRangeSelection;
|