@transferwise/components 0.0.0-experimental-bcea1dd → 0.0.0-experimental-1168b1c
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/Calendar/Calendar.js +47 -8
- package/build/Calendar/Calendar.js.map +1 -1
- package/build/Calendar/Calendar.messages.js +3 -0
- package/build/Calendar/Calendar.messages.js.map +1 -1
- package/build/Calendar/Calendar.messages.mjs +3 -0
- package/build/Calendar/Calendar.messages.mjs.map +1 -1
- package/build/Calendar/Calendar.mjs +48 -9
- package/build/Calendar/Calendar.mjs.map +1 -1
- package/build/Calendar/DayCalendar/DayCalendar.js +4 -0
- package/build/Calendar/DayCalendar/DayCalendar.js.map +1 -1
- package/build/Calendar/DayCalendar/DayCalendar.mjs +4 -0
- package/build/Calendar/DayCalendar/DayCalendar.mjs.map +1 -1
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.js +30 -18
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.js.map +1 -1
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs +30 -18
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs.map +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js.map +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs.map +1 -1
- package/build/Calendar/{tableLink → TableLink}/TableLink.js +23 -11
- package/build/Calendar/TableLink/TableLink.js.map +1 -0
- package/build/Calendar/{tableLink → TableLink}/TableLink.mjs +23 -11
- package/build/Calendar/TableLink/TableLink.mjs.map +1 -0
- package/build/Calendar/YearCalendar/Table/YearCalendarTable.js +1 -1
- package/build/Calendar/YearCalendar/Table/YearCalendarTable.js.map +1 -1
- package/build/Calendar/YearCalendar/Table/YearCalendarTable.mjs +1 -1
- package/build/Calendar/YearCalendar/Table/YearCalendarTable.mjs.map +1 -1
- package/build/DateLookup/DateLookup.js +14 -4
- package/build/DateLookup/DateLookup.js.map +1 -1
- package/build/DateLookup/DateLookup.mjs +14 -4
- package/build/DateLookup/DateLookup.mjs.map +1 -1
- package/build/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.js +33 -0
- package/build/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.js.map +1 -0
- package/build/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.mjs +31 -0
- package/build/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.mjs.map +1 -0
- package/build/common/DateUtils/isDateDisabled/isDateDisabled.js +40 -0
- package/build/common/DateUtils/isDateDisabled/isDateDisabled.js.map +1 -0
- package/build/common/DateUtils/isDateDisabled/isDateDisabled.mjs +38 -0
- package/build/common/DateUtils/isDateDisabled/isDateDisabled.mjs.map +1 -0
- package/build/i18n/en.json +1 -0
- package/build/i18n/en.json.js +1 -0
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +1 -0
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/index.js +2 -4
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -2
- package/build/index.mjs.map +1 -1
- package/build/main.css +114 -76
- package/build/styles/Calendar/Calendar.css +104 -35
- package/build/styles/Calendar/TableLink/TableLink.css +109 -0
- package/build/styles/main.css +114 -76
- package/build/types/Body/Body.d.ts +2 -2
- package/build/types/Calendar/Calendar.d.ts +4 -2
- package/build/types/Calendar/Calendar.d.ts.map +1 -1
- package/build/types/Calendar/Calendar.messages.d.ts +5 -0
- package/build/types/Calendar/Calendar.messages.d.ts.map +1 -1
- package/build/types/Calendar/Calendar.types.d.ts +19 -0
- package/build/types/Calendar/Calendar.types.d.ts.map +1 -0
- package/build/types/Calendar/DayCalendar/DayCalendar.d.ts +4 -1
- package/build/types/Calendar/DayCalendar/DayCalendar.d.ts.map +1 -1
- package/build/types/Calendar/DayCalendar/Table/DayCalendarTable.d.ts +3 -0
- package/build/types/Calendar/DayCalendar/Table/DayCalendarTable.d.ts.map +1 -1
- package/build/types/Calendar/{tableLink → TableLink}/TableLink.d.ts +2 -1
- package/build/types/Calendar/TableLink/TableLink.d.ts.map +1 -0
- package/build/types/Calendar/TableLink/index.d.ts.map +1 -0
- package/build/types/Calendar/index.d.ts +1 -0
- package/build/types/Calendar/index.d.ts.map +1 -1
- package/build/types/DateLookup/DateLookup.d.ts +5 -2
- package/build/types/DateLookup/DateLookup.d.ts.map +1 -1
- package/build/types/DateLookup/index.d.ts +1 -0
- package/build/types/DateLookup/index.d.ts.map +1 -1
- package/build/types/IconButton/IconButton.d.ts +1 -1
- package/build/types/Title/Title.d.ts +2 -2
- package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts +1 -1
- package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts +1 -1
- package/build/types/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.d.ts +3 -0
- package/build/types/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.d.ts.map +1 -0
- package/build/types/common/DateUtils/index.d.ts +2 -0
- package/build/types/common/DateUtils/index.d.ts.map +1 -1
- package/build/types/common/DateUtils/isDateDisabled/isDateDisabled.d.ts +3 -0
- package/build/types/common/DateUtils/isDateDisabled/isDateDisabled.d.ts.map +1 -0
- package/build/types/index.d.ts +2 -4
- package/build/types/index.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +2 -0
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/Calendar/Calendar.css +104 -35
- package/src/Calendar/Calendar.disabledDates.test.tsx +197 -0
- package/src/Calendar/Calendar.less +5 -35
- package/src/Calendar/Calendar.messages.ts +5 -0
- package/src/Calendar/Calendar.test.tsx +9 -9
- package/src/Calendar/Calendar.tsx +61 -9
- package/src/Calendar/Calendar.types.ts +22 -0
- package/src/Calendar/DayCalendar/DayCalendar.tsx +17 -1
- package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +42 -26
- package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +1 -1
- package/src/Calendar/TableLink/TableLink.css +109 -0
- package/src/Calendar/TableLink/TableLink.less +60 -0
- package/src/Calendar/{tableLink → TableLink}/TableLink.tsx +24 -14
- package/src/Calendar/YearCalendar/Table/YearCalendarTable.tsx +1 -1
- package/src/Calendar/_stories/Calendar.accessibility.docs.mdx +112 -0
- package/src/Calendar/_stories/Calendar.story.tsx +55 -1
- package/src/Calendar/index.ts +7 -0
- package/src/DateLookup/DateLookup.disabledDates.test.tsx +120 -0
- package/src/DateLookup/DateLookup.test.tsx +1 -1
- package/src/DateLookup/DateLookup.tsx +11 -4
- package/src/DateLookup/_stories/DateLookup.accessibility.docs.mdx +100 -0
- package/src/DateLookup/_stories/DateLookup.story.tsx +59 -1
- package/src/DateLookup/index.ts +6 -0
- package/src/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.test.ts +98 -0
- package/src/common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.ts +45 -0
- package/src/common/DateUtils/index.ts +2 -0
- package/src/common/DateUtils/isDateDisabled/isDateDisabled.test.ts +159 -0
- package/src/common/DateUtils/isDateDisabled/isDateDisabled.ts +59 -0
- package/src/i18n/en.json +1 -0
- package/src/index.ts +2 -4
- package/src/main.css +114 -76
- package/src/main.less +0 -1
- package/build/Calendar/tableLink/TableLink.js.map +0 -1
- package/build/Calendar/tableLink/TableLink.mjs.map +0 -1
- package/build/Markup/Markup.js +0 -136
- package/build/Markup/Markup.js.map +0 -1
- package/build/Markup/Markup.mjs +0 -131
- package/build/Markup/Markup.mjs.map +0 -1
- package/build/Markup/constants.js +0 -36
- package/build/Markup/constants.js.map +0 -1
- package/build/Markup/constants.mjs +0 -29
- package/build/Markup/constants.mjs.map +0 -1
- package/build/Markup/utils/parseMarkup.js +0 -226
- package/build/Markup/utils/parseMarkup.js.map +0 -1
- package/build/Markup/utils/parseMarkup.mjs +0 -223
- package/build/Markup/utils/parseMarkup.mjs.map +0 -1
- package/build/Markup/utils/sanitise.js +0 -91
- package/build/Markup/utils/sanitise.js.map +0 -1
- package/build/Markup/utils/sanitise.mjs +0 -89
- package/build/Markup/utils/sanitise.mjs.map +0 -1
- package/build/styles/Markup/Markup.css +0 -28
- package/build/styles/Markup/_stories/Vulnerability/Vulnerability.css +0 -70
- package/build/types/Calendar/tableLink/TableLink.d.ts.map +0 -1
- package/build/types/Calendar/tableLink/index.d.ts.map +0 -1
- package/build/types/Markup/Markup.d.ts +0 -18
- package/build/types/Markup/Markup.d.ts.map +0 -1
- package/build/types/Markup/Markup.types.d.ts +0 -68
- package/build/types/Markup/Markup.types.d.ts.map +0 -1
- package/build/types/Markup/_stories/Vulnerability/Vulnerability.d.ts +0 -12
- package/build/types/Markup/_stories/Vulnerability/Vulnerability.d.ts.map +0 -1
- package/build/types/Markup/constants.d.ts +0 -20
- package/build/types/Markup/constants.d.ts.map +0 -1
- package/build/types/Markup/index.d.ts +0 -3
- package/build/types/Markup/index.d.ts.map +0 -1
- package/build/types/Markup/utils/parseMarkup.d.ts +0 -6
- package/build/types/Markup/utils/parseMarkup.d.ts.map +0 -1
- package/build/types/Markup/utils/sanitise.d.ts +0 -2
- package/build/types/Markup/utils/sanitise.d.ts.map +0 -1
- package/src/Markup/Markup.css +0 -28
- package/src/Markup/Markup.injection.test.tsx +0 -152
- package/src/Markup/Markup.less +0 -29
- package/src/Markup/Markup.test.tsx +0 -405
- package/src/Markup/Markup.tsx +0 -165
- package/src/Markup/Markup.types.ts +0 -53
- package/src/Markup/_stories/Markup.docs.mdx +0 -75
- package/src/Markup/_stories/Markup.security.docs.mdx +0 -256
- package/src/Markup/_stories/Markup.story.tsx +0 -227
- package/src/Markup/_stories/Vulnerability/Vulnerability.css +0 -70
- package/src/Markup/_stories/Vulnerability/Vulnerability.tsx +0 -30
- package/src/Markup/constants.ts +0 -41
- package/src/Markup/index.ts +0 -2
- package/src/Markup/utils/parseMarkup.test.ts +0 -658
- package/src/Markup/utils/parseMarkup.ts +0 -228
- package/src/Markup/utils/sanitise.test.ts +0 -375
- package/src/Markup/utils/sanitise.ts +0 -107
- /package/build/types/Calendar/{tableLink → TableLink}/index.d.ts +0 -0
- /package/src/Calendar/{tableLink → TableLink}/index.ts +0 -0
|
@@ -31,6 +31,9 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
31
31
|
var moveToWithinRange = require('../common/DateUtils/moveToWithinRange/moveToWithinRange.js');
|
|
32
32
|
var isWithinRange = require('../common/DateUtils/isWithinRange/isWithinRange.js');
|
|
33
33
|
var getDateView = require('../common/DateUtils/getDateView/getDateView.js');
|
|
34
|
+
var isDateDisabled = require('../common/DateUtils/isDateDisabled/isDateDisabled.js');
|
|
35
|
+
var hasDisabledDatesInMonth = require('../common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.js');
|
|
36
|
+
var InlinePrompt = require('../Prompt/InlinePrompt/InlinePrompt.js');
|
|
34
37
|
var DayCalendar = require('./DayCalendar/DayCalendar.js');
|
|
35
38
|
var GetStartOfDay = require('./GetStartOfDay/GetStartOfDay.js');
|
|
36
39
|
var MonthCalendar = require('./MonthCalendar/MonthCalendar.js');
|
|
@@ -42,15 +45,26 @@ const Calendar = ({
|
|
|
42
45
|
max: maxProp = null,
|
|
43
46
|
monthFormat: monthFormat$1 = monthFormat.MonthFormat.LONG,
|
|
44
47
|
placeholder,
|
|
48
|
+
disabledRules,
|
|
45
49
|
onChange,
|
|
46
50
|
onSelect
|
|
47
51
|
}) => {
|
|
48
52
|
const selectedDate = GetStartOfDay.getStartOfDay(value);
|
|
49
53
|
const min = GetStartOfDay.getStartOfDay(minProp);
|
|
50
54
|
const max = GetStartOfDay.getStartOfDay(maxProp);
|
|
55
|
+
const disabledReasonId = React.useId();
|
|
56
|
+
const [focusedDateDisabled, setFocusedDateDisabled] = React.useState(false);
|
|
57
|
+
const disabledRulesRef = React.useRef(disabledRules);
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
disabledRulesRef.current = disabledRules;
|
|
60
|
+
});
|
|
51
61
|
React.useEffect(() => {
|
|
52
62
|
if (selectedDate && !isWithinRange.isWithinRange(selectedDate, min, max)) {
|
|
53
|
-
|
|
63
|
+
const clamped = moveToWithinRange.moveToWithinRange(selectedDate, min, max);
|
|
64
|
+
const isEnabled = !isDateDisabled.isDateDisabled(clamped, disabledRulesRef.current);
|
|
65
|
+
onChange(clamped, {
|
|
66
|
+
isEnabled
|
|
67
|
+
});
|
|
54
68
|
}
|
|
55
69
|
}, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
56
70
|
const dateView = getDateView.returnDateView(selectedDate, min, max);
|
|
@@ -63,6 +77,12 @@ const Calendar = ({
|
|
|
63
77
|
setViewMonth(view.getMonth());
|
|
64
78
|
setViewYear(view.getFullYear());
|
|
65
79
|
}, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
80
|
+
React.useEffect(() => {
|
|
81
|
+
if (selectedDate) {
|
|
82
|
+
const isEnabled = isWithinRange.isWithinRange(selectedDate, min, max) && !isDateDisabled.isDateDisabled(selectedDate, disabledRulesRef.current);
|
|
83
|
+
setFocusedDateDisabled(!isEnabled);
|
|
84
|
+
}
|
|
85
|
+
}, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
66
86
|
const handleViewDateUpdate = React.useCallback(
|
|
67
87
|
// eslint-disable-next-line react-hooks/preserve-manual-memoization
|
|
68
88
|
({
|
|
@@ -75,14 +95,21 @@ const Calendar = ({
|
|
|
75
95
|
const switchToDays = React.useCallback(() => setMode('day'), []);
|
|
76
96
|
const switchToMonths = React.useCallback(() => setMode('month'), []);
|
|
77
97
|
const switchToYears = React.useCallback(() => setMode('year'), []);
|
|
78
|
-
const handleSelectedDateUpdate = React.useCallback(
|
|
79
|
-
|
|
98
|
+
const handleSelectedDateUpdate = React.useCallback(
|
|
99
|
+
// eslint-disable-next-line react-hooks/preserve-manual-memoization
|
|
100
|
+
date => {
|
|
101
|
+
const isEnabled = isWithinRange.isWithinRange(date, min, max) && !isDateDisabled.isDateDisabled(date, disabledRulesRef.current);
|
|
102
|
+
setFocusedDateDisabled(!isEnabled);
|
|
103
|
+
onChange(date, {
|
|
104
|
+
isEnabled
|
|
105
|
+
});
|
|
106
|
+
if (isEnabled && onSelect) {
|
|
80
107
|
onSelect(date);
|
|
81
|
-
} else {
|
|
82
|
-
onChange(date);
|
|
83
108
|
}
|
|
84
|
-
}, [onChange, onSelect]);
|
|
85
|
-
const adjustDate = React.useCallback(
|
|
109
|
+
}, [min, max, onChange, onSelect]);
|
|
110
|
+
const adjustDate = React.useCallback(
|
|
111
|
+
// eslint-disable-next-line react-hooks/preserve-manual-memoization
|
|
112
|
+
(daysToAdd, monthsToAdd, yearsToAdd) => {
|
|
86
113
|
let date;
|
|
87
114
|
if (selectedDate) {
|
|
88
115
|
date = new Date(mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(), mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(), mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate());
|
|
@@ -91,7 +118,11 @@ const Calendar = ({
|
|
|
91
118
|
}
|
|
92
119
|
date &&= moveToWithinRange.moveToWithinRange(date, min, max);
|
|
93
120
|
if (date?.getTime() !== selectedDate?.getTime()) {
|
|
94
|
-
|
|
121
|
+
const isEnabled = date ? isWithinRange.isWithinRange(date, min, max) && !isDateDisabled.isDateDisabled(date, disabledRulesRef.current) : true;
|
|
122
|
+
setFocusedDateDisabled(!isEnabled);
|
|
123
|
+
onChange(date, {
|
|
124
|
+
isEnabled
|
|
125
|
+
});
|
|
95
126
|
}
|
|
96
127
|
}, [selectedDate, min, max, mode, onChange]);
|
|
97
128
|
const handleKeyDown = React.useCallback(event => {
|
|
@@ -114,6 +145,7 @@ const Calendar = ({
|
|
|
114
145
|
break;
|
|
115
146
|
}
|
|
116
147
|
}, [adjustDate]);
|
|
148
|
+
const showPrompt = mode === 'day' && !!disabledRules?.reason && hasDisabledDatesInMonth.hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);
|
|
117
149
|
return (
|
|
118
150
|
/*#__PURE__*/
|
|
119
151
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
@@ -126,6 +158,8 @@ const Calendar = ({
|
|
|
126
158
|
viewMonth: viewMonth,
|
|
127
159
|
viewYear: viewYear,
|
|
128
160
|
monthFormat: monthFormat$1,
|
|
161
|
+
disabledRules: disabledRules,
|
|
162
|
+
disabledReasonId: showPrompt ? disabledReasonId : undefined,
|
|
129
163
|
onSelect: handleSelectedDateUpdate,
|
|
130
164
|
onLabelClick: switchToYears,
|
|
131
165
|
onViewDateUpdate: handleViewDateUpdate
|
|
@@ -150,6 +184,11 @@ const Calendar = ({
|
|
|
150
184
|
}),
|
|
151
185
|
onSelect: switchToMonths,
|
|
152
186
|
onViewDateUpdate: handleViewDateUpdate
|
|
187
|
+
}), showPrompt && /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
|
|
188
|
+
sentiment: focusedDateDisabled ? 'negative' : 'neutral',
|
|
189
|
+
width: "full",
|
|
190
|
+
id: disabledReasonId,
|
|
191
|
+
children: disabledRules.reason
|
|
153
192
|
})]
|
|
154
193
|
})
|
|
155
194
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, KeyboardEvent } from 'react';\n\nimport { MonthFormat } from '../common';\nimport { isWithinRange, moveToWithinRange, returnDateView } from '../common/DateUtils';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n monthFormat?: `${MonthFormat}`;\n placeholder?: string;\n onChange: (date: Date | null) => void;\n onSelect?: (date: Date) => void;\n}\n\nconst Calendar = ({\n value,\n min: minProp = null,\n max: maxProp = null,\n monthFormat = MonthFormat.LONG,\n placeholder,\n onChange,\n onSelect,\n}: CalendarProps) => {\n const selectedDate = getStartOfDay(value);\n const min = getStartOfDay(minProp);\n const max = getStartOfDay(maxProp);\n\n useEffect(() => {\n if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n onChange(moveToWithinRange(selectedDate, min, max));\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const dateView = returnDateView(selectedDate, min, max);\n const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n const [viewYear, setViewYear] = useState(dateView.getFullYear());\n const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n useEffect(() => {\n const view = returnDateView(selectedDate, min, max);\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setViewMonth(view.getMonth());\n\n setViewYear(view.getFullYear());\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleViewDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n ({ month, year }: { month?: number; year?: number }) => {\n if (month !== undefined) setViewMonth(month);\n if (year !== undefined) setViewYear(year);\n },\n [],\n );\n\n const switchToDays = useCallback(() => setMode('day'), []);\n const switchToMonths = useCallback(() => setMode('month'), []);\n const switchToYears = useCallback(() => setMode('year'), []);\n\n const handleSelectedDateUpdate = useCallback(\n (date: Date) => {\n if (onSelect) {\n onSelect(date);\n } else {\n onChange(date);\n }\n },\n [onChange, onSelect],\n );\n\n const adjustDate = useCallback(\n (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n let date: Date | null;\n if (selectedDate) {\n date = new Date(\n mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n );\n } else {\n date = getStartOfDay(new Date());\n }\n date &&= moveToWithinRange(date, min, max);\n if (date?.getTime() !== selectedDate?.getTime()) {\n onChange(date);\n }\n },\n [selectedDate, min, max, mode, onChange],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n adjustDate(-1, -1, -1);\n event.preventDefault();\n break;\n case 'ArrowUp':\n adjustDate(-7, -4, -4);\n event.preventDefault();\n break;\n case 'ArrowRight':\n adjustDate(1, 1, 1);\n event.preventDefault();\n break;\n case 'ArrowDown':\n adjustDate(7, 4, 4);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [adjustDate],\n );\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div onKeyDown={handleKeyDown}>\n {mode === 'day' && (\n <DayCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewMonth={viewMonth}\n viewYear={viewYear}\n monthFormat={monthFormat}\n onSelect={handleSelectedDateUpdate}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'month' && (\n <MonthCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToDays}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'year' && (\n <YearCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToMonths}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n </div>\n );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","onChange","onSelect","selectedDate","getStartOfDay","useEffect","isWithinRange","moveToWithinRange","getTime","dateView","returnDateView","viewMonth","setViewMonth","useState","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","date","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","Date","getDate","handleKeyDown","event","key","preventDefault","_jsxs","onKeyDown","children","_jsx","DayCalendar","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, useRef, KeyboardEvent } from 'react';\n\nimport { MonthFormat } from '../common';\nimport {\n isWithinRange,\n moveToWithinRange,\n returnDateView,\n isDateDisabled,\n hasDisabledDatesInMonth,\n} from '../common/DateUtils';\nimport { InlinePrompt } from '../Prompt/InlinePrompt';\nimport type { DateChangeMeta, DisabledRules } from './Calendar.types';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n monthFormat?: `${MonthFormat}`;\n placeholder?: string;\n disabledRules?: DisabledRules;\n onChange: (date: Date | null, meta: DateChangeMeta) => void;\n onSelect?: (date: Date) => void;\n}\n\nconst Calendar = ({\n value,\n min: minProp = null,\n max: maxProp = null,\n monthFormat = MonthFormat.LONG,\n placeholder,\n disabledRules,\n onChange,\n onSelect,\n}: CalendarProps) => {\n const selectedDate = getStartOfDay(value);\n const min = getStartOfDay(minProp);\n const max = getStartOfDay(maxProp);\n const disabledReasonId = useId();\n const [focusedDateDisabled, setFocusedDateDisabled] = useState(false);\n const disabledRulesRef = useRef(disabledRules);\n useEffect(() => {\n disabledRulesRef.current = disabledRules;\n });\n\n useEffect(() => {\n if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n const clamped = moveToWithinRange(selectedDate, min, max);\n const isEnabled = !isDateDisabled(clamped, disabledRulesRef.current);\n onChange(clamped, { isEnabled });\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const dateView = returnDateView(selectedDate, min, max);\n const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n const [viewYear, setViewYear] = useState(dateView.getFullYear());\n const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n useEffect(() => {\n const view = returnDateView(selectedDate, min, max);\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setViewMonth(view.getMonth());\n\n setViewYear(view.getFullYear());\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (selectedDate) {\n const isEnabled =\n isWithinRange(selectedDate, min, max) &&\n !isDateDisabled(selectedDate, disabledRulesRef.current);\n\n setFocusedDateDisabled(!isEnabled);\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleViewDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n ({ month, year }: { month?: number; year?: number }) => {\n if (month !== undefined) setViewMonth(month);\n if (year !== undefined) setViewYear(year);\n },\n [],\n );\n\n const switchToDays = useCallback(() => setMode('day'), []);\n const switchToMonths = useCallback(() => setMode('month'), []);\n const switchToYears = useCallback(() => setMode('year'), []);\n\n const handleSelectedDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (date: Date) => {\n const isEnabled =\n isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n if (isEnabled && onSelect) {\n onSelect(date);\n }\n },\n [min, max, onChange, onSelect],\n );\n\n const adjustDate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n let date: Date | null;\n if (selectedDate) {\n date = new Date(\n mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n );\n } else {\n date = getStartOfDay(new Date());\n }\n date &&= moveToWithinRange(date, min, max);\n if (date?.getTime() !== selectedDate?.getTime()) {\n const isEnabled = date\n ? isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current)\n : true;\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n }\n },\n [selectedDate, min, max, mode, onChange],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n adjustDate(-1, -1, -1);\n event.preventDefault();\n break;\n case 'ArrowUp':\n adjustDate(-7, -4, -4);\n event.preventDefault();\n break;\n case 'ArrowRight':\n adjustDate(1, 1, 1);\n event.preventDefault();\n break;\n case 'ArrowDown':\n adjustDate(7, 4, 4);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [adjustDate],\n );\n\n const showPrompt =\n mode === 'day' &&\n !!disabledRules?.reason &&\n hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div onKeyDown={handleKeyDown}>\n {mode === 'day' && (\n <DayCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewMonth={viewMonth}\n viewYear={viewYear}\n monthFormat={monthFormat}\n disabledRules={disabledRules}\n disabledReasonId={showPrompt ? disabledReasonId : undefined}\n onSelect={handleSelectedDateUpdate}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'month' && (\n <MonthCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToDays}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'year' && (\n <YearCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToMonths}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {showPrompt && (\n <InlinePrompt\n sentiment={focusedDateDisabled ? 'negative' : 'neutral'}\n width=\"full\"\n id={disabledReasonId}\n >\n {disabledRules.reason}\n </InlinePrompt>\n )}\n </div>\n );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","disabledRules","onChange","onSelect","selectedDate","getStartOfDay","disabledReasonId","useId","focusedDateDisabled","setFocusedDateDisabled","useState","disabledRulesRef","useRef","useEffect","current","isWithinRange","clamped","moveToWithinRange","isEnabled","isDateDisabled","getTime","dateView","returnDateView","viewMonth","setViewMonth","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","date","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","Date","getDate","handleKeyDown","event","key","preventDefault","showPrompt","reason","hasDisabledDatesInMonth","_jsxs","onKeyDown","children","_jsx","DayCalendar","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar","InlinePrompt","sentiment","width","id"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.messages.js","sources":["../../src/Calendar/Calendar.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n next: {\n id: 'neptune.DateLookup.next',\n defaultMessage: 'next',\n description: 'Description of next button',\n },\n previous: {\n id: 'neptune.DateLookup.previous',\n defaultMessage: 'previous',\n description: 'Description of previous button',\n },\n day: {\n id: 'neptune.DateLookup.day',\n defaultMessage: 'day',\n description: 'Description of next/previous/selected day button',\n },\n month: {\n id: 'neptune.DateLookup.month',\n defaultMessage: 'month',\n description: 'Description of next/previous/selected month button',\n },\n year: {\n id: 'neptune.DateLookup.year',\n defaultMessage: 'year',\n description: 'Description of next/previous/selected year button',\n },\n twentyYears: {\n id: 'neptune.DateLookup.twentyYears',\n defaultMessage: '20 years',\n description: 'Description of next/previous 20 years button',\n },\n selected: {\n id: 'neptune.DateLookup.selected',\n defaultMessage: 'selected',\n description: 'Description of the selected day/month/year',\n },\n goTo20YearView: {\n id: 'neptune.DateLookup.goTo20YearView',\n defaultMessage: 'Go to 20 year view',\n description: 'Description of the button to go to 20 year view',\n },\n});\n"],"names":["defineMessages","next","id","previous","day","month","year","twentyYears","selected","goTo20YearView"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;GAGH;AACDC,EAAAA,QAAQ,EAAE;IACRD,EAAE,EAAA;GAGH;AACDE,EAAAA,GAAG,EAAE;IACHF,EAAE,EAAA;GAGH;AACDG,EAAAA,KAAK,EAAE;IACLH,EAAE,EAAA;GAGH;AACDI,EAAAA,IAAI,EAAE;IACJJ,EAAE,EAAA;GAGH;AACDK,EAAAA,WAAW,EAAE;IACXL,EAAE,EAAA;GAGH;AACDM,EAAAA,QAAQ,EAAE;IACRN,EAAE,EAAA;GAGH;AACDO,EAAAA,cAAc,EAAE;
|
|
1
|
+
{"version":3,"file":"Calendar.messages.js","sources":["../../src/Calendar/Calendar.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n next: {\n id: 'neptune.DateLookup.next',\n defaultMessage: 'next',\n description: 'Description of next button',\n },\n previous: {\n id: 'neptune.DateLookup.previous',\n defaultMessage: 'previous',\n description: 'Description of previous button',\n },\n day: {\n id: 'neptune.DateLookup.day',\n defaultMessage: 'day',\n description: 'Description of next/previous/selected day button',\n },\n month: {\n id: 'neptune.DateLookup.month',\n defaultMessage: 'month',\n description: 'Description of next/previous/selected month button',\n },\n year: {\n id: 'neptune.DateLookup.year',\n defaultMessage: 'year',\n description: 'Description of next/previous/selected year button',\n },\n twentyYears: {\n id: 'neptune.DateLookup.twentyYears',\n defaultMessage: '20 years',\n description: 'Description of next/previous 20 years button',\n },\n selected: {\n id: 'neptune.DateLookup.selected',\n defaultMessage: 'selected',\n description: 'Description of the selected day/month/year',\n },\n notAvailable: {\n id: 'neptune.DateLookup.notAvailable',\n defaultMessage: 'not available',\n description: 'Announces that a date is disabled/unavailable',\n },\n goTo20YearView: {\n id: 'neptune.DateLookup.goTo20YearView',\n defaultMessage: 'Go to 20 year view',\n description: 'Description of the button to go to 20 year view',\n },\n});\n"],"names":["defineMessages","next","id","previous","day","month","year","twentyYears","selected","notAvailable","goTo20YearView"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;GAGH;AACDC,EAAAA,QAAQ,EAAE;IACRD,EAAE,EAAA;GAGH;AACDE,EAAAA,GAAG,EAAE;IACHF,EAAE,EAAA;GAGH;AACDG,EAAAA,KAAK,EAAE;IACLH,EAAE,EAAA;GAGH;AACDI,EAAAA,IAAI,EAAE;IACJJ,EAAE,EAAA;GAGH;AACDK,EAAAA,WAAW,EAAE;IACXL,EAAE,EAAA;GAGH;AACDM,EAAAA,QAAQ,EAAE;IACRN,EAAE,EAAA;GAGH;AACDO,EAAAA,YAAY,EAAE;IACZP,EAAE,EAAA;GAGH;AACDQ,EAAAA,cAAc,EAAE;IACdR,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.messages.mjs","sources":["../../src/Calendar/Calendar.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n next: {\n id: 'neptune.DateLookup.next',\n defaultMessage: 'next',\n description: 'Description of next button',\n },\n previous: {\n id: 'neptune.DateLookup.previous',\n defaultMessage: 'previous',\n description: 'Description of previous button',\n },\n day: {\n id: 'neptune.DateLookup.day',\n defaultMessage: 'day',\n description: 'Description of next/previous/selected day button',\n },\n month: {\n id: 'neptune.DateLookup.month',\n defaultMessage: 'month',\n description: 'Description of next/previous/selected month button',\n },\n year: {\n id: 'neptune.DateLookup.year',\n defaultMessage: 'year',\n description: 'Description of next/previous/selected year button',\n },\n twentyYears: {\n id: 'neptune.DateLookup.twentyYears',\n defaultMessage: '20 years',\n description: 'Description of next/previous 20 years button',\n },\n selected: {\n id: 'neptune.DateLookup.selected',\n defaultMessage: 'selected',\n description: 'Description of the selected day/month/year',\n },\n goTo20YearView: {\n id: 'neptune.DateLookup.goTo20YearView',\n defaultMessage: 'Go to 20 year view',\n description: 'Description of the button to go to 20 year view',\n },\n});\n"],"names":["defineMessages","next","id","previous","day","month","year","twentyYears","selected","goTo20YearView"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;GAGH;AACDC,EAAAA,QAAQ,EAAE;IACRD,EAAE,EAAA;GAGH;AACDE,EAAAA,GAAG,EAAE;IACHF,EAAE,EAAA;GAGH;AACDG,EAAAA,KAAK,EAAE;IACLH,EAAE,EAAA;GAGH;AACDI,EAAAA,IAAI,EAAE;IACJJ,EAAE,EAAA;GAGH;AACDK,EAAAA,WAAW,EAAE;IACXL,EAAE,EAAA;GAGH;AACDM,EAAAA,QAAQ,EAAE;IACRN,EAAE,EAAA;GAGH;AACDO,EAAAA,cAAc,EAAE;
|
|
1
|
+
{"version":3,"file":"Calendar.messages.mjs","sources":["../../src/Calendar/Calendar.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n next: {\n id: 'neptune.DateLookup.next',\n defaultMessage: 'next',\n description: 'Description of next button',\n },\n previous: {\n id: 'neptune.DateLookup.previous',\n defaultMessage: 'previous',\n description: 'Description of previous button',\n },\n day: {\n id: 'neptune.DateLookup.day',\n defaultMessage: 'day',\n description: 'Description of next/previous/selected day button',\n },\n month: {\n id: 'neptune.DateLookup.month',\n defaultMessage: 'month',\n description: 'Description of next/previous/selected month button',\n },\n year: {\n id: 'neptune.DateLookup.year',\n defaultMessage: 'year',\n description: 'Description of next/previous/selected year button',\n },\n twentyYears: {\n id: 'neptune.DateLookup.twentyYears',\n defaultMessage: '20 years',\n description: 'Description of next/previous 20 years button',\n },\n selected: {\n id: 'neptune.DateLookup.selected',\n defaultMessage: 'selected',\n description: 'Description of the selected day/month/year',\n },\n notAvailable: {\n id: 'neptune.DateLookup.notAvailable',\n defaultMessage: 'not available',\n description: 'Announces that a date is disabled/unavailable',\n },\n goTo20YearView: {\n id: 'neptune.DateLookup.goTo20YearView',\n defaultMessage: 'Go to 20 year view',\n description: 'Description of the button to go to 20 year view',\n },\n});\n"],"names":["defineMessages","next","id","previous","day","month","year","twentyYears","selected","notAvailable","goTo20YearView"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;GAGH;AACDC,EAAAA,QAAQ,EAAE;IACRD,EAAE,EAAA;GAGH;AACDE,EAAAA,GAAG,EAAE;IACHF,EAAE,EAAA;GAGH;AACDG,EAAAA,KAAK,EAAE;IACLH,EAAE,EAAA;GAGH;AACDI,EAAAA,IAAI,EAAE;IACJJ,EAAE,EAAA;GAGH;AACDK,EAAAA,WAAW,EAAE;IACXL,EAAE,EAAA;GAGH;AACDM,EAAAA,QAAQ,EAAE;IACRN,EAAE,EAAA;GAGH;AACDO,EAAAA,YAAY,EAAE;IACZP,EAAE,EAAA;GAGH;AACDQ,EAAAA,cAAc,EAAE;IACdR,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useId, useState, useRef, useEffect, useCallback } from 'react';
|
|
2
2
|
import '../common/theme.mjs';
|
|
3
3
|
import '../common/direction.mjs';
|
|
4
4
|
import '@transferwise/neptune-tokens';
|
|
@@ -27,6 +27,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
27
27
|
import { moveToWithinRange } from '../common/DateUtils/moveToWithinRange/moveToWithinRange.mjs';
|
|
28
28
|
import { isWithinRange } from '../common/DateUtils/isWithinRange/isWithinRange.mjs';
|
|
29
29
|
import { returnDateView } from '../common/DateUtils/getDateView/getDateView.mjs';
|
|
30
|
+
import { isDateDisabled } from '../common/DateUtils/isDateDisabled/isDateDisabled.mjs';
|
|
31
|
+
import { hasDisabledDatesInMonth } from '../common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.mjs';
|
|
32
|
+
import { InlinePrompt } from '../Prompt/InlinePrompt/InlinePrompt.mjs';
|
|
30
33
|
import DayCalendar from './DayCalendar/DayCalendar.mjs';
|
|
31
34
|
import { getStartOfDay } from './GetStartOfDay/GetStartOfDay.mjs';
|
|
32
35
|
import MonthCalendar from './MonthCalendar/MonthCalendar.mjs';
|
|
@@ -38,15 +41,26 @@ const Calendar = ({
|
|
|
38
41
|
max: maxProp = null,
|
|
39
42
|
monthFormat = MonthFormat.LONG,
|
|
40
43
|
placeholder,
|
|
44
|
+
disabledRules,
|
|
41
45
|
onChange,
|
|
42
46
|
onSelect
|
|
43
47
|
}) => {
|
|
44
48
|
const selectedDate = getStartOfDay(value);
|
|
45
49
|
const min = getStartOfDay(minProp);
|
|
46
50
|
const max = getStartOfDay(maxProp);
|
|
51
|
+
const disabledReasonId = useId();
|
|
52
|
+
const [focusedDateDisabled, setFocusedDateDisabled] = useState(false);
|
|
53
|
+
const disabledRulesRef = useRef(disabledRules);
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
disabledRulesRef.current = disabledRules;
|
|
56
|
+
});
|
|
47
57
|
useEffect(() => {
|
|
48
58
|
if (selectedDate && !isWithinRange(selectedDate, min, max)) {
|
|
49
|
-
|
|
59
|
+
const clamped = moveToWithinRange(selectedDate, min, max);
|
|
60
|
+
const isEnabled = !isDateDisabled(clamped, disabledRulesRef.current);
|
|
61
|
+
onChange(clamped, {
|
|
62
|
+
isEnabled
|
|
63
|
+
});
|
|
50
64
|
}
|
|
51
65
|
}, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
52
66
|
const dateView = returnDateView(selectedDate, min, max);
|
|
@@ -59,6 +73,12 @@ const Calendar = ({
|
|
|
59
73
|
setViewMonth(view.getMonth());
|
|
60
74
|
setViewYear(view.getFullYear());
|
|
61
75
|
}, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
if (selectedDate) {
|
|
78
|
+
const isEnabled = isWithinRange(selectedDate, min, max) && !isDateDisabled(selectedDate, disabledRulesRef.current);
|
|
79
|
+
setFocusedDateDisabled(!isEnabled);
|
|
80
|
+
}
|
|
81
|
+
}, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
62
82
|
const handleViewDateUpdate = useCallback(
|
|
63
83
|
// eslint-disable-next-line react-hooks/preserve-manual-memoization
|
|
64
84
|
({
|
|
@@ -71,14 +91,21 @@ const Calendar = ({
|
|
|
71
91
|
const switchToDays = useCallback(() => setMode('day'), []);
|
|
72
92
|
const switchToMonths = useCallback(() => setMode('month'), []);
|
|
73
93
|
const switchToYears = useCallback(() => setMode('year'), []);
|
|
74
|
-
const handleSelectedDateUpdate = useCallback(
|
|
75
|
-
|
|
94
|
+
const handleSelectedDateUpdate = useCallback(
|
|
95
|
+
// eslint-disable-next-line react-hooks/preserve-manual-memoization
|
|
96
|
+
date => {
|
|
97
|
+
const isEnabled = isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);
|
|
98
|
+
setFocusedDateDisabled(!isEnabled);
|
|
99
|
+
onChange(date, {
|
|
100
|
+
isEnabled
|
|
101
|
+
});
|
|
102
|
+
if (isEnabled && onSelect) {
|
|
76
103
|
onSelect(date);
|
|
77
|
-
} else {
|
|
78
|
-
onChange(date);
|
|
79
104
|
}
|
|
80
|
-
}, [onChange, onSelect]);
|
|
81
|
-
const adjustDate = useCallback(
|
|
105
|
+
}, [min, max, onChange, onSelect]);
|
|
106
|
+
const adjustDate = useCallback(
|
|
107
|
+
// eslint-disable-next-line react-hooks/preserve-manual-memoization
|
|
108
|
+
(daysToAdd, monthsToAdd, yearsToAdd) => {
|
|
82
109
|
let date;
|
|
83
110
|
if (selectedDate) {
|
|
84
111
|
date = new Date(mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(), mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(), mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate());
|
|
@@ -87,7 +114,11 @@ const Calendar = ({
|
|
|
87
114
|
}
|
|
88
115
|
date &&= moveToWithinRange(date, min, max);
|
|
89
116
|
if (date?.getTime() !== selectedDate?.getTime()) {
|
|
90
|
-
|
|
117
|
+
const isEnabled = date ? isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current) : true;
|
|
118
|
+
setFocusedDateDisabled(!isEnabled);
|
|
119
|
+
onChange(date, {
|
|
120
|
+
isEnabled
|
|
121
|
+
});
|
|
91
122
|
}
|
|
92
123
|
}, [selectedDate, min, max, mode, onChange]);
|
|
93
124
|
const handleKeyDown = useCallback(event => {
|
|
@@ -110,6 +141,7 @@ const Calendar = ({
|
|
|
110
141
|
break;
|
|
111
142
|
}
|
|
112
143
|
}, [adjustDate]);
|
|
144
|
+
const showPrompt = mode === 'day' && !!disabledRules?.reason && hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);
|
|
113
145
|
return (
|
|
114
146
|
/*#__PURE__*/
|
|
115
147
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
@@ -122,6 +154,8 @@ const Calendar = ({
|
|
|
122
154
|
viewMonth: viewMonth,
|
|
123
155
|
viewYear: viewYear,
|
|
124
156
|
monthFormat: monthFormat,
|
|
157
|
+
disabledRules: disabledRules,
|
|
158
|
+
disabledReasonId: showPrompt ? disabledReasonId : undefined,
|
|
125
159
|
onSelect: handleSelectedDateUpdate,
|
|
126
160
|
onLabelClick: switchToYears,
|
|
127
161
|
onViewDateUpdate: handleViewDateUpdate
|
|
@@ -146,6 +180,11 @@ const Calendar = ({
|
|
|
146
180
|
}),
|
|
147
181
|
onSelect: switchToMonths,
|
|
148
182
|
onViewDateUpdate: handleViewDateUpdate
|
|
183
|
+
}), showPrompt && /*#__PURE__*/jsx(InlinePrompt, {
|
|
184
|
+
sentiment: focusedDateDisabled ? 'negative' : 'neutral',
|
|
185
|
+
width: "full",
|
|
186
|
+
id: disabledReasonId,
|
|
187
|
+
children: disabledRules.reason
|
|
149
188
|
})]
|
|
150
189
|
})
|
|
151
190
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.mjs","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, KeyboardEvent } from 'react';\n\nimport { MonthFormat } from '../common';\nimport { isWithinRange, moveToWithinRange, returnDateView } from '../common/DateUtils';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n monthFormat?: `${MonthFormat}`;\n placeholder?: string;\n onChange: (date: Date | null) => void;\n onSelect?: (date: Date) => void;\n}\n\nconst Calendar = ({\n value,\n min: minProp = null,\n max: maxProp = null,\n monthFormat = MonthFormat.LONG,\n placeholder,\n onChange,\n onSelect,\n}: CalendarProps) => {\n const selectedDate = getStartOfDay(value);\n const min = getStartOfDay(minProp);\n const max = getStartOfDay(maxProp);\n\n useEffect(() => {\n if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n onChange(moveToWithinRange(selectedDate, min, max));\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const dateView = returnDateView(selectedDate, min, max);\n const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n const [viewYear, setViewYear] = useState(dateView.getFullYear());\n const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n useEffect(() => {\n const view = returnDateView(selectedDate, min, max);\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setViewMonth(view.getMonth());\n\n setViewYear(view.getFullYear());\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleViewDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n ({ month, year }: { month?: number; year?: number }) => {\n if (month !== undefined) setViewMonth(month);\n if (year !== undefined) setViewYear(year);\n },\n [],\n );\n\n const switchToDays = useCallback(() => setMode('day'), []);\n const switchToMonths = useCallback(() => setMode('month'), []);\n const switchToYears = useCallback(() => setMode('year'), []);\n\n const handleSelectedDateUpdate = useCallback(\n (date: Date) => {\n if (onSelect) {\n onSelect(date);\n } else {\n onChange(date);\n }\n },\n [onChange, onSelect],\n );\n\n const adjustDate = useCallback(\n (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n let date: Date | null;\n if (selectedDate) {\n date = new Date(\n mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n );\n } else {\n date = getStartOfDay(new Date());\n }\n date &&= moveToWithinRange(date, min, max);\n if (date?.getTime() !== selectedDate?.getTime()) {\n onChange(date);\n }\n },\n [selectedDate, min, max, mode, onChange],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n adjustDate(-1, -1, -1);\n event.preventDefault();\n break;\n case 'ArrowUp':\n adjustDate(-7, -4, -4);\n event.preventDefault();\n break;\n case 'ArrowRight':\n adjustDate(1, 1, 1);\n event.preventDefault();\n break;\n case 'ArrowDown':\n adjustDate(7, 4, 4);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [adjustDate],\n );\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div onKeyDown={handleKeyDown}>\n {mode === 'day' && (\n <DayCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewMonth={viewMonth}\n viewYear={viewYear}\n monthFormat={monthFormat}\n onSelect={handleSelectedDateUpdate}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'month' && (\n <MonthCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToDays}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'year' && (\n <YearCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToMonths}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n </div>\n );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","onChange","onSelect","selectedDate","getStartOfDay","useEffect","isWithinRange","moveToWithinRange","getTime","dateView","returnDateView","viewMonth","setViewMonth","useState","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","date","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","Date","getDate","handleKeyDown","event","key","preventDefault","_jsxs","onKeyDown","children","_jsx","DayCalendar","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Calendar.mjs","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, useRef, KeyboardEvent } from 'react';\n\nimport { MonthFormat } from '../common';\nimport {\n isWithinRange,\n moveToWithinRange,\n returnDateView,\n isDateDisabled,\n hasDisabledDatesInMonth,\n} from '../common/DateUtils';\nimport { InlinePrompt } from '../Prompt/InlinePrompt';\nimport type { DateChangeMeta, DisabledRules } from './Calendar.types';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n monthFormat?: `${MonthFormat}`;\n placeholder?: string;\n disabledRules?: DisabledRules;\n onChange: (date: Date | null, meta: DateChangeMeta) => void;\n onSelect?: (date: Date) => void;\n}\n\nconst Calendar = ({\n value,\n min: minProp = null,\n max: maxProp = null,\n monthFormat = MonthFormat.LONG,\n placeholder,\n disabledRules,\n onChange,\n onSelect,\n}: CalendarProps) => {\n const selectedDate = getStartOfDay(value);\n const min = getStartOfDay(minProp);\n const max = getStartOfDay(maxProp);\n const disabledReasonId = useId();\n const [focusedDateDisabled, setFocusedDateDisabled] = useState(false);\n const disabledRulesRef = useRef(disabledRules);\n useEffect(() => {\n disabledRulesRef.current = disabledRules;\n });\n\n useEffect(() => {\n if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n const clamped = moveToWithinRange(selectedDate, min, max);\n const isEnabled = !isDateDisabled(clamped, disabledRulesRef.current);\n onChange(clamped, { isEnabled });\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const dateView = returnDateView(selectedDate, min, max);\n const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n const [viewYear, setViewYear] = useState(dateView.getFullYear());\n const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n useEffect(() => {\n const view = returnDateView(selectedDate, min, max);\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setViewMonth(view.getMonth());\n\n setViewYear(view.getFullYear());\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (selectedDate) {\n const isEnabled =\n isWithinRange(selectedDate, min, max) &&\n !isDateDisabled(selectedDate, disabledRulesRef.current);\n\n setFocusedDateDisabled(!isEnabled);\n }\n }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleViewDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n ({ month, year }: { month?: number; year?: number }) => {\n if (month !== undefined) setViewMonth(month);\n if (year !== undefined) setViewYear(year);\n },\n [],\n );\n\n const switchToDays = useCallback(() => setMode('day'), []);\n const switchToMonths = useCallback(() => setMode('month'), []);\n const switchToYears = useCallback(() => setMode('year'), []);\n\n const handleSelectedDateUpdate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (date: Date) => {\n const isEnabled =\n isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n if (isEnabled && onSelect) {\n onSelect(date);\n }\n },\n [min, max, onChange, onSelect],\n );\n\n const adjustDate = useCallback(\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n let date: Date | null;\n if (selectedDate) {\n date = new Date(\n mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n );\n } else {\n date = getStartOfDay(new Date());\n }\n date &&= moveToWithinRange(date, min, max);\n if (date?.getTime() !== selectedDate?.getTime()) {\n const isEnabled = date\n ? isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current)\n : true;\n setFocusedDateDisabled(!isEnabled);\n onChange(date, { isEnabled });\n }\n },\n [selectedDate, min, max, mode, onChange],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n adjustDate(-1, -1, -1);\n event.preventDefault();\n break;\n case 'ArrowUp':\n adjustDate(-7, -4, -4);\n event.preventDefault();\n break;\n case 'ArrowRight':\n adjustDate(1, 1, 1);\n event.preventDefault();\n break;\n case 'ArrowDown':\n adjustDate(7, 4, 4);\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [adjustDate],\n );\n\n const showPrompt =\n mode === 'day' &&\n !!disabledRules?.reason &&\n hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div onKeyDown={handleKeyDown}>\n {mode === 'day' && (\n <DayCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewMonth={viewMonth}\n viewYear={viewYear}\n monthFormat={monthFormat}\n disabledRules={disabledRules}\n disabledReasonId={showPrompt ? disabledReasonId : undefined}\n onSelect={handleSelectedDateUpdate}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'month' && (\n <MonthCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToDays}\n onLabelClick={switchToYears}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {mode === 'year' && (\n <YearCalendar\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n {...(placeholder != null && { placeholder })}\n onSelect={switchToMonths}\n onViewDateUpdate={handleViewDateUpdate}\n />\n )}\n {showPrompt && (\n <InlinePrompt\n sentiment={focusedDateDisabled ? 'negative' : 'neutral'}\n width=\"full\"\n id={disabledReasonId}\n >\n {disabledRules.reason}\n </InlinePrompt>\n )}\n </div>\n );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","disabledRules","onChange","onSelect","selectedDate","getStartOfDay","disabledReasonId","useId","focusedDateDisabled","setFocusedDateDisabled","useState","disabledRulesRef","useRef","useEffect","current","isWithinRange","clamped","moveToWithinRange","isEnabled","isDateDisabled","getTime","dateView","returnDateView","viewMonth","setViewMonth","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","date","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","Date","getDate","handleKeyDown","event","key","preventDefault","showPrompt","reason","hasDisabledDatesInMonth","_jsxs","onKeyDown","children","_jsx","DayCalendar","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar","InlinePrompt","sentiment","width","id"],"mappings":"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"}
|
|
@@ -43,6 +43,8 @@ let DayCalendar$1 = class DayCalendar extends React.PureComponent {
|
|
|
43
43
|
formatMessage
|
|
44
44
|
},
|
|
45
45
|
monthFormat,
|
|
46
|
+
disabledRules,
|
|
47
|
+
disabledReasonId,
|
|
46
48
|
onLabelClick,
|
|
47
49
|
onSelect
|
|
48
50
|
} = this.props;
|
|
@@ -62,6 +64,8 @@ let DayCalendar$1 = class DayCalendar extends React.PureComponent {
|
|
|
62
64
|
max,
|
|
63
65
|
viewMonth,
|
|
64
66
|
viewYear,
|
|
67
|
+
disabledRules,
|
|
68
|
+
disabledReasonId,
|
|
65
69
|
onSelect
|
|
66
70
|
})]
|
|
67
71
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DayCalendar.js","sources":["../../../src/Calendar/DayCalendar/DayCalendar.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\n\nimport { MonthFormat } from '../../common';\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport DayCalendarTable from './Table';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\ninterface DayCalendarProps extends WrappedComponentProps {\n selectedDate: Date | null;\n min: Date | null;\n max: Date | null;\n viewMonth: number;\n viewYear: number;\n monthFormat: `${MonthFormat}`;\n onSelect: (date: Date) => void;\n onLabelClick: () => void;\n onViewDateUpdate: (date: { month: number; year: number }) => void;\n}\n\nclass DayCalendar extends PureComponent<DayCalendarProps> {\n selectPreviousMonth = () => {\n const { viewMonth, viewYear } = this.props;\n this.props.onViewDateUpdate({\n month: viewMonth <= 0 ? 11 : viewMonth - 1,\n year: viewMonth <= 0 ? viewYear - 1 : viewYear,\n });\n };\n\n selectNextMonth = () => {\n const { viewMonth, viewYear } = this.props;\n this.props.onViewDateUpdate({\n month: viewMonth >= 11 ? 0 : viewMonth + 1,\n year: viewMonth >= 11 ? viewYear + 1 : viewYear,\n });\n };\n\n render() {\n const {\n selectedDate,\n min,\n max,\n viewMonth,\n viewYear,\n intl: { locale, formatMessage },\n monthFormat,\n onLabelClick,\n onSelect,\n } = this.props;\n return (\n <>\n <DateHeader\n label={formatDate(new Date(viewYear, viewMonth), locale, {\n month: monthFormat,\n year: 'numeric',\n })}\n dateMode={formatMessage(messages.month)}\n onLabelClick={onLabelClick}\n onPreviousClick={this.selectPreviousMonth}\n onNextClick={this.selectNextMonth}\n />\n <DayCalendarTable
|
|
1
|
+
{"version":3,"file":"DayCalendar.js","sources":["../../../src/Calendar/DayCalendar/DayCalendar.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\n\nimport { MonthFormat } from '../../common';\nimport type { DisabledRules } from '../Calendar.types';\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport DayCalendarTable from './Table';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\ninterface DayCalendarProps extends WrappedComponentProps {\n selectedDate: Date | null;\n min: Date | null;\n max: Date | null;\n viewMonth: number;\n viewYear: number;\n monthFormat: `${MonthFormat}`;\n disabledRules?: DisabledRules;\n disabledReasonId?: string;\n onSelect: (date: Date) => void;\n onLabelClick: () => void;\n onViewDateUpdate: (date: { month: number; year: number }) => void;\n}\n\nclass DayCalendar extends PureComponent<DayCalendarProps> {\n selectPreviousMonth = () => {\n const { viewMonth, viewYear } = this.props;\n this.props.onViewDateUpdate({\n month: viewMonth <= 0 ? 11 : viewMonth - 1,\n year: viewMonth <= 0 ? viewYear - 1 : viewYear,\n });\n };\n\n selectNextMonth = () => {\n const { viewMonth, viewYear } = this.props;\n this.props.onViewDateUpdate({\n month: viewMonth >= 11 ? 0 : viewMonth + 1,\n year: viewMonth >= 11 ? viewYear + 1 : viewYear,\n });\n };\n\n render() {\n const {\n selectedDate,\n min,\n max,\n viewMonth,\n viewYear,\n intl: { locale, formatMessage },\n monthFormat,\n disabledRules,\n disabledReasonId,\n onLabelClick,\n onSelect,\n } = this.props;\n return (\n <>\n <DateHeader\n label={formatDate(new Date(viewYear, viewMonth), locale, {\n month: monthFormat,\n year: 'numeric',\n })}\n dateMode={formatMessage(messages.month)}\n onLabelClick={onLabelClick}\n onPreviousClick={this.selectPreviousMonth}\n onNextClick={this.selectNextMonth}\n />\n <DayCalendarTable\n {...{\n selectedDate,\n min,\n max,\n viewMonth,\n viewYear,\n disabledRules,\n disabledReasonId,\n onSelect,\n }}\n />\n </>\n );\n }\n}\n\nexport default injectIntl(DayCalendar);\n"],"names":["DayCalendar","PureComponent","selectPreviousMonth","viewMonth","viewYear","props","onViewDateUpdate","month","year","selectNextMonth","render","selectedDate","min","max","intl","locale","formatMessage","monthFormat","disabledRules","disabledReasonId","onLabelClick","onSelect","_jsxs","_Fragment","children","_jsx","DateHeader","label","formatDate","Date","dateMode","messages","onPreviousClick","onNextClick","DayCalendarTable","injectIntl"],"mappings":";;;;;;;;;;;;oBAyBA,MAAMA,WAAY,SAAQC,mBAA+B,CAAA;EACvDC,mBAAmB,GAAGA,MAAK;IACzB,MAAM;MAAEC,SAAS;AAAEC,MAAAA;KAAU,GAAG,IAAI,CAACC,KAAK;AAC1C,IAAA,IAAI,CAACA,KAAK,CAACC,gBAAgB,CAAC;MAC1BC,KAAK,EAAEJ,SAAS,IAAI,CAAC,GAAG,EAAE,GAAGA,SAAS,GAAG,CAAC;MAC1CK,IAAI,EAAEL,SAAS,IAAI,CAAC,GAAGC,QAAQ,GAAG,CAAC,GAAGA;AACvC,KAAA,CAAC;EACJ,CAAC;EAEDK,eAAe,GAAGA,MAAK;IACrB,MAAM;MAAEN,SAAS;AAAEC,MAAAA;KAAU,GAAG,IAAI,CAACC,KAAK;AAC1C,IAAA,IAAI,CAACA,KAAK,CAACC,gBAAgB,CAAC;MAC1BC,KAAK,EAAEJ,SAAS,IAAI,EAAE,GAAG,CAAC,GAAGA,SAAS,GAAG,CAAC;MAC1CK,IAAI,EAAEL,SAAS,IAAI,EAAE,GAAGC,QAAQ,GAAG,CAAC,GAAGA;AACxC,KAAA,CAAC;EACJ,CAAC;AAEDM,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,GAAG;MACHC,GAAG;MACHV,SAAS;MACTC,QAAQ;AACRU,MAAAA,IAAI,EAAE;QAAEC,MAAM;AAAEC,QAAAA;OAAe;MAC/BC,WAAW;MACXC,aAAa;MACbC,gBAAgB;MAChBC,YAAY;AACZC,MAAAA;KACD,GAAG,IAAI,CAAChB,KAAK;IACd,oBACEiB,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,KAAK,EAAEC,qBAAU,CAAC,IAAIC,IAAI,CAACzB,QAAQ,EAAED,SAAS,CAAC,EAAEY,MAAM,EAAE;AACvDR,UAAAA,KAAK,EAAEU,WAAW;AAClBT,UAAAA,IAAI,EAAE;AACP,SAAA,CAAE;AACHsB,QAAAA,QAAQ,EAAEd,aAAa,CAACe,yBAAQ,CAACxB,KAAK,CAAE;AACxCa,QAAAA,YAAY,EAAEA,YAAa;QAC3BY,eAAe,EAAE,IAAI,CAAC9B,mBAAoB;QAC1C+B,WAAW,EAAE,IAAI,CAACxB;AAAgB,OAAA,CAEpC,eAAAgB,cAAA,CAACS,wBAAgB,EAAA;QAEbvB,YAAY;QACZC,GAAG;QACHC,GAAG;QACHV,SAAS;QACTC,QAAQ;QACRc,aAAa;QACbC,gBAAgB;AAChBE,QAAAA;AAAQ,OACR,CAEN;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,kBAAec,qBAAU,CAACnC,aAAW,CAAC;;;;"}
|
|
@@ -39,6 +39,8 @@ class DayCalendar extends PureComponent {
|
|
|
39
39
|
formatMessage
|
|
40
40
|
},
|
|
41
41
|
monthFormat,
|
|
42
|
+
disabledRules,
|
|
43
|
+
disabledReasonId,
|
|
42
44
|
onLabelClick,
|
|
43
45
|
onSelect
|
|
44
46
|
} = this.props;
|
|
@@ -58,6 +60,8 @@ class DayCalendar extends PureComponent {
|
|
|
58
60
|
max,
|
|
59
61
|
viewMonth,
|
|
60
62
|
viewYear,
|
|
63
|
+
disabledRules,
|
|
64
|
+
disabledReasonId,
|
|
61
65
|
onSelect
|
|
62
66
|
})]
|
|
63
67
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DayCalendar.mjs","sources":["../../../src/Calendar/DayCalendar/DayCalendar.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\n\nimport { MonthFormat } from '../../common';\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport DayCalendarTable from './Table';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\ninterface DayCalendarProps extends WrappedComponentProps {\n selectedDate: Date | null;\n min: Date | null;\n max: Date | null;\n viewMonth: number;\n viewYear: number;\n monthFormat: `${MonthFormat}`;\n onSelect: (date: Date) => void;\n onLabelClick: () => void;\n onViewDateUpdate: (date: { month: number; year: number }) => void;\n}\n\nclass DayCalendar extends PureComponent<DayCalendarProps> {\n selectPreviousMonth = () => {\n const { viewMonth, viewYear } = this.props;\n this.props.onViewDateUpdate({\n month: viewMonth <= 0 ? 11 : viewMonth - 1,\n year: viewMonth <= 0 ? viewYear - 1 : viewYear,\n });\n };\n\n selectNextMonth = () => {\n const { viewMonth, viewYear } = this.props;\n this.props.onViewDateUpdate({\n month: viewMonth >= 11 ? 0 : viewMonth + 1,\n year: viewMonth >= 11 ? viewYear + 1 : viewYear,\n });\n };\n\n render() {\n const {\n selectedDate,\n min,\n max,\n viewMonth,\n viewYear,\n intl: { locale, formatMessage },\n monthFormat,\n onLabelClick,\n onSelect,\n } = this.props;\n return (\n <>\n <DateHeader\n label={formatDate(new Date(viewYear, viewMonth), locale, {\n month: monthFormat,\n year: 'numeric',\n })}\n dateMode={formatMessage(messages.month)}\n onLabelClick={onLabelClick}\n onPreviousClick={this.selectPreviousMonth}\n onNextClick={this.selectNextMonth}\n />\n <DayCalendarTable
|
|
1
|
+
{"version":3,"file":"DayCalendar.mjs","sources":["../../../src/Calendar/DayCalendar/DayCalendar.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\n\nimport { MonthFormat } from '../../common';\nimport type { DisabledRules } from '../Calendar.types';\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport DayCalendarTable from './Table';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\ninterface DayCalendarProps extends WrappedComponentProps {\n selectedDate: Date | null;\n min: Date | null;\n max: Date | null;\n viewMonth: number;\n viewYear: number;\n monthFormat: `${MonthFormat}`;\n disabledRules?: DisabledRules;\n disabledReasonId?: string;\n onSelect: (date: Date) => void;\n onLabelClick: () => void;\n onViewDateUpdate: (date: { month: number; year: number }) => void;\n}\n\nclass DayCalendar extends PureComponent<DayCalendarProps> {\n selectPreviousMonth = () => {\n const { viewMonth, viewYear } = this.props;\n this.props.onViewDateUpdate({\n month: viewMonth <= 0 ? 11 : viewMonth - 1,\n year: viewMonth <= 0 ? viewYear - 1 : viewYear,\n });\n };\n\n selectNextMonth = () => {\n const { viewMonth, viewYear } = this.props;\n this.props.onViewDateUpdate({\n month: viewMonth >= 11 ? 0 : viewMonth + 1,\n year: viewMonth >= 11 ? viewYear + 1 : viewYear,\n });\n };\n\n render() {\n const {\n selectedDate,\n min,\n max,\n viewMonth,\n viewYear,\n intl: { locale, formatMessage },\n monthFormat,\n disabledRules,\n disabledReasonId,\n onLabelClick,\n onSelect,\n } = this.props;\n return (\n <>\n <DateHeader\n label={formatDate(new Date(viewYear, viewMonth), locale, {\n month: monthFormat,\n year: 'numeric',\n })}\n dateMode={formatMessage(messages.month)}\n onLabelClick={onLabelClick}\n onPreviousClick={this.selectPreviousMonth}\n onNextClick={this.selectNextMonth}\n />\n <DayCalendarTable\n {...{\n selectedDate,\n min,\n max,\n viewMonth,\n viewYear,\n disabledRules,\n disabledReasonId,\n onSelect,\n }}\n />\n </>\n );\n }\n}\n\nexport default injectIntl(DayCalendar);\n"],"names":["DayCalendar","PureComponent","selectPreviousMonth","viewMonth","viewYear","props","onViewDateUpdate","month","year","selectNextMonth","render","selectedDate","min","max","intl","locale","formatMessage","monthFormat","disabledRules","disabledReasonId","onLabelClick","onSelect","_jsxs","_Fragment","children","_jsx","DateHeader","label","formatDate","Date","dateMode","messages","onPreviousClick","onNextClick","DayCalendarTable","injectIntl"],"mappings":";;;;;;;;AAyBA,MAAMA,WAAY,SAAQC,aAA+B,CAAA;EACvDC,mBAAmB,GAAGA,MAAK;IACzB,MAAM;MAAEC,SAAS;AAAEC,MAAAA;KAAU,GAAG,IAAI,CAACC,KAAK;AAC1C,IAAA,IAAI,CAACA,KAAK,CAACC,gBAAgB,CAAC;MAC1BC,KAAK,EAAEJ,SAAS,IAAI,CAAC,GAAG,EAAE,GAAGA,SAAS,GAAG,CAAC;MAC1CK,IAAI,EAAEL,SAAS,IAAI,CAAC,GAAGC,QAAQ,GAAG,CAAC,GAAGA;AACvC,KAAA,CAAC;EACJ,CAAC;EAEDK,eAAe,GAAGA,MAAK;IACrB,MAAM;MAAEN,SAAS;AAAEC,MAAAA;KAAU,GAAG,IAAI,CAACC,KAAK;AAC1C,IAAA,IAAI,CAACA,KAAK,CAACC,gBAAgB,CAAC;MAC1BC,KAAK,EAAEJ,SAAS,IAAI,EAAE,GAAG,CAAC,GAAGA,SAAS,GAAG,CAAC;MAC1CK,IAAI,EAAEL,SAAS,IAAI,EAAE,GAAGC,QAAQ,GAAG,CAAC,GAAGA;AACxC,KAAA,CAAC;EACJ,CAAC;AAEDM,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,GAAG;MACHC,GAAG;MACHV,SAAS;MACTC,QAAQ;AACRU,MAAAA,IAAI,EAAE;QAAEC,MAAM;AAAEC,QAAAA;OAAe;MAC/BC,WAAW;MACXC,aAAa;MACbC,gBAAgB;MAChBC,YAAY;AACZC,MAAAA;KACD,GAAG,IAAI,CAAChB,KAAK;IACd,oBACEiB,IAAA,CAAAC,QAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,KAAK,EAAEC,UAAU,CAAC,IAAIC,IAAI,CAACzB,QAAQ,EAAED,SAAS,CAAC,EAAEY,MAAM,EAAE;AACvDR,UAAAA,KAAK,EAAEU,WAAW;AAClBT,UAAAA,IAAI,EAAE;AACP,SAAA,CAAE;AACHsB,QAAAA,QAAQ,EAAEd,aAAa,CAACe,QAAQ,CAACxB,KAAK,CAAE;AACxCa,QAAAA,YAAY,EAAEA,YAAa;QAC3BY,eAAe,EAAE,IAAI,CAAC9B,mBAAoB;QAC1C+B,WAAW,EAAE,IAAI,CAACxB;AAAgB,OAAA,CAEpC,eAAAgB,GAAA,CAACS,gBAAgB,EAAA;QAEbvB,YAAY;QACZC,GAAG;QACHC,GAAG;QACHV,SAAS;QACTC,QAAQ;QACRc,aAAa;QACbC,gBAAgB;AAChBE,QAAAA;AAAQ,OACR,CAEN;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,oBAAec,UAAU,CAACnC,WAAW,CAAC;;;;"}
|
|
@@ -7,14 +7,20 @@ var React = require('react');
|
|
|
7
7
|
var injectIntl = require('../../../common/injectIntl.js');
|
|
8
8
|
var getDayNames = require('../../../common/DateUtils/getDayNames/getDayNames.js');
|
|
9
9
|
var isWithinRange = require('../../../common/DateUtils/isWithinRange/isWithinRange.js');
|
|
10
|
+
var isDateDisabled = require('../../../common/DateUtils/isDateDisabled/isDateDisabled.js');
|
|
10
11
|
var GetFocusableTime = require('../../GetFocusableTime/GetFocusableTime.js');
|
|
11
12
|
var GetStartOfDay = require('../../GetStartOfDay/GetStartOfDay.js');
|
|
12
|
-
var TableLink = require('../../
|
|
13
|
+
var TableLink = require('../../TableLink/TableLink.js');
|
|
13
14
|
var jsxRuntime = require('react/jsx-runtime');
|
|
14
15
|
|
|
15
16
|
const SHORT_DAY_FORMAT = {
|
|
16
17
|
day: 'numeric'
|
|
17
18
|
};
|
|
19
|
+
const LONG_DAY_FORMAT = {
|
|
20
|
+
day: 'numeric',
|
|
21
|
+
month: 'long',
|
|
22
|
+
year: 'numeric'
|
|
23
|
+
};
|
|
18
24
|
let DayCalendarTable$1 = class DayCalendarTable extends React.PureComponent {
|
|
19
25
|
getTableStructure = () => {
|
|
20
26
|
const {
|
|
@@ -70,10 +76,11 @@ let DayCalendarTable$1 = class DayCalendarTable extends React.PureComponent {
|
|
|
70
76
|
min,
|
|
71
77
|
max,
|
|
72
78
|
viewMonth,
|
|
73
|
-
viewYear
|
|
79
|
+
viewYear,
|
|
80
|
+
disabledRules
|
|
74
81
|
} = this.props;
|
|
75
82
|
const date = new Date(viewYear, viewMonth, day);
|
|
76
|
-
return !isWithinRange.isWithinRange(date, min, max);
|
|
83
|
+
return !isWithinRange.isWithinRange(date, min, max) || isDateDisabled.isDateDisabled(date, disabledRules);
|
|
77
84
|
};
|
|
78
85
|
isActive = day => {
|
|
79
86
|
const {
|
|
@@ -103,7 +110,8 @@ let DayCalendarTable$1 = class DayCalendarTable extends React.PureComponent {
|
|
|
103
110
|
const {
|
|
104
111
|
viewMonth,
|
|
105
112
|
viewYear,
|
|
106
|
-
intl
|
|
113
|
+
intl,
|
|
114
|
+
disabledReasonId
|
|
107
115
|
} = this.props;
|
|
108
116
|
const weeks = this.getTableStructure();
|
|
109
117
|
const autoFocusDay = this.getAutofocusDay(weeks);
|
|
@@ -130,20 +138,24 @@ let DayCalendarTable$1 = class DayCalendarTable extends React.PureComponent {
|
|
|
130
138
|
})
|
|
131
139
|
}), /*#__PURE__*/jsxRuntime.jsx("tbody", {
|
|
132
140
|
children: weeks.map((week, weekIndex) => /*#__PURE__*/jsxRuntime.jsx("tr", {
|
|
133
|
-
children: week.map((day, dayIndex) =>
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
141
|
+
children: week.map((day, dayIndex) => {
|
|
142
|
+
const dayDisabled = this.isDisabled(day);
|
|
143
|
+
return /*#__PURE__*/jsxRuntime.jsx("td", {
|
|
144
|
+
className: dayIndex > 4 ? 'weekend' : '',
|
|
145
|
+
children: day !== -1 && /*#__PURE__*/jsxRuntime.jsx(TableLink.default, {
|
|
146
|
+
item: day,
|
|
147
|
+
type: "day",
|
|
148
|
+
title: formatting.formatDate(new Date(viewYear, viewMonth, day), intl.locale, SHORT_DAY_FORMAT),
|
|
149
|
+
autofocus: day === autoFocusDay,
|
|
150
|
+
longTitle: formatting.formatDate(new Date(viewYear, viewMonth, day), intl.locale, LONG_DAY_FORMAT),
|
|
151
|
+
active: this.isActive(day),
|
|
152
|
+
disabled: dayDisabled,
|
|
153
|
+
today: this.isToday(day),
|
|
154
|
+
disabledReasonId: dayDisabled ? disabledReasonId : undefined,
|
|
155
|
+
onClick: this.selectDay
|
|
156
|
+
})
|
|
157
|
+
}, dayIndex);
|
|
158
|
+
})
|
|
147
159
|
}, weekIndex))
|
|
148
160
|
})]
|
|
149
161
|
});
|