@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.es.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
|
|
2
3
|
import { FlatButton, PrimaryButton, Icon, stenaArrowRight } from '@stenajs-webui/elements';
|
|
3
4
|
import { Box, Text, Clickable, Row, Space, Spacing, Indent, Column, SeparatorLine, parseIntElseUndefined, useBoolean, useDelayedFalse } from '@stenajs-webui/core';
|
|
4
5
|
import { isAfter, eachDayOfInterval, isSameDay, endOfMonth, startOfMonth, min, addDays, max, subDays, format, getISOWeek, getDate, startOfISOWeek, addWeeks, getMonth, getYear, getISODay, addHours, addMonths, addYears, subMonths, subYears, parse, isValid } from 'date-fns';
|
|
@@ -58,12 +59,14 @@ function __rest(s, e) {
|
|
|
58
59
|
return t;
|
|
59
60
|
}
|
|
60
61
|
|
|
61
|
-
function
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
function __spreadArray(to, from, pack) {
|
|
63
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
64
|
+
if (ar || !(i in from)) {
|
|
65
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
66
|
+
ar[i] = from[i];
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
67
70
|
}
|
|
68
71
|
|
|
69
72
|
var DateFormats = {
|
|
@@ -75,7 +78,7 @@ var DateFormats = {
|
|
|
75
78
|
weekDayName: "EEEE",
|
|
76
79
|
weekDayNameShort: "EEE",
|
|
77
80
|
dateAndMonth: "d MMM",
|
|
78
|
-
monthAndDate: "MMM do",
|
|
81
|
+
monthAndDate: "MMM do", // Jan 2nd
|
|
79
82
|
};
|
|
80
83
|
|
|
81
84
|
var buildDayStateForDateRange = function (statePerMonth, start, end) {
|
|
@@ -148,7 +151,7 @@ var addDayStateHighlights = function (calendarState, date, highlights) {
|
|
|
148
151
|
calendarState[monthString][weekNumber] &&
|
|
149
152
|
calendarState[monthString][weekNumber][dayInMonth];
|
|
150
153
|
var newHighlights = dayState && dayState.highlights
|
|
151
|
-
?
|
|
154
|
+
? __spreadArray(__spreadArray([], dayState.highlights, true), highlights, true) : highlights;
|
|
152
155
|
return __assign(__assign({}, calendarState), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = __assign(__assign({}, (calendarState &&
|
|
153
156
|
calendarState[monthString] &&
|
|
154
157
|
calendarState[monthString][weekNumber])), (_c = {}, _c[dayInMonth] = __assign(__assign({}, dayState), { highlights: newHighlights }), _c)), _b)), _a));
|
|
@@ -165,7 +168,7 @@ var addWeekStateHighlights = function (calendarState, week, highlights) {
|
|
|
165
168
|
});
|
|
166
169
|
var weekState = state && state[monthString] ? state[monthString][weekNumber] : undefined;
|
|
167
170
|
var newHighlights = weekState && weekState.highlights
|
|
168
|
-
?
|
|
171
|
+
? __spreadArray(__spreadArray([], weekState.highlights, true), highlights, true) : highlights;
|
|
169
172
|
var newWeekState = __assign(__assign({}, weekState), { highlights: newHighlights });
|
|
170
173
|
return __assign(__assign({}, state), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = newWeekState, _b)), _a));
|
|
171
174
|
};
|
|
@@ -401,40 +404,40 @@ var extranetCalendarTheme = __assign(__assign({}, defaultCalendarTheme), { width
|
|
|
401
404
|
|
|
402
405
|
var WeekNumberCell = function (_a) {
|
|
403
406
|
var onClickWeek = _a.onClickWeek, theme = _a.theme, week = _a.week, background = _a.background, backgroundColor = _a.backgroundColor, prefix = _a.prefix;
|
|
404
|
-
var content = (createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
405
|
-
background && createElement(Box, { position: "absolute" }, background),
|
|
406
|
-
createElement(Box, { position: "absolute" },
|
|
407
|
-
createElement(Text, { color: onClickWeek
|
|
407
|
+
var content = (React.createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
408
|
+
background && React.createElement(Box, { position: "absolute" }, background),
|
|
409
|
+
React.createElement(Box, { position: "absolute" },
|
|
410
|
+
React.createElement(Text, { color: onClickWeek
|
|
408
411
|
? theme.WeekNumber.clickableTextColor
|
|
409
412
|
: theme.WeekNumber.textColor },
|
|
410
413
|
prefix,
|
|
411
414
|
week.weekNumber))));
|
|
412
|
-
return (createElement(Box, { background: backgroundColor || theme.WeekNumber.backgroundColor, position: "relative" }, onClickWeek ? (createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeek(week, ev); }, disableFocusHighlight: !onClickWeek }, content)) : (content)));
|
|
415
|
+
return (React.createElement(Box, { background: backgroundColor || theme.WeekNumber.backgroundColor, position: "relative" }, onClickWeek ? (React.createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeek(week, ev); }, disableFocusHighlight: !onClickWeek }, content)) : (content)));
|
|
413
416
|
};
|
|
414
417
|
|
|
415
418
|
function CalendarWeek(_a) {
|
|
416
419
|
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;
|
|
417
|
-
return (createElement("tr", { key: week.weekNumber },
|
|
418
|
-
theme.WeekNumber.show && (createElement("td", null, renderWeekNumber ? (renderWeekNumber(week, theme, onClickWeek)) : (createElement(WeekNumberCell, { week: week, onClickWeek: onClickWeek, theme: theme })))),
|
|
419
|
-
week.days.map(function (day) { return (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 })); })));
|
|
420
|
+
return (React.createElement("tr", { key: week.weekNumber },
|
|
421
|
+
theme.WeekNumber.show && (React.createElement("td", null, renderWeekNumber ? (renderWeekNumber(week, theme, onClickWeek)) : (React.createElement(WeekNumberCell, { week: week, onClickWeek: onClickWeek, theme: theme })))),
|
|
422
|
+
week.days.map(function (day) { return (React.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 })); })));
|
|
420
423
|
}
|
|
421
424
|
|
|
422
425
|
var WeekDayCell = function (_a) {
|
|
423
426
|
var onClickWeekDay = _a.onClickWeekDay, day = _a.day, theme = _a.theme;
|
|
424
|
-
var content = (createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
425
|
-
createElement(Text, { size: "small", color: onClickWeekDay
|
|
427
|
+
var content = (React.createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
428
|
+
React.createElement(Text, { size: "small", color: onClickWeekDay
|
|
426
429
|
? theme.WeekDay.clickableTextColor
|
|
427
430
|
: theme.WeekDay.textColor }, day.name)));
|
|
428
431
|
if (onClickWeekDay) {
|
|
429
|
-
return (createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeekDay(day.dayOfWeek, ev); }, disableFocusHighlight: !onClickWeekDay }, content));
|
|
432
|
+
return (React.createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeekDay(day.dayOfWeek, ev); }, disableFocusHighlight: !onClickWeekDay }, content));
|
|
430
433
|
}
|
|
431
434
|
return content;
|
|
432
435
|
};
|
|
433
436
|
|
|
434
437
|
var CalendarDay = function (_a) {
|
|
435
438
|
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;
|
|
436
|
-
var content = (createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
437
|
-
createElement(Text, __assign({}, (theme.CalendarDay.textProps &&
|
|
439
|
+
var content = (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
440
|
+
React.createElement(Text, __assign({}, (theme.CalendarDay.textProps &&
|
|
438
441
|
theme.CalendarDay.textProps(defaultHighlights, dayState, day, week, month, userData))), day.dayOfMonth)));
|
|
439
442
|
var WrapperTd = styled.td(__assign({}, (theme.CalendarDay.tdStyle &&
|
|
440
443
|
theme.CalendarDay.tdStyle(defaultHighlights, dayState, day, week, month, userData))));
|
|
@@ -442,11 +445,11 @@ var CalendarDay = function (_a) {
|
|
|
442
445
|
theme.CalendarDay.innerWrapperStyle(defaultHighlights, dayState, day, week, month, userData))), { width: "100%", height: "100%" }));
|
|
443
446
|
var CellWrapperDiv = styled.div(__assign(__assign({}, (theme.CalendarDay.cellWrapperStyle &&
|
|
444
447
|
theme.CalendarDay.cellWrapperStyle(defaultHighlights, dayState, day, week, month, userData))), { width: "100%", height: "100%", position: "relative" }));
|
|
445
|
-
return (createElement(WrapperTd, null,
|
|
446
|
-
createElement(InnerWrapperDiv, null,
|
|
447
|
-
createElement(CellWrapperDiv, null, day.month === month.monthInYear && (createElement(Fragment, null,
|
|
448
|
-
ExtraDayContent && (createElement(ExtraDayContent, { week: week, month: month, day: day, dayState: dayState, theme: theme, userData: userData })),
|
|
449
|
-
onClickDay && isClickable(defaultHighlights, dayState) ? (createElement(Clickable, { onClick: function (ev) { return onClickDay(day, userData, ev); }, style: { width: "100%", height: "100%" }, borderRadius: "var(--swui-calendar-day-border-radius)" }, content)) : (createElement(Fragment, null, content))))))));
|
|
448
|
+
return (React.createElement(WrapperTd, null,
|
|
449
|
+
React.createElement(InnerWrapperDiv, null,
|
|
450
|
+
React.createElement(CellWrapperDiv, null, day.month === month.monthInYear && (React.createElement(React.Fragment, null,
|
|
451
|
+
ExtraDayContent && (React.createElement(ExtraDayContent, { week: week, month: month, day: day, dayState: dayState, theme: theme, userData: userData })),
|
|
452
|
+
onClickDay && isClickable(defaultHighlights, dayState) ? (React.createElement(Clickable, { onClick: function (ev) { return onClickDay(day, userData, ev); }, style: { width: "100%", height: "100%" }, borderRadius: "var(--swui-calendar-day-border-radius)" }, content)) : (React.createElement(React.Fragment, null, content))))))));
|
|
450
453
|
};
|
|
451
454
|
var isClickable = function (defaultHighlights, dayState) {
|
|
452
455
|
return !!dayHighlightSelect(dayState, defaultHighlights, ["enabled", "disabled"], [true, false], true);
|
|
@@ -455,23 +458,23 @@ var isClickable = function (defaultHighlights, dayState) {
|
|
|
455
458
|
function CalendarMonth(_a) {
|
|
456
459
|
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;
|
|
457
460
|
var showWeekNumber = theme.WeekNumber.show;
|
|
458
|
-
return (createElement(Fragment, null,
|
|
459
|
-
createElement(Box, { alignItems: "stretch" },
|
|
460
|
-
createElement(Row, { justifyContent: "space-between", alignItems: "center", height: "32px" },
|
|
461
|
-
createElement(Box, { alignItems: "center" }, headerLeftContent),
|
|
462
|
-
createElement(Row, { alignItems: "center" },
|
|
463
|
-
createElement(Row, { width: "104px", justifyContent: "center" }, onClickMonth ? (createElement(FlatButton, { onClick: function () { return onClickMonth(month); }, label: month.name })) : (createElement(Text, null, month.name))),
|
|
464
|
-
createElement(Space, null),
|
|
465
|
-
createElement(Row, { width: "64px", justifyContent: "center" }, onClickYear ? (createElement(FlatButton, { onClick: function () { return onClickYear(month.year); }, label: String(month.year) })) : (createElement(Text, null, month.year)))),
|
|
466
|
-
createElement(Box, { alignItems: "center" }, headerRightContent)),
|
|
467
|
-
createElement("table", null,
|
|
468
|
-
createElement("tbody", null,
|
|
469
|
-
createElement("tr", null,
|
|
470
|
-
showWeekNumber && (createElement("td", null,
|
|
471
|
-
createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
472
|
-
createElement(Text, { size: "small", color: theme.CalendarMonth.headerTextColor }, "W")))),
|
|
473
|
-
month.weeks[0].days.map(function (day) { return (createElement("td", { key: day.name }, renderWeekDay ? (renderWeekDay(day.name, theme, onClickWeekDay)) : (createElement(WeekDayCell, { day: day, onClickWeekDay: onClickWeekDay, theme: theme })))); })),
|
|
474
|
-
month.weeks.map(function (week) { return (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 })); }))))));
|
|
461
|
+
return (React.createElement(React.Fragment, null,
|
|
462
|
+
React.createElement(Box, { alignItems: "stretch" },
|
|
463
|
+
React.createElement(Row, { justifyContent: "space-between", alignItems: "center", height: "32px" },
|
|
464
|
+
React.createElement(Box, { alignItems: "center" }, headerLeftContent),
|
|
465
|
+
React.createElement(Row, { alignItems: "center" },
|
|
466
|
+
React.createElement(Row, { width: "104px", justifyContent: "center" }, onClickMonth ? (React.createElement(FlatButton, { onClick: function () { return onClickMonth(month); }, label: month.name })) : (React.createElement(Text, null, month.name))),
|
|
467
|
+
React.createElement(Space, null),
|
|
468
|
+
React.createElement(Row, { width: "64px", justifyContent: "center" }, onClickYear ? (React.createElement(FlatButton, { onClick: function () { return onClickYear(month.year); }, label: String(month.year) })) : (React.createElement(Text, null, month.year)))),
|
|
469
|
+
React.createElement(Box, { alignItems: "center" }, headerRightContent)),
|
|
470
|
+
React.createElement("table", null,
|
|
471
|
+
React.createElement("tbody", null,
|
|
472
|
+
React.createElement("tr", null,
|
|
473
|
+
showWeekNumber && (React.createElement("td", null,
|
|
474
|
+
React.createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
|
|
475
|
+
React.createElement(Text, { size: "small", color: theme.CalendarMonth.headerTextColor }, "W")))),
|
|
476
|
+
month.weeks[0].days.map(function (day) { return (React.createElement("td", { key: day.name }, renderWeekDay ? (renderWeekDay(day.name, theme, onClickWeekDay)) : (React.createElement(WeekDayCell, { day: day, onClickWeekDay: onClickWeekDay, theme: theme })))); })),
|
|
477
|
+
month.weeks.map(function (week) { return (React.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 })); }))))));
|
|
475
478
|
}
|
|
476
479
|
|
|
477
480
|
function styleInject(css, ref) {
|
|
@@ -501,23 +504,23 @@ function styleInject(css, ref) {
|
|
|
501
504
|
}
|
|
502
505
|
}
|
|
503
506
|
|
|
504
|
-
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";
|
|
505
|
-
var styles = {"calendar":"Calendar-module_calendar__Ztvgm"};
|
|
506
|
-
styleInject(css_248z);
|
|
507
|
+
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";
|
|
508
|
+
var styles$1 = {"calendar":"Calendar-module_calendar__Ztvgm"};
|
|
509
|
+
styleInject(css_248z$1);
|
|
507
510
|
|
|
508
511
|
function CalendarPanel(_a) {
|
|
509
512
|
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;
|
|
510
|
-
return (createElement("div", { className: styles.calendar }, monthRows.map(function (monthRow, rowIndex) { return (createElement(Spacing, { key: rowIndex },
|
|
511
|
-
createElement(Row, null, monthRow.map(function (month, index) { return (createElement(Fragment, { key: month.name },
|
|
512
|
-
index > 0 && createElement(Space, null),
|
|
513
|
-
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 }))); })))); })));
|
|
513
|
+
return (React.createElement("div", { className: styles$1.calendar }, monthRows.map(function (monthRow, rowIndex) { return (React.createElement(Spacing, { key: rowIndex },
|
|
514
|
+
React.createElement(Row, null, monthRow.map(function (month, index) { return (React.createElement(React.Fragment, { key: month.name },
|
|
515
|
+
index > 0 && React.createElement(Space, null),
|
|
516
|
+
React.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 }))); })))); })));
|
|
514
517
|
}
|
|
515
518
|
function Calendar(props) {
|
|
516
519
|
var initialDate = getInitialDate(props.year, props.month, props.date);
|
|
517
520
|
var _a = calculateOverflowingMonth(initialDate.year, initialDate.month), year = _a.year, month = _a.month;
|
|
518
521
|
var monthRows = getMonthRows(year, month, props.numMonths, props.monthsPerRow);
|
|
519
522
|
var statePerMonth = useHighlightToday(props.highlightToday, props.statePerMonth);
|
|
520
|
-
return (createElement(CalendarPanel, __assign({ year: year, month: month, monthRows: monthRows }, props, { statePerMonth: statePerMonth })));
|
|
523
|
+
return (React.createElement(CalendarPanel, __assign({ year: year, month: month, monthRows: monthRows }, props, { statePerMonth: statePerMonth })));
|
|
521
524
|
}
|
|
522
525
|
var getInitialDate = function (year, month, date) {
|
|
523
526
|
if (month && year) {
|
|
@@ -577,18 +580,18 @@ var useSelectedMonthStepperLogic = function (dateInFocus, setDateInFocus, months
|
|
|
577
580
|
|
|
578
581
|
var WithMonthSwitcherBelow = function (_a) {
|
|
579
582
|
var children = _a.children, prevMonth = _a.prevMonth, nextMonth = _a.nextMonth, prevYear = _a.prevYear, nextYear = _a.nextYear;
|
|
580
|
-
return (createElement("div", null,
|
|
583
|
+
return (React.createElement("div", null,
|
|
581
584
|
children,
|
|
582
|
-
createElement(Indent, null,
|
|
583
|
-
createElement(Row, null,
|
|
584
|
-
createElement(FlatButton, { onClick: prevYear, leftIcon: faAngleDoubleLeft }),
|
|
585
|
-
createElement(Space, null),
|
|
586
|
-
createElement(FlatButton, { onClick: prevMonth, leftIcon: faAngleLeft }),
|
|
587
|
-
createElement(Indent, { num: 2 }),
|
|
588
|
-
createElement(FlatButton, { onClick: nextMonth, leftIcon: faAngleRight }),
|
|
589
|
-
createElement(Space, null),
|
|
590
|
-
createElement(FlatButton, { onClick: nextYear, leftIcon: faAngleDoubleRight }))),
|
|
591
|
-
createElement(Space, null)));
|
|
585
|
+
React.createElement(Indent, null,
|
|
586
|
+
React.createElement(Row, null,
|
|
587
|
+
React.createElement(FlatButton, { onClick: prevYear, leftIcon: faAngleDoubleLeft }),
|
|
588
|
+
React.createElement(Space, null),
|
|
589
|
+
React.createElement(FlatButton, { onClick: prevMonth, leftIcon: faAngleLeft }),
|
|
590
|
+
React.createElement(Indent, { num: 2 }),
|
|
591
|
+
React.createElement(FlatButton, { onClick: nextMonth, leftIcon: faAngleRight }),
|
|
592
|
+
React.createElement(Space, null),
|
|
593
|
+
React.createElement(FlatButton, { onClick: nextYear, leftIcon: faAngleDoubleRight }))),
|
|
594
|
+
React.createElement(Space, null)));
|
|
592
595
|
};
|
|
593
596
|
|
|
594
597
|
var MonthPickerCell = function (_a) {
|
|
@@ -598,7 +601,7 @@ var MonthPickerCell = function (_a) {
|
|
|
598
601
|
now.setMonth(month);
|
|
599
602
|
return format(now, "MMM");
|
|
600
603
|
}, [month]);
|
|
601
|
-
return (createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === month ? (createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } })) : (createElement(FlatButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } }))));
|
|
604
|
+
return (React.createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === month ? (React.createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } })) : (React.createElement(FlatButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } }))));
|
|
602
605
|
};
|
|
603
606
|
|
|
604
607
|
var monthMatrix = [
|
|
@@ -609,7 +612,7 @@ var monthMatrix = [
|
|
|
609
612
|
];
|
|
610
613
|
var MonthPicker = function (_a) {
|
|
611
614
|
var value = _a.value, onValueChange = _a.onValueChange;
|
|
612
|
-
return (createElement(Column, null, monthMatrix.map(function (monthRow) { return (createElement(Row, { key: monthRow[0] }, monthRow.map(function (month) { return (createElement(MonthPickerCell, { key: month, month: month, onValueChange: onValueChange, value: value })); }))); })));
|
|
615
|
+
return (React.createElement(Column, null, monthMatrix.map(function (monthRow) { return (React.createElement(Row, { key: monthRow[0] }, monthRow.map(function (month) { return (React.createElement(MonthPickerCell, { key: month, month: month, onValueChange: onValueChange, value: value })); }))); })));
|
|
613
616
|
};
|
|
614
617
|
|
|
615
618
|
var createStandardDateRangePresets = function (now) { return [
|
|
@@ -639,21 +642,21 @@ var PresetPicker = function (_a) {
|
|
|
639
642
|
var _c = useState(0), pageIndex = _c[0], setPageIndex = _c[1];
|
|
640
643
|
var pages = useMemo(function () { return createStandardDateRangePresets(new Date()); }, []);
|
|
641
644
|
var currentPage = (_b = pages[pageIndex]) !== null && _b !== void 0 ? _b : pages[0];
|
|
642
|
-
return (createElement(Column, null,
|
|
643
|
-
createElement(Row, { justifyContent: "space-between", alignItems: "center", width: "200px" },
|
|
644
|
-
createElement(FlatButton, { size: "small", leftIcon: faAngleLeft, disabled: pageIndex === 0, onClick: function () { return setPageIndex(pageIndex - 1); } }),
|
|
645
|
-
createElement(Text, null, currentPage.label),
|
|
646
|
-
createElement(FlatButton, { size: "small", leftIcon: faAngleRight, disabled: pageIndex === pages.length - 1, onClick: function () { return setPageIndex(pageIndex + 1); } })),
|
|
647
|
-
createElement(Space, null),
|
|
648
|
-
createElement(Column, { alignItems: "center" }, currentPage.presets.map(function (preset) { return (createElement(Fragment, { key: preset.label },
|
|
649
|
-
createElement(PrimaryButton, { label: preset.label, onClick: function () { return onClickPreset(preset); } }),
|
|
650
|
-
createElement(Space, null))); }))));
|
|
645
|
+
return (React.createElement(Column, null,
|
|
646
|
+
React.createElement(Row, { justifyContent: "space-between", alignItems: "center", width: "200px" },
|
|
647
|
+
React.createElement(FlatButton, { size: "small", leftIcon: faAngleLeft, disabled: pageIndex === 0, onClick: function () { return setPageIndex(pageIndex - 1); } }),
|
|
648
|
+
React.createElement(Text, null, currentPage.label),
|
|
649
|
+
React.createElement(FlatButton, { size: "small", leftIcon: faAngleRight, disabled: pageIndex === pages.length - 1, onClick: function () { return setPageIndex(pageIndex + 1); } })),
|
|
650
|
+
React.createElement(Space, null),
|
|
651
|
+
React.createElement(Column, { alignItems: "center" }, currentPage.presets.map(function (preset) { return (React.createElement(React.Fragment, { key: preset.label },
|
|
652
|
+
React.createElement(PrimaryButton, { label: preset.label, onClick: function () { return onClickPreset(preset); } }),
|
|
653
|
+
React.createElement(Space, null))); }))));
|
|
651
654
|
};
|
|
652
655
|
|
|
653
656
|
var YearPickerCell = function (_a) {
|
|
654
657
|
var value = _a.value, onValueChange = _a.onValueChange, year = _a.year;
|
|
655
658
|
var label = String(year);
|
|
656
|
-
return (createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === year ? (createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } })) : (createElement(FlatButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } }))));
|
|
659
|
+
return (React.createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === year ? (React.createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } })) : (React.createElement(FlatButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } }))));
|
|
657
660
|
};
|
|
658
661
|
|
|
659
662
|
var YearPicker = function (_a) {
|
|
@@ -671,12 +674,12 @@ var YearPicker = function (_a) {
|
|
|
671
674
|
useEffect(function () {
|
|
672
675
|
setLastYear(function (prev) { return calculateLastYearInFocus(value, prev); });
|
|
673
676
|
}, [value]);
|
|
674
|
-
return (createElement(Row, null,
|
|
675
|
-
createElement(Column, { justifyContent: "center" },
|
|
676
|
-
createElement(FlatButton, { leftIcon: faCaretLeft, onClick: function () { return setLastYear(lastYear - 3); } })),
|
|
677
|
-
createElement(Column, null, yearRows.map(function (yearRow) { return (createElement(Row, { key: yearRow[0] }, yearRow.map(function (year) { return (createElement(YearPickerCell, { key: year, year: year, onValueChange: onValueChange, value: value })); }))); })),
|
|
678
|
-
createElement(Column, { justifyContent: "center" },
|
|
679
|
-
createElement(FlatButton, { leftIcon: faCaretRight, onClick: function () { return setLastYear(lastYear + 3); } }))));
|
|
677
|
+
return (React.createElement(Row, null,
|
|
678
|
+
React.createElement(Column, { justifyContent: "center" },
|
|
679
|
+
React.createElement(FlatButton, { leftIcon: faCaretLeft, onClick: function () { return setLastYear(lastYear - 3); } })),
|
|
680
|
+
React.createElement(Column, null, yearRows.map(function (yearRow) { return (React.createElement(Row, { key: yearRow[0] }, yearRow.map(function (year) { return (React.createElement(YearPickerCell, { key: year, year: year, onValueChange: onValueChange, value: value })); }))); })),
|
|
681
|
+
React.createElement(Column, { justifyContent: "center" },
|
|
682
|
+
React.createElement(FlatButton, { leftIcon: faCaretRight, onClick: function () { return setLastYear(lastYear + 3); } }))));
|
|
680
683
|
};
|
|
681
684
|
var calculateLastYearInFocus = function (value, lastYear) {
|
|
682
685
|
if (value == null) {
|
|
@@ -724,17 +727,17 @@ var CalendarWithMonthYearPickers = function CalendarWithMonthYearPickers(_a) {
|
|
|
724
727
|
}, [setCurrentPanel]);
|
|
725
728
|
switch (currentPanel) {
|
|
726
729
|
case "calendar":
|
|
727
|
-
return (createElement(Fragment, null,
|
|
728
|
-
createElement(Calendar, __assign({}, props, { date: dateInFocus, onClickYear: onClickYear, onClickMonth: onClickMonth }))));
|
|
730
|
+
return (React.createElement(React.Fragment, null,
|
|
731
|
+
React.createElement(Calendar, __assign({}, props, { date: dateInFocus, onClickYear: onClickYear, onClickMonth: onClickMonth }))));
|
|
729
732
|
case "month":
|
|
730
|
-
return (createElement(MonthPicker, { value: dateInFocus.getMonth(), onValueChange: onChangeSelectedMonth }));
|
|
733
|
+
return (React.createElement(MonthPicker, { value: dateInFocus.getMonth(), onValueChange: onChangeSelectedMonth }));
|
|
731
734
|
case "year":
|
|
732
|
-
return (createElement(YearPicker, { value: dateInFocus.getFullYear(), onValueChange: onChangeSelectedYear }));
|
|
735
|
+
return (React.createElement(YearPicker, { value: dateInFocus.getFullYear(), onValueChange: onChangeSelectedYear }));
|
|
733
736
|
case "presets":
|
|
734
|
-
return createElement(PresetPicker, { onClickPreset: function () { } });
|
|
737
|
+
return React.createElement(PresetPicker, { onClickPreset: function () { } });
|
|
735
738
|
default:
|
|
736
|
-
return (createElement(Box, null,
|
|
737
|
-
createElement(PrimaryButton, { label: "Show calendar", onClick: function () { return setCurrentPanel("calendar"); } })));
|
|
739
|
+
return (React.createElement(Box, null,
|
|
740
|
+
React.createElement(PrimaryButton, { label: "Show calendar", onClick: function () { return setCurrentPanel("calendar"); } })));
|
|
738
741
|
}
|
|
739
742
|
};
|
|
740
743
|
|
|
@@ -745,21 +748,21 @@ function CalendarWithMonthSwitcher(_a) {
|
|
|
745
748
|
var placement = fallbackIfNoPlacement(monthSwitcherPlacement, calendarProps.numMonths);
|
|
746
749
|
switch (placement) {
|
|
747
750
|
case "below": {
|
|
748
|
-
return (createElement(WithMonthSwitcherBelow, { theme: theme, nextMonth: nextMonth, prevMonth: prevMonth, nextYear: nextYear, prevYear: prevYear },
|
|
749
|
-
createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus }))));
|
|
751
|
+
return (React.createElement(WithMonthSwitcherBelow, { theme: theme, nextMonth: nextMonth, prevMonth: prevMonth, nextYear: nextYear, prevYear: prevYear },
|
|
752
|
+
React.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus }))));
|
|
750
753
|
}
|
|
751
754
|
case "header": {
|
|
752
|
-
return (createElement(Column, null,
|
|
753
|
-
createElement(CalendarWithMonthYearPickers, __assign({}, calendarProps, { theme: theme, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, onSelectPreset: onSelectPreset, headerLeftContent: createElement(Row, { alignItems: "center" },
|
|
754
|
-
!hideYearPagination && (createElement(FlatButton, { size: "small", onClick: prevYear, leftIcon: faAngleDoubleLeft })),
|
|
755
|
-
createElement(Space, null),
|
|
756
|
-
createElement(FlatButton, { size: "small", onClick: prevMonth, leftIcon: faAngleLeft })), headerRightContent: createElement(Row, { alignItems: "center" },
|
|
757
|
-
createElement(FlatButton, { size: "small", onClick: nextMonth, leftIcon: faAngleRight }),
|
|
758
|
-
createElement(Space, null),
|
|
759
|
-
!hideYearPagination && (createElement(FlatButton, { size: "small", onClick: nextYear, leftIcon: faAngleDoubleRight }))) }))));
|
|
755
|
+
return (React.createElement(Column, null,
|
|
756
|
+
React.createElement(CalendarWithMonthYearPickers, __assign({}, calendarProps, { theme: theme, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, onSelectPreset: onSelectPreset, headerLeftContent: React.createElement(Row, { alignItems: "center" },
|
|
757
|
+
!hideYearPagination && (React.createElement(FlatButton, { size: "small", onClick: prevYear, leftIcon: faAngleDoubleLeft })),
|
|
758
|
+
React.createElement(Space, null),
|
|
759
|
+
React.createElement(FlatButton, { size: "small", onClick: prevMonth, leftIcon: faAngleLeft })), headerRightContent: React.createElement(Row, { alignItems: "center" },
|
|
760
|
+
React.createElement(FlatButton, { size: "small", onClick: nextMonth, leftIcon: faAngleRight }),
|
|
761
|
+
React.createElement(Space, null),
|
|
762
|
+
!hideYearPagination && (React.createElement(FlatButton, { size: "small", onClick: nextYear, leftIcon: faAngleDoubleRight }))) }))));
|
|
760
763
|
}
|
|
761
764
|
default: {
|
|
762
|
-
return (createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus })));
|
|
765
|
+
return (React.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus })));
|
|
763
766
|
}
|
|
764
767
|
}
|
|
765
768
|
}
|
|
@@ -891,7 +894,7 @@ var useDateRangeSelection = function (_a) {
|
|
|
891
894
|
|
|
892
895
|
function DateRangeCalendar(props) {
|
|
893
896
|
var dateRangeSelectionProps = useDateRangeSelection(props);
|
|
894
|
-
return (createElement(CalendarWithMonthSwitcher, __assign({}, props, dateRangeSelectionProps)));
|
|
897
|
+
return (React.createElement(CalendarWithMonthSwitcher, __assign({}, props, dateRangeSelectionProps)));
|
|
895
898
|
}
|
|
896
899
|
|
|
897
900
|
var useDateRangeCalendarState = function () {
|
|
@@ -938,7 +941,7 @@ var useSingleDateSelection = function (_a) {
|
|
|
938
941
|
|
|
939
942
|
function SingleDateCalendar(props) {
|
|
940
943
|
var singleDateSelectionProps = useSingleDateSelection(props);
|
|
941
|
-
return (createElement(CalendarWithMonthSwitcher, __assign({}, props, singleDateSelectionProps)));
|
|
944
|
+
return (React.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleDateSelectionProps)));
|
|
942
945
|
}
|
|
943
946
|
|
|
944
947
|
var useMultiDateSelection = function (_a) {
|
|
@@ -954,7 +957,7 @@ var useMultiDateSelection = function (_a) {
|
|
|
954
957
|
onChange(value.filter(function (v) { return !isSameDay(v, day.date); }));
|
|
955
958
|
}
|
|
956
959
|
else {
|
|
957
|
-
onChange(
|
|
960
|
+
onChange(__spreadArray(__spreadArray([], (value || []), true), [day.date], false));
|
|
958
961
|
}
|
|
959
962
|
}, [onChange, value]);
|
|
960
963
|
var statePerMonthWithSelectedDate = useMemo(function () {
|
|
@@ -975,7 +978,7 @@ var useMultiDateSelection = function (_a) {
|
|
|
975
978
|
|
|
976
979
|
function MultiDateCalendar(props) {
|
|
977
980
|
var selectionProps = useMultiDateSelection(props);
|
|
978
|
-
return createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
|
|
981
|
+
return React.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
|
|
979
982
|
}
|
|
980
983
|
|
|
981
984
|
var useSingleWeekSelection = function (_a) {
|
|
@@ -1040,7 +1043,7 @@ var getWeekDataFromWeekString = function (week) {
|
|
|
1040
1043
|
|
|
1041
1044
|
function SingleWeekCalendar(props) {
|
|
1042
1045
|
var singleWeekSelectionProps = useSingleWeekSelection(props);
|
|
1043
|
-
return (createElement(CalendarWithMonthSwitcher, __assign({}, props, singleWeekSelectionProps)));
|
|
1046
|
+
return (React.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleWeekSelectionProps)));
|
|
1044
1047
|
}
|
|
1045
1048
|
|
|
1046
1049
|
var removeDateIfExist = function (list, date) {
|
|
@@ -1083,7 +1086,7 @@ var useDateRangeExclusionSelection = function (_a) {
|
|
|
1083
1086
|
onChange(removeDateIfExist(value, day.date));
|
|
1084
1087
|
}
|
|
1085
1088
|
else {
|
|
1086
|
-
onChange(
|
|
1089
|
+
onChange(__spreadArray(__spreadArray([], value, true), [day.date], false));
|
|
1087
1090
|
}
|
|
1088
1091
|
}
|
|
1089
1092
|
else {
|
|
@@ -1114,7 +1117,7 @@ var addHighlighting = function (statePerMonth, dateList) {
|
|
|
1114
1117
|
|
|
1115
1118
|
function DateRangeExclusionCalendar(props) {
|
|
1116
1119
|
var selectionProps = useDateRangeExclusionSelection(props);
|
|
1117
|
-
return createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
|
|
1120
|
+
return React.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
|
|
1118
1121
|
}
|
|
1119
1122
|
|
|
1120
1123
|
var defaultPopoverPlacement = "bottom";
|
|
@@ -1161,9 +1164,9 @@ var DateInput = function (_a) {
|
|
|
1161
1164
|
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;
|
|
1162
1165
|
var _f = useDateInput(onChange, onClose, openOnMount), hideCalendar = _f.hideCalendar, showingCalendar = _f.showingCalendar, onSelectDate = _f.onSelectDate, showCalendar = _f.showCalendar;
|
|
1163
1166
|
var _g = useCalendarPopoverUpdater(), tippyRef = _g.tippyRef, onChangePanel = _g.onChangePanel;
|
|
1164
|
-
return (createElement(Box, { width: width },
|
|
1165
|
-
createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, onClickOutside: hideCalendar, placement: defaultPopoverPlacement, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", tippyRef: tippyRef, content: createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel })) },
|
|
1166
|
-
createElement(TextInput, { iconLeft: faCalendarAlt, onFocus: showCalendar, onClickLeft: showCalendar, value: value ? format(value, displayFormat) : "", placeholder: placeholder, size: 9, autoFocus: openOnMount, variant: variant }))));
|
|
1167
|
+
return (React.createElement(Box, { width: width },
|
|
1168
|
+
React.createElement(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.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel })) },
|
|
1169
|
+
React.createElement(TextInput, { iconLeft: faCalendarAlt, onFocus: showCalendar, onClickLeft: showCalendar, value: value ? format(value, displayFormat) : "", placeholder: placeholder, size: 9, autoFocus: openOnMount, variant: variant }))));
|
|
1167
1170
|
};
|
|
1168
1171
|
|
|
1169
1172
|
var useDateRangeInput = function (value, onChange) {
|
|
@@ -1240,17 +1243,17 @@ var DateRangeInput = function (_a) {
|
|
|
1240
1243
|
var _h = useState("calendar"), currentPanel = _h[0], setCurrentPanel = _h[1];
|
|
1241
1244
|
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;
|
|
1242
1245
|
var statePerMonth = useMemo(function () { return buildDayStateForDateRange(undefined, value.startDate, value.endDate); }, [value]);
|
|
1243
|
-
return (createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel })) },
|
|
1244
|
-
createElement(Row, { alignItems: "center" },
|
|
1245
|
-
createElement(TextInput, { iconLeft: faCalendarAlt, onFocus: showCalendarStartDate, value: value.startDate ? format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
|
|
1246
|
-
createElement(Space, null),
|
|
1247
|
-
createElement(Icon, { icon: faLongArrowAltRight, color: cssColor("--lhds-color-ui-500"), size: 14 }),
|
|
1248
|
-
createElement(Space, null),
|
|
1249
|
-
createElement(TextInput, { iconLeft: faCalendarAlt, onFocus: showCalendarEndDate, value: value.endDate ? format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
|
|
1246
|
+
return (React.createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: React.createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel })) },
|
|
1247
|
+
React.createElement(Row, { alignItems: "center" },
|
|
1248
|
+
React.createElement(TextInput, { iconLeft: faCalendarAlt, onFocus: showCalendarStartDate, value: value.startDate ? format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
|
|
1249
|
+
React.createElement(Space, null),
|
|
1250
|
+
React.createElement(Icon, { icon: faLongArrowAltRight, color: cssColor("--lhds-color-ui-500"), size: 14 }),
|
|
1251
|
+
React.createElement(Space, null),
|
|
1252
|
+
React.createElement(TextInput, { iconLeft: faCalendarAlt, onFocus: showCalendarEndDate, value: value.endDate ? format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
|
|
1250
1253
|
};
|
|
1251
1254
|
|
|
1252
1255
|
var DateTextInput = function (_a) {
|
|
1253
|
-
var calendarProps = _a.calendarProps, _b = _a.closeOnCalendarSelectDate, closeOnCalendarSelectDate = _b === void 0 ? true : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? DateFormats.fullDate : _c
|
|
1256
|
+
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"]);
|
|
1254
1257
|
var _k = useState(false), open = _k[0], setOpen = _k[1];
|
|
1255
1258
|
var _l = useCalendarPopoverUpdater(), tippyRef = _l.tippyRef, onChangePanel = _l.onChangePanel;
|
|
1256
1259
|
var toggleCalendar = useCallback(function () {
|
|
@@ -1276,12 +1279,12 @@ var DateTextInput = function (_a) {
|
|
|
1276
1279
|
var dateIsValid = !!value && isValid(parse(value, dateFormat, new Date()));
|
|
1277
1280
|
var userInputCorrectLength = !!value && value.length >= dateFormat.length;
|
|
1278
1281
|
var invalid = (userInputCorrectLength && !dateIsValid) || inValidInput;
|
|
1279
|
-
return (createElement(Box, { width: width },
|
|
1280
|
-
createElement(Popover, { arrow: false, lazy: true, visible: open, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", placement: defaultPopoverPlacement, onClickOutside: hideCalendar, tippyRef: tippyRef, content: createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onCalendarSelectDate, onChangePanel: onChangePanel, value: value && dateIsValid
|
|
1282
|
+
return (React.createElement(Box, { width: width },
|
|
1283
|
+
React.createElement(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.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onCalendarSelectDate, onChangePanel: onChangePanel, value: value && dateIsValid
|
|
1281
1284
|
? parse(value, dateFormat, new Date())
|
|
1282
1285
|
: undefined, theme: calendarTheme })) },
|
|
1283
|
-
createElement(TextInput, __assign({}, props, { variant: invalid ? "error" : "standard", disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (createElement(Row, { alignItems: "center", indent: 0.5 },
|
|
1284
|
-
createElement(FlatButton, { size: "small", leftIcon: faCalendarAlt, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", size: 10 })))));
|
|
1286
|
+
React.createElement(TextInput, __assign({}, props, { variant: invalid ? "error" : "standard", disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (React.createElement(Row, { alignItems: "center", indent: 0.5 },
|
|
1287
|
+
React.createElement(FlatButton, { size: "small", leftIcon: faCalendarAlt, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", size: 10 })))));
|
|
1285
1288
|
};
|
|
1286
1289
|
|
|
1287
1290
|
var formatHours = function (hours) {
|
|
@@ -1415,7 +1418,7 @@ var TimeTextInput = function (_a) {
|
|
|
1415
1418
|
onValueChange(time);
|
|
1416
1419
|
}
|
|
1417
1420
|
}, [onValueChange, setValid]);
|
|
1418
|
-
return (createElement(TextInput, __assign({}, props, { type: "time", variant: !valid ? "error" : variant, iconLeft: useIcon ? faClock : undefined, value: value, placeholder: showPlaceholder ? timeFormat : undefined, onChange: onChangeHandler, onBlur: onBlur, width: width })));
|
|
1421
|
+
return (React.createElement(TextInput, __assign({}, props, { type: "time", variant: !valid ? "error" : variant, iconLeft: useIcon ? faClock : undefined, value: value, placeholder: showPlaceholder ? timeFormat : undefined, onChange: onChangeHandler, onBlur: onBlur, width: width })));
|
|
1419
1422
|
};
|
|
1420
1423
|
|
|
1421
1424
|
var DualTextInput = function (_a) {
|
|
@@ -1456,21 +1459,21 @@ var DualTextInput = function (_a) {
|
|
|
1456
1459
|
onBlurRight(ev);
|
|
1457
1460
|
}
|
|
1458
1461
|
}, [onBlurRight, focusCounter, tryTriggerOnBlur]);
|
|
1459
|
-
return (createElement(Box, null,
|
|
1460
|
-
createElement(TextInputBox, { disableContentPaddingRight: true, variant: variant, contentRight: createElement(Row, { alignItems: "center" },
|
|
1461
|
-
createElement(Indent, { num: 0.5 },
|
|
1462
|
-
createElement(FlatButton, { leftIcon: faCalendarAlt$1, onClick: onClickCalendar, size: "small" })),
|
|
1463
|
-
showPresets ? (createElement(Fragment, null,
|
|
1464
|
-
createElement(Row, { height: "22px" },
|
|
1465
|
-
createElement(SeparatorLine, { vertical: true })),
|
|
1466
|
-
createElement(Indent, { num: 0.5 },
|
|
1467
|
-
createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, size: "small" })))) : null) },
|
|
1468
|
-
createElement(Box, { width: widthLeft },
|
|
1469
|
-
createElement(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 })),
|
|
1470
|
-
createElement(Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
|
|
1471
|
-
createElement(Icon, { icon: separatorIcon, size: 12, color: cssColor("--lhds-color-ui-500") })),
|
|
1472
|
-
createElement(Box, { width: widthRight },
|
|
1473
|
-
createElement(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 })))));
|
|
1462
|
+
return (React.createElement(Box, null,
|
|
1463
|
+
React.createElement(TextInputBox, { disableContentPaddingRight: true, variant: variant, contentRight: React.createElement(Row, { alignItems: "center" },
|
|
1464
|
+
React.createElement(Indent, { num: 0.5 },
|
|
1465
|
+
React.createElement(FlatButton, { leftIcon: faCalendarAlt$1, onClick: onClickCalendar, size: "small" })),
|
|
1466
|
+
showPresets ? (React.createElement(React.Fragment, null,
|
|
1467
|
+
React.createElement(Row, { height: "22px" },
|
|
1468
|
+
React.createElement(SeparatorLine, { vertical: true })),
|
|
1469
|
+
React.createElement(Indent, { num: 0.5 },
|
|
1470
|
+
React.createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, size: "small" })))) : null) },
|
|
1471
|
+
React.createElement(Box, { width: widthLeft },
|
|
1472
|
+
React.createElement(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 })),
|
|
1473
|
+
React.createElement(Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
|
|
1474
|
+
React.createElement(Icon, { icon: separatorIcon, size: 12, color: cssColor("--lhds-color-ui-500") })),
|
|
1475
|
+
React.createElement(Box, { width: widthRight },
|
|
1476
|
+
React.createElement(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 })))));
|
|
1474
1477
|
};
|
|
1475
1478
|
|
|
1476
1479
|
var transformTimeStringToNumber = function (time) {
|
|
@@ -1532,9 +1535,9 @@ var transformTimeInDateToTimeString = function (date) {
|
|
|
1532
1535
|
return formatHours(String(date.getHours())) + ":" + formatMinutes(String(date.getMinutes()));
|
|
1533
1536
|
};
|
|
1534
1537
|
|
|
1535
|
-
var css_248z
|
|
1536
|
-
var styles
|
|
1537
|
-
styleInject(css_248z
|
|
1538
|
+
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";
|
|
1539
|
+
var styles = {"timePicker":"TimePicker-module_timePicker__1ElGu","timePickerColumn":"TimePicker-module_timePickerColumn__2vfuE"};
|
|
1540
|
+
styleInject(css_248z);
|
|
1538
1541
|
|
|
1539
1542
|
var TimePickerCell = function (_a) {
|
|
1540
1543
|
var onClick = _a.onClick, item = _a.item, selected = _a.selected, columnRef = _a.columnRef, canScrollRef = _a.canScrollRef;
|
|
@@ -1549,13 +1552,13 @@ var TimePickerCell = function (_a) {
|
|
|
1549
1552
|
canScrollRef.current = false;
|
|
1550
1553
|
}
|
|
1551
1554
|
}, [columnRef, item, selected, canScrollRef]);
|
|
1552
|
-
return (createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5, ref: ref }, selected ? (createElement(PrimaryButton, { label: String(item), onClick: function () { return onClick && onClick(item); } })) : (createElement(FlatButton, { label: String(item), onClick: function () { return onClick && onClick(item); } }))));
|
|
1555
|
+
return (React.createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5, ref: ref }, selected ? (React.createElement(PrimaryButton, { label: String(item), onClick: function () { return onClick && onClick(item); } })) : (React.createElement(FlatButton, { label: String(item), onClick: function () { return onClick && onClick(item); } }))));
|
|
1553
1556
|
};
|
|
1554
1557
|
|
|
1555
1558
|
var TimePickerColumn = function (_a) {
|
|
1556
1559
|
var onClick = _a.onClick, items = _a.items, selectedItem = _a.selectedItem, canScrollRef = _a.canScrollRef;
|
|
1557
1560
|
var columnRef = useRef(null);
|
|
1558
|
-
return (createElement(Column, { className: styles
|
|
1561
|
+
return (React.createElement(Column, { className: styles.timePickerColumn, ref: columnRef }, items.map(function (item) { return (React.createElement(TimePickerCell, { key: item, item: item, onClick: onClick, selected: item === selectedItem, columnRef: columnRef, canScrollRef: canScrollRef })); })));
|
|
1559
1562
|
};
|
|
1560
1563
|
|
|
1561
1564
|
var hours = range(0, 24);
|
|
@@ -1580,13 +1583,13 @@ var TimePicker = function (_a) {
|
|
|
1580
1583
|
setMinute(m);
|
|
1581
1584
|
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)));
|
|
1582
1585
|
}, [hour, onValueChange]);
|
|
1583
|
-
return (createElement(Row, { className: styles
|
|
1584
|
-
createElement(TimePickerColumn, { items: hours, onClick: onClickHour, selectedItem: hour, canScrollRef: canScrollRef }),
|
|
1585
|
-
createElement(Indent, null),
|
|
1586
|
-
createElement(TimePickerColumn, { items: minutes, onClick: onClickMinutes, selectedItem: minute, canScrollRef: canScrollRef })));
|
|
1586
|
+
return (React.createElement(Row, { className: styles.timePicker },
|
|
1587
|
+
React.createElement(TimePickerColumn, { items: hours, onClick: onClickHour, selectedItem: hour, canScrollRef: canScrollRef }),
|
|
1588
|
+
React.createElement(Indent, null),
|
|
1589
|
+
React.createElement(TimePickerColumn, { items: minutes, onClick: onClickMinutes, selectedItem: minute, canScrollRef: canScrollRef })));
|
|
1587
1590
|
};
|
|
1588
1591
|
|
|
1589
|
-
var useDateRangeEffects = function (date, setDateInFocus, dateInputRef) {
|
|
1592
|
+
var useDateRangeEffects$1 = function (date, setDateInFocus, dateInputRef) {
|
|
1590
1593
|
useEffect(function moveFocusedDateWhenDateChanges() {
|
|
1591
1594
|
if (date) {
|
|
1592
1595
|
setDateInFocus(date);
|
|
@@ -1604,7 +1607,7 @@ var useDateRangeEffects = function (date, setDateInFocus, dateInputRef) {
|
|
|
1604
1607
|
}, [date, dateInputRef]);
|
|
1605
1608
|
};
|
|
1606
1609
|
|
|
1607
|
-
var useDateRangeHandlers = function (date, onValueChange, _a, dateInputRef) {
|
|
1610
|
+
var useDateRangeHandlers$1 = function (date, onValueChange, _a, dateInputRef) {
|
|
1608
1611
|
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;
|
|
1609
1612
|
var onChangeDate = useCallback(function (incomingDate) {
|
|
1610
1613
|
if (!incomingDate) {
|
|
@@ -1692,7 +1695,7 @@ var useDateRangeHandlers = function (date, onValueChange, _a, dateInputRef) {
|
|
|
1692
1695
|
};
|
|
1693
1696
|
};
|
|
1694
1697
|
|
|
1695
|
-
var useInputStates = function (date) {
|
|
1698
|
+
var useInputStates$1 = function (date) {
|
|
1696
1699
|
var _a = useState(undefined), localDate = _a[0], setLocalDate = _a[1];
|
|
1697
1700
|
var _b = useState(undefined), localTime = _b[0], setLocalTime = _b[1];
|
|
1698
1701
|
var _c = useBoolean(false), isCalendarVisible = _c[0], showCalendarInternal = _c[1], hideCalendarInternal = _c[2];
|
|
@@ -1720,7 +1723,7 @@ var useInputStates = function (date) {
|
|
|
1720
1723
|
};
|
|
1721
1724
|
};
|
|
1722
1725
|
|
|
1723
|
-
var useUserInputHandlers = function (onChangeDate, dateInputRef, showCalendar, hideCalendar, _a) {
|
|
1726
|
+
var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar, hideCalendar, _a) {
|
|
1724
1727
|
var isCalendarVisible = _a.isCalendarVisible, setCurrentPanel = _a.setCurrentPanel, showTimePicker = _a.showTimePicker, hideTimePicker = _a.hideTimePicker;
|
|
1725
1728
|
var onFocusLeft = useCallback(function () {
|
|
1726
1729
|
if (!isCalendarVisible) {
|
|
@@ -1778,11 +1781,11 @@ var DateTimeInput = function (_a) {
|
|
|
1778
1781
|
var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus;
|
|
1779
1782
|
var dateInputRef = useRef(null);
|
|
1780
1783
|
var timeInputRef = useRef(null);
|
|
1781
|
-
var states = useInputStates(value);
|
|
1784
|
+
var states = useInputStates$1(value);
|
|
1782
1785
|
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;
|
|
1783
|
-
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;
|
|
1784
|
-
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;
|
|
1785
|
-
useDateRangeEffects(value, setDateInFocus, dateInputRef);
|
|
1786
|
+
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;
|
|
1787
|
+
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;
|
|
1788
|
+
useDateRangeEffects$1(value, setDateInFocus, dateInputRef);
|
|
1786
1789
|
var statePerMonth = useMemo(function () {
|
|
1787
1790
|
var dateToHighlight = value || localDate;
|
|
1788
1791
|
if (!dateToHighlight) {
|
|
@@ -1800,17 +1803,17 @@ var DateTimeInput = function (_a) {
|
|
|
1800
1803
|
var timeValue = useMemo(function () { return (value ? transformTimeInDateToTimeString(value) : localTime); }, [value, localTime]);
|
|
1801
1804
|
var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
|
|
1802
1805
|
var delayedIsTimePickerVisible = useDelayedFalse(isTimePickerVisible, 300);
|
|
1803
|
-
return (createElement(Box, { onKeyDown: onKeyDownHandler },
|
|
1804
|
-
createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (createElement(Column, null, delayedIsCalendarVisible ? (createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel })) : delayedIsTimePickerVisible ? (createElement(Column, null,
|
|
1805
|
-
createElement(Column, { overflow: "hidden", height: "250px" },
|
|
1806
|
-
createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
|
|
1807
|
-
createElement(Space, null),
|
|
1808
|
-
createElement(Row, { justifyContent: "flex-end" },
|
|
1809
|
-
createElement(PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
|
|
1810
|
-
createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1, 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" }))));
|
|
1806
|
+
return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
|
|
1807
|
+
React.createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (React.createElement(Column, null, delayedIsCalendarVisible ? (React.createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel })) : delayedIsTimePickerVisible ? (React.createElement(Column, null,
|
|
1808
|
+
React.createElement(Column, { overflow: "hidden", height: "250px" },
|
|
1809
|
+
React.createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
|
|
1810
|
+
React.createElement(Space, null),
|
|
1811
|
+
React.createElement(Row, { justifyContent: "flex-end" },
|
|
1812
|
+
React.createElement(PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
|
|
1813
|
+
React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1, 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" }))));
|
|
1811
1814
|
};
|
|
1812
1815
|
|
|
1813
|
-
var useDateRangeEffects
|
|
1816
|
+
var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
|
|
1814
1817
|
useEffect(function moveFocusedDateWhenStartDateChanges() {
|
|
1815
1818
|
if (startDate) {
|
|
1816
1819
|
setDateInFocus(startDate);
|
|
@@ -1843,7 +1846,7 @@ var useDateRangeEffects$1 = function (startDate, endDate, setDateInFocus, startD
|
|
|
1843
1846
|
}, [endDate, endDateInputRef]);
|
|
1844
1847
|
};
|
|
1845
1848
|
|
|
1846
|
-
var useDateRangeHandlers
|
|
1849
|
+
var useDateRangeHandlers = function (startDate, endDate, onValueChange, _a) {
|
|
1847
1850
|
var setDateInFocus = _a.setDateInFocus, showCalendarInternal = _a.showCalendarInternal, hideCalendarInternal = _a.hideCalendarInternal, setFirstFocusedInput = _a.setFirstFocusedInput, setCurrentPanel = _a.setCurrentPanel;
|
|
1848
1851
|
var inputLeftChangeHandler = useCallback(function (ev) {
|
|
1849
1852
|
var _a;
|
|
@@ -1896,7 +1899,7 @@ var useDateRangeHandlers$1 = function (startDate, endDate, onValueChange, _a) {
|
|
|
1896
1899
|
};
|
|
1897
1900
|
};
|
|
1898
1901
|
|
|
1899
|
-
var useInputStates
|
|
1902
|
+
var useInputStates = function (startDate, endDate) {
|
|
1900
1903
|
var _a = useBoolean(false), isCalendarVisible = _a[0], showCalendarInternal = _a[1], hideCalendarInternal = _a[2];
|
|
1901
1904
|
var _b = useState(undefined), firstFocusedInput = _b[0], setFirstFocusedInput = _b[1];
|
|
1902
1905
|
var _c = useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
|
|
@@ -1924,7 +1927,7 @@ var useInputStates$1 = function (startDate, endDate) {
|
|
|
1924
1927
|
};
|
|
1925
1928
|
};
|
|
1926
1929
|
|
|
1927
|
-
var useUserInputHandlers
|
|
1930
|
+
var useUserInputHandlers = function (startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, _a) {
|
|
1928
1931
|
var firstFocusedInput = _a.firstFocusedInput, setFirstFocusedInput = _a.setFirstFocusedInput, isCalendarVisible = _a.isCalendarVisible, setFocusedInput = _a.setFocusedInput, focusedInput = _a.focusedInput, setCurrentPanel = _a.setCurrentPanel;
|
|
1929
1932
|
var onFocusLeft = useCallback(function () {
|
|
1930
1933
|
if (firstFocusedInput == null) {
|
|
@@ -2062,19 +2065,19 @@ var DateRangeDualTextInput = function (_a) {
|
|
|
2062
2065
|
var _b = value || {}, startDate = _b.startDate, endDate = _b.endDate;
|
|
2063
2066
|
var startDateInputRef = useRef(null);
|
|
2064
2067
|
var endDateInputRef = useRef(null);
|
|
2065
|
-
var states = useInputStates
|
|
2068
|
+
var states = useInputStates(startDate, endDate);
|
|
2066
2069
|
var dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isCalendarVisible = states.isCalendarVisible, currentPanel = states.currentPanel, setCurrentPanel = states.setCurrentPanel;
|
|
2067
|
-
var _c = useDateRangeHandlers
|
|
2068
|
-
var _d = useUserInputHandlers
|
|
2069
|
-
useDateRangeEffects
|
|
2070
|
+
var _c = useDateRangeHandlers(startDate, endDate, onValueChange, states), showCalendar = _c.showCalendar, hideCalendar = _c.hideCalendar, inputLeftChangeHandler = _c.inputLeftChangeHandler, inputRightChangeHandler = _c.inputRightChangeHandler;
|
|
2071
|
+
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;
|
|
2072
|
+
useDateRangeEffects(startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef);
|
|
2070
2073
|
var startDateIsAfterEnd = useMemo(function () { return startDate && endDate && isAfter(startDate, endDate); }, [startDate, endDate]);
|
|
2071
2074
|
var statePerMonth = useMemo(function () {
|
|
2072
2075
|
return buildDayStateForSingleMonth(calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus);
|
|
2073
2076
|
}, [calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus]);
|
|
2074
2077
|
var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
|
|
2075
|
-
return (createElement(Box, { onKeyDown: onKeyDownHandler },
|
|
2076
|
-
createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel }, calendarProps, { statePerMonth: statePerMonth }))) },
|
|
2077
|
-
createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: 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" }))));
|
|
2078
|
+
return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
|
|
2079
|
+
React.createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (React.createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel }, calendarProps, { statePerMonth: statePerMonth }))) },
|
|
2080
|
+
React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: 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" }))));
|
|
2078
2081
|
};
|
|
2079
2082
|
|
|
2080
2083
|
export { Calendar, CalendarDay, DateInput, DateRangeCalendar, DateRangeDualTextInput, DateRangeExclusionCalendar, DateRangeInput, DateTextInput, DateTimeInput, Month, MonthPicker, MultiDateCalendar, PresetPicker, SingleDateCalendar, SingleWeekCalendar, TimeTextInput, WeekDay, WeekDayCell, WeekNumberCell, YearPicker, addDayStateHighlights, addWeekRangeHighlights, addWeekStateHighlights, buildDayStateForDateRange, buildDayStateForRange, buildDayStateForSingleMonth, calculateOverflowingMonth, createDay, dayHasHighlight, dayHighlightSelect, defaultCalendarTheme, defaultTextPropsProvider, defaultWrapperStyleProvider, ensureStartIsFirst, extranetCalendarTheme, getDaysForWeekForDate, getMonthInYear, getMonthsInYear, getStartDateOfISOWeek, getWeekForDate, getWeeksForMonth, setDayStateValue, setDayStateValueFunction, transformDateIntervalToDateStringInterval, transformDateStringIntervalToDateInterval, useDateRangeCalendarState, useDateRangeExclusionSelection, useDateRangeSelection, useMultiDateSelection, useSingleDateSelection, useSingleWeekSelection };
|