@stenajs-webui/calendar 14.2.0 → 15.0.0-alpha.3
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/input-types/date-range-input/DateRangeInput.d.ts +1 -1
- package/dist/components/input-types/date-range-input/DateRangeInput.stories.d.ts +1 -1
- package/dist/index.es.js +177 -174
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +199 -176
- package/dist/index.js.map +1 -1
- package/package.json +7 -8
package/dist/index.js
CHANGED
|
@@ -26,6 +26,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) {
|
|
@@ -156,7 +177,7 @@ var addDayStateHighlights = function (calendarState, date, highlights) {
|
|
|
156
177
|
calendarState[monthString][weekNumber] &&
|
|
157
178
|
calendarState[monthString][weekNumber][dayInMonth];
|
|
158
179
|
var newHighlights = dayState && dayState.highlights
|
|
159
|
-
?
|
|
180
|
+
? __spreadArray(__spreadArray([], dayState.highlights, true), highlights, true) : highlights;
|
|
160
181
|
return __assign(__assign({}, calendarState), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = __assign(__assign({}, (calendarState &&
|
|
161
182
|
calendarState[monthString] &&
|
|
162
183
|
calendarState[monthString][weekNumber])), (_c = {}, _c[dayInMonth] = __assign(__assign({}, dayState), { highlights: newHighlights }), _c)), _b)), _a));
|
|
@@ -173,7 +194,7 @@ var addWeekStateHighlights = function (calendarState, week, highlights) {
|
|
|
173
194
|
});
|
|
174
195
|
var weekState = state && state[monthString] ? state[monthString][weekNumber] : undefined;
|
|
175
196
|
var newHighlights = weekState && weekState.highlights
|
|
176
|
-
?
|
|
197
|
+
? __spreadArray(__spreadArray([], weekState.highlights, true), highlights, true) : highlights;
|
|
177
198
|
var newWeekState = __assign(__assign({}, weekState), { highlights: newHighlights });
|
|
178
199
|
return __assign(__assign({}, state), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = newWeekState, _b)), _a));
|
|
179
200
|
};
|
|
@@ -195,6 +216,7 @@ var useHighlightToday = function (enabled, statePerMonth) {
|
|
|
195
216
|
}, [enabled, statePerMonth]);
|
|
196
217
|
};
|
|
197
218
|
|
|
219
|
+
exports.Month = void 0;
|
|
198
220
|
(function (Month) {
|
|
199
221
|
Month[Month["JANUARY"] = 0] = "JANUARY";
|
|
200
222
|
Month[Month["FEBRUARY"] = 1] = "FEBRUARY";
|
|
@@ -209,6 +231,7 @@ var useHighlightToday = function (enabled, statePerMonth) {
|
|
|
209
231
|
Month[Month["NOVEMBER"] = 10] = "NOVEMBER";
|
|
210
232
|
Month[Month["DECEMBER"] = 11] = "DECEMBER";
|
|
211
233
|
})(exports.Month || (exports.Month = {}));
|
|
234
|
+
exports.WeekDay = void 0;
|
|
212
235
|
(function (WeekDay) {
|
|
213
236
|
WeekDay[WeekDay["SUNDAY"] = 0] = "SUNDAY";
|
|
214
237
|
WeekDay[WeekDay["MONDAY"] = 1] = "MONDAY";
|
|
@@ -407,52 +430,52 @@ var extranetCalendarTheme = __assign(__assign({}, defaultCalendarTheme), { width
|
|
|
407
430
|
|
|
408
431
|
var WeekNumberCell = function (_a) {
|
|
409
432
|
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
|
-
|
|
433
|
+
var content = (React__namespace.createElement(core.Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
434
|
+
background && React__namespace.createElement(core.Box, { position: "absolute" }, background),
|
|
435
|
+
React__namespace.createElement(core.Box, { position: "absolute" },
|
|
436
|
+
React__namespace.createElement(core.Text, { color: onClickWeek
|
|
414
437
|
? theme.WeekNumber.clickableTextColor
|
|
415
438
|
: theme.WeekNumber.textColor },
|
|
416
439
|
prefix,
|
|
417
440
|
week.weekNumber))));
|
|
418
|
-
return (
|
|
441
|
+
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
442
|
};
|
|
420
443
|
|
|
421
444
|
function CalendarWeek(_a) {
|
|
422
445
|
var week = _a.week, month = _a.month, DayComponent = _a.dayComponent, statePerWeekDay = _a.statePerWeekDay, userDataPerWeekDay = _a.userDataPerWeekDay, onClickWeek = _a.onClickWeek, onClickDay = _a.onClickDay, theme = _a.theme, renderWeekNumber = _a.renderWeekNumber, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
|
|
423
|
-
return (
|
|
424
|
-
theme.WeekNumber.show && (
|
|
425
|
-
week.days.map(function (day) { return (
|
|
446
|
+
return (React__namespace.createElement("tr", { key: week.weekNumber },
|
|
447
|
+
theme.WeekNumber.show && (React__namespace.createElement("td", null, renderWeekNumber ? (renderWeekNumber(week, theme, onClickWeek)) : (React__namespace.createElement(WeekNumberCell, { week: week, onClickWeek: onClickWeek, theme: theme })))),
|
|
448
|
+
week.days.map(function (day) { return (React__namespace.createElement(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 })); })));
|
|
426
449
|
}
|
|
427
450
|
|
|
428
451
|
var WeekDayCell = function (_a) {
|
|
429
452
|
var onClickWeekDay = _a.onClickWeekDay, day = _a.day, theme = _a.theme;
|
|
430
|
-
var content = (
|
|
431
|
-
|
|
453
|
+
var content = (React__namespace.createElement(core.Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
454
|
+
React__namespace.createElement(core.Text, { size: "small", color: onClickWeekDay
|
|
432
455
|
? theme.WeekDay.clickableTextColor
|
|
433
456
|
: theme.WeekDay.textColor }, day.name)));
|
|
434
457
|
if (onClickWeekDay) {
|
|
435
|
-
return (
|
|
458
|
+
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
459
|
}
|
|
437
460
|
return content;
|
|
438
461
|
};
|
|
439
462
|
|
|
440
463
|
var CalendarDay = function (_a) {
|
|
441
464
|
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
|
-
|
|
465
|
+
var content = (React__namespace.createElement(core.Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
466
|
+
React__namespace.createElement(core.Text, __assign({}, (theme.CalendarDay.textProps &&
|
|
444
467
|
theme.CalendarDay.textProps(defaultHighlights, dayState, day, week, month, userData))), day.dayOfMonth)));
|
|
445
|
-
var WrapperTd = styled__default[
|
|
468
|
+
var WrapperTd = styled__default["default"].td(__assign({}, (theme.CalendarDay.tdStyle &&
|
|
446
469
|
theme.CalendarDay.tdStyle(defaultHighlights, dayState, day, week, month, userData))));
|
|
447
|
-
var InnerWrapperDiv = styled__default[
|
|
470
|
+
var InnerWrapperDiv = styled__default["default"].div(__assign(__assign({}, (theme.CalendarDay.innerWrapperStyle &&
|
|
448
471
|
theme.CalendarDay.innerWrapperStyle(defaultHighlights, dayState, day, week, month, userData))), { width: "100%", height: "100%" }));
|
|
449
|
-
var CellWrapperDiv = styled__default[
|
|
472
|
+
var CellWrapperDiv = styled__default["default"].div(__assign(__assign({}, (theme.CalendarDay.cellWrapperStyle &&
|
|
450
473
|
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) ? (
|
|
474
|
+
return (React__namespace.createElement(WrapperTd, null,
|
|
475
|
+
React__namespace.createElement(InnerWrapperDiv, null,
|
|
476
|
+
React__namespace.createElement(CellWrapperDiv, null, day.month === month.monthInYear && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
477
|
+
ExtraDayContent && (React__namespace.createElement(ExtraDayContent, { week: week, month: month, day: day, dayState: dayState, theme: theme, userData: userData })),
|
|
478
|
+
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
479
|
};
|
|
457
480
|
var isClickable = function (defaultHighlights, dayState) {
|
|
458
481
|
return !!dayHighlightSelect(dayState, defaultHighlights, ["enabled", "disabled"], [true, false], true);
|
|
@@ -461,23 +484,23 @@ var isClickable = function (defaultHighlights, dayState) {
|
|
|
461
484
|
function CalendarMonth(_a) {
|
|
462
485
|
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;
|
|
463
486
|
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 (
|
|
487
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
488
|
+
React__namespace.createElement(core.Box, { alignItems: "stretch" },
|
|
489
|
+
React__namespace.createElement(core.Row, { justifyContent: "space-between", alignItems: "center", height: "32px" },
|
|
490
|
+
React__namespace.createElement(core.Box, { alignItems: "center" }, headerLeftContent),
|
|
491
|
+
React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
492
|
+
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))),
|
|
493
|
+
React__namespace.createElement(core.Space, null),
|
|
494
|
+
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)))),
|
|
495
|
+
React__namespace.createElement(core.Box, { alignItems: "center" }, headerRightContent)),
|
|
496
|
+
React__namespace.createElement("table", null,
|
|
497
|
+
React__namespace.createElement("tbody", null,
|
|
498
|
+
React__namespace.createElement("tr", null,
|
|
499
|
+
showWeekNumber && (React__namespace.createElement("td", null,
|
|
500
|
+
React__namespace.createElement(core.Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
501
|
+
React__namespace.createElement(core.Text, { size: "small", color: theme.CalendarMonth.headerTextColor }, "W")))),
|
|
502
|
+
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 })))); })),
|
|
503
|
+
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 })); }))))));
|
|
481
504
|
}
|
|
482
505
|
|
|
483
506
|
function styleInject(css, ref) {
|
|
@@ -507,23 +530,23 @@ function styleInject(css, ref) {
|
|
|
507
530
|
}
|
|
508
531
|
}
|
|
509
532
|
|
|
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);
|
|
533
|
+
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";
|
|
534
|
+
var styles$1 = {"calendar":"Calendar-module_calendar__Ztvgm"};
|
|
535
|
+
styleInject(css_248z$1);
|
|
513
536
|
|
|
514
537
|
function CalendarPanel(_a) {
|
|
515
538
|
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
|
-
return (
|
|
517
|
-
|
|
518
|
-
index > 0 &&
|
|
519
|
-
|
|
539
|
+
return (React__namespace.createElement("div", { className: styles$1.calendar }, monthRows.map(function (monthRow, rowIndex) { return (React__namespace.createElement(core.Spacing, { key: rowIndex },
|
|
540
|
+
React__namespace.createElement(core.Row, null, monthRow.map(function (month, index) { return (React__namespace.createElement(React__namespace.Fragment, { key: month.name },
|
|
541
|
+
index > 0 && React__namespace.createElement(core.Space, null),
|
|
542
|
+
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 }))); })))); })));
|
|
520
543
|
}
|
|
521
544
|
function Calendar(props) {
|
|
522
545
|
var initialDate = getInitialDate(props.year, props.month, props.date);
|
|
523
546
|
var _a = calculateOverflowingMonth(initialDate.year, initialDate.month), year = _a.year, month = _a.month;
|
|
524
547
|
var monthRows = getMonthRows(year, month, props.numMonths, props.monthsPerRow);
|
|
525
548
|
var statePerMonth = useHighlightToday(props.highlightToday, props.statePerMonth);
|
|
526
|
-
return (
|
|
549
|
+
return (React__namespace.createElement(CalendarPanel, __assign({ year: year, month: month, monthRows: monthRows }, props, { statePerMonth: statePerMonth })));
|
|
527
550
|
}
|
|
528
551
|
var getInitialDate = function (year, month, date) {
|
|
529
552
|
if (month && year) {
|
|
@@ -583,18 +606,18 @@ var useSelectedMonthStepperLogic = function (dateInFocus, setDateInFocus, months
|
|
|
583
606
|
|
|
584
607
|
var WithMonthSwitcherBelow = function (_a) {
|
|
585
608
|
var children = _a.children, prevMonth = _a.prevMonth, nextMonth = _a.nextMonth, prevYear = _a.prevYear, nextYear = _a.nextYear;
|
|
586
|
-
return (
|
|
609
|
+
return (React__namespace.createElement("div", null,
|
|
587
610
|
children,
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
611
|
+
React__namespace.createElement(core.Indent, null,
|
|
612
|
+
React__namespace.createElement(core.Row, null,
|
|
613
|
+
React__namespace.createElement(elements.FlatButton, { onClick: prevYear, leftIcon: faAngleDoubleLeft.faAngleDoubleLeft }),
|
|
614
|
+
React__namespace.createElement(core.Space, null),
|
|
615
|
+
React__namespace.createElement(elements.FlatButton, { onClick: prevMonth, leftIcon: faAngleLeft.faAngleLeft }),
|
|
616
|
+
React__namespace.createElement(core.Indent, { num: 2 }),
|
|
617
|
+
React__namespace.createElement(elements.FlatButton, { onClick: nextMonth, leftIcon: faAngleRight.faAngleRight }),
|
|
618
|
+
React__namespace.createElement(core.Space, null),
|
|
619
|
+
React__namespace.createElement(elements.FlatButton, { onClick: nextYear, leftIcon: faAngleDoubleRight.faAngleDoubleRight }))),
|
|
620
|
+
React__namespace.createElement(core.Space, null)));
|
|
598
621
|
};
|
|
599
622
|
|
|
600
623
|
var MonthPickerCell = function (_a) {
|
|
@@ -604,7 +627,7 @@ var MonthPickerCell = function (_a) {
|
|
|
604
627
|
now.setMonth(month);
|
|
605
628
|
return dateFns.format(now, "MMM");
|
|
606
629
|
}, [month]);
|
|
607
|
-
return (
|
|
630
|
+
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
631
|
};
|
|
609
632
|
|
|
610
633
|
var monthMatrix = [
|
|
@@ -615,7 +638,7 @@ var monthMatrix = [
|
|
|
615
638
|
];
|
|
616
639
|
var MonthPicker = function (_a) {
|
|
617
640
|
var value = _a.value, onValueChange = _a.onValueChange;
|
|
618
|
-
return (
|
|
641
|
+
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
642
|
};
|
|
620
643
|
|
|
621
644
|
var createStandardDateRangePresets = function (now) { return [
|
|
@@ -645,21 +668,21 @@ var PresetPicker = function (_a) {
|
|
|
645
668
|
var _c = React.useState(0), pageIndex = _c[0], setPageIndex = _c[1];
|
|
646
669
|
var pages = React.useMemo(function () { return createStandardDateRangePresets(new Date()); }, []);
|
|
647
670
|
var currentPage = (_b = pages[pageIndex]) !== null && _b !== void 0 ? _b : pages[0];
|
|
648
|
-
return (
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
671
|
+
return (React__namespace.createElement(core.Column, null,
|
|
672
|
+
React__namespace.createElement(core.Row, { justifyContent: "space-between", alignItems: "center", width: "200px" },
|
|
673
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", leftIcon: faAngleLeft.faAngleLeft, disabled: pageIndex === 0, onClick: function () { return setPageIndex(pageIndex - 1); } }),
|
|
674
|
+
React__namespace.createElement(core.Text, null, currentPage.label),
|
|
675
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", leftIcon: faAngleRight.faAngleRight, disabled: pageIndex === pages.length - 1, onClick: function () { return setPageIndex(pageIndex + 1); } })),
|
|
676
|
+
React__namespace.createElement(core.Space, null),
|
|
677
|
+
React__namespace.createElement(core.Column, { alignItems: "center" }, currentPage.presets.map(function (preset) { return (React__namespace.createElement(React__namespace.Fragment, { key: preset.label },
|
|
678
|
+
React__namespace.createElement(elements.PrimaryButton, { label: preset.label, onClick: function () { return onClickPreset(preset); } }),
|
|
679
|
+
React__namespace.createElement(core.Space, null))); }))));
|
|
657
680
|
};
|
|
658
681
|
|
|
659
682
|
var YearPickerCell = function (_a) {
|
|
660
683
|
var value = _a.value, onValueChange = _a.onValueChange, year = _a.year;
|
|
661
684
|
var label = String(year);
|
|
662
|
-
return (
|
|
685
|
+
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
686
|
};
|
|
664
687
|
|
|
665
688
|
var YearPicker = function (_a) {
|
|
@@ -677,12 +700,12 @@ var YearPicker = function (_a) {
|
|
|
677
700
|
React.useEffect(function () {
|
|
678
701
|
setLastYear(function (prev) { return calculateLastYearInFocus(value, prev); });
|
|
679
702
|
}, [value]);
|
|
680
|
-
return (
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
703
|
+
return (React__namespace.createElement(core.Row, null,
|
|
704
|
+
React__namespace.createElement(core.Column, { justifyContent: "center" },
|
|
705
|
+
React__namespace.createElement(elements.FlatButton, { leftIcon: faCaretLeft.faCaretLeft, onClick: function () { return setLastYear(lastYear - 3); } })),
|
|
706
|
+
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 })); }))); })),
|
|
707
|
+
React__namespace.createElement(core.Column, { justifyContent: "center" },
|
|
708
|
+
React__namespace.createElement(elements.FlatButton, { leftIcon: faCaretRight.faCaretRight, onClick: function () { return setLastYear(lastYear + 3); } }))));
|
|
686
709
|
};
|
|
687
710
|
var calculateLastYearInFocus = function (value, lastYear) {
|
|
688
711
|
if (value == null) {
|
|
@@ -730,17 +753,17 @@ var CalendarWithMonthYearPickers = function CalendarWithMonthYearPickers(_a) {
|
|
|
730
753
|
}, [setCurrentPanel]);
|
|
731
754
|
switch (currentPanel) {
|
|
732
755
|
case "calendar":
|
|
733
|
-
return (
|
|
734
|
-
|
|
756
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
757
|
+
React__namespace.createElement(Calendar, __assign({}, props, { date: dateInFocus, onClickYear: onClickYear, onClickMonth: onClickMonth }))));
|
|
735
758
|
case "month":
|
|
736
|
-
return (
|
|
759
|
+
return (React__namespace.createElement(MonthPicker, { value: dateInFocus.getMonth(), onValueChange: onChangeSelectedMonth }));
|
|
737
760
|
case "year":
|
|
738
|
-
return (
|
|
761
|
+
return (React__namespace.createElement(YearPicker, { value: dateInFocus.getFullYear(), onValueChange: onChangeSelectedYear }));
|
|
739
762
|
case "presets":
|
|
740
|
-
return
|
|
763
|
+
return React__namespace.createElement(PresetPicker, { onClickPreset: function () { } });
|
|
741
764
|
default:
|
|
742
|
-
return (
|
|
743
|
-
|
|
765
|
+
return (React__namespace.createElement(core.Box, null,
|
|
766
|
+
React__namespace.createElement(elements.PrimaryButton, { label: "Show calendar", onClick: function () { return setCurrentPanel("calendar"); } })));
|
|
744
767
|
}
|
|
745
768
|
};
|
|
746
769
|
|
|
@@ -751,21 +774,21 @@ function CalendarWithMonthSwitcher(_a) {
|
|
|
751
774
|
var placement = fallbackIfNoPlacement(monthSwitcherPlacement, calendarProps.numMonths);
|
|
752
775
|
switch (placement) {
|
|
753
776
|
case "below": {
|
|
754
|
-
return (
|
|
755
|
-
|
|
777
|
+
return (React__namespace.createElement(WithMonthSwitcherBelow, { theme: theme, nextMonth: nextMonth, prevMonth: prevMonth, nextYear: nextYear, prevYear: prevYear },
|
|
778
|
+
React__namespace.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus }))));
|
|
756
779
|
}
|
|
757
780
|
case "header": {
|
|
758
|
-
return (
|
|
759
|
-
|
|
760
|
-
!hideYearPagination && (
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
!hideYearPagination && (
|
|
781
|
+
return (React__namespace.createElement(core.Column, null,
|
|
782
|
+
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" },
|
|
783
|
+
!hideYearPagination && (React__namespace.createElement(elements.FlatButton, { size: "small", onClick: prevYear, leftIcon: faAngleDoubleLeft.faAngleDoubleLeft })),
|
|
784
|
+
React__namespace.createElement(core.Space, null),
|
|
785
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", onClick: prevMonth, leftIcon: faAngleLeft.faAngleLeft })), headerRightContent: React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
786
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", onClick: nextMonth, leftIcon: faAngleRight.faAngleRight }),
|
|
787
|
+
React__namespace.createElement(core.Space, null),
|
|
788
|
+
!hideYearPagination && (React__namespace.createElement(elements.FlatButton, { size: "small", onClick: nextYear, leftIcon: faAngleDoubleRight.faAngleDoubleRight }))) }))));
|
|
766
789
|
}
|
|
767
790
|
default: {
|
|
768
|
-
return (
|
|
791
|
+
return (React__namespace.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus })));
|
|
769
792
|
}
|
|
770
793
|
}
|
|
771
794
|
}
|
|
@@ -897,7 +920,7 @@ var useDateRangeSelection = function (_a) {
|
|
|
897
920
|
|
|
898
921
|
function DateRangeCalendar(props) {
|
|
899
922
|
var dateRangeSelectionProps = useDateRangeSelection(props);
|
|
900
|
-
return (
|
|
923
|
+
return (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, dateRangeSelectionProps)));
|
|
901
924
|
}
|
|
902
925
|
|
|
903
926
|
var useDateRangeCalendarState = function () {
|
|
@@ -944,7 +967,7 @@ var useSingleDateSelection = function (_a) {
|
|
|
944
967
|
|
|
945
968
|
function SingleDateCalendar(props) {
|
|
946
969
|
var singleDateSelectionProps = useSingleDateSelection(props);
|
|
947
|
-
return (
|
|
970
|
+
return (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleDateSelectionProps)));
|
|
948
971
|
}
|
|
949
972
|
|
|
950
973
|
var useMultiDateSelection = function (_a) {
|
|
@@ -960,7 +983,7 @@ var useMultiDateSelection = function (_a) {
|
|
|
960
983
|
onChange(value.filter(function (v) { return !dateFns.isSameDay(v, day.date); }));
|
|
961
984
|
}
|
|
962
985
|
else {
|
|
963
|
-
onChange(
|
|
986
|
+
onChange(__spreadArray(__spreadArray([], (value || []), true), [day.date], false));
|
|
964
987
|
}
|
|
965
988
|
}, [onChange, value]);
|
|
966
989
|
var statePerMonthWithSelectedDate = React.useMemo(function () {
|
|
@@ -981,7 +1004,7 @@ var useMultiDateSelection = function (_a) {
|
|
|
981
1004
|
|
|
982
1005
|
function MultiDateCalendar(props) {
|
|
983
1006
|
var selectionProps = useMultiDateSelection(props);
|
|
984
|
-
return
|
|
1007
|
+
return React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
|
|
985
1008
|
}
|
|
986
1009
|
|
|
987
1010
|
var useSingleWeekSelection = function (_a) {
|
|
@@ -1046,7 +1069,7 @@ var getWeekDataFromWeekString = function (week) {
|
|
|
1046
1069
|
|
|
1047
1070
|
function SingleWeekCalendar(props) {
|
|
1048
1071
|
var singleWeekSelectionProps = useSingleWeekSelection(props);
|
|
1049
|
-
return (
|
|
1072
|
+
return (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleWeekSelectionProps)));
|
|
1050
1073
|
}
|
|
1051
1074
|
|
|
1052
1075
|
var removeDateIfExist = function (list, date) {
|
|
@@ -1089,7 +1112,7 @@ var useDateRangeExclusionSelection = function (_a) {
|
|
|
1089
1112
|
onChange(removeDateIfExist(value, day.date));
|
|
1090
1113
|
}
|
|
1091
1114
|
else {
|
|
1092
|
-
onChange(
|
|
1115
|
+
onChange(__spreadArray(__spreadArray([], value, true), [day.date], false));
|
|
1093
1116
|
}
|
|
1094
1117
|
}
|
|
1095
1118
|
else {
|
|
@@ -1120,7 +1143,7 @@ var addHighlighting = function (statePerMonth, dateList) {
|
|
|
1120
1143
|
|
|
1121
1144
|
function DateRangeExclusionCalendar(props) {
|
|
1122
1145
|
var selectionProps = useDateRangeExclusionSelection(props);
|
|
1123
|
-
return
|
|
1146
|
+
return React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
|
|
1124
1147
|
}
|
|
1125
1148
|
|
|
1126
1149
|
var defaultPopoverPlacement = "bottom";
|
|
@@ -1167,9 +1190,9 @@ var DateInput = function (_a) {
|
|
|
1167
1190
|
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
1191
|
var _f = useDateInput(onChange, onClose, openOnMount), hideCalendar = _f.hideCalendar, showingCalendar = _f.showingCalendar, onSelectDate = _f.onSelectDate, showCalendar = _f.showCalendar;
|
|
1169
1192
|
var _g = useCalendarPopoverUpdater(), tippyRef = _g.tippyRef, onChangePanel = _g.onChangePanel;
|
|
1170
|
-
return (
|
|
1171
|
-
|
|
1172
|
-
|
|
1193
|
+
return (React__namespace.createElement(core.Box, { width: width },
|
|
1194
|
+
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 })) },
|
|
1195
|
+
React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt.faCalendarAlt, onFocus: showCalendar, onClickLeft: showCalendar, value: value ? dateFns.format(value, displayFormat) : "", placeholder: placeholder, size: 9, autoFocus: openOnMount, variant: variant }))));
|
|
1173
1196
|
};
|
|
1174
1197
|
|
|
1175
1198
|
var useDateRangeInput = function (value, onChange) {
|
|
@@ -1246,17 +1269,17 @@ var DateRangeInput = function (_a) {
|
|
|
1246
1269
|
var _h = React.useState("calendar"), currentPanel = _h[0], setCurrentPanel = _h[1];
|
|
1247
1270
|
var _j = useDateRangeInput(value, onChange), hideCalendar = _j.hideCalendar, showCalendarEndDate = _j.showCalendarEndDate, showCalendarStartDate = _j.showCalendarStartDate, showingCalendar = _j.showingCalendar, focusedInput = _j.focusedInput, startDateInputRef = _j.startDateInputRef, endDateInputRef = _j.endDateInputRef, onClickDay = _j.onClickDay, startDateIsAfterEnd = _j.startDateIsAfterEnd;
|
|
1248
1271
|
var statePerMonth = React.useMemo(function () { return buildDayStateForDateRange(undefined, value.startDate, value.endDate); }, [value]);
|
|
1249
|
-
return (
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1272
|
+
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 })) },
|
|
1273
|
+
React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
1274
|
+
React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt.faCalendarAlt, onFocus: showCalendarStartDate, value: value.startDate ? dateFns.format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
|
|
1275
|
+
React__namespace.createElement(core.Space, null),
|
|
1276
|
+
React__namespace.createElement(elements.Icon, { icon: faLongArrowAltRight.faLongArrowAltRight, color: theme.cssColor("--lhds-color-ui-500"), size: 14 }),
|
|
1277
|
+
React__namespace.createElement(core.Space, null),
|
|
1278
|
+
React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt.faCalendarAlt, onFocus: showCalendarEndDate, value: value.endDate ? dateFns.format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
|
|
1256
1279
|
};
|
|
1257
1280
|
|
|
1258
1281
|
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
|
|
1282
|
+
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, props = __rest(_a, ["calendarProps", "closeOnCalendarSelectDate", "dateFormat", "disableCalender", "onValueChange", "placeholder", "portalTarget", "value", "width", "zIndex", "calendarTheme", "hideCalenderIcon"]);
|
|
1260
1283
|
var _k = React.useState(false), open = _k[0], setOpen = _k[1];
|
|
1261
1284
|
var _l = useCalendarPopoverUpdater(), tippyRef = _l.tippyRef, onChangePanel = _l.onChangePanel;
|
|
1262
1285
|
var toggleCalendar = React.useCallback(function () {
|
|
@@ -1282,12 +1305,12 @@ var DateTextInput = function (_a) {
|
|
|
1282
1305
|
var dateIsValid = !!value && dateFns.isValid(dateFns.parse(value, dateFormat, new Date()));
|
|
1283
1306
|
var userInputCorrectLength = !!value && value.length >= dateFormat.length;
|
|
1284
1307
|
var invalid = (userInputCorrectLength && !dateIsValid) || inValidInput;
|
|
1285
|
-
return (
|
|
1286
|
-
|
|
1308
|
+
return (React__namespace.createElement(core.Box, { width: width },
|
|
1309
|
+
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
1310
|
? dateFns.parse(value, dateFormat, new Date())
|
|
1288
1311
|
: undefined, theme: calendarTheme })) },
|
|
1289
|
-
|
|
1290
|
-
|
|
1312
|
+
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 },
|
|
1313
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", leftIcon: faCalendarAlt.faCalendarAlt, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", size: 10 })))));
|
|
1291
1314
|
};
|
|
1292
1315
|
|
|
1293
1316
|
var formatHours = function (hours) {
|
|
@@ -1421,7 +1444,7 @@ var TimeTextInput = function (_a) {
|
|
|
1421
1444
|
onValueChange(time);
|
|
1422
1445
|
}
|
|
1423
1446
|
}, [onValueChange, setValid]);
|
|
1424
|
-
return (
|
|
1447
|
+
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
1448
|
};
|
|
1426
1449
|
|
|
1427
1450
|
var DualTextInput = function (_a) {
|
|
@@ -1462,21 +1485,21 @@ var DualTextInput = function (_a) {
|
|
|
1462
1485
|
onBlurRight(ev);
|
|
1463
1486
|
}
|
|
1464
1487
|
}, [onBlurRight, focusCounter, tryTriggerOnBlur]);
|
|
1465
|
-
return (
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
showPresets ? (
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1488
|
+
return (React__namespace.createElement(core.Box, null,
|
|
1489
|
+
React__namespace.createElement(forms.TextInputBox, { disableContentPaddingRight: true, variant: variant, contentRight: React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
1490
|
+
React__namespace.createElement(core.Indent, { num: 0.5 },
|
|
1491
|
+
React__namespace.createElement(elements.FlatButton, { leftIcon: faCalendarAlt$1.faCalendarAlt, onClick: onClickCalendar, size: "small" })),
|
|
1492
|
+
showPresets ? (React__namespace.createElement(React__namespace.Fragment, null,
|
|
1493
|
+
React__namespace.createElement(core.Row, { height: "22px" },
|
|
1494
|
+
React__namespace.createElement(core.SeparatorLine, { vertical: true })),
|
|
1495
|
+
React__namespace.createElement(core.Indent, { num: 0.5 },
|
|
1496
|
+
React__namespace.createElement(elements.FlatButton, { leftIcon: faAngleDown.faAngleDown, onClick: onClickArrowDown, size: "small" })))) : null) },
|
|
1497
|
+
React__namespace.createElement(core.Box, { width: widthLeft },
|
|
1498
|
+
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 })),
|
|
1499
|
+
React__namespace.createElement(core.Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
|
|
1500
|
+
React__namespace.createElement(elements.Icon, { icon: separatorIcon, size: 12, color: theme.cssColor("--lhds-color-ui-500") })),
|
|
1501
|
+
React__namespace.createElement(core.Box, { width: widthRight },
|
|
1502
|
+
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 })))));
|
|
1480
1503
|
};
|
|
1481
1504
|
|
|
1482
1505
|
var transformTimeStringToNumber = function (time) {
|
|
@@ -1538,9 +1561,9 @@ var transformTimeInDateToTimeString = function (date) {
|
|
|
1538
1561
|
return formatHours(String(date.getHours())) + ":" + formatMinutes(String(date.getMinutes()));
|
|
1539
1562
|
};
|
|
1540
1563
|
|
|
1541
|
-
var css_248z
|
|
1542
|
-
var styles
|
|
1543
|
-
styleInject(css_248z
|
|
1564
|
+
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";
|
|
1565
|
+
var styles = {"timePicker":"TimePicker-module_timePicker__1ElGu","timePickerColumn":"TimePicker-module_timePickerColumn__2vfuE"};
|
|
1566
|
+
styleInject(css_248z);
|
|
1544
1567
|
|
|
1545
1568
|
var TimePickerCell = function (_a) {
|
|
1546
1569
|
var onClick = _a.onClick, item = _a.item, selected = _a.selected, columnRef = _a.columnRef, canScrollRef = _a.canScrollRef;
|
|
@@ -1555,13 +1578,13 @@ var TimePickerCell = function (_a) {
|
|
|
1555
1578
|
canScrollRef.current = false;
|
|
1556
1579
|
}
|
|
1557
1580
|
}, [columnRef, item, selected, canScrollRef]);
|
|
1558
|
-
return (
|
|
1581
|
+
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
1582
|
};
|
|
1560
1583
|
|
|
1561
1584
|
var TimePickerColumn = function (_a) {
|
|
1562
1585
|
var onClick = _a.onClick, items = _a.items, selectedItem = _a.selectedItem, canScrollRef = _a.canScrollRef;
|
|
1563
1586
|
var columnRef = React.useRef(null);
|
|
1564
|
-
return (
|
|
1587
|
+
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
1588
|
};
|
|
1566
1589
|
|
|
1567
1590
|
var hours = lodash.range(0, 24);
|
|
@@ -1586,13 +1609,13 @@ var TimePicker = function (_a) {
|
|
|
1586
1609
|
setMinute(m);
|
|
1587
1610
|
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
1611
|
}, [hour, onValueChange]);
|
|
1589
|
-
return (
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1612
|
+
return (React__namespace.createElement(core.Row, { className: styles.timePicker },
|
|
1613
|
+
React__namespace.createElement(TimePickerColumn, { items: hours, onClick: onClickHour, selectedItem: hour, canScrollRef: canScrollRef }),
|
|
1614
|
+
React__namespace.createElement(core.Indent, null),
|
|
1615
|
+
React__namespace.createElement(TimePickerColumn, { items: minutes, onClick: onClickMinutes, selectedItem: minute, canScrollRef: canScrollRef })));
|
|
1593
1616
|
};
|
|
1594
1617
|
|
|
1595
|
-
var useDateRangeEffects = function (date, setDateInFocus, dateInputRef) {
|
|
1618
|
+
var useDateRangeEffects$1 = function (date, setDateInFocus, dateInputRef) {
|
|
1596
1619
|
React.useEffect(function moveFocusedDateWhenDateChanges() {
|
|
1597
1620
|
if (date) {
|
|
1598
1621
|
setDateInFocus(date);
|
|
@@ -1610,7 +1633,7 @@ var useDateRangeEffects = function (date, setDateInFocus, dateInputRef) {
|
|
|
1610
1633
|
}, [date, dateInputRef]);
|
|
1611
1634
|
};
|
|
1612
1635
|
|
|
1613
|
-
var useDateRangeHandlers = function (date, onValueChange, _a, dateInputRef) {
|
|
1636
|
+
var useDateRangeHandlers$1 = function (date, onValueChange, _a, dateInputRef) {
|
|
1614
1637
|
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
1638
|
var onChangeDate = React.useCallback(function (incomingDate) {
|
|
1616
1639
|
if (!incomingDate) {
|
|
@@ -1698,7 +1721,7 @@ var useDateRangeHandlers = function (date, onValueChange, _a, dateInputRef) {
|
|
|
1698
1721
|
};
|
|
1699
1722
|
};
|
|
1700
1723
|
|
|
1701
|
-
var useInputStates = function (date) {
|
|
1724
|
+
var useInputStates$1 = function (date) {
|
|
1702
1725
|
var _a = React.useState(undefined), localDate = _a[0], setLocalDate = _a[1];
|
|
1703
1726
|
var _b = React.useState(undefined), localTime = _b[0], setLocalTime = _b[1];
|
|
1704
1727
|
var _c = core.useBoolean(false), isCalendarVisible = _c[0], showCalendarInternal = _c[1], hideCalendarInternal = _c[2];
|
|
@@ -1726,7 +1749,7 @@ var useInputStates = function (date) {
|
|
|
1726
1749
|
};
|
|
1727
1750
|
};
|
|
1728
1751
|
|
|
1729
|
-
var useUserInputHandlers = function (onChangeDate, dateInputRef, showCalendar, hideCalendar, _a) {
|
|
1752
|
+
var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar, hideCalendar, _a) {
|
|
1730
1753
|
var isCalendarVisible = _a.isCalendarVisible, setCurrentPanel = _a.setCurrentPanel, showTimePicker = _a.showTimePicker, hideTimePicker = _a.hideTimePicker;
|
|
1731
1754
|
var onFocusLeft = React.useCallback(function () {
|
|
1732
1755
|
if (!isCalendarVisible) {
|
|
@@ -1784,11 +1807,11 @@ var DateTimeInput = function (_a) {
|
|
|
1784
1807
|
var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus;
|
|
1785
1808
|
var dateInputRef = React.useRef(null);
|
|
1786
1809
|
var timeInputRef = React.useRef(null);
|
|
1787
|
-
var states = useInputStates(value);
|
|
1810
|
+
var states = useInputStates$1(value);
|
|
1788
1811
|
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 _b = useDateRangeHandlers(value, onValueChange, states, dateInputRef), showCalendar = _b.showCalendar, hideCalendar = _b.hideCalendar, inputLeftChangeHandler = _b.inputLeftChangeHandler, inputRightChangeHandler = _b.inputRightChangeHandler, onChangeTime = _b.onChangeTime, onChangeDate = _b.onChangeDate;
|
|
1790
|
-
var _c = useUserInputHandlers(onChangeDate, dateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _c.onKeyDownHandler, onFocusRight = _c.onFocusRight, onFocusLeft = _c.onFocusLeft, onClickDay = _c.onClickDay, onClickCalendarButton = _c.onClickCalendarButton, onClickArrowButton = _c.onClickArrowButton;
|
|
1791
|
-
useDateRangeEffects(value, setDateInFocus, dateInputRef);
|
|
1812
|
+
var _b = useDateRangeHandlers$1(value, onValueChange, states, dateInputRef), showCalendar = _b.showCalendar, hideCalendar = _b.hideCalendar, inputLeftChangeHandler = _b.inputLeftChangeHandler, inputRightChangeHandler = _b.inputRightChangeHandler, onChangeTime = _b.onChangeTime, onChangeDate = _b.onChangeDate;
|
|
1813
|
+
var _c = useUserInputHandlers$1(onChangeDate, dateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _c.onKeyDownHandler, onFocusRight = _c.onFocusRight, onFocusLeft = _c.onFocusLeft, onClickDay = _c.onClickDay, onClickCalendarButton = _c.onClickCalendarButton, onClickArrowButton = _c.onClickArrowButton;
|
|
1814
|
+
useDateRangeEffects$1(value, setDateInFocus, dateInputRef);
|
|
1792
1815
|
var statePerMonth = React.useMemo(function () {
|
|
1793
1816
|
var dateToHighlight = value || localDate;
|
|
1794
1817
|
if (!dateToHighlight) {
|
|
@@ -1806,17 +1829,17 @@ var DateTimeInput = function (_a) {
|
|
|
1806
1829
|
var timeValue = React.useMemo(function () { return (value ? transformTimeInDateToTimeString(value) : localTime); }, [value, localTime]);
|
|
1807
1830
|
var delayedIsCalendarVisible = core.useDelayedFalse(isCalendarVisible, 300);
|
|
1808
1831
|
var delayedIsTimePickerVisible = core.useDelayedFalse(isTimePickerVisible, 300);
|
|
1809
|
-
return (
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1832
|
+
return (React__namespace.createElement(core.Box, { onKeyDown: onKeyDownHandler },
|
|
1833
|
+
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 })) : delayedIsTimePickerVisible ? (React__namespace.createElement(core.Column, null,
|
|
1834
|
+
React__namespace.createElement(core.Column, { overflow: "hidden", height: "250px" },
|
|
1835
|
+
React__namespace.createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
|
|
1836
|
+
React__namespace.createElement(core.Space, null),
|
|
1837
|
+
React__namespace.createElement(core.Row, { justifyContent: "flex-end" },
|
|
1838
|
+
React__namespace.createElement(elements.PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
|
|
1839
|
+
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" }))));
|
|
1817
1840
|
};
|
|
1818
1841
|
|
|
1819
|
-
var useDateRangeEffects
|
|
1842
|
+
var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
|
|
1820
1843
|
React.useEffect(function moveFocusedDateWhenStartDateChanges() {
|
|
1821
1844
|
if (startDate) {
|
|
1822
1845
|
setDateInFocus(startDate);
|
|
@@ -1849,7 +1872,7 @@ var useDateRangeEffects$1 = function (startDate, endDate, setDateInFocus, startD
|
|
|
1849
1872
|
}, [endDate, endDateInputRef]);
|
|
1850
1873
|
};
|
|
1851
1874
|
|
|
1852
|
-
var useDateRangeHandlers
|
|
1875
|
+
var useDateRangeHandlers = function (startDate, endDate, onValueChange, _a) {
|
|
1853
1876
|
var setDateInFocus = _a.setDateInFocus, showCalendarInternal = _a.showCalendarInternal, hideCalendarInternal = _a.hideCalendarInternal, setFirstFocusedInput = _a.setFirstFocusedInput, setCurrentPanel = _a.setCurrentPanel;
|
|
1854
1877
|
var inputLeftChangeHandler = React.useCallback(function (ev) {
|
|
1855
1878
|
var _a;
|
|
@@ -1902,7 +1925,7 @@ var useDateRangeHandlers$1 = function (startDate, endDate, onValueChange, _a) {
|
|
|
1902
1925
|
};
|
|
1903
1926
|
};
|
|
1904
1927
|
|
|
1905
|
-
var useInputStates
|
|
1928
|
+
var useInputStates = function (startDate, endDate) {
|
|
1906
1929
|
var _a = core.useBoolean(false), isCalendarVisible = _a[0], showCalendarInternal = _a[1], hideCalendarInternal = _a[2];
|
|
1907
1930
|
var _b = React.useState(undefined), firstFocusedInput = _b[0], setFirstFocusedInput = _b[1];
|
|
1908
1931
|
var _c = React.useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
|
|
@@ -1930,7 +1953,7 @@ var useInputStates$1 = function (startDate, endDate) {
|
|
|
1930
1953
|
};
|
|
1931
1954
|
};
|
|
1932
1955
|
|
|
1933
|
-
var useUserInputHandlers
|
|
1956
|
+
var useUserInputHandlers = function (startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, _a) {
|
|
1934
1957
|
var firstFocusedInput = _a.firstFocusedInput, setFirstFocusedInput = _a.setFirstFocusedInput, isCalendarVisible = _a.isCalendarVisible, setFocusedInput = _a.setFocusedInput, focusedInput = _a.focusedInput, setCurrentPanel = _a.setCurrentPanel;
|
|
1935
1958
|
var onFocusLeft = React.useCallback(function () {
|
|
1936
1959
|
if (firstFocusedInput == null) {
|
|
@@ -2068,19 +2091,19 @@ var DateRangeDualTextInput = function (_a) {
|
|
|
2068
2091
|
var _b = value || {}, startDate = _b.startDate, endDate = _b.endDate;
|
|
2069
2092
|
var startDateInputRef = React.useRef(null);
|
|
2070
2093
|
var endDateInputRef = React.useRef(null);
|
|
2071
|
-
var states = useInputStates
|
|
2094
|
+
var states = useInputStates(startDate, endDate);
|
|
2072
2095
|
var dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isCalendarVisible = states.isCalendarVisible, currentPanel = states.currentPanel, setCurrentPanel = states.setCurrentPanel;
|
|
2073
|
-
var _c = useDateRangeHandlers
|
|
2074
|
-
var _d = useUserInputHandlers
|
|
2075
|
-
useDateRangeEffects
|
|
2096
|
+
var _c = useDateRangeHandlers(startDate, endDate, onValueChange, states), showCalendar = _c.showCalendar, hideCalendar = _c.hideCalendar, inputLeftChangeHandler = _c.inputLeftChangeHandler, inputRightChangeHandler = _c.inputRightChangeHandler;
|
|
2097
|
+
var _d = useUserInputHandlers(startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _d.onKeyDownHandler, onFocusRight = _d.onFocusRight, onFocusLeft = _d.onFocusLeft, onClickDay = _d.onClickDay, onClickCalendarButton = _d.onClickCalendarButton, onClickArrowButton = _d.onClickArrowButton;
|
|
2098
|
+
useDateRangeEffects(startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef);
|
|
2076
2099
|
var startDateIsAfterEnd = React.useMemo(function () { return startDate && endDate && dateFns.isAfter(startDate, endDate); }, [startDate, endDate]);
|
|
2077
2100
|
var statePerMonth = React.useMemo(function () {
|
|
2078
2101
|
return buildDayStateForSingleMonth(calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus);
|
|
2079
2102
|
}, [calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus]);
|
|
2080
2103
|
var delayedIsCalendarVisible = core.useDelayedFalse(isCalendarVisible, 300);
|
|
2081
|
-
return (
|
|
2082
|
-
|
|
2083
|
-
|
|
2104
|
+
return (React__namespace.createElement(core.Box, { onKeyDown: onKeyDownHandler },
|
|
2105
|
+
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 }, calendarProps, { statePerMonth: statePerMonth }))) },
|
|
2106
|
+
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: "104px", widthRight: "104px" }))));
|
|
2084
2107
|
};
|
|
2085
2108
|
|
|
2086
2109
|
exports.Calendar = Calendar;
|