@danske/sapphire-react-lab 0.89.0 → 0.90.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/build/cjs/index.js +296 -3054
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Accordion/index.js.map +1 -1
- package/build/esm/Accordion/src/Accordion.js +2 -2
- package/build/esm/Accordion/src/Accordion.js.map +1 -1
- package/build/esm/Accordion/src/AccordionHeading.js +1 -1
- package/build/esm/Accordion/src/AccordionHeading.js.map +1 -1
- package/build/esm/Accordion/src/AccordionItem.js.map +1 -1
- package/build/esm/FileDropzone/src/FileDropzone.js +3 -4
- package/build/esm/FileDropzone/src/FileDropzone.js.map +1 -1
- package/build/esm/Filtering/src/FilterDropdown.js +9 -8
- package/build/esm/Filtering/src/FilterDropdown.js.map +1 -1
- package/build/esm/LabeledValue/src/LabeledValue.js +2 -2
- package/build/esm/LabeledValue/src/LabeledValue.js.map +1 -1
- package/build/esm/NumberField/src/NumberField.js +11 -11
- package/build/esm/NumberField/src/NumberField.js.map +1 -1
- package/build/esm/NumberField/src/StepperButton.js +1 -1
- package/build/esm/NumberField/src/StepperButton.js.map +1 -1
- package/build/esm/TagGroup/src/Tag.js +2 -2
- package/build/esm/TagGroup/src/Tag.js.map +1 -1
- package/build/esm/TagGroup/src/TagGroup.js.map +1 -1
- package/build/esm/index.js +0 -17
- package/build/esm/index.js.map +1 -1
- package/build/index.d.ts +28 -756
- package/package.json +5 -13
- package/build/esm/AlertDialog/src/AlertDialog.js +0 -75
- package/build/esm/AlertDialog/src/AlertDialog.js.map +0 -1
- package/build/esm/Avatar/src/Avatar.js +0 -76
- package/build/esm/Avatar/src/Avatar.js.map +0 -1
- package/build/esm/Calendar/i18n/da-DK.js +0 -9
- package/build/esm/Calendar/i18n/da-DK.js.map +0 -1
- package/build/esm/Calendar/i18n/de-DE.js +0 -9
- package/build/esm/Calendar/i18n/de-DE.js.map +0 -1
- package/build/esm/Calendar/i18n/en-US.js +0 -9
- package/build/esm/Calendar/i18n/en-US.js.map +0 -1
- package/build/esm/Calendar/i18n/fi-FI.js +0 -9
- package/build/esm/Calendar/i18n/fi-FI.js.map +0 -1
- package/build/esm/Calendar/i18n/index.js +0 -20
- package/build/esm/Calendar/i18n/index.js.map +0 -1
- package/build/esm/Calendar/i18n/nb-NO.js +0 -9
- package/build/esm/Calendar/i18n/nb-NO.js.map +0 -1
- package/build/esm/Calendar/i18n/pl-PL.js +0 -9
- package/build/esm/Calendar/i18n/pl-PL.js.map +0 -1
- package/build/esm/Calendar/i18n/sv-SE.js +0 -9
- package/build/esm/Calendar/i18n/sv-SE.js.map +0 -1
- package/build/esm/Calendar/src/Calendar.js +0 -121
- package/build/esm/Calendar/src/Calendar.js.map +0 -1
- package/build/esm/Calendar/src/CalendarButtons.js +0 -96
- package/build/esm/Calendar/src/CalendarButtons.js.map +0 -1
- package/build/esm/Calendar/src/CalendarDaysGrid.js +0 -169
- package/build/esm/Calendar/src/CalendarDaysGrid.js.map +0 -1
- package/build/esm/Calendar/src/CalendarHeader.js +0 -58
- package/build/esm/Calendar/src/CalendarHeader.js.map +0 -1
- package/build/esm/Calendar/src/CalendarMonthOrYearCell.js +0 -79
- package/build/esm/Calendar/src/CalendarMonthOrYearCell.js.map +0 -1
- package/build/esm/Calendar/src/CalendarMonthsGrid.js +0 -58
- package/build/esm/Calendar/src/CalendarMonthsGrid.js.map +0 -1
- package/build/esm/Calendar/src/CalendarPageAnimation.js +0 -67
- package/build/esm/Calendar/src/CalendarPageAnimation.js.map +0 -1
- package/build/esm/Calendar/src/CalendarYearsGrid.js +0 -52
- package/build/esm/Calendar/src/CalendarYearsGrid.js.map +0 -1
- package/build/esm/Calendar/src/RangeCalendar.js +0 -119
- package/build/esm/Calendar/src/RangeCalendar.js.map +0 -1
- package/build/esm/Calendar/src/useCustomDurationCalendarGrid.js +0 -57
- package/build/esm/Calendar/src/useCustomDurationCalendarGrid.js.map +0 -1
- package/build/esm/Calendar/src/useRangeCalendarState.js +0 -57
- package/build/esm/Calendar/src/useRangeCalendarState.js.map +0 -1
- package/build/esm/Calendar/src/useSapphireCalendarState.js +0 -86
- package/build/esm/Calendar/src/useSapphireCalendarState.js.map +0 -1
- package/build/esm/Calendar/src/utils.js +0 -12
- package/build/esm/Calendar/src/utils.js.map +0 -1
- package/build/esm/DateField/i18n/da-DK.js +0 -7
- package/build/esm/DateField/i18n/da-DK.js.map +0 -1
- package/build/esm/DateField/i18n/de-DE.js +0 -7
- package/build/esm/DateField/i18n/de-DE.js.map +0 -1
- package/build/esm/DateField/i18n/en-US.js +0 -7
- package/build/esm/DateField/i18n/en-US.js.map +0 -1
- package/build/esm/DateField/i18n/fi-FI.js +0 -7
- package/build/esm/DateField/i18n/fi-FI.js.map +0 -1
- package/build/esm/DateField/i18n/index.js +0 -20
- package/build/esm/DateField/i18n/index.js.map +0 -1
- package/build/esm/DateField/i18n/nb-NO.js +0 -7
- package/build/esm/DateField/i18n/nb-NO.js.map +0 -1
- package/build/esm/DateField/i18n/pl-PL.js +0 -7
- package/build/esm/DateField/i18n/pl-PL.js.map +0 -1
- package/build/esm/DateField/i18n/sv-SE.js +0 -7
- package/build/esm/DateField/i18n/sv-SE.js.map +0 -1
- package/build/esm/DateField/src/DateField.js +0 -129
- package/build/esm/DateField/src/DateField.js.map +0 -1
- package/build/esm/DateField/src/DateFieldButton.js +0 -44
- package/build/esm/DateField/src/DateFieldButton.js.map +0 -1
- package/build/esm/DateField/src/DateInput.js +0 -81
- package/build/esm/DateField/src/DateInput.js.map +0 -1
- package/build/esm/DateField/src/DateRangeField.js +0 -154
- package/build/esm/DateField/src/DateRangeField.js.map +0 -1
- package/build/esm/DateField/src/DateRangeInput.js +0 -90
- package/build/esm/DateField/src/DateRangeInput.js.map +0 -1
- package/build/esm/DateField/src/DateSegment.js +0 -52
- package/build/esm/DateField/src/DateSegment.js.map +0 -1
- package/build/esm/DateField/src/helpers.js +0 -14
- package/build/esm/DateField/src/helpers.js.map +0 -1
- package/build/esm/DateField/src/useDateRangePickerState.js +0 -57
- package/build/esm/DateField/src/useDateRangePickerState.js.map +0 -1
- package/build/esm/DateField/src/utils/placeholders.js +0 -91
- package/build/esm/DateField/src/utils/placeholders.js.map +0 -1
- package/build/esm/DateField/src/utils/segments.js +0 -46
- package/build/esm/DateField/src/utils/segments.js.map +0 -1
- package/build/esm/FeedbackMessage/src/FeedbackMessage.js +0 -87
- package/build/esm/FeedbackMessage/src/FeedbackMessage.js.map +0 -1
- package/build/esm/Fieldset/src/Fieldset.js +0 -81
- package/build/esm/Fieldset/src/Fieldset.js.map +0 -1
- package/build/esm/NotificationBadge/src/NotificationBadge.js +0 -74
- package/build/esm/NotificationBadge/src/NotificationBadge.js.map +0 -1
- package/build/esm/SearchField/src/SearchField.js +0 -130
- package/build/esm/SearchField/src/SearchField.js.map +0 -1
- package/build/esm/SearchField/src/useComboBoxState.js +0 -42
- package/build/esm/SearchField/src/useComboBoxState.js.map +0 -1
- package/build/esm/Toast/src/Toast.js +0 -77
- package/build/esm/Toast/src/Toast.js.map +0 -1
- package/build/esm/Toast/src/ToastCloseButton.js +0 -50
- package/build/esm/Toast/src/ToastCloseButton.js.map +0 -1
- package/build/esm/Toast/src/ToastProvider.js +0 -60
- package/build/esm/Toast/src/ToastProvider.js.map +0 -1
- package/build/esm/Toast/src/ToastRegion.js +0 -66
- package/build/esm/Toast/src/ToastRegion.js.map +0 -1
- package/build/esm/Toast/src/context.js +0 -10
- package/build/esm/Toast/src/context.js.map +0 -1
- package/build/esm/Toast/src/useShowToast.js +0 -25
- package/build/esm/Toast/src/useShowToast.js.map +0 -1
- package/build/esm/ToggleButton/src/ToggleButton.js +0 -85
- package/build/esm/ToggleButton/src/ToggleButton.js.map +0 -1
- package/build/esm/Typography/index.js +0 -14
- package/build/esm/Typography/index.js.map +0 -1
- package/build/esm/Typography/src/Body.js +0 -66
- package/build/esm/Typography/src/Body.js.map +0 -1
- package/build/esm/Typography/src/Caption.js +0 -59
- package/build/esm/Typography/src/Caption.js.map +0 -1
- package/build/esm/Typography/src/Heading.js +0 -53
- package/build/esm/Typography/src/Heading.js.map +0 -1
- package/build/esm/Typography/src/Subheading.js +0 -63
- package/build/esm/Typography/src/Subheading.js.map +0 -1
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { useCalendarGrid, useCalendarCell } from '@react-aria/calendar';
|
|
4
|
-
import { endOfMonth, getWeeksInMonth, startOfWeek, today, isSameMonth, isSameDay, getDayOfWeek, startOfMonth, getLocalTimeZone } from '@internationalized/date';
|
|
5
|
-
import { useLocale, useDateFormatter, useMessageFormatter } from '@react-aria/i18n';
|
|
6
|
-
import intlMessages from '../i18n/index.js';
|
|
7
|
-
import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
|
|
8
|
-
import { CalendarDayButton } from './CalendarButtons.js';
|
|
9
|
-
import { sentenceCase } from './utils.js';
|
|
10
|
-
|
|
11
|
-
var __defProp = Object.defineProperty;
|
|
12
|
-
var __defProps = Object.defineProperties;
|
|
13
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
14
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
15
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
16
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
17
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
18
|
-
var __spreadValues = (a, b) => {
|
|
19
|
-
for (var prop in b || (b = {}))
|
|
20
|
-
if (__hasOwnProp.call(b, prop))
|
|
21
|
-
__defNormalProp(a, prop, b[prop]);
|
|
22
|
-
if (__getOwnPropSymbols)
|
|
23
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
24
|
-
if (__propIsEnum.call(b, prop))
|
|
25
|
-
__defNormalProp(a, prop, b[prop]);
|
|
26
|
-
}
|
|
27
|
-
return a;
|
|
28
|
-
};
|
|
29
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
30
|
-
var __objRest = (source, exclude) => {
|
|
31
|
-
var target = {};
|
|
32
|
-
for (var prop in source)
|
|
33
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
34
|
-
target[prop] = source[prop];
|
|
35
|
-
if (source != null && __getOwnPropSymbols)
|
|
36
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
37
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
38
|
-
target[prop] = source[prop];
|
|
39
|
-
}
|
|
40
|
-
return target;
|
|
41
|
-
};
|
|
42
|
-
function CalendarDaysGrid(_a) {
|
|
43
|
-
var _b = _a, {
|
|
44
|
-
state,
|
|
45
|
-
startDate = state.visibleRange.start,
|
|
46
|
-
showWeekNumbers
|
|
47
|
-
} = _b, props = __objRest(_b, [
|
|
48
|
-
"state",
|
|
49
|
-
"startDate",
|
|
50
|
-
"showWeekNumbers"
|
|
51
|
-
]);
|
|
52
|
-
const { locale } = useLocale();
|
|
53
|
-
const { gridProps, headerProps } = useCalendarGrid(__spreadProps(__spreadValues({}, props), {
|
|
54
|
-
startDate,
|
|
55
|
-
endDate: endOfMonth(startDate)
|
|
56
|
-
}), state);
|
|
57
|
-
const weeksInMonth = getWeeksInMonth(startDate, locale);
|
|
58
|
-
const dayFormatter = useDateFormatter({
|
|
59
|
-
weekday: "short",
|
|
60
|
-
timeZone: state.timeZone
|
|
61
|
-
});
|
|
62
|
-
const weekDays = useMemo(() => {
|
|
63
|
-
const weekStart = startOfWeek(today(state.timeZone), locale);
|
|
64
|
-
return [...new Array(7).keys()].map((index) => {
|
|
65
|
-
const date = weekStart.add({ days: index });
|
|
66
|
-
const dateDay = date.toDate(state.timeZone);
|
|
67
|
-
return dayFormatter.format(dateDay);
|
|
68
|
-
});
|
|
69
|
-
}, [locale, state.timeZone, dayFormatter]);
|
|
70
|
-
return /* @__PURE__ */ React.createElement("table", __spreadProps(__spreadValues({}, gridProps), {
|
|
71
|
-
className: clsx(styles["sapphire-calendar__table"], {
|
|
72
|
-
[styles["sapphire-calendar__table--with-week-numbers"]]: showWeekNumbers
|
|
73
|
-
})
|
|
74
|
-
}), /* @__PURE__ */ React.createElement("thead", __spreadValues({}, headerProps), /* @__PURE__ */ React.createElement("tr", null, showWeekNumbers && /* @__PURE__ */ React.createElement("th", {
|
|
75
|
-
className: styles["sapphire-calendar__table-head-cell"],
|
|
76
|
-
"aria-hidden": "true"
|
|
77
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
78
|
-
className: styles["sapphire-calendar__week-number"]
|
|
79
|
-
}, "#")), weekDays.map((day, index) => /* @__PURE__ */ React.createElement("th", {
|
|
80
|
-
key: index,
|
|
81
|
-
className: styles["sapphire-calendar__table-head-cell"]
|
|
82
|
-
}, /* @__PURE__ */ React.createElement("abbr", {
|
|
83
|
-
className: styles["sapphire-calendar__day-of-week"]
|
|
84
|
-
}, sentenceCase(day)))))), /* @__PURE__ */ React.createElement("tbody", null, [...new Array(weeksInMonth).keys()].map((weekIndex) => {
|
|
85
|
-
return /* @__PURE__ */ React.createElement("tr", {
|
|
86
|
-
className: styles["sapphire-calendar__table-body-row"],
|
|
87
|
-
key: weekIndex
|
|
88
|
-
}, showWeekNumbers && /* @__PURE__ */ React.createElement(CalendarWeekNumberCell, {
|
|
89
|
-
date: startDate.add({ days: 7 * weekIndex })
|
|
90
|
-
}), state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ React.createElement(CalendarCell, {
|
|
91
|
-
currentMonth: startDate,
|
|
92
|
-
key: date.toString(),
|
|
93
|
-
state,
|
|
94
|
-
date
|
|
95
|
-
}) : /* @__PURE__ */ React.createElement("td", {
|
|
96
|
-
key: i
|
|
97
|
-
})));
|
|
98
|
-
}), /* @__PURE__ */ React.createElement("tr", null)));
|
|
99
|
-
}
|
|
100
|
-
function CalendarWeekNumberCell({ date }) {
|
|
101
|
-
const weekNumber = getWeekNumber(date);
|
|
102
|
-
const formatMessage = useMessageFormatter(intlMessages);
|
|
103
|
-
return /* @__PURE__ */ React.createElement("th", {
|
|
104
|
-
className: styles["sapphire-calendar__table-body-cell"],
|
|
105
|
-
role: "rowheader",
|
|
106
|
-
"aria-label": formatMessage("week", { weekNumber })
|
|
107
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
108
|
-
className: styles["sapphire-calendar__week-number"]
|
|
109
|
-
}, weekNumber));
|
|
110
|
-
}
|
|
111
|
-
function CalendarCell({
|
|
112
|
-
state,
|
|
113
|
-
date,
|
|
114
|
-
currentMonth
|
|
115
|
-
}) {
|
|
116
|
-
const ref = React.useRef(null);
|
|
117
|
-
const { locale } = useLocale();
|
|
118
|
-
const sameMonth = isSameMonth(date, currentMonth);
|
|
119
|
-
const {
|
|
120
|
-
cellProps,
|
|
121
|
-
buttonProps,
|
|
122
|
-
isSelected: isInSelection,
|
|
123
|
-
isDisabled,
|
|
124
|
-
formattedDate,
|
|
125
|
-
isUnavailable
|
|
126
|
-
} = useCalendarCell({ date, isDisabled: !sameMonth }, state, ref);
|
|
127
|
-
const highlightedRange = "highlightedRange" in state ? state.highlightedRange : null;
|
|
128
|
-
const isSelected = isInSelection && (!highlightedRange || isSameDay(highlightedRange.start, date) || isSameDay(highlightedRange.end, date));
|
|
129
|
-
return /* @__PURE__ */ React.createElement("td", __spreadProps(__spreadValues({}, cellProps), {
|
|
130
|
-
className: styles["sapphire-calendar__table-body-cell"]
|
|
131
|
-
}), /* @__PURE__ */ React.createElement(CalendarDayButton, __spreadProps(__spreadValues({}, buttonProps), {
|
|
132
|
-
ref,
|
|
133
|
-
isSelected,
|
|
134
|
-
isDisabled: isDisabled || isUnavailable,
|
|
135
|
-
hasCurrentIndicator: today(state.timeZone).compare(date) === 0,
|
|
136
|
-
isOutsideVisibleRange: !isSameMonth(currentMonth, date),
|
|
137
|
-
rangeHighlight: highlightedRange ? getRangeHighlight({ date, highlightedRange, locale }) : { highlighted: false }
|
|
138
|
-
}), formattedDate));
|
|
139
|
-
}
|
|
140
|
-
const getRangeHighlight = ({
|
|
141
|
-
date,
|
|
142
|
-
highlightedRange,
|
|
143
|
-
locale
|
|
144
|
-
}) => {
|
|
145
|
-
const isInSelection = !!highlightedRange && highlightedRange.start.compare(date) <= 0 && highlightedRange.end.compare(date) >= 0;
|
|
146
|
-
const rangeIsNotASingleDay = !!highlightedRange && !isSameDay(highlightedRange.start, highlightedRange.end);
|
|
147
|
-
const isStartOfWeek = getDayOfWeek(date, locale) === 0;
|
|
148
|
-
const isEndOfWeek = getDayOfWeek(date, locale) === 6;
|
|
149
|
-
const isStartOfMonth = isSameDay(date, startOfMonth(date));
|
|
150
|
-
const isEndOfMonth = isSameDay(date, endOfMonth(date));
|
|
151
|
-
const isStartOfRange = highlightedRange && isSameDay(highlightedRange == null ? void 0 : highlightedRange.start, date);
|
|
152
|
-
const isEndOfRange = highlightedRange && isSameDay(highlightedRange == null ? void 0 : highlightedRange.end, date);
|
|
153
|
-
const highlighted = isInSelection && rangeIsNotASingleDay;
|
|
154
|
-
return {
|
|
155
|
-
highlighted,
|
|
156
|
-
start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),
|
|
157
|
-
end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange)
|
|
158
|
-
};
|
|
159
|
-
};
|
|
160
|
-
const getWeekNumber = function(dateValue) {
|
|
161
|
-
const date = new Date(dateValue.toDate(getLocalTimeZone()));
|
|
162
|
-
date.setHours(0, 0, 0, 0);
|
|
163
|
-
date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
|
|
164
|
-
const week1 = new Date(date.getFullYear(), 0, 4);
|
|
165
|
-
return 1 + Math.round(((date.getTime() - week1.getTime()) / 864e5 - 3 + (week1.getDay() + 6) % 7) / 7);
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
export { CalendarDaysGrid };
|
|
169
|
-
//# sourceMappingURL=CalendarDaysGrid.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarDaysGrid.js","sources":["../../../../src/Calendar/src/CalendarDaysGrid.tsx"],"sourcesContent":["import React, { ComponentProps, useMemo } from 'react';\nimport clsx from 'clsx';\nimport {\n AriaCalendarCellProps,\n AriaCalendarGridProps,\n useCalendarCell,\n useCalendarGrid,\n} from '@react-aria/calendar';\nimport { CalendarState, RangeCalendarState } from '@react-stately/calendar';\nimport {\n CalendarDate,\n DateValue,\n endOfMonth,\n getDayOfWeek,\n getLocalTimeZone,\n getWeeksInMonth,\n isSameDay,\n isSameMonth,\n startOfMonth,\n startOfWeek,\n today,\n} from '@internationalized/date';\nimport {\n useDateFormatter,\n useLocale,\n useMessageFormatter,\n} from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDayButton } from './CalendarButtons';\nimport { sentenceCase } from './utils';\n\nexport function CalendarDaysGrid({\n state,\n startDate = state.visibleRange.start,\n showWeekNumbers,\n ...props\n}: {\n state: CalendarState | RangeCalendarState;\n startDate?: CalendarDate;\n showWeekNumbers?: boolean;\n} & AriaCalendarGridProps): JSX.Element {\n const { locale } = useLocale();\n const { gridProps, headerProps } = useCalendarGrid(\n {\n ...props,\n startDate,\n endDate: endOfMonth(startDate),\n },\n state\n );\n const weeksInMonth = getWeeksInMonth(startDate, locale);\n\n // `weekDays` is returned from useCalendarGrid, but there is currently no option\n // for customizing weekday format. So the corresponding piece of code is copy-pasted\n // from useCalendarGrid, just to use \"short\" format instead of \"narrow\"\n const dayFormatter = useDateFormatter({\n weekday: 'short',\n timeZone: state.timeZone,\n });\n const weekDays = useMemo(() => {\n const weekStart = startOfWeek(today(state.timeZone), locale);\n return [...new Array(7).keys()].map((index) => {\n const date = weekStart.add({ days: index });\n const dateDay = date.toDate(state.timeZone);\n return dayFormatter.format(dateDay);\n });\n }, [locale, state.timeZone, dayFormatter]);\n\n return (\n <table\n {...gridProps}\n className={clsx(styles['sapphire-calendar__table'], {\n [styles['sapphire-calendar__table--with-week-numbers']]:\n showWeekNumbers,\n })}\n >\n <thead {...headerProps}>\n <tr>\n {showWeekNumbers && (\n <th\n className={styles['sapphire-calendar__table-head-cell']}\n aria-hidden=\"true\"\n >\n <span className={styles['sapphire-calendar__week-number']}>\n #\n </span>\n </th>\n )}\n {weekDays.map((day, index) => (\n <th\n key={index}\n className={styles['sapphire-calendar__table-head-cell']}\n >\n <abbr className={styles['sapphire-calendar__day-of-week']}>\n {sentenceCase(day)}\n </abbr>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n return (\n <tr\n className={styles['sapphire-calendar__table-body-row']}\n key={weekIndex}\n >\n {showWeekNumbers && (\n <CalendarWeekNumberCell\n date={startDate.add({ days: 7 * weekIndex })}\n />\n )}\n {state.getDatesInWeek(weekIndex, startDate).map((date, i) =>\n date ? (\n <CalendarCell\n currentMonth={startDate}\n // by passing date.toString() instead of index, we make sure the cell\n // is remounted as we navigate between months. That prevents awkward\n // color transition if the same day-of-the-month is highlighted in one month\n // but not the other.\n key={date.toString()}\n state={state}\n date={date}\n />\n ) : (\n <td key={i} />\n )\n )}\n </tr>\n );\n })}\n <tr></tr>\n </tbody>\n </table>\n );\n}\nfunction CalendarWeekNumberCell({ date }: { date: DateValue }) {\n const weekNumber = getWeekNumber(date);\n const formatMessage = useMessageFormatter(intlMessages);\n return (\n <th\n className={styles['sapphire-calendar__table-body-cell']}\n role=\"rowheader\"\n aria-label={formatMessage('week', { weekNumber })}\n >\n <span className={styles['sapphire-calendar__week-number']}>\n {weekNumber}\n </span>\n </th>\n );\n}\n\nfunction CalendarCell({\n state,\n date,\n currentMonth,\n}: {\n state: CalendarState | RangeCalendarState;\n currentMonth: CalendarDate;\n} & AriaCalendarCellProps) {\n const ref = React.useRef(null);\n const { locale } = useLocale();\n const sameMonth = isSameMonth(date, currentMonth);\n const {\n cellProps,\n buttonProps,\n isSelected: isInSelection,\n isDisabled,\n formattedDate,\n isUnavailable,\n } = useCalendarCell({ date, isDisabled: !sameMonth }, state, ref);\n\n const highlightedRange =\n 'highlightedRange' in state ? state.highlightedRange : null;\n\n const isSelected =\n isInSelection &&\n // if we have a highlighted range, only start and end of the range are styled selected.\n (!highlightedRange ||\n isSameDay(highlightedRange.start, date) ||\n isSameDay(highlightedRange.end, date));\n\n return (\n <td {...cellProps} className={styles['sapphire-calendar__table-body-cell']}>\n <CalendarDayButton\n {...buttonProps}\n ref={ref}\n isSelected={isSelected}\n isDisabled={isDisabled || isUnavailable}\n hasCurrentIndicator={today(state.timeZone).compare(date) === 0}\n isOutsideVisibleRange={!isSameMonth(currentMonth, date)}\n rangeHighlight={\n highlightedRange\n ? getRangeHighlight({ date, highlightedRange, locale })\n : { highlighted: false }\n }\n >\n {formattedDate}\n </CalendarDayButton>\n </td>\n );\n}\n\n/**\n * Given a date and a highlighted range, returns the range highlight state for that date.\n * Note that \"start\" doesn't simply mean start of the range, but means range start **style**,\n * which applies to some dates inside the range as well. A css-only solution could also cover\n * this, but it would require `:has()` selector which is not widely supported at the time of writing\n * this.\n */\nconst getRangeHighlight = ({\n date,\n highlightedRange,\n locale,\n}: {\n date: DateValue;\n highlightedRange: RangeCalendarState['highlightedRange'];\n locale: string;\n}): ComponentProps<typeof CalendarDayButton>['rangeHighlight'] => {\n const isInSelection =\n !!highlightedRange &&\n highlightedRange.start.compare(date) <= 0 &&\n highlightedRange.end.compare(date) >= 0;\n const rangeIsNotASingleDay =\n !!highlightedRange &&\n !isSameDay(highlightedRange.start, highlightedRange.end);\n const isStartOfWeek = getDayOfWeek(date, locale) === 0;\n const isEndOfWeek = getDayOfWeek(date, locale) === 6;\n const isStartOfMonth = isSameDay(date, startOfMonth(date));\n const isEndOfMonth = isSameDay(date, endOfMonth(date));\n const isStartOfRange =\n highlightedRange && isSameDay(highlightedRange?.start, date);\n const isEndOfRange =\n highlightedRange && isSameDay(highlightedRange?.end, date);\n\n const highlighted = isInSelection && rangeIsNotASingleDay;\n return {\n highlighted,\n start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),\n end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange),\n };\n};\n\n/**\n * Almost copied from https://weeknumber.com/how-to/javascript\n * No corresponding API found in @internationalized/date package, at the time\n * of writing this.\n * Caveat: this code is based on built-in Date object, and may not be\n * calendar-agnostic. We don't really care about supporting different types\n * of calendar, so it should be fine for now. But we can look into improving\n * this if needed.\n */\nconst getWeekNumber = function (dateValue: DateValue) {\n const date = new Date(dateValue.toDate(getLocalTimeZone()));\n date.setHours(0, 0, 0, 0);\n // Thursday in current week decides the year.\n date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));\n // January 4 is always in week 1.\n const week1 = new Date(date.getFullYear(), 0, 4);\n // Adjust to Thursday in week 1 and count number of weeks from date to week1.\n return (\n 1 +\n Math.round(\n ((date.getTime() - week1.getTime()) / 86400000 -\n 3 +\n ((week1.getDay() + 6) % 7)) /\n 7\n )\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { IconButton } from '@danske/sapphire-react';
|
|
4
|
-
import { ChevronLeft, ChevronRight } from '@danske/sapphire-icons/react';
|
|
5
|
-
import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
|
|
6
|
-
|
|
7
|
-
var __defProp = Object.defineProperty;
|
|
8
|
-
var __defProps = Object.defineProperties;
|
|
9
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
10
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
11
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
14
|
-
var __spreadValues = (a, b) => {
|
|
15
|
-
for (var prop in b || (b = {}))
|
|
16
|
-
if (__hasOwnProp.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
if (__getOwnPropSymbols)
|
|
19
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
20
|
-
if (__propIsEnum.call(b, prop))
|
|
21
|
-
__defNormalProp(a, prop, b[prop]);
|
|
22
|
-
}
|
|
23
|
-
return a;
|
|
24
|
-
};
|
|
25
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
|
-
function CalendarHeader({
|
|
27
|
-
isLeft,
|
|
28
|
-
isRight,
|
|
29
|
-
children,
|
|
30
|
-
prevButtonProps,
|
|
31
|
-
nextButtonProps
|
|
32
|
-
}) {
|
|
33
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
34
|
-
className: clsx(styles["sapphire-calendar__header"], {
|
|
35
|
-
[styles["sapphire-calendar__header--left"]]: isLeft,
|
|
36
|
-
[styles["sapphire-calendar__header--right"]]: isRight
|
|
37
|
-
})
|
|
38
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
39
|
-
className: styles["sapphire-calendar__header-prev-month"]
|
|
40
|
-
}, /* @__PURE__ */ React.createElement(IconButton, __spreadProps(__spreadValues({}, prevButtonProps), {
|
|
41
|
-
variant: "tertiary",
|
|
42
|
-
appearance: "ghost",
|
|
43
|
-
size: "large",
|
|
44
|
-
"aria-label": "Previous"
|
|
45
|
-
}), /* @__PURE__ */ React.createElement(ChevronLeft, null))), /* @__PURE__ */ React.createElement("div", {
|
|
46
|
-
className: styles["sapphire-calendar__header-title"]
|
|
47
|
-
}, children), /* @__PURE__ */ React.createElement("div", {
|
|
48
|
-
className: styles["sapphire-calendar__header-next-month"]
|
|
49
|
-
}, /* @__PURE__ */ React.createElement(IconButton, __spreadProps(__spreadValues({}, nextButtonProps), {
|
|
50
|
-
variant: "tertiary",
|
|
51
|
-
appearance: "ghost",
|
|
52
|
-
size: "large",
|
|
53
|
-
"aria-label": "Next"
|
|
54
|
-
}), /* @__PURE__ */ React.createElement(ChevronRight, null))));
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export { CalendarHeader };
|
|
58
|
-
//# sourceMappingURL=CalendarHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/src/CalendarHeader.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { PressProps } from '@react-aria/interactions';\nimport { IconButton } from '@danske/sapphire-react';\nimport { ChevronLeft, ChevronRight } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\n/**\n * Calendar header shown above the grid.\n * @internal\n */\nexport function CalendarHeader({\n isLeft,\n isRight,\n children,\n prevButtonProps,\n nextButtonProps,\n}: {\n children: React.ReactNode;\n prevButtonProps?: PressProps;\n nextButtonProps?: PressProps;\n isLeft?: boolean;\n isRight?: boolean;\n}) {\n return (\n <div\n className={clsx(styles['sapphire-calendar__header'], {\n [styles['sapphire-calendar__header--left']]: isLeft,\n [styles['sapphire-calendar__header--right']]: isRight,\n })}\n >\n <div className={styles['sapphire-calendar__header-prev-month']}>\n <IconButton\n {...prevButtonProps}\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n aria-label=\"Previous\"\n >\n <ChevronLeft />\n </IconButton>\n </div>\n <div className={styles['sapphire-calendar__header-title']}>\n {children}\n </div>\n <div className={styles['sapphire-calendar__header-next-month']}>\n <IconButton\n {...nextButtonProps}\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n aria-label=\"Next\"\n >\n <ChevronRight />\n </IconButton>\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAW+B,SAAA,cAAA,CAAA;AAAA,EAC7B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,CAOC,EAAA;AACD,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA;AAAA,MAAA,CAClD,OAAO,iCAAqC,CAAA,GAAA,MAAA;AAAA,MAAA,CAC5C,OAAO,kCAAsC,CAAA,GAAA,OAAA;AAAA,KAAA,CAAA;AAAA,GAAA,sCAG/C,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,sCAAA,CAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eADN,CAAA,EAAA;AAAA,IAEE,OAAQ,EAAA,UAAA;AAAA,IACR,UAAW,EAAA,OAAA;AAAA,IACX,IAAK,EAAA,OAAA;AAAA,IACL,YAAW,EAAA,UAAA;AAAA,GAAA,CAAA,kBAEV,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,IAGJ,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GACpB,EAAA,QAAA,CAAA,sCAEF,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,sCAAA,CAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eADN,CAAA,EAAA;AAAA,IAEE,OAAQ,EAAA,UAAA;AAAA,IACR,UAAW,EAAA,OAAA;AAAA,IACX,IAAK,EAAA,OAAA;AAAA,IACL,YAAW,EAAA,MAAA;AAAA,GAAA,CAAA,sCAEV,YAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import React, { useEffect } from 'react';
|
|
2
|
-
import { today, isSameMonth, isSameYear } from '@internationalized/date';
|
|
3
|
-
import { usePress } from '@react-aria/interactions';
|
|
4
|
-
import { focusWithoutScrolling, mergeProps } from '@react-aria/utils';
|
|
5
|
-
import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
|
|
6
|
-
import { CalendarButton } from './CalendarButtons.js';
|
|
7
|
-
|
|
8
|
-
var __defProp = Object.defineProperty;
|
|
9
|
-
var __defProps = Object.defineProperties;
|
|
10
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
11
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
12
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
13
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
14
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
15
|
-
var __spreadValues = (a, b) => {
|
|
16
|
-
for (var prop in b || (b = {}))
|
|
17
|
-
if (__hasOwnProp.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
if (__getOwnPropSymbols)
|
|
20
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
21
|
-
if (__propIsEnum.call(b, prop))
|
|
22
|
-
__defNormalProp(a, prop, b[prop]);
|
|
23
|
-
}
|
|
24
|
-
return a;
|
|
25
|
-
};
|
|
26
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
27
|
-
const isSame = { month: isSameMonth, year: isSameYear };
|
|
28
|
-
function CalendarMonthOrYearCell({
|
|
29
|
-
date,
|
|
30
|
-
state,
|
|
31
|
-
isDisabled,
|
|
32
|
-
field,
|
|
33
|
-
children
|
|
34
|
-
}) {
|
|
35
|
-
const ref = React.useRef(null);
|
|
36
|
-
const isFocused = state.focusedDate[field] === date[field];
|
|
37
|
-
let tabIndex;
|
|
38
|
-
if (!isDisabled) {
|
|
39
|
-
tabIndex = isSame[field](date, state.focusedDate) ? 0 : -1;
|
|
40
|
-
}
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
if (isFocused && ref.current) {
|
|
43
|
-
focusWithoutScrolling(ref.current);
|
|
44
|
-
}
|
|
45
|
-
}, [isFocused, ref]);
|
|
46
|
-
const { pressProps } = usePress({
|
|
47
|
-
isDisabled: state.isDisabled || isDisabled,
|
|
48
|
-
onPress: () => {
|
|
49
|
-
state.setFocusedDate(date);
|
|
50
|
-
if (!state.isReadOnly) {
|
|
51
|
-
state.narrowView();
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
const buttonProps = mergeProps(pressProps, {
|
|
56
|
-
onFocus() {
|
|
57
|
-
if (!isDisabled) {
|
|
58
|
-
state.setFocusedDate(date);
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
tabIndex,
|
|
62
|
-
role: "button",
|
|
63
|
-
"aria-disabled": isDisabled || void 0
|
|
64
|
-
});
|
|
65
|
-
return /* @__PURE__ */ React.createElement("td", {
|
|
66
|
-
className: styles["sapphire-calendar__table-body-cell"],
|
|
67
|
-
role: "gridcell"
|
|
68
|
-
}, /* @__PURE__ */ React.createElement(CalendarButton, __spreadProps(__spreadValues({
|
|
69
|
-
ref
|
|
70
|
-
}, buttonProps), {
|
|
71
|
-
isInGridCell: true,
|
|
72
|
-
isSelected: !!state.value && isSame[field](state.value, date),
|
|
73
|
-
isDisabled: state.isDisabled || isDisabled,
|
|
74
|
-
hasCurrentIndicator: isSame[field](date, today(state.timeZone))
|
|
75
|
-
}), children));
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export { CalendarMonthOrYearCell };
|
|
79
|
-
//# sourceMappingURL=CalendarMonthOrYearCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarMonthOrYearCell.js","sources":["../../../../src/Calendar/src/CalendarMonthOrYearCell.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport {\n isSameMonth,\n CalendarDate,\n DateField,\n isSameYear,\n today,\n} from '@internationalized/date';\nimport { usePress } from '@react-aria/interactions';\nimport { focusWithoutScrolling, mergeProps } from '@react-aria/utils';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { CalendarButton } from './CalendarButtons';\n\nconst isSame = { month: isSameMonth, year: isSameYear } as const;\n\nexport function CalendarMonthOrYearCell({\n date,\n state,\n isDisabled,\n field,\n children,\n}: {\n date: CalendarDate;\n field: Extract<DateField, 'month' | 'year'>;\n state: SapphireCalendarState;\n isDisabled?: boolean;\n children: React.ReactNode;\n}): JSX.Element {\n const ref = React.useRef(null);\n const isFocused = state.focusedDate[field] === date[field];\n\n let tabIndex: number | undefined;\n if (!isDisabled) {\n tabIndex = isSame[field](date, state.focusedDate) ? 0 : -1;\n }\n\n useEffect(() => {\n if (isFocused && ref.current) {\n focusWithoutScrolling(ref.current);\n }\n }, [isFocused, ref]);\n\n const { pressProps } = usePress({\n isDisabled: state.isDisabled || isDisabled,\n onPress: () => {\n state.setFocusedDate(date);\n if (!state.isReadOnly) {\n state.narrowView();\n }\n },\n });\n const buttonProps = mergeProps(pressProps, {\n onFocus() {\n if (!isDisabled) {\n state.setFocusedDate(date);\n }\n },\n tabIndex,\n role: 'button',\n 'aria-disabled': isDisabled || undefined,\n });\n return (\n <td\n className={styles['sapphire-calendar__table-body-cell']}\n role=\"gridcell\"\n >\n <CalendarButton\n ref={ref}\n {...buttonProps}\n isInGridCell\n isSelected={!!state.value && isSame[field](state.value, date)}\n isDisabled={state.isDisabled || isDisabled}\n hasCurrentIndicator={isSame[field](date, today(state.timeZone))}\n >\n {children}\n </CalendarButton>\n </td>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,MAAS,GAAA,EAAE,KAAO,EAAA,WAAA,EAAa,IAAM,EAAA,UAAA,EAAA,CAAA;AAEH,SAAA,uBAAA,CAAA;AAAA,EACtC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,CAOc,EAAA;AACd,EAAM,MAAA,GAAA,GAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACzB,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,WAAY,CAAA,KAAA,CAAA,KAAW,IAAK,CAAA,KAAA,CAAA,CAAA;AAEpD,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAA,QAAA,GAAW,MAAO,CAAA,KAAA,CAAA,CAAO,IAAM,EAAA,KAAA,CAAM,eAAe,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,GAAA;AAG1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,SAAA,IAAa,IAAI,OAAS,EAAA;AAC5B,MAAA,qBAAA,CAAsB,GAAI,CAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAE3B,CAAC,SAAW,EAAA,GAAA,CAAA,CAAA,CAAA;AAEf,EAAM,MAAA,EAAE,eAAe,QAAS,CAAA;AAAA,IAC9B,UAAA,EAAY,MAAM,UAAc,IAAA,UAAA;AAAA,IAChC,SAAS,MAAM;AACb,MAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AACrB,MAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,QAAM,KAAA,CAAA,UAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA;AAIZ,EAAM,MAAA,WAAA,GAAc,WAAW,UAAY,EAAA;AAAA,IACzC,OAAU,GAAA;AACR,MAAA,IAAI,CAAC,UAAY,EAAA;AACf,QAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,IAGzB,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,iBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAEjC,EAAA,2CACG,IAAD,EAAA;AAAA,IACE,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,IAClB,IAAK,EAAA,UAAA;AAAA,GAAA,sCAEJ,cAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,GAAA,EACI,WAFN,CAAA,EAAA;AAAA,IAGE,YAAY,EAAA,IAAA;AAAA,IACZ,UAAA,EAAY,CAAC,CAAC,KAAA,CAAM,SAAS,MAAO,CAAA,KAAA,CAAA,CAAO,MAAM,KAAO,EAAA,IAAA,CAAA;AAAA,IACxD,UAAA,EAAY,MAAM,UAAc,IAAA,UAAA;AAAA,IAChC,mBAAqB,EAAA,MAAA,CAAO,KAAO,CAAA,CAAA,IAAA,EAAM,MAAM,KAAM,CAAA,QAAA,CAAA,CAAA;AAAA,GAEpD,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { useDateFormatter } from '@react-aria/i18n';
|
|
4
|
-
import { startOfMonth, endOfMonth } from '@internationalized/date';
|
|
5
|
-
import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
|
|
6
|
-
import { range, chunks, sentenceCase } from './utils.js';
|
|
7
|
-
import { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell.js';
|
|
8
|
-
import { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid.js';
|
|
9
|
-
|
|
10
|
-
var __defProp = Object.defineProperty;
|
|
11
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
12
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
13
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
14
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
15
|
-
var __spreadValues = (a, b) => {
|
|
16
|
-
for (var prop in b || (b = {}))
|
|
17
|
-
if (__hasOwnProp.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
if (__getOwnPropSymbols)
|
|
20
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
21
|
-
if (__propIsEnum.call(b, prop))
|
|
22
|
-
__defNormalProp(a, prop, b[prop]);
|
|
23
|
-
}
|
|
24
|
-
return a;
|
|
25
|
-
};
|
|
26
|
-
function CalendarMonthsGrid({
|
|
27
|
-
state
|
|
28
|
-
}) {
|
|
29
|
-
const formatter = useDateFormatter({
|
|
30
|
-
month: "long",
|
|
31
|
-
timeZone: state.timeZone
|
|
32
|
-
});
|
|
33
|
-
const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
|
|
34
|
-
const months = range(1, numMonths).map((month) => formatter.format(state.focusedDate.set({ month }).toDate(state.timeZone)));
|
|
35
|
-
const monthRows = [...chunks(months, 3)];
|
|
36
|
-
const { gridProps } = useCustomDurationCalendarGrid({ cellsDuration: "months" }, state);
|
|
37
|
-
return /* @__PURE__ */ React.createElement("table", __spreadValues({
|
|
38
|
-
className: clsx(styles["sapphire-calendar__table"], styles["sapphire-calendar__table--month-year"])
|
|
39
|
-
}, gridProps), /* @__PURE__ */ React.createElement("tbody", null, monthRows.map((currentRowMonths, rowIndex) => /* @__PURE__ */ React.createElement("tr", {
|
|
40
|
-
key: rowIndex,
|
|
41
|
-
className: styles["sapphire-calendar__table-body-row"]
|
|
42
|
-
}, currentRowMonths.map((month, index) => {
|
|
43
|
-
const newFocusedDate = state.focusedDate.set({
|
|
44
|
-
month: months.indexOf(month) + 1
|
|
45
|
-
});
|
|
46
|
-
const isMonthDisabled = state.isInvalid(startOfMonth(newFocusedDate)) && state.isInvalid(endOfMonth(newFocusedDate));
|
|
47
|
-
return /* @__PURE__ */ React.createElement(CalendarMonthOrYearCell, {
|
|
48
|
-
key: index,
|
|
49
|
-
date: newFocusedDate,
|
|
50
|
-
field: "month",
|
|
51
|
-
isDisabled: isMonthDisabled,
|
|
52
|
-
state
|
|
53
|
-
}, sentenceCase(month));
|
|
54
|
-
})))));
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export { CalendarMonthsGrid };
|
|
58
|
-
//# sourceMappingURL=CalendarMonthsGrid.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarMonthsGrid.js","sources":["../../../../src/Calendar/src/CalendarMonthsGrid.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { useDateFormatter } from '@react-aria/i18n';\nimport { endOfMonth, startOfMonth } from '@internationalized/date';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { chunks, range, sentenceCase } from './utils';\nimport { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell';\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid';\n\nexport function CalendarMonthsGrid({\n state,\n}: {\n state: SapphireCalendarState;\n}): JSX.Element {\n const formatter = useDateFormatter({\n month: 'long',\n timeZone: state.timeZone,\n });\n\n const numMonths = state.focusedDate.calendar.getMonthsInYear(\n state.focusedDate\n );\n const months = range(1, numMonths).map((month) =>\n formatter.format(state.focusedDate.set({ month }).toDate(state.timeZone))\n );\n const monthRows = [...chunks(months, 3)];\n\n const { gridProps } = useCustomDurationCalendarGrid(\n { cellsDuration: 'months' },\n state\n );\n\n return (\n <table\n className={clsx(\n styles['sapphire-calendar__table'],\n styles['sapphire-calendar__table--month-year']\n )}\n {...gridProps}\n >\n <tbody>\n {monthRows.map((currentRowMonths, rowIndex) => (\n <tr\n key={rowIndex}\n className={styles['sapphire-calendar__table-body-row']}\n >\n {currentRowMonths.map((month, index) => {\n const newFocusedDate = state.focusedDate.set({\n month: months.indexOf(month) + 1,\n });\n\n // Since validation is only about min and max dates, we just\n // check the edges of the period\n const isMonthDisabled =\n state.isInvalid(startOfMonth(newFocusedDate)) &&\n state.isInvalid(endOfMonth(newFocusedDate));\n return (\n <CalendarMonthOrYearCell\n key={index}\n date={newFocusedDate}\n field={'month'}\n isDisabled={isMonthDisabled}\n state={state}\n >\n {sentenceCase(month)}\n </CalendarMonthOrYearCell>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYmC,SAAA,kBAAA,CAAA;AAAA,EACjC,KAAA;AAAA,CAGc,EAAA;AACd,EAAA,MAAM,YAAY,gBAAiB,CAAA;AAAA,IACjC,KAAO,EAAA,MAAA;AAAA,IACP,UAAU,KAAM,CAAA,QAAA;AAAA,GAAA,CAAA,CAAA;AAGlB,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,WAAY,CAAA,QAAA,CAAS,gBAC3C,KAAM,CAAA,WAAA,CAAA,CAAA;AAER,EAAA,MAAM,MAAS,GAAA,KAAA,CAAM,CAAG,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,KAAA,KACtC,SAAU,CAAA,MAAA,CAAO,MAAM,WAAY,CAAA,GAAA,CAAI,EAAE,KAAA,EAAA,CAAA,CAAS,OAAO,KAAM,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAEjE,EAAA,MAAM,SAAY,GAAA,CAAC,GAAG,MAAA,CAAO,MAAQ,EAAA,CAAA,CAAA,CAAA,CAAA;AAErC,EAAA,MAAM,EAAE,SAAA,EAAA,GAAc,6BACpB,CAAA,EAAE,eAAe,QACjB,EAAA,EAAA,KAAA,CAAA,CAAA;AAGF,EAAA,2CACG,OAAD,EAAA,cAAA,CAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,0BAAA,CAAA,EACP,MAAO,CAAA,sCAAA,CAAA,CAAA;AAAA,GAEL,EAAA,SAAA,CAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,OAAA,EAAD,IACG,EAAA,SAAA,CAAU,IAAI,CAAC,gBAAA,EAAkB,QAChC,qBAAA,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAA,IACE,GAAK,EAAA,QAAA;AAAA,IACL,WAAW,MAAO,CAAA,mCAAA,CAAA;AAAA,GAAA,EAEjB,gBAAiB,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,KAAU,KAAA;AACtC,IAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,WAAA,CAAY,GAAI,CAAA;AAAA,MAC3C,KAAA,EAAO,MAAO,CAAA,OAAA,CAAQ,KAAS,CAAA,GAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAKjC,IAAA,MAAM,kBACJ,KAAM,CAAA,SAAA,CAAU,aAAa,cAC7B,CAAA,CAAA,IAAA,KAAA,CAAM,UAAU,UAAW,CAAA,cAAA,CAAA,CAAA,CAAA;AAC7B,IAAA,2CACG,uBAAD,EAAA;AAAA,MACE,GAAK,EAAA,KAAA;AAAA,MACL,IAAM,EAAA,cAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,MACP,UAAY,EAAA,eAAA;AAAA,MACZ,KAAA;AAAA,KAAA,EAEC,YAAa,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
3
|
-
import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
|
|
4
|
-
import clsx from 'clsx';
|
|
5
|
-
|
|
6
|
-
var __defProp = Object.defineProperty;
|
|
7
|
-
var __defProps = Object.defineProperties;
|
|
8
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
9
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
-
function CalendarPageAnimation({
|
|
26
|
-
children,
|
|
27
|
-
state: { direction, key }
|
|
28
|
-
}) {
|
|
29
|
-
return /* @__PURE__ */ React.createElement(TransitionGroup, {
|
|
30
|
-
className: clsx(styles["sapphire-calendar__grid-page-animation"], styles[`sapphire-calendar__grid-page-animation--${direction}`])
|
|
31
|
-
}, /* @__PURE__ */ React.createElement(CSSTransition, {
|
|
32
|
-
key,
|
|
33
|
-
addEndListener: (node, done) => {
|
|
34
|
-
node.addEventListener("transitionend", done, false);
|
|
35
|
-
},
|
|
36
|
-
unmountOnExit: true,
|
|
37
|
-
classNames: {
|
|
38
|
-
enter: styles["enter"],
|
|
39
|
-
enterActive: styles["enter-active"],
|
|
40
|
-
exit: styles["exit"],
|
|
41
|
-
exitActive: styles["exit-active"]
|
|
42
|
-
}
|
|
43
|
-
}, children));
|
|
44
|
-
}
|
|
45
|
-
function useCalendarAnimationState(state) {
|
|
46
|
-
const [animationState, setAnimationState] = useState({ key: 0, direction: "next" });
|
|
47
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
48
|
-
focusNextPage: () => {
|
|
49
|
-
setAnimationState(({ key }) => ({
|
|
50
|
-
key: key + 1,
|
|
51
|
-
direction: "next"
|
|
52
|
-
}));
|
|
53
|
-
state.focusNextPage();
|
|
54
|
-
},
|
|
55
|
-
focusPreviousPage: () => {
|
|
56
|
-
setAnimationState(({ key }) => ({
|
|
57
|
-
key: key - 1,
|
|
58
|
-
direction: "prev"
|
|
59
|
-
}));
|
|
60
|
-
state.focusPreviousPage();
|
|
61
|
-
},
|
|
62
|
-
animationState
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
export { CalendarPageAnimation, useCalendarAnimationState };
|
|
67
|
-
//# sourceMappingURL=CalendarPageAnimation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarPageAnimation.js","sources":["../../../../src/Calendar/src/CalendarPageAnimation.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\nimport { CalendarState } from '@react-stately/calendar';\nimport clsx from 'clsx';\n\nexport function CalendarPageAnimation({\n children,\n state: { direction, key },\n}: {\n children: ReactNode;\n state: CalendarAnimationState;\n}) {\n return (\n <TransitionGroup\n className={clsx(\n styles['sapphire-calendar__grid-page-animation'],\n styles[`sapphire-calendar__grid-page-animation--${direction}`]\n )}\n >\n <CSSTransition\n key={key}\n addEndListener={(node, done) => {\n // Using addEndListener, to avoid passing `timeout` which we can't easily know in js\n node.addEventListener('transitionend', done, false);\n }}\n unmountOnExit\n classNames={{\n enter: styles['enter'],\n enterActive: styles['enter-active'],\n exit: styles['exit'],\n exitActive: styles['exit-active'],\n }}\n >\n {children}\n </CSSTransition>\n </TransitionGroup>\n );\n}\n\ninterface CalendarAnimationState {\n key: React.Key;\n direction: 'prev' | 'next';\n}\n\n/**\n * @param state input calendar state\n * @returns a new calendar state which has additional properties required for animation\n */\nexport function useCalendarAnimationState<\n T extends Pick<CalendarState, 'focusNextPage' | 'focusPreviousPage'>\n>(\n state: T\n): T & {\n animationState: CalendarAnimationState;\n} {\n const [animationState, setAnimationState] = useState<{\n key: number;\n direction: 'prev' | 'next';\n }>({ key: 0, direction: 'next' });\n return {\n ...state,\n focusNextPage: () => {\n setAnimationState(({ key }) => ({\n key: key + 1,\n direction: 'next',\n }));\n state.focusNextPage();\n },\n focusPreviousPage: () => {\n setAnimationState(({ key }) => ({\n key: key - 1,\n direction: 'prev',\n }));\n state.focusPreviousPage();\n },\n animationState,\n };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMsC,SAAA,qBAAA,CAAA;AAAA,EACpC,QAAA;AAAA,EACA,KAAA,EAAO,EAAE,SAAW,EAAA,GAAA,EAAA;AAAA,CAInB,EAAA;AACD,EAAA,2CACG,eAAD,EAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,wCAAA,CAAA,EACP,OAAO,CAA2C,wCAAA,EAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAAA,sCAGnD,aAAD,EAAA;AAAA,IACE,GAAA;AAAA,IACA,cAAA,EAAgB,CAAC,IAAA,EAAM,IAAS,KAAA;AAE9B,MAAK,IAAA,CAAA,gBAAA,CAAiB,iBAAiB,IAAM,EAAA,KAAA,CAAA,CAAA;AAAA,KAAA;AAAA,IAE/C,aAAa,EAAA,IAAA;AAAA,IACb,UAAY,EAAA;AAAA,MACV,OAAO,MAAO,CAAA,OAAA,CAAA;AAAA,MACd,aAAa,MAAO,CAAA,cAAA,CAAA;AAAA,MACpB,MAAM,MAAO,CAAA,MAAA,CAAA;AAAA,MACb,YAAY,MAAO,CAAA,aAAA,CAAA;AAAA,KAAA;AAAA,GAGpB,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA,CAAA;AAeF,SAAA,yBAAA,CAGL,KAGA,EAAA;AACA,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAA,CAAA,GAAqB,SAGzC,EAAE,GAAA,EAAK,GAAG,SAAW,EAAA,MAAA,EAAA,CAAA,CAAA;AACxB,EAAA,OAAO,iCACF,KADE,CAAA,EAAA;AAAA,IAEL,eAAe,MAAM;AACnB,MAAkB,iBAAA,CAAA,CAAC,EAAE,GAAW,EAAA,MAAA;AAAA,QAC9B,KAAK,GAAM,GAAA,CAAA;AAAA,QACX,SAAW,EAAA,MAAA;AAAA,OAAA,CAAA,CAAA,CAAA;AAEb,MAAM,KAAA,CAAA,aAAA,EAAA,CAAA;AAAA,KAAA;AAAA,IAER,mBAAmB,MAAM;AACvB,MAAkB,iBAAA,CAAA,CAAC,EAAE,GAAW,EAAA,MAAA;AAAA,QAC9B,KAAK,GAAM,GAAA,CAAA;AAAA,QACX,SAAW,EAAA,MAAA;AAAA,OAAA,CAAA,CAAA,CAAA;AAEb,MAAM,KAAA,CAAA,iBAAA,EAAA,CAAA;AAAA,KAAA;AAAA,IAER,cAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { startOfYear, endOfYear } from '@internationalized/date';
|
|
4
|
-
import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
|
|
5
|
-
import { range, chunks } from './utils.js';
|
|
6
|
-
import { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell.js';
|
|
7
|
-
import { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid.js';
|
|
8
|
-
|
|
9
|
-
var __defProp = Object.defineProperty;
|
|
10
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
11
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
14
|
-
var __spreadValues = (a, b) => {
|
|
15
|
-
for (var prop in b || (b = {}))
|
|
16
|
-
if (__hasOwnProp.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
if (__getOwnPropSymbols)
|
|
19
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
20
|
-
if (__propIsEnum.call(b, prop))
|
|
21
|
-
__defNormalProp(a, prop, b[prop]);
|
|
22
|
-
}
|
|
23
|
-
return a;
|
|
24
|
-
};
|
|
25
|
-
function CalendarYearsGrid({
|
|
26
|
-
state
|
|
27
|
-
}) {
|
|
28
|
-
const years = range(state.visibleRange.start.year, state.visibleRange.end.year).slice(0, 12);
|
|
29
|
-
const yearRows = [...chunks(years, 3)];
|
|
30
|
-
const { gridProps } = useCustomDurationCalendarGrid({ cellsDuration: "years" }, state);
|
|
31
|
-
return /* @__PURE__ */ React.createElement("table", __spreadValues({
|
|
32
|
-
className: clsx(styles["sapphire-calendar__table"], styles["sapphire-calendar__table--month-year"])
|
|
33
|
-
}, gridProps), /* @__PURE__ */ React.createElement("tbody", null, yearRows.map((currentRowYears, rowIndex) => /* @__PURE__ */ React.createElement("tr", {
|
|
34
|
-
key: rowIndex,
|
|
35
|
-
className: styles["sapphire-calendar__table-body-row"]
|
|
36
|
-
}, currentRowYears.map((year, index) => {
|
|
37
|
-
const newFocusedDate = state.focusedDate.set({
|
|
38
|
-
year
|
|
39
|
-
});
|
|
40
|
-
const isYearDisabled = state.isInvalid(startOfYear(newFocusedDate)) && state.isInvalid(endOfYear(newFocusedDate));
|
|
41
|
-
return /* @__PURE__ */ React.createElement(CalendarMonthOrYearCell, {
|
|
42
|
-
key: index,
|
|
43
|
-
date: newFocusedDate,
|
|
44
|
-
field: "year",
|
|
45
|
-
isDisabled: isYearDisabled,
|
|
46
|
-
state
|
|
47
|
-
}, year);
|
|
48
|
-
})))));
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
export { CalendarYearsGrid };
|
|
52
|
-
//# sourceMappingURL=CalendarYearsGrid.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarYearsGrid.js","sources":["../../../../src/Calendar/src/CalendarYearsGrid.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { endOfYear, startOfYear } from '@internationalized/date';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { chunks, range } from './utils';\nimport { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell';\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid';\n\nexport function CalendarYearsGrid({\n state,\n}: {\n state: SapphireCalendarState;\n}): JSX.Element {\n const years = range(\n state.visibleRange.start.year,\n state.visibleRange.end.year\n ).slice(0, 12);\n const yearRows = [...chunks(years, 3)];\n const { gridProps } = useCustomDurationCalendarGrid(\n { cellsDuration: 'years' },\n state\n );\n return (\n <table\n className={clsx(\n styles['sapphire-calendar__table'],\n styles['sapphire-calendar__table--month-year']\n )}\n {...gridProps}\n >\n <tbody>\n {yearRows.map((currentRowYears, rowIndex) => (\n <tr\n key={rowIndex}\n className={styles['sapphire-calendar__table-body-row']}\n >\n {currentRowYears.map((year, index) => {\n const newFocusedDate = state.focusedDate.set({\n year: year,\n });\n // Since validation is only about min and max dates, we just\n // check the edges of the period\n const isYearDisabled =\n state.isInvalid(startOfYear(newFocusedDate)) &&\n state.isInvalid(endOfYear(newFocusedDate));\n return (\n <CalendarMonthOrYearCell\n key={index}\n date={newFocusedDate}\n field={'year'}\n isDisabled={isYearDisabled}\n state={state}\n >\n {year}\n </CalendarMonthOrYearCell>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWkC,SAAA,iBAAA,CAAA;AAAA,EAChC,KAAA;AAAA,CAGc,EAAA;AACd,EAAM,MAAA,KAAA,GAAQ,KACZ,CAAA,KAAA,CAAM,YAAa,CAAA,KAAA,CAAM,IACzB,EAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IACvB,CAAA,CAAA,KAAA,CAAM,CAAG,EAAA,EAAA,CAAA,CAAA;AACX,EAAA,MAAM,QAAW,GAAA,CAAC,GAAG,MAAA,CAAO,KAAO,EAAA,CAAA,CAAA,CAAA,CAAA;AACnC,EAAA,MAAM,EAAE,SAAA,EAAA,GAAc,6BACpB,CAAA,EAAE,eAAe,OACjB,EAAA,EAAA,KAAA,CAAA,CAAA;AAEF,EAAA,2CACG,OAAD,EAAA,cAAA,CAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,0BAAA,CAAA,EACP,MAAO,CAAA,sCAAA,CAAA,CAAA;AAAA,GAEL,EAAA,SAAA,CAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,OAAA,EAAD,IACG,EAAA,QAAA,CAAS,IAAI,CAAC,eAAA,EAAiB,QAC9B,qBAAA,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAA,IACE,GAAK,EAAA,QAAA;AAAA,IACL,WAAW,MAAO,CAAA,mCAAA,CAAA;AAAA,GAAA,EAEjB,eAAgB,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AACpC,IAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,WAAA,CAAY,GAAI,CAAA;AAAA,MAC3C,IAAA;AAAA,KAAA,CAAA,CAAA;AAIF,IAAA,MAAM,iBACJ,KAAM,CAAA,SAAA,CAAU,YAAY,cAC5B,CAAA,CAAA,IAAA,KAAA,CAAM,UAAU,SAAU,CAAA,cAAA,CAAA,CAAA,CAAA;AAC5B,IAAA,2CACG,uBAAD,EAAA;AAAA,MACE,GAAK,EAAA,KAAA;AAAA,MACL,IAAM,EAAA,cAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,MACP,UAAY,EAAA,cAAA;AAAA,MACZ,KAAA;AAAA,KAEC,EAAA,IAAA,CAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|