@transferwise/components 0.0.0-experimental-15273df → 0.0.0-experimental-d6d5b6e
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 +94 -16
- package/build/Calendar/Calendar.js.map +1 -1
- package/build/Calendar/Calendar.messages.js +12 -0
- package/build/Calendar/Calendar.messages.js.map +1 -1
- package/build/Calendar/Calendar.messages.mjs +12 -0
- package/build/Calendar/Calendar.messages.mjs.map +1 -1
- package/build/Calendar/Calendar.mjs +95 -17
- package/build/Calendar/Calendar.mjs.map +1 -1
- package/build/Calendar/DateHeader/DateHeader.js +5 -1
- package/build/Calendar/DateHeader/DateHeader.js.map +1 -1
- package/build/Calendar/DateHeader/DateHeader.mjs +5 -1
- package/build/Calendar/DateHeader/DateHeader.mjs.map +1 -1
- package/build/Calendar/DayCalendar/DayCalendar.js +14 -0
- package/build/Calendar/DayCalendar/DayCalendar.js.map +1 -1
- package/build/Calendar/DayCalendar/DayCalendar.mjs +14 -0
- package/build/Calendar/DayCalendar/DayCalendar.mjs.map +1 -1
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.js +53 -19
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.js.map +1 -1
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs +53 -19
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs.map +1 -1
- package/build/Calendar/MonthCalendar/MonthCalendar.js +6 -0
- package/build/Calendar/MonthCalendar/MonthCalendar.js.map +1 -1
- package/build/Calendar/MonthCalendar/MonthCalendar.mjs +6 -0
- package/build/Calendar/MonthCalendar/MonthCalendar.mjs.map +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js +8 -3
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js.map +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs +8 -3
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs.map +1 -1
- package/build/Calendar/{tableLink → TableLink}/TableLink.js +26 -11
- package/build/Calendar/TableLink/TableLink.js.map +1 -0
- package/build/Calendar/{tableLink → TableLink}/TableLink.mjs +26 -11
- package/build/Calendar/TableLink/TableLink.mjs.map +1 -0
- package/build/Calendar/YearCalendar/Table/YearCalendarTable.js +8 -3
- package/build/Calendar/YearCalendar/Table/YearCalendarTable.js.map +1 -1
- package/build/Calendar/YearCalendar/Table/YearCalendarTable.mjs +8 -3
- package/build/Calendar/YearCalendar/Table/YearCalendarTable.mjs.map +1 -1
- package/build/Calendar/YearCalendar/YearCalendar.js +7 -0
- package/build/Calendar/YearCalendar/YearCalendar.js.map +1 -1
- package/build/Calendar/YearCalendar/YearCalendar.mjs +7 -0
- package/build/Calendar/YearCalendar/YearCalendar.mjs.map +1 -1
- package/build/DateLookup/DateLookup.js +19 -9
- package/build/DateLookup/DateLookup.js.map +1 -1
- package/build/DateLookup/DateLookup.mjs +19 -9
- package/build/DateLookup/DateLookup.mjs.map +1 -1
- package/build/Sticky/Sticky.js +0 -1
- package/build/Sticky/Sticky.js.map +1 -1
- package/build/Sticky/Sticky.mjs +0 -1
- package/build/Sticky/Sticky.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 +4 -0
- package/build/i18n/en.json.js +4 -0
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +4 -0
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/index.js +2 -2
- package/build/index.mjs +1 -1
- package/build/main.css +123 -48
- package/build/styles/Calendar/Calendar.css +112 -37
- package/build/styles/Calendar/TableLink/TableLink.css +115 -0
- package/build/styles/main.css +123 -48
- package/build/types/Calendar/Calendar.d.ts +16 -3
- package/build/types/Calendar/Calendar.d.ts.map +1 -1
- package/build/types/Calendar/Calendar.messages.d.ts +20 -0
- package/build/types/Calendar/Calendar.messages.d.ts.map +1 -1
- package/build/types/Calendar/Calendar.types.d.ts +32 -0
- package/build/types/Calendar/Calendar.types.d.ts.map +1 -0
- package/build/types/Calendar/DateHeader/DateHeader.d.ts +2 -0
- package/build/types/Calendar/DateHeader/DateHeader.d.ts.map +1 -1
- package/build/types/Calendar/DayCalendar/DayCalendar.d.ts +5 -1
- package/build/types/Calendar/DayCalendar/DayCalendar.d.ts.map +1 -1
- package/build/types/Calendar/DayCalendar/Table/DayCalendarTable.d.ts +4 -0
- package/build/types/Calendar/DayCalendar/Table/DayCalendarTable.d.ts.map +1 -1
- package/build/types/Calendar/MonthCalendar/MonthCalendar.d.ts +1 -0
- package/build/types/Calendar/MonthCalendar/MonthCalendar.d.ts.map +1 -1
- package/build/types/Calendar/MonthCalendar/Table/MonthCalendarTable.d.ts +2 -1
- package/build/types/Calendar/MonthCalendar/Table/MonthCalendarTable.d.ts.map +1 -1
- package/build/types/Calendar/{tableLink → TableLink}/TableLink.d.ts +3 -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/YearCalendar/Table/YearCalendarTable.d.ts +2 -1
- package/build/types/Calendar/YearCalendar/Table/YearCalendarTable.d.ts.map +1 -1
- package/build/types/Calendar/YearCalendar/YearCalendar.d.ts +1 -0
- package/build/types/Calendar/YearCalendar/YearCalendar.d.ts.map +1 -1
- 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 +23 -4
- 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/Sticky/Sticky.d.ts.map +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 +3 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +8 -0
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Calendar/Calendar.css +112 -37
- package/src/Calendar/Calendar.disabledDates.test.tsx +518 -0
- package/src/Calendar/Calendar.less +5 -35
- package/src/Calendar/Calendar.messages.ts +21 -0
- package/src/Calendar/Calendar.test.tsx +217 -28
- package/src/Calendar/Calendar.tsx +136 -19
- package/src/Calendar/Calendar.types.ts +35 -0
- package/src/Calendar/DateHeader/DateHeader.tsx +6 -0
- package/src/Calendar/DayCalendar/DayCalendar.tsx +33 -1
- package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +62 -28
- package/src/Calendar/MonthCalendar/MonthCalendar.tsx +8 -0
- package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +15 -3
- package/src/Calendar/TableLink/TableLink.css +115 -0
- package/src/Calendar/TableLink/TableLink.less +68 -0
- package/src/Calendar/{tableLink → TableLink}/TableLink.tsx +29 -14
- package/src/Calendar/YearCalendar/Table/YearCalendarTable.tsx +15 -3
- package/src/Calendar/YearCalendar/YearCalendar.tsx +9 -0
- package/src/Calendar/_stories/Calendar.accessibility.docs.mdx +118 -0
- package/src/Calendar/_stories/Calendar.story.tsx +138 -4
- package/src/Calendar/index.ts +7 -0
- package/src/DateLookup/DateLookup.disabledDates.test.tsx +293 -0
- package/src/DateLookup/DateLookup.test.tsx +34 -37
- package/src/DateLookup/DateLookup.tsx +36 -13
- package/src/DateLookup/_stories/DateLookup.accessibility.docs.mdx +108 -0
- package/src/DateLookup/_stories/DateLookup.story.tsx +124 -2
- package/src/DateLookup/index.ts +6 -0
- package/src/Sticky/Sticky.test.tsx +0 -1
- package/src/Sticky/Sticky.tsx +0 -1
- 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 +4 -0
- package/src/index.ts +3 -2
- package/src/main.css +123 -48
- 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/styles/Sticky/Sticky.css +0 -4
- package/build/types/Calendar/tableLink/TableLink.d.ts.map +0 -1
- package/build/types/Calendar/tableLink/index.d.ts.map +0 -1
- package/src/Sticky/Sticky.css +0 -4
- package/src/Sticky/Sticky.less +0 -6
- package/src/Sticky/_stories/Sticky.test.story.tsx +0 -177
- /package/build/types/Calendar/{tableLink → TableLink}/index.d.ts +0 -0
- /package/src/Calendar/{tableLink → TableLink}/index.ts +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableLink.mjs","sources":["../../../src/Calendar/TableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\nimport SentimentSurface from '../../SentimentSurface';\n\ninterface TableLinkProps {\n item: number;\n type: 'day' | 'month' | 'year';\n title?: string;\n longTitle?: string;\n active: boolean;\n outOfRange: boolean;\n disabled: boolean;\n today: boolean;\n autofocus?: boolean;\n disabledReasonId?: string;\n onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n item,\n type,\n title,\n longTitle,\n active,\n outOfRange,\n disabled,\n today,\n autofocus,\n disabledReasonId,\n onClick,\n}: TableLinkProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const intl = useIntl();\n\n useEffect(() => {\n if (autofocus) {\n setTimeout(() => {\n buttonRef.current?.focus();\n }, 0);\n }\n }, [autofocus]);\n\n const onCalendarClick = (event: React.MouseEvent) => {\n event.preventDefault();\n onClick(item);\n };\n\n const isUnavailable = outOfRange || disabled;\n\n const calculateAriaLabel = () => {\n let label = longTitle || title || '';\n if (active) {\n label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;\n }\n if (isUnavailable) {\n label += `, ${intl.formatMessage(messages.notAvailable)}`;\n }\n return label;\n };\n\n return (\n <SentimentSurface\n // @ts-expect-error - Generic forwardRef limitation in SentimentSurface\n ref={buttonRef}\n as=\"button\"\n data-calendar-cell\n aria-describedby={isUnavailable ? disabledReasonId : undefined}\n aria-disabled={isUnavailable || undefined}\n aria-label={calculateAriaLabel()}\n aria-pressed={active}\n className={clsx(\n `wds-Calendar__option--${type}`,\n `tw-date-lookup-${type}-option np-text-body-default-bold`,\n { active: !!active },\n { today: !!today },\n { disabled: !!isUnavailable },\n )}\n hasBaseStyles={false}\n sentiment={isUnavailable ? 'negative' : 'neutral'}\n tabIndex={autofocus ? 0 : -1}\n type=\"button\"\n onClick={onCalendarClick}\n >\n {title || item}\n </SentimentSurface>\n );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","outOfRange","disabled","today","autofocus","disabledReasonId","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","isUnavailable","calculateAriaLabel","label","formatMessage","messages","selected","notAvailable","_jsx","SentimentSurface","ref","as","undefined","className","clsx","hasBaseStyles","sentiment","tabIndex","children"],"mappings":";;;;;;;AAqBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,gBAAgB;AAChBC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtBC,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIP,SAAS,EAAE;AACbQ,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACV,SAAS,CAAC,CAAC;EAEf,MAAMW,eAAe,GAAIC,KAAuB,IAAI;IAClDA,KAAK,CAACC,cAAc,EAAE;IACtBX,OAAO,CAACV,IAAI,CAAC;EACf,CAAC;AAED,EAAA,MAAMsB,aAAa,GAAGjB,UAAU,IAAIC,QAAQ;EAE5C,MAAMiB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIC,KAAK,GAAGrB,SAAS,IAAID,KAAK,IAAI,EAAE;AACpC,IAAA,IAAIE,MAAM,EAAE;MACVoB,KAAK,IAAI,KAAKX,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACC,QAAQ,CAAC,IAAId,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACzB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC7F,IAAA;AACA,IAAA,IAAIqB,aAAa,EAAE;MACjBE,KAAK,IAAI,CAAA,EAAA,EAAKX,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACE,YAAY,CAAC,CAAA,CAAE;AAC3D,IAAA;AACA,IAAA,OAAOJ,KAAK;EACd,CAAC;AAED,EAAA,oBACEK,GAAA,CAACC;AACC;AAAA,IAAA;AACAC,IAAAA,GAAG,EAAEpB,SAAU;AACfqB,IAAAA,EAAE,EAAC,QAAQ;IACX,oBAAA,EAAA,IAAkB;AAClB,IAAA,kBAAA,EAAkBV,aAAa,GAAGb,gBAAgB,GAAGwB,SAAU;IAC/D,eAAA,EAAeX,aAAa,IAAIW,SAAU;IAC1C,YAAA,EAAYV,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAcnB,MAAO;IACrB8B,SAAS,EAAEC,IAAI,CACb,CAAA,sBAAA,EAAyBlC,IAAI,EAAE,EAC/B,CAAA,eAAA,EAAkBA,IAAI,CAAA,iCAAA,CAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEG,KAAK,EAAE,CAAC,CAACA;AAAK,KAAE,EAClB;MAAED,QAAQ,EAAE,CAAC,CAACgB;AAAa,KAAE,CAC7B;AACFc,IAAAA,aAAa,EAAE,KAAM;AACrBC,IAAAA,SAAS,EAAEf,aAAa,GAAG,UAAU,GAAG,SAAU;AAClDgB,IAAAA,QAAQ,EAAE9B,SAAS,GAAG,CAAC,GAAG,EAAG;AAC7BP,IAAAA,IAAI,EAAC,QAAQ;AACbS,IAAAA,OAAO,EAAES,eAAgB;IAAAoB,QAAA,EAExBrC,KAAK,IAAIF;AAAI,GACE,CAAC;AAEvB;;;;"}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var formatting = require('@transferwise/formatting');
|
|
6
6
|
var reactIntl = require('react-intl');
|
|
7
7
|
var GetFocusableTime = require('../../GetFocusableTime/GetFocusableTime.js');
|
|
8
|
-
var TableLink = require('../../
|
|
8
|
+
var TableLink = require('../../TableLink/TableLink.js');
|
|
9
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
10
|
|
|
11
11
|
const ROWS = 5;
|
|
@@ -15,6 +15,7 @@ const YEAR_ONLY_FORMAT = {
|
|
|
15
15
|
};
|
|
16
16
|
const YearCalendarTable = ({
|
|
17
17
|
selectedDate,
|
|
18
|
+
focusedDate,
|
|
18
19
|
min,
|
|
19
20
|
max,
|
|
20
21
|
viewYear,
|
|
@@ -31,7 +32,8 @@ const YearCalendarTable = ({
|
|
|
31
32
|
type: "year",
|
|
32
33
|
title: formatting.formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT),
|
|
33
34
|
active: isActive(year),
|
|
34
|
-
|
|
35
|
+
outOfRange: isDisabled(year),
|
|
36
|
+
disabled: false,
|
|
35
37
|
today: isThisYear(year),
|
|
36
38
|
autofocus: autofocusYear === year,
|
|
37
39
|
onClick: onSelect
|
|
@@ -40,6 +42,9 @@ const YearCalendarTable = ({
|
|
|
40
42
|
const isActive = year => {
|
|
41
43
|
return !!(year === selectedDate?.getFullYear());
|
|
42
44
|
};
|
|
45
|
+
const isFocused = year => {
|
|
46
|
+
return !!(year === focusedDate?.getFullYear());
|
|
47
|
+
};
|
|
43
48
|
const isThisYear = year => {
|
|
44
49
|
return year === new Date().getFullYear();
|
|
45
50
|
};
|
|
@@ -51,7 +56,7 @@ const YearCalendarTable = ({
|
|
|
51
56
|
length: ROWS * COLS
|
|
52
57
|
}, (_, index) => startYear + index);
|
|
53
58
|
return GetFocusableTime.getFocusableTime({
|
|
54
|
-
isActive,
|
|
59
|
+
isActive: isFocused,
|
|
55
60
|
isNow: isThisYear,
|
|
56
61
|
isDisabled,
|
|
57
62
|
timeSpan: years
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearCalendarTable.js","sources":["../../../../src/Calendar/YearCalendar/Table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport TableLink from '../../
|
|
1
|
+
{"version":3,"file":"YearCalendarTable.js","sources":["../../../../src/Calendar/YearCalendar/Table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport TableLink from '../../TableLink';\n\ninterface YearCalendarTableProps {\n selectedDate: Date | null;\n focusedDate?: Date | null;\n min: Date | null;\n max: Date | null;\n viewYear: number;\n placeholder?: string;\n onSelect: (year: number) => void;\n}\n\nconst ROWS = 5;\nconst COLS = 4;\nconst YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\nconst YearCalendarTable = ({\n selectedDate,\n focusedDate,\n min,\n max,\n viewYear,\n placeholder,\n onSelect,\n}: YearCalendarTableProps) => {\n const { locale } = useIntl();\n const startYear = viewYear - (viewYear % 20);\n const getLink = (year: number) => {\n return (\n <TableLink\n item={year}\n type=\"year\"\n title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}\n active={isActive(year)}\n outOfRange={isDisabled(year)}\n disabled={false}\n today={isThisYear(year)}\n autofocus={autofocusYear === year}\n onClick={onSelect}\n />\n );\n };\n\n const isActive = (year: number) => {\n return !!(year === selectedDate?.getFullYear());\n };\n\n const isFocused = (year: number) => {\n return !!(year === focusedDate?.getFullYear());\n };\n\n const isThisYear = (year: number) => {\n return year === new Date().getFullYear();\n };\n\n const isDisabled = (year: number) => {\n return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));\n };\n\n const autofocusYear = (() => {\n const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);\n return getFocusableTime({\n isActive: isFocused,\n isNow: isThisYear,\n isDisabled,\n timeSpan: years,\n });\n })();\n\n return (\n <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n <thead className=\"sr-only\">\n <tr>\n <th colSpan={COLS}>{placeholder}</th>\n </tr>\n </thead>\n <tbody>\n {Array.from({ length: ROWS }, (_, rowIndex) => (\n <tr key={rowIndex}>\n {Array.from({ length: COLS }, (_, colIndex) => (\n <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n );\n};\n\nexport default YearCalendarTable;\n"],"names":["ROWS","COLS","YEAR_ONLY_FORMAT","year","YearCalendarTable","selectedDate","focusedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","startYear","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","outOfRange","isDisabled","disabled","today","isThisYear","autofocus","autofocusYear","onClick","getFullYear","isFocused","years","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { formatDate } from '@transferwise/formatting';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime.mjs';
|
|
4
|
-
import TableLink from '../../
|
|
4
|
+
import TableLink from '../../TableLink/TableLink.mjs';
|
|
5
5
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
const ROWS = 5;
|
|
@@ -11,6 +11,7 @@ const YEAR_ONLY_FORMAT = {
|
|
|
11
11
|
};
|
|
12
12
|
const YearCalendarTable = ({
|
|
13
13
|
selectedDate,
|
|
14
|
+
focusedDate,
|
|
14
15
|
min,
|
|
15
16
|
max,
|
|
16
17
|
viewYear,
|
|
@@ -27,7 +28,8 @@ const YearCalendarTable = ({
|
|
|
27
28
|
type: "year",
|
|
28
29
|
title: formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT),
|
|
29
30
|
active: isActive(year),
|
|
30
|
-
|
|
31
|
+
outOfRange: isDisabled(year),
|
|
32
|
+
disabled: false,
|
|
31
33
|
today: isThisYear(year),
|
|
32
34
|
autofocus: autofocusYear === year,
|
|
33
35
|
onClick: onSelect
|
|
@@ -36,6 +38,9 @@ const YearCalendarTable = ({
|
|
|
36
38
|
const isActive = year => {
|
|
37
39
|
return !!(year === selectedDate?.getFullYear());
|
|
38
40
|
};
|
|
41
|
+
const isFocused = year => {
|
|
42
|
+
return !!(year === focusedDate?.getFullYear());
|
|
43
|
+
};
|
|
39
44
|
const isThisYear = year => {
|
|
40
45
|
return year === new Date().getFullYear();
|
|
41
46
|
};
|
|
@@ -47,7 +52,7 @@ const YearCalendarTable = ({
|
|
|
47
52
|
length: ROWS * COLS
|
|
48
53
|
}, (_, index) => startYear + index);
|
|
49
54
|
return getFocusableTime({
|
|
50
|
-
isActive,
|
|
55
|
+
isActive: isFocused,
|
|
51
56
|
isNow: isThisYear,
|
|
52
57
|
isDisabled,
|
|
53
58
|
timeSpan: years
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearCalendarTable.mjs","sources":["../../../../src/Calendar/YearCalendar/Table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport TableLink from '../../
|
|
1
|
+
{"version":3,"file":"YearCalendarTable.mjs","sources":["../../../../src/Calendar/YearCalendar/Table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport TableLink from '../../TableLink';\n\ninterface YearCalendarTableProps {\n selectedDate: Date | null;\n focusedDate?: Date | null;\n min: Date | null;\n max: Date | null;\n viewYear: number;\n placeholder?: string;\n onSelect: (year: number) => void;\n}\n\nconst ROWS = 5;\nconst COLS = 4;\nconst YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\nconst YearCalendarTable = ({\n selectedDate,\n focusedDate,\n min,\n max,\n viewYear,\n placeholder,\n onSelect,\n}: YearCalendarTableProps) => {\n const { locale } = useIntl();\n const startYear = viewYear - (viewYear % 20);\n const getLink = (year: number) => {\n return (\n <TableLink\n item={year}\n type=\"year\"\n title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}\n active={isActive(year)}\n outOfRange={isDisabled(year)}\n disabled={false}\n today={isThisYear(year)}\n autofocus={autofocusYear === year}\n onClick={onSelect}\n />\n );\n };\n\n const isActive = (year: number) => {\n return !!(year === selectedDate?.getFullYear());\n };\n\n const isFocused = (year: number) => {\n return !!(year === focusedDate?.getFullYear());\n };\n\n const isThisYear = (year: number) => {\n return year === new Date().getFullYear();\n };\n\n const isDisabled = (year: number) => {\n return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));\n };\n\n const autofocusYear = (() => {\n const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);\n return getFocusableTime({\n isActive: isFocused,\n isNow: isThisYear,\n isDisabled,\n timeSpan: years,\n });\n })();\n\n return (\n <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n <thead className=\"sr-only\">\n <tr>\n <th colSpan={COLS}>{placeholder}</th>\n </tr>\n </thead>\n <tbody>\n {Array.from({ length: ROWS }, (_, rowIndex) => (\n <tr key={rowIndex}>\n {Array.from({ length: COLS }, (_, colIndex) => (\n <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n );\n};\n\nexport default YearCalendarTable;\n"],"names":["ROWS","COLS","YEAR_ONLY_FORMAT","year","YearCalendarTable","selectedDate","focusedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","startYear","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","outOfRange","isDisabled","disabled","today","isThisYear","autofocus","autofocusYear","onClick","getFullYear","isFocused","years","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}
|
|
@@ -29,6 +29,7 @@ let YearCalendar$1 = class YearCalendar extends React.PureComponent {
|
|
|
29
29
|
render() {
|
|
30
30
|
const {
|
|
31
31
|
selectedDate,
|
|
32
|
+
focusedDate,
|
|
32
33
|
min,
|
|
33
34
|
max,
|
|
34
35
|
viewYear,
|
|
@@ -37,13 +38,19 @@ let YearCalendar$1 = class YearCalendar extends React.PureComponent {
|
|
|
37
38
|
formatMessage
|
|
38
39
|
}
|
|
39
40
|
} = this.props;
|
|
41
|
+
const startYear = viewYear - viewYear % 20;
|
|
42
|
+
const isPreviousDisabled = !!(min && startYear - 1 < min.getFullYear());
|
|
43
|
+
const isNextDisabled = !!(max && startYear + 20 > max.getFullYear());
|
|
40
44
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
41
45
|
children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader.default, {
|
|
42
46
|
dateMode: formatMessage(Calendar_messages.default.twentyYears),
|
|
47
|
+
isPreviousDisabled: isPreviousDisabled,
|
|
48
|
+
isNextDisabled: isNextDisabled,
|
|
43
49
|
onPreviousClick: this.selectPreviousYears,
|
|
44
50
|
onNextClick: this.selectNextYears
|
|
45
51
|
}), /*#__PURE__*/jsxRuntime.jsx(YearCalendarTable.default, {
|
|
46
52
|
selectedDate: selectedDate,
|
|
53
|
+
focusedDate: focusedDate,
|
|
47
54
|
min: min,
|
|
48
55
|
max: max,
|
|
49
56
|
viewYear: viewYear,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearCalendar.js","sources":["../../../src/Calendar/YearCalendar/YearCalendar.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport YearCalendarTable from './Table';\n\ninterface YearCalendarProps extends WrappedComponentProps {\n selectedDate: Date | null;\n min: Date | null;\n max: Date | null;\n viewYear: number;\n placeholder?: string;\n onSelect: () => void;\n onViewDateUpdate: (date: { year: number }) => void;\n}\n\nclass YearCalendar extends PureComponent<YearCalendarProps> {\n onYearSelect = (year: number) => {\n this.props.onViewDateUpdate({ year });\n this.props.onSelect();\n };\n\n selectPreviousYears = () => {\n this.props.onViewDateUpdate({ year: this.props.viewYear - 20 });\n };\n\n selectNextYears = () => {\n this.props.onViewDateUpdate({ year: this.props.viewYear + 20 });\n };\n\n render() {\n const {\n selectedDate,\n min,\n max,\n viewYear,\n placeholder,\n intl: { formatMessage },\n } = this.props;\n return (\n <>\n <DateHeader\n dateMode={formatMessage(messages.twentyYears)}\n onPreviousClick={this.selectPreviousYears}\n onNextClick={this.selectNextYears}\n />\n <YearCalendarTable\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n placeholder={placeholder}\n onSelect={this.onYearSelect}\n />\n </>\n );\n }\n}\n\nexport default injectIntl(YearCalendar);\n"],"names":["YearCalendar","PureComponent","onYearSelect","year","props","onViewDateUpdate","onSelect","selectPreviousYears","viewYear","selectNextYears","render","selectedDate","min","max","placeholder","intl","formatMessage","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","twentyYears","onPreviousClick","onNextClick","YearCalendarTable","injectIntl"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"YearCalendar.js","sources":["../../../src/Calendar/YearCalendar/YearCalendar.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport YearCalendarTable from './Table';\n\ninterface YearCalendarProps extends WrappedComponentProps {\n selectedDate: Date | null;\n focusedDate?: Date | null;\n min: Date | null;\n max: Date | null;\n viewYear: number;\n placeholder?: string;\n onSelect: () => void;\n onViewDateUpdate: (date: { year: number }) => void;\n}\n\nclass YearCalendar extends PureComponent<YearCalendarProps> {\n onYearSelect = (year: number) => {\n this.props.onViewDateUpdate({ year });\n this.props.onSelect();\n };\n\n selectPreviousYears = () => {\n this.props.onViewDateUpdate({ year: this.props.viewYear - 20 });\n };\n\n selectNextYears = () => {\n this.props.onViewDateUpdate({ year: this.props.viewYear + 20 });\n };\n\n render() {\n const {\n selectedDate,\n focusedDate,\n min,\n max,\n viewYear,\n placeholder,\n intl: { formatMessage },\n } = this.props;\n const startYear = viewYear - (viewYear % 20);\n const isPreviousDisabled = !!(min && startYear - 1 < min.getFullYear());\n const isNextDisabled = !!(max && startYear + 20 > max.getFullYear());\n\n return (\n <>\n <DateHeader\n dateMode={formatMessage(messages.twentyYears)}\n isPreviousDisabled={isPreviousDisabled}\n isNextDisabled={isNextDisabled}\n onPreviousClick={this.selectPreviousYears}\n onNextClick={this.selectNextYears}\n />\n <YearCalendarTable\n selectedDate={selectedDate}\n focusedDate={focusedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n placeholder={placeholder}\n onSelect={this.onYearSelect}\n />\n </>\n );\n }\n}\n\nexport default injectIntl(YearCalendar);\n"],"names":["YearCalendar","PureComponent","onYearSelect","year","props","onViewDateUpdate","onSelect","selectPreviousYears","viewYear","selectNextYears","render","selectedDate","focusedDate","min","max","placeholder","intl","formatMessage","startYear","isPreviousDisabled","getFullYear","isNextDisabled","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","twentyYears","onPreviousClick","onNextClick","YearCalendarTable","injectIntl"],"mappings":";;;;;;;;;;;qBAmBA,MAAMA,YAAa,SAAQC,mBAAgC,CAAA;EACzDC,YAAY,GAAIC,IAAY,IAAI;AAC9B,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAI,KAAE,CAAC;AACrC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,mBAAmB,GAAGA,MAAK;AACzB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;EAEDC,eAAe,GAAGA,MAAK;AACrB,IAAA,IAAI,CAACL,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,WAAW;MACXC,GAAG;MACHC,GAAG;MACHN,QAAQ;MACRO,WAAW;AACXC,MAAAA,IAAI,EAAE;AAAEC,QAAAA;AAAa;KACtB,GAAG,IAAI,CAACb,KAAK;AACd,IAAA,MAAMc,SAAS,GAAGV,QAAQ,GAAIA,QAAQ,GAAG,EAAG;AAC5C,IAAA,MAAMW,kBAAkB,GAAG,CAAC,EAAEN,GAAG,IAAIK,SAAS,GAAG,CAAC,GAAGL,GAAG,CAACO,WAAW,EAAE,CAAC;AACvE,IAAA,MAAMC,cAAc,GAAG,CAAC,EAAEP,GAAG,IAAII,SAAS,GAAG,EAAE,GAAGJ,GAAG,CAACM,WAAW,EAAE,CAAC;IAEpE,oBACEE,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEV,aAAa,CAACW,yBAAQ,CAACC,WAAW,CAAE;AAC9CV,QAAAA,kBAAkB,EAAEA,kBAAmB;AACvCE,QAAAA,cAAc,EAAEA,cAAe;QAC/BS,eAAe,EAAE,IAAI,CAACvB,mBAAoB;QAC1CwB,WAAW,EAAE,IAAI,CAACtB;AAAgB,OAAA,CAEpC,eAAAgB,cAAA,CAACO,yBAAiB,EAAA;AAChBrB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,WAAW,EAAEA,WAAY;AACzBC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTN,QAAAA,QAAQ,EAAEA,QAAS;AACnBO,QAAAA,WAAW,EAAEA,WAAY;QACzBT,QAAQ,EAAE,IAAI,CAACJ;AAAa,OAAA,CAEhC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,mBAAe+B,qBAAU,CAACjC,cAAY,CAAC;;;;"}
|
|
@@ -25,6 +25,7 @@ class YearCalendar extends PureComponent {
|
|
|
25
25
|
render() {
|
|
26
26
|
const {
|
|
27
27
|
selectedDate,
|
|
28
|
+
focusedDate,
|
|
28
29
|
min,
|
|
29
30
|
max,
|
|
30
31
|
viewYear,
|
|
@@ -33,13 +34,19 @@ class YearCalendar extends PureComponent {
|
|
|
33
34
|
formatMessage
|
|
34
35
|
}
|
|
35
36
|
} = this.props;
|
|
37
|
+
const startYear = viewYear - viewYear % 20;
|
|
38
|
+
const isPreviousDisabled = !!(min && startYear - 1 < min.getFullYear());
|
|
39
|
+
const isNextDisabled = !!(max && startYear + 20 > max.getFullYear());
|
|
36
40
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
37
41
|
children: [/*#__PURE__*/jsx(DateHeader, {
|
|
38
42
|
dateMode: formatMessage(messages.twentyYears),
|
|
43
|
+
isPreviousDisabled: isPreviousDisabled,
|
|
44
|
+
isNextDisabled: isNextDisabled,
|
|
39
45
|
onPreviousClick: this.selectPreviousYears,
|
|
40
46
|
onNextClick: this.selectNextYears
|
|
41
47
|
}), /*#__PURE__*/jsx(YearCalendarTable, {
|
|
42
48
|
selectedDate: selectedDate,
|
|
49
|
+
focusedDate: focusedDate,
|
|
43
50
|
min: min,
|
|
44
51
|
max: max,
|
|
45
52
|
viewYear: viewYear,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearCalendar.mjs","sources":["../../../src/Calendar/YearCalendar/YearCalendar.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport YearCalendarTable from './Table';\n\ninterface YearCalendarProps extends WrappedComponentProps {\n selectedDate: Date | null;\n min: Date | null;\n max: Date | null;\n viewYear: number;\n placeholder?: string;\n onSelect: () => void;\n onViewDateUpdate: (date: { year: number }) => void;\n}\n\nclass YearCalendar extends PureComponent<YearCalendarProps> {\n onYearSelect = (year: number) => {\n this.props.onViewDateUpdate({ year });\n this.props.onSelect();\n };\n\n selectPreviousYears = () => {\n this.props.onViewDateUpdate({ year: this.props.viewYear - 20 });\n };\n\n selectNextYears = () => {\n this.props.onViewDateUpdate({ year: this.props.viewYear + 20 });\n };\n\n render() {\n const {\n selectedDate,\n min,\n max,\n viewYear,\n placeholder,\n intl: { formatMessage },\n } = this.props;\n return (\n <>\n <DateHeader\n dateMode={formatMessage(messages.twentyYears)}\n onPreviousClick={this.selectPreviousYears}\n onNextClick={this.selectNextYears}\n />\n <YearCalendarTable\n selectedDate={selectedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n placeholder={placeholder}\n onSelect={this.onYearSelect}\n />\n </>\n );\n }\n}\n\nexport default injectIntl(YearCalendar);\n"],"names":["YearCalendar","PureComponent","onYearSelect","year","props","onViewDateUpdate","onSelect","selectPreviousYears","viewYear","selectNextYears","render","selectedDate","min","max","placeholder","intl","formatMessage","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","twentyYears","onPreviousClick","onNextClick","YearCalendarTable","injectIntl"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"YearCalendar.mjs","sources":["../../../src/Calendar/YearCalendar/YearCalendar.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport YearCalendarTable from './Table';\n\ninterface YearCalendarProps extends WrappedComponentProps {\n selectedDate: Date | null;\n focusedDate?: Date | null;\n min: Date | null;\n max: Date | null;\n viewYear: number;\n placeholder?: string;\n onSelect: () => void;\n onViewDateUpdate: (date: { year: number }) => void;\n}\n\nclass YearCalendar extends PureComponent<YearCalendarProps> {\n onYearSelect = (year: number) => {\n this.props.onViewDateUpdate({ year });\n this.props.onSelect();\n };\n\n selectPreviousYears = () => {\n this.props.onViewDateUpdate({ year: this.props.viewYear - 20 });\n };\n\n selectNextYears = () => {\n this.props.onViewDateUpdate({ year: this.props.viewYear + 20 });\n };\n\n render() {\n const {\n selectedDate,\n focusedDate,\n min,\n max,\n viewYear,\n placeholder,\n intl: { formatMessage },\n } = this.props;\n const startYear = viewYear - (viewYear % 20);\n const isPreviousDisabled = !!(min && startYear - 1 < min.getFullYear());\n const isNextDisabled = !!(max && startYear + 20 > max.getFullYear());\n\n return (\n <>\n <DateHeader\n dateMode={formatMessage(messages.twentyYears)}\n isPreviousDisabled={isPreviousDisabled}\n isNextDisabled={isNextDisabled}\n onPreviousClick={this.selectPreviousYears}\n onNextClick={this.selectNextYears}\n />\n <YearCalendarTable\n selectedDate={selectedDate}\n focusedDate={focusedDate}\n min={min}\n max={max}\n viewYear={viewYear}\n placeholder={placeholder}\n onSelect={this.onYearSelect}\n />\n </>\n );\n }\n}\n\nexport default injectIntl(YearCalendar);\n"],"names":["YearCalendar","PureComponent","onYearSelect","year","props","onViewDateUpdate","onSelect","selectPreviousYears","viewYear","selectNextYears","render","selectedDate","focusedDate","min","max","placeholder","intl","formatMessage","startYear","isPreviousDisabled","getFullYear","isNextDisabled","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","twentyYears","onPreviousClick","onNextClick","YearCalendarTable","injectIntl"],"mappings":";;;;;;;AAmBA,MAAMA,YAAa,SAAQC,aAAgC,CAAA;EACzDC,YAAY,GAAIC,IAAY,IAAI;AAC9B,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAI,KAAE,CAAC;AACrC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,mBAAmB,GAAGA,MAAK;AACzB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;EAEDC,eAAe,GAAGA,MAAK;AACrB,IAAA,IAAI,CAACL,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,WAAW;MACXC,GAAG;MACHC,GAAG;MACHN,QAAQ;MACRO,WAAW;AACXC,MAAAA,IAAI,EAAE;AAAEC,QAAAA;AAAa;KACtB,GAAG,IAAI,CAACb,KAAK;AACd,IAAA,MAAMc,SAAS,GAAGV,QAAQ,GAAIA,QAAQ,GAAG,EAAG;AAC5C,IAAA,MAAMW,kBAAkB,GAAG,CAAC,EAAEN,GAAG,IAAIK,SAAS,GAAG,CAAC,GAAGL,GAAG,CAACO,WAAW,EAAE,CAAC;AACvE,IAAA,MAAMC,cAAc,GAAG,CAAC,EAAEP,GAAG,IAAII,SAAS,GAAG,EAAE,GAAGJ,GAAG,CAACM,WAAW,EAAE,CAAC;IAEpE,oBACEE,IAAA,CAAAC,QAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEV,aAAa,CAACW,QAAQ,CAACC,WAAW,CAAE;AAC9CV,QAAAA,kBAAkB,EAAEA,kBAAmB;AACvCE,QAAAA,cAAc,EAAEA,cAAe;QAC/BS,eAAe,EAAE,IAAI,CAACvB,mBAAoB;QAC1CwB,WAAW,EAAE,IAAI,CAACtB;AAAgB,OAAA,CAEpC,eAAAgB,GAAA,CAACO,iBAAiB,EAAA;AAChBrB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,WAAW,EAAEA,WAAY;AACzBC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTN,QAAAA,QAAQ,EAAEA,QAAS;AACnBO,QAAAA,WAAW,EAAEA,WAAY;QACzBT,QAAQ,EAAE,IAAI,CAACJ;AAAa,OAAA,CAEhC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,qBAAe+B,UAAU,CAACjC,YAAY,CAAC;;;;"}
|
|
@@ -123,7 +123,18 @@ class DateLookup extends React.PureComponent {
|
|
|
123
123
|
this.focusOn(fallbackElement);
|
|
124
124
|
}
|
|
125
125
|
};
|
|
126
|
-
handleDateChange = date => {
|
|
126
|
+
handleDateChange = (date, meta) => {
|
|
127
|
+
const {
|
|
128
|
+
onDateSelect
|
|
129
|
+
} = this.props;
|
|
130
|
+
if (date && onDateSelect) {
|
|
131
|
+
onDateSelect({
|
|
132
|
+
date,
|
|
133
|
+
isEnabled: meta.isEnabled
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
handleDateSelect = date => {
|
|
127
138
|
this.setState(state => {
|
|
128
139
|
const originalDate = state.originalDate ?? this.props.value;
|
|
129
140
|
return {
|
|
@@ -131,20 +142,18 @@ class DateLookup extends React.PureComponent {
|
|
|
131
142
|
};
|
|
132
143
|
}, () => {
|
|
133
144
|
this.props.onChange(date);
|
|
145
|
+
this.close();
|
|
146
|
+
this.focusOn('.btn');
|
|
134
147
|
});
|
|
135
148
|
};
|
|
136
|
-
handleDateSelect = date => {
|
|
137
|
-
this.props.onChange(date);
|
|
138
|
-
this.close();
|
|
139
|
-
this.focusOn('.btn');
|
|
140
|
-
};
|
|
141
149
|
getCalendar = () => {
|
|
142
150
|
const {
|
|
143
151
|
value,
|
|
144
152
|
min,
|
|
145
153
|
max,
|
|
146
154
|
monthFormat,
|
|
147
|
-
placeholder
|
|
155
|
+
placeholder,
|
|
156
|
+
disabledRules
|
|
148
157
|
} = this.props;
|
|
149
158
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
150
159
|
className: "p-a-1",
|
|
@@ -154,8 +163,9 @@ class DateLookup extends React.PureComponent {
|
|
|
154
163
|
max: max,
|
|
155
164
|
monthFormat: monthFormat,
|
|
156
165
|
placeholder: placeholder,
|
|
157
|
-
|
|
158
|
-
|
|
166
|
+
disabledRules: disabledRules,
|
|
167
|
+
onDateFocus: this.handleDateChange,
|
|
168
|
+
onChange: this.handleDateSelect
|
|
159
169
|
})
|
|
160
170
|
});
|
|
161
171
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateLookup.js","sources":["../../src/DateLookup/DateLookup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, PureComponent, KeyboardEvent } from 'react';\nimport Calendar from '../Calendar';\nimport {\n Size,\n MonthFormat,\n Position,\n type SizeSmall,\n type SizeMedium,\n type SizeLarge,\n} from '../common';\nimport ResponsivePanel from '../common/ResponsivePanel';\nimport { WithInputAttributesProps, withInputAttributes } from '../Inputs/contexts';\nimport { OverlayIdProvider } from '../Provider/overlay/OverlayIdProvider';\nimport DateTrigger from './DateTrigger';\n\nexport interface DateLookupProps {\n id?: string;\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n label?: string;\n 'aria-labelledby'?: string;\n monthFormat?: `${MonthFormat}`;\n disabled?: boolean;\n clearable?: boolean;\n onChange: (date: Date | null) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\ntype DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;\n\ninterface DateLookupState {\n originalDate: Date | null;\n open: boolean;\n}\n\nclass DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {\n declare props: DateLookupPropsWithInputAttributes &\n Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;\n\n static defaultProps = {\n value: null,\n min: null,\n max: null,\n size: Size.MEDIUM,\n placeholder: '',\n label: '',\n monthFormat: MonthFormat.LONG,\n disabled: false,\n clearable: false,\n } satisfies Partial<DateLookupPropsWithInputAttributes>;\n\n element = createRef<HTMLDivElement>();\n\n constructor(props: DateLookup['props']) {\n super(props);\n this.state = {\n originalDate: null,\n open: false,\n };\n }\n\n componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {\n if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {\n this.focusOn('.active');\n }\n }\n\n open = () => {\n const { onFocus } = this.props;\n\n this.setState({ open: true });\n if (onFocus) {\n onFocus();\n }\n };\n\n discard = () => {\n const { originalDate } = this.state;\n if (originalDate !== null) {\n this.props.onChange(originalDate);\n }\n this.close();\n };\n\n close = () => {\n const { onBlur } = this.props;\n this.setState({ open: false, originalDate: null });\n if (onBlur) {\n onBlur();\n }\n };\n\n handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const { open, originalDate } = this.state;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n case 'ArrowRight':\n case 'ArrowDown':\n if (!open) {\n this.open();\n event.preventDefault();\n }\n break;\n case 'Escape':\n if (originalDate !== null) {\n this.props.onChange(originalDate);\n }\n this.close();\n event.preventDefault();\n break;\n default:\n break;\n }\n };\n\n focusOn = (preferredElement: string, fallbackElement?: string) => {\n const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;\n if (element) {\n element.focus();\n } else if (fallbackElement) {\n this.focusOn(fallbackElement);\n }\n };\n\n handleDateChange = (date: Date | null) => {\n this.setState(\n (state) => {\n const originalDate = state.originalDate ?? this.props.value;\n return { originalDate };\n },\n () => {\n this.props.onChange(date);\n },\n );\n };\n\n handleDateSelect = (date: Date) => {\n this.props.onChange(date);\n this.close();\n this.focusOn('.btn');\n };\n\n getCalendar = () => {\n const { value, min, max, monthFormat, placeholder } = this.props;\n return (\n <div className=\"p-a-1\">\n <Calendar\n value={value}\n min={min}\n max={max}\n monthFormat={monthFormat}\n placeholder={placeholder}\n onChange={this.handleDateChange}\n onSelect={this.handleDateSelect}\n />\n </div>\n );\n };\n\n handleClear = () => {\n this.props.onChange(null);\n this.focusOn('.np-date-trigger');\n };\n\n render() {\n const { open } = this.state;\n\n const {\n inputAttributes,\n id: idProp,\n 'aria-labelledby': ariaLabelledByProp,\n size,\n placeholder,\n label,\n monthFormat,\n disabled,\n clearable,\n value,\n } = this.props;\n const id = idProp ?? inputAttributes?.id;\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];\n\n return (\n <div\n ref={this.element}\n aria-labelledby={id}\n aria-invalid={inputAttributes?.['aria-invalid']}\n aria-describedby={inputAttributes?.['aria-describedby']}\n className={clsx('input-group', disabled && 'disabled')}\n onKeyDown={this.handleKeyDown}\n >\n <OverlayIdProvider open={open}>\n <DateTrigger\n id={id}\n ariaLabelledBy={ariaLabelledBy}\n selectedDate={value}\n size={size}\n placeholder={placeholder}\n label={label}\n monthFormat={monthFormat}\n disabled={disabled || false}\n onClick={this.open}\n onClear={!disabled && clearable && value ? this.handleClear : undefined}\n />\n <ResponsivePanel\n anchorRef={this.element}\n open={open}\n className=\"tw-date-lookup-menu\"\n position={Position.BOTTOM}\n considerHeight\n onClose={this.discard}\n >\n {this.getCalendar()}\n </ResponsivePanel>\n </OverlayIdProvider>\n </div>\n );\n }\n}\n\nexport const DateLookupWithoutInputAttributes = DateLookup;\n\nconst WrappedDateLookup = withInputAttributes(\n DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,\n { nonLabelable: true },\n);\nWrappedDateLookup.displayName = 'DateLookup';\n\nexport default WrappedDateLookup;\n"],"names":["DateLookup","PureComponent","defaultProps","value","min","max","size","Size","MEDIUM","placeholder","label","monthFormat","MonthFormat","LONG","disabled","clearable","element","createRef","constructor","props","state","originalDate","open","componentDidUpdate","previousProps","getTime","focusOn","onFocus","setState","discard","onChange","close","onBlur","handleKeyDown","event","key","preventDefault","preferredElement","fallbackElement","current","querySelector","focus","handleDateChange","date","handleDateSelect","getCalendar","_jsx","className","children","Calendar","onSelect","handleClear","render","inputAttributes","id","idProp","ariaLabelledByProp","ariaLabelledBy","ref","clsx","onKeyDown","_jsxs","OverlayIdProvider","DateTrigger","selectedDate","onClick","onClear","undefined","ResponsivePanel","anchorRef","position","Position","BOTTOM","considerHeight","onClose","WrappedDateLookup","withInputAttributes","nonLabelable","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DateLookup.js","sources":["../../src/DateLookup/DateLookup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, PureComponent, KeyboardEvent } from 'react';\nimport Calendar from '../Calendar';\nimport type { DateChangeMeta, DisabledRules, OnDateSelectParams } from '../Calendar/Calendar.types';\nimport {\n Size,\n MonthFormat,\n Position,\n type SizeSmall,\n type SizeMedium,\n type SizeLarge,\n} from '../common';\nimport ResponsivePanel from '../common/ResponsivePanel';\nimport { WithInputAttributesProps, withInputAttributes } from '../Inputs/contexts';\nimport { OverlayIdProvider } from '../Provider/overlay/OverlayIdProvider';\nimport DateTrigger from './DateTrigger';\n\nexport interface DateLookupProps {\n /** The currently selected date, or `null` for no selection. */\n value: Date | null;\n /** Called when an enabled date is confirmed. Receives `null` when the value is cleared. */\n onChange: (date: Date | null) => void;\n /** HTML `id` applied to the trigger button, used for label association. */\n id?: string;\n /** Earliest selectable date (inclusive). Dates before this are interactive but not selectable, and show a boundary prompt. */\n min?: Date | null;\n /** Latest selectable date (inclusive). Dates after this are interactive but not selectable, and show a boundary prompt. */\n max?: Date | null;\n /** Size of the trigger input. Defaults to `'md'`. */\n size?: SizeSmall | SizeMedium | SizeLarge;\n /** Label text rendered above the trigger input. */\n label?: string;\n /** ID of an external element that labels the trigger, for use inside custom label contexts. */\n 'aria-labelledby'?: string;\n /** Placeholder text shown in the trigger when no date is selected. */\n placeholder?: string;\n /** Month name format in the calendar header. Defaults to `'long'` (e.g. \"January\"). */\n monthFormat?: `${MonthFormat}`;\n /** When `true`, the trigger and calendar are non-interactive. */\n disabled?: boolean;\n /** When `true`, a clear button is shown in the trigger to reset the value to `null`. */\n clearable?: boolean;\n /** Rules for disabling specific weekdays, individual dates, or date ranges. The required `reason` is shown in an inline prompt and linked to disabled cells via `aria-describedby` for screen reader accessibility. */\n disabledRules?: DisabledRules;\n /** Called whenever any date is focused or clicked, including disabled and out-of-range dates. `isEnabled` is `false` when the date is not selectable. */\n onDateSelect?: (params: OnDateSelectParams) => void;\n /** Called when the calendar panel opens. */\n onFocus?: () => void;\n /** Called when the calendar panel closes. */\n onBlur?: () => void;\n}\n\ntype DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;\n\ninterface DateLookupState {\n originalDate: Date | null;\n open: boolean;\n}\n\nclass DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {\n declare props: DateLookupPropsWithInputAttributes &\n Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;\n\n static defaultProps = {\n value: null,\n min: null,\n max: null,\n size: Size.MEDIUM,\n placeholder: '',\n label: '',\n monthFormat: MonthFormat.LONG,\n disabled: false,\n clearable: false,\n } satisfies Partial<DateLookupPropsWithInputAttributes>;\n\n element = createRef<HTMLDivElement>();\n\n constructor(props: DateLookup['props']) {\n super(props);\n this.state = {\n originalDate: null,\n open: false,\n };\n }\n\n componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {\n if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {\n this.focusOn('.active');\n }\n }\n\n open = () => {\n const { onFocus } = this.props;\n\n this.setState({ open: true });\n if (onFocus) {\n onFocus();\n }\n };\n\n discard = () => {\n const { originalDate } = this.state;\n if (originalDate !== null) {\n this.props.onChange(originalDate);\n }\n this.close();\n };\n\n close = () => {\n const { onBlur } = this.props;\n this.setState({ open: false, originalDate: null });\n if (onBlur) {\n onBlur();\n }\n };\n\n handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const { open, originalDate } = this.state;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n case 'ArrowRight':\n case 'ArrowDown':\n if (!open) {\n this.open();\n event.preventDefault();\n }\n break;\n case 'Escape':\n if (originalDate !== null) {\n this.props.onChange(originalDate);\n }\n this.close();\n event.preventDefault();\n break;\n default:\n break;\n }\n };\n\n focusOn = (preferredElement: string, fallbackElement?: string) => {\n const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;\n if (element) {\n element.focus();\n } else if (fallbackElement) {\n this.focusOn(fallbackElement);\n }\n };\n\n handleDateChange = (date: Date | null, meta: DateChangeMeta) => {\n const { onDateSelect } = this.props;\n if (date && onDateSelect) {\n onDateSelect({ date, isEnabled: meta.isEnabled });\n }\n };\n\n handleDateSelect = (date: Date) => {\n this.setState(\n (state) => {\n const originalDate = state.originalDate ?? this.props.value;\n return { originalDate };\n },\n () => {\n this.props.onChange(date);\n this.close();\n this.focusOn('.btn');\n },\n );\n };\n\n getCalendar = () => {\n const { value, min, max, monthFormat, placeholder, disabledRules } = this.props;\n return (\n <div className=\"p-a-1\">\n <Calendar\n value={value}\n min={min}\n max={max}\n monthFormat={monthFormat}\n placeholder={placeholder}\n disabledRules={disabledRules}\n onDateFocus={this.handleDateChange}\n onChange={this.handleDateSelect}\n />\n </div>\n );\n };\n\n handleClear = () => {\n this.props.onChange(null);\n this.focusOn('.np-date-trigger');\n };\n\n render() {\n const { open } = this.state;\n\n const {\n inputAttributes,\n id: idProp,\n 'aria-labelledby': ariaLabelledByProp,\n size,\n placeholder,\n label,\n monthFormat,\n disabled,\n clearable,\n value,\n } = this.props;\n const id = idProp ?? inputAttributes?.id;\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];\n\n return (\n <div\n ref={this.element}\n aria-labelledby={id}\n aria-invalid={inputAttributes?.['aria-invalid']}\n aria-describedby={inputAttributes?.['aria-describedby']}\n className={clsx('input-group', disabled && 'disabled')}\n onKeyDown={this.handleKeyDown}\n >\n <OverlayIdProvider open={open}>\n <DateTrigger\n id={id}\n ariaLabelledBy={ariaLabelledBy}\n selectedDate={value}\n size={size}\n placeholder={placeholder}\n label={label}\n monthFormat={monthFormat}\n disabled={disabled || false}\n onClick={this.open}\n onClear={!disabled && clearable && value ? this.handleClear : undefined}\n />\n <ResponsivePanel\n anchorRef={this.element}\n open={open}\n className=\"tw-date-lookup-menu\"\n position={Position.BOTTOM}\n considerHeight\n onClose={this.discard}\n >\n {this.getCalendar()}\n </ResponsivePanel>\n </OverlayIdProvider>\n </div>\n );\n }\n}\n\nexport const DateLookupWithoutInputAttributes = DateLookup;\n\nconst WrappedDateLookup = withInputAttributes(\n DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,\n { nonLabelable: true },\n);\nWrappedDateLookup.displayName = 'DateLookup';\n\nexport default WrappedDateLookup;\n"],"names":["DateLookup","PureComponent","defaultProps","value","min","max","size","Size","MEDIUM","placeholder","label","monthFormat","MonthFormat","LONG","disabled","clearable","element","createRef","constructor","props","state","originalDate","open","componentDidUpdate","previousProps","getTime","focusOn","onFocus","setState","discard","onChange","close","onBlur","handleKeyDown","event","key","preventDefault","preferredElement","fallbackElement","current","querySelector","focus","handleDateChange","date","meta","onDateSelect","isEnabled","handleDateSelect","getCalendar","disabledRules","_jsx","className","children","Calendar","onDateFocus","handleClear","render","inputAttributes","id","idProp","ariaLabelledByProp","ariaLabelledBy","ref","clsx","onKeyDown","_jsxs","OverlayIdProvider","DateTrigger","selectedDate","onClick","onClear","undefined","ResponsivePanel","anchorRef","position","Position","BOTTOM","considerHeight","onClose","WrappedDateLookup","withInputAttributes","nonLabelable","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,MAAMA,UAAW,SAAQC,mBAAkE,CAAA;AAIzF,EAAA,OAAOC,YAAY,GAAG;AACpBC,IAAAA,KAAK,EAAE,IAAI;AACXC,IAAAA,GAAG,EAAE,IAAI;AACTC,IAAAA,GAAG,EAAE,IAAI;IACTC,IAAI,EAAEC,SAAI,CAACC,MAAM;AACjBC,IAAAA,WAAW,EAAE,EAAE;AACfC,IAAAA,KAAK,EAAE,EAAE;IACTC,WAAW,EAAEC,uBAAW,CAACC,IAAI;AAC7BC,IAAAA,QAAQ,EAAE,KAAK;AACfC,IAAAA,SAAS,EAAE;GAC0C;EAEvDC,OAAO,gBAAGC,eAAS,EAAkB;EAErCC,WAAAA,CAAYC,KAA0B,EAAA;IACpC,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,KAAK,GAAG;AACXC,MAAAA,YAAY,EAAE,IAAI;AAClBC,MAAAA,IAAI,EAAE;KACP;AACH,EAAA;EAEAC,kBAAkBA,CAACC,aAAiD,EAAA;IAClE,IAAI,IAAI,CAACL,KAAK,CAAChB,KAAK,EAAEsB,OAAO,EAAE,KAAKD,aAAa,CAACrB,KAAK,EAAEsB,OAAO,EAAE,IAAI,IAAI,CAACL,KAAK,CAACE,IAAI,EAAE;AACrF,MAAA,IAAI,CAACI,OAAO,CAAC,SAAS,CAAC;AACzB,IAAA;AACF,EAAA;EAEAJ,IAAI,GAAGA,MAAK;IACV,MAAM;AAAEK,MAAAA;KAAS,GAAG,IAAI,CAACR,KAAK;IAE9B,IAAI,CAACS,QAAQ,CAAC;AAAEN,MAAAA,IAAI,EAAE;AAAI,KAAE,CAAC;AAC7B,IAAA,IAAIK,OAAO,EAAE;AACXA,MAAAA,OAAO,EAAE;AACX,IAAA;EACF,CAAC;EAEDE,OAAO,GAAGA,MAAK;IACb,MAAM;AAAER,MAAAA;KAAc,GAAG,IAAI,CAACD,KAAK;IACnC,IAAIC,YAAY,KAAK,IAAI,EAAE;AACzB,MAAA,IAAI,CAACF,KAAK,CAACW,QAAQ,CAACT,YAAY,CAAC;AACnC,IAAA;IACA,IAAI,CAACU,KAAK,EAAE;EACd,CAAC;EAEDA,KAAK,GAAGA,MAAK;IACX,MAAM;AAAEC,MAAAA;KAAQ,GAAG,IAAI,CAACb,KAAK;IAC7B,IAAI,CAACS,QAAQ,CAAC;AAAEN,MAAAA,IAAI,EAAE,KAAK;AAAED,MAAAA,YAAY,EAAE;AAAI,KAAE,CAAC;AAClD,IAAA,IAAIW,MAAM,EAAE;AACVA,MAAAA,MAAM,EAAE;AACV,IAAA;EACF,CAAC;EAEDC,aAAa,GAAIC,KAAoC,IAAI;IACvD,MAAM;MAAEZ,IAAI;AAAED,MAAAA;KAAc,GAAG,IAAI,CAACD,KAAK;IACzC,QAAQc,KAAK,CAACC,GAAG;AACf,MAAA,KAAK,WAAW;AAChB,MAAA,KAAK,SAAS;AACd,MAAA,KAAK,YAAY;AACjB,MAAA,KAAK,WAAW;QACd,IAAI,CAACb,IAAI,EAAE;UACT,IAAI,CAACA,IAAI,EAAE;UACXY,KAAK,CAACE,cAAc,EAAE;AACxB,QAAA;AACA,QAAA;AACF,MAAA,KAAK,QAAQ;QACX,IAAIf,YAAY,KAAK,IAAI,EAAE;AACzB,UAAA,IAAI,CAACF,KAAK,CAACW,QAAQ,CAACT,YAAY,CAAC;AACnC,QAAA;QACA,IAAI,CAACU,KAAK,EAAE;QACZG,KAAK,CAACE,cAAc,EAAE;AACtB,QAAA;AAGJ;EACF,CAAC;AAEDV,EAAAA,OAAO,GAAGA,CAACW,gBAAwB,EAAEC,eAAwB,KAAI;IAC/D,MAAMtB,OAAO,GAAG,IAAI,CAACA,OAAO,CAACuB,OAAO,EAAEC,aAAa,CAACH,gBAAgB,CAAuB;AAC3F,IAAA,IAAIrB,OAAO,EAAE;MACXA,OAAO,CAACyB,KAAK,EAAE;IACjB,CAAC,MAAM,IAAIH,eAAe,EAAE;AAC1B,MAAA,IAAI,CAACZ,OAAO,CAACY,eAAe,CAAC;AAC/B,IAAA;EACF,CAAC;AAEDI,EAAAA,gBAAgB,GAAGA,CAACC,IAAiB,EAAEC,IAAoB,KAAI;IAC7D,MAAM;AAAEC,MAAAA;KAAc,GAAG,IAAI,CAAC1B,KAAK;IACnC,IAAIwB,IAAI,IAAIE,YAAY,EAAE;AACxBA,MAAAA,YAAY,CAAC;QAAEF,IAAI;QAAEG,SAAS,EAAEF,IAAI,CAACE;AAAS,OAAE,CAAC;AACnD,IAAA;EACF,CAAC;EAEDC,gBAAgB,GAAIJ,IAAU,IAAI;AAChC,IAAA,IAAI,CAACf,QAAQ,CACVR,KAAK,IAAI;MACR,MAAMC,YAAY,GAAGD,KAAK,CAACC,YAAY,IAAI,IAAI,CAACF,KAAK,CAAChB,KAAK;MAC3D,OAAO;AAAEkB,QAAAA;OAAc;AACzB,IAAA,CAAC,EACD,MAAK;AACH,MAAA,IAAI,CAACF,KAAK,CAACW,QAAQ,CAACa,IAAI,CAAC;MACzB,IAAI,CAACZ,KAAK,EAAE;AACZ,MAAA,IAAI,CAACL,OAAO,CAAC,MAAM,CAAC;AACtB,IAAA,CAAC,CACF;EACH,CAAC;EAEDsB,WAAW,GAAGA,MAAK;IACjB,MAAM;MAAE7C,KAAK;MAAEC,GAAG;MAAEC,GAAG;MAAEM,WAAW;MAAEF,WAAW;AAAEwC,MAAAA;KAAe,GAAG,IAAI,CAAC9B,KAAK;AAC/E,IAAA,oBACE+B,cAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,OAAO;MAAAC,QAAA,eACpBF,cAAA,CAACG,gBAAQ,EAAA;AACPlD,QAAAA,KAAK,EAAEA,KAAM;AACbC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTM,QAAAA,WAAW,EAAEA,WAAY;AACzBF,QAAAA,WAAW,EAAEA,WAAY;AACzBwC,QAAAA,aAAa,EAAEA,aAAc;QAC7BK,WAAW,EAAE,IAAI,CAACZ,gBAAiB;QACnCZ,QAAQ,EAAE,IAAI,CAACiB;OAAiB;AAEpC,KAAK,CAAC;EAEV,CAAC;EAEDQ,WAAW,GAAGA,MAAK;AACjB,IAAA,IAAI,CAACpC,KAAK,CAACW,QAAQ,CAAC,IAAI,CAAC;AACzB,IAAA,IAAI,CAACJ,OAAO,CAAC,kBAAkB,CAAC;EAClC,CAAC;AAED8B,EAAAA,MAAMA,GAAA;IACJ,MAAM;AAAElC,MAAAA;KAAM,GAAG,IAAI,CAACF,KAAK;IAE3B,MAAM;MACJqC,eAAe;AACfC,MAAAA,EAAE,EAAEC,MAAM;AACV,MAAA,iBAAiB,EAAEC,kBAAkB;MACrCtD,IAAI;MACJG,WAAW;MACXC,KAAK;MACLC,WAAW;MACXG,QAAQ;MACRC,SAAS;AACTZ,MAAAA;KACD,GAAG,IAAI,CAACgB,KAAK;AACd,IAAA,MAAMuC,EAAE,GAAGC,MAAM,IAAIF,eAAe,EAAEC,EAAE;AACxC,IAAA,MAAMG,cAAc,GAAGD,kBAAkB,IAAIH,eAAe,GAAG,iBAAiB,CAAC;AAEjF,IAAA,oBACEP,cAAA,CAAA,KAAA,EAAA;MACEY,GAAG,EAAE,IAAI,CAAC9C,OAAQ;AAClB,MAAA,iBAAA,EAAiB0C,EAAG;MACpB,cAAA,EAAcD,eAAe,GAAG,cAAc,CAAE;MAChD,kBAAA,EAAkBA,eAAe,GAAG,kBAAkB,CAAE;MACxDN,SAAS,EAAEY,SAAI,CAAC,aAAa,EAAEjD,QAAQ,IAAI,UAAU,CAAE;MACvDkD,SAAS,EAAE,IAAI,CAAC/B,aAAc;MAAAmB,QAAA,eAE9Ba,eAAA,CAACC,mCAAiB,EAAA;AAAC5C,QAAAA,IAAI,EAAEA,IAAK;QAAA8B,QAAA,EAAA,cAC5BF,cAAA,CAACiB,mBAAW,EAAA;AACVT,UAAAA,EAAE,EAAEA,EAAG;AACPG,UAAAA,cAAc,EAAEA,cAAe;AAC/BO,UAAAA,YAAY,EAAEjE,KAAM;AACpBG,UAAAA,IAAI,EAAEA,IAAK;AACXG,UAAAA,WAAW,EAAEA,WAAY;AACzBC,UAAAA,KAAK,EAAEA,KAAM;AACbC,UAAAA,WAAW,EAAEA,WAAY;UACzBG,QAAQ,EAAEA,QAAQ,IAAI,KAAM;UAC5BuD,OAAO,EAAE,IAAI,CAAC/C,IAAK;UACnBgD,OAAO,EAAE,CAACxD,QAAQ,IAAIC,SAAS,IAAIZ,KAAK,GAAG,IAAI,CAACoD,WAAW,GAAGgB;AAAU,SAAA,CAE1E,eAAArB,cAAA,CAACsB,uBAAe,EAAA;UACdC,SAAS,EAAE,IAAI,CAACzD,OAAQ;AACxBM,UAAAA,IAAI,EAAEA,IAAK;AACX6B,UAAAA,SAAS,EAAC,qBAAqB;UAC/BuB,QAAQ,EAAEC,iBAAQ,CAACC,MAAO;UAC1BC,cAAc,EAAA,IAAA;UACdC,OAAO,EAAE,IAAI,CAACjD,OAAQ;AAAAuB,UAAAA,QAAA,EAErB,IAAI,CAACJ,WAAW;AAAE,SACJ,CACnB;OAAmB;AACrB,KAAK,CAAC;AAEV,EAAA;;AAKF,MAAM+B,iBAAiB,GAAGC,4BAAmB,CAC3ChF,UAAqE,EACrE;AAAEiF,EAAAA,YAAY,EAAE;AAAI,CAAE;AAExBF,iBAAiB,CAACG,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -119,7 +119,18 @@ class DateLookup extends PureComponent {
|
|
|
119
119
|
this.focusOn(fallbackElement);
|
|
120
120
|
}
|
|
121
121
|
};
|
|
122
|
-
handleDateChange = date => {
|
|
122
|
+
handleDateChange = (date, meta) => {
|
|
123
|
+
const {
|
|
124
|
+
onDateSelect
|
|
125
|
+
} = this.props;
|
|
126
|
+
if (date && onDateSelect) {
|
|
127
|
+
onDateSelect({
|
|
128
|
+
date,
|
|
129
|
+
isEnabled: meta.isEnabled
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
handleDateSelect = date => {
|
|
123
134
|
this.setState(state => {
|
|
124
135
|
const originalDate = state.originalDate ?? this.props.value;
|
|
125
136
|
return {
|
|
@@ -127,20 +138,18 @@ class DateLookup extends PureComponent {
|
|
|
127
138
|
};
|
|
128
139
|
}, () => {
|
|
129
140
|
this.props.onChange(date);
|
|
141
|
+
this.close();
|
|
142
|
+
this.focusOn('.btn');
|
|
130
143
|
});
|
|
131
144
|
};
|
|
132
|
-
handleDateSelect = date => {
|
|
133
|
-
this.props.onChange(date);
|
|
134
|
-
this.close();
|
|
135
|
-
this.focusOn('.btn');
|
|
136
|
-
};
|
|
137
145
|
getCalendar = () => {
|
|
138
146
|
const {
|
|
139
147
|
value,
|
|
140
148
|
min,
|
|
141
149
|
max,
|
|
142
150
|
monthFormat,
|
|
143
|
-
placeholder
|
|
151
|
+
placeholder,
|
|
152
|
+
disabledRules
|
|
144
153
|
} = this.props;
|
|
145
154
|
return /*#__PURE__*/jsx("div", {
|
|
146
155
|
className: "p-a-1",
|
|
@@ -150,8 +159,9 @@ class DateLookup extends PureComponent {
|
|
|
150
159
|
max: max,
|
|
151
160
|
monthFormat: monthFormat,
|
|
152
161
|
placeholder: placeholder,
|
|
153
|
-
|
|
154
|
-
|
|
162
|
+
disabledRules: disabledRules,
|
|
163
|
+
onDateFocus: this.handleDateChange,
|
|
164
|
+
onChange: this.handleDateSelect
|
|
155
165
|
})
|
|
156
166
|
});
|
|
157
167
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateLookup.mjs","sources":["../../src/DateLookup/DateLookup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, PureComponent, KeyboardEvent } from 'react';\nimport Calendar from '../Calendar';\nimport {\n Size,\n MonthFormat,\n Position,\n type SizeSmall,\n type SizeMedium,\n type SizeLarge,\n} from '../common';\nimport ResponsivePanel from '../common/ResponsivePanel';\nimport { WithInputAttributesProps, withInputAttributes } from '../Inputs/contexts';\nimport { OverlayIdProvider } from '../Provider/overlay/OverlayIdProvider';\nimport DateTrigger from './DateTrigger';\n\nexport interface DateLookupProps {\n id?: string;\n value: Date | null;\n min?: Date | null;\n max?: Date | null;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n label?: string;\n 'aria-labelledby'?: string;\n monthFormat?: `${MonthFormat}`;\n disabled?: boolean;\n clearable?: boolean;\n onChange: (date: Date | null) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\ntype DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;\n\ninterface DateLookupState {\n originalDate: Date | null;\n open: boolean;\n}\n\nclass DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {\n declare props: DateLookupPropsWithInputAttributes &\n Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;\n\n static defaultProps = {\n value: null,\n min: null,\n max: null,\n size: Size.MEDIUM,\n placeholder: '',\n label: '',\n monthFormat: MonthFormat.LONG,\n disabled: false,\n clearable: false,\n } satisfies Partial<DateLookupPropsWithInputAttributes>;\n\n element = createRef<HTMLDivElement>();\n\n constructor(props: DateLookup['props']) {\n super(props);\n this.state = {\n originalDate: null,\n open: false,\n };\n }\n\n componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {\n if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {\n this.focusOn('.active');\n }\n }\n\n open = () => {\n const { onFocus } = this.props;\n\n this.setState({ open: true });\n if (onFocus) {\n onFocus();\n }\n };\n\n discard = () => {\n const { originalDate } = this.state;\n if (originalDate !== null) {\n this.props.onChange(originalDate);\n }\n this.close();\n };\n\n close = () => {\n const { onBlur } = this.props;\n this.setState({ open: false, originalDate: null });\n if (onBlur) {\n onBlur();\n }\n };\n\n handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const { open, originalDate } = this.state;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n case 'ArrowRight':\n case 'ArrowDown':\n if (!open) {\n this.open();\n event.preventDefault();\n }\n break;\n case 'Escape':\n if (originalDate !== null) {\n this.props.onChange(originalDate);\n }\n this.close();\n event.preventDefault();\n break;\n default:\n break;\n }\n };\n\n focusOn = (preferredElement: string, fallbackElement?: string) => {\n const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;\n if (element) {\n element.focus();\n } else if (fallbackElement) {\n this.focusOn(fallbackElement);\n }\n };\n\n handleDateChange = (date: Date | null) => {\n this.setState(\n (state) => {\n const originalDate = state.originalDate ?? this.props.value;\n return { originalDate };\n },\n () => {\n this.props.onChange(date);\n },\n );\n };\n\n handleDateSelect = (date: Date) => {\n this.props.onChange(date);\n this.close();\n this.focusOn('.btn');\n };\n\n getCalendar = () => {\n const { value, min, max, monthFormat, placeholder } = this.props;\n return (\n <div className=\"p-a-1\">\n <Calendar\n value={value}\n min={min}\n max={max}\n monthFormat={monthFormat}\n placeholder={placeholder}\n onChange={this.handleDateChange}\n onSelect={this.handleDateSelect}\n />\n </div>\n );\n };\n\n handleClear = () => {\n this.props.onChange(null);\n this.focusOn('.np-date-trigger');\n };\n\n render() {\n const { open } = this.state;\n\n const {\n inputAttributes,\n id: idProp,\n 'aria-labelledby': ariaLabelledByProp,\n size,\n placeholder,\n label,\n monthFormat,\n disabled,\n clearable,\n value,\n } = this.props;\n const id = idProp ?? inputAttributes?.id;\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];\n\n return (\n <div\n ref={this.element}\n aria-labelledby={id}\n aria-invalid={inputAttributes?.['aria-invalid']}\n aria-describedby={inputAttributes?.['aria-describedby']}\n className={clsx('input-group', disabled && 'disabled')}\n onKeyDown={this.handleKeyDown}\n >\n <OverlayIdProvider open={open}>\n <DateTrigger\n id={id}\n ariaLabelledBy={ariaLabelledBy}\n selectedDate={value}\n size={size}\n placeholder={placeholder}\n label={label}\n monthFormat={monthFormat}\n disabled={disabled || false}\n onClick={this.open}\n onClear={!disabled && clearable && value ? this.handleClear : undefined}\n />\n <ResponsivePanel\n anchorRef={this.element}\n open={open}\n className=\"tw-date-lookup-menu\"\n position={Position.BOTTOM}\n considerHeight\n onClose={this.discard}\n >\n {this.getCalendar()}\n </ResponsivePanel>\n </OverlayIdProvider>\n </div>\n );\n }\n}\n\nexport const DateLookupWithoutInputAttributes = DateLookup;\n\nconst WrappedDateLookup = withInputAttributes(\n DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,\n { nonLabelable: true },\n);\nWrappedDateLookup.displayName = 'DateLookup';\n\nexport default WrappedDateLookup;\n"],"names":["DateLookup","PureComponent","defaultProps","value","min","max","size","Size","MEDIUM","placeholder","label","monthFormat","MonthFormat","LONG","disabled","clearable","element","createRef","constructor","props","state","originalDate","open","componentDidUpdate","previousProps","getTime","focusOn","onFocus","setState","discard","onChange","close","onBlur","handleKeyDown","event","key","preventDefault","preferredElement","fallbackElement","current","querySelector","focus","handleDateChange","date","handleDateSelect","getCalendar","_jsx","className","children","Calendar","onSelect","handleClear","render","inputAttributes","id","idProp","ariaLabelledByProp","ariaLabelledBy","ref","clsx","onKeyDown","_jsxs","OverlayIdProvider","DateTrigger","selectedDate","onClick","onClear","undefined","ResponsivePanel","anchorRef","position","Position","BOTTOM","considerHeight","onClose","WrappedDateLookup","withInputAttributes","nonLabelable","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DateLookup.mjs","sources":["../../src/DateLookup/DateLookup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, PureComponent, KeyboardEvent } from 'react';\nimport Calendar from '../Calendar';\nimport type { DateChangeMeta, DisabledRules, OnDateSelectParams } from '../Calendar/Calendar.types';\nimport {\n Size,\n MonthFormat,\n Position,\n type SizeSmall,\n type SizeMedium,\n type SizeLarge,\n} from '../common';\nimport ResponsivePanel from '../common/ResponsivePanel';\nimport { WithInputAttributesProps, withInputAttributes } from '../Inputs/contexts';\nimport { OverlayIdProvider } from '../Provider/overlay/OverlayIdProvider';\nimport DateTrigger from './DateTrigger';\n\nexport interface DateLookupProps {\n /** The currently selected date, or `null` for no selection. */\n value: Date | null;\n /** Called when an enabled date is confirmed. Receives `null` when the value is cleared. */\n onChange: (date: Date | null) => void;\n /** HTML `id` applied to the trigger button, used for label association. */\n id?: string;\n /** Earliest selectable date (inclusive). Dates before this are interactive but not selectable, and show a boundary prompt. */\n min?: Date | null;\n /** Latest selectable date (inclusive). Dates after this are interactive but not selectable, and show a boundary prompt. */\n max?: Date | null;\n /** Size of the trigger input. Defaults to `'md'`. */\n size?: SizeSmall | SizeMedium | SizeLarge;\n /** Label text rendered above the trigger input. */\n label?: string;\n /** ID of an external element that labels the trigger, for use inside custom label contexts. */\n 'aria-labelledby'?: string;\n /** Placeholder text shown in the trigger when no date is selected. */\n placeholder?: string;\n /** Month name format in the calendar header. Defaults to `'long'` (e.g. \"January\"). */\n monthFormat?: `${MonthFormat}`;\n /** When `true`, the trigger and calendar are non-interactive. */\n disabled?: boolean;\n /** When `true`, a clear button is shown in the trigger to reset the value to `null`. */\n clearable?: boolean;\n /** Rules for disabling specific weekdays, individual dates, or date ranges. The required `reason` is shown in an inline prompt and linked to disabled cells via `aria-describedby` for screen reader accessibility. */\n disabledRules?: DisabledRules;\n /** Called whenever any date is focused or clicked, including disabled and out-of-range dates. `isEnabled` is `false` when the date is not selectable. */\n onDateSelect?: (params: OnDateSelectParams) => void;\n /** Called when the calendar panel opens. */\n onFocus?: () => void;\n /** Called when the calendar panel closes. */\n onBlur?: () => void;\n}\n\ntype DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;\n\ninterface DateLookupState {\n originalDate: Date | null;\n open: boolean;\n}\n\nclass DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {\n declare props: DateLookupPropsWithInputAttributes &\n Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;\n\n static defaultProps = {\n value: null,\n min: null,\n max: null,\n size: Size.MEDIUM,\n placeholder: '',\n label: '',\n monthFormat: MonthFormat.LONG,\n disabled: false,\n clearable: false,\n } satisfies Partial<DateLookupPropsWithInputAttributes>;\n\n element = createRef<HTMLDivElement>();\n\n constructor(props: DateLookup['props']) {\n super(props);\n this.state = {\n originalDate: null,\n open: false,\n };\n }\n\n componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {\n if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {\n this.focusOn('.active');\n }\n }\n\n open = () => {\n const { onFocus } = this.props;\n\n this.setState({ open: true });\n if (onFocus) {\n onFocus();\n }\n };\n\n discard = () => {\n const { originalDate } = this.state;\n if (originalDate !== null) {\n this.props.onChange(originalDate);\n }\n this.close();\n };\n\n close = () => {\n const { onBlur } = this.props;\n this.setState({ open: false, originalDate: null });\n if (onBlur) {\n onBlur();\n }\n };\n\n handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const { open, originalDate } = this.state;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n case 'ArrowRight':\n case 'ArrowDown':\n if (!open) {\n this.open();\n event.preventDefault();\n }\n break;\n case 'Escape':\n if (originalDate !== null) {\n this.props.onChange(originalDate);\n }\n this.close();\n event.preventDefault();\n break;\n default:\n break;\n }\n };\n\n focusOn = (preferredElement: string, fallbackElement?: string) => {\n const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;\n if (element) {\n element.focus();\n } else if (fallbackElement) {\n this.focusOn(fallbackElement);\n }\n };\n\n handleDateChange = (date: Date | null, meta: DateChangeMeta) => {\n const { onDateSelect } = this.props;\n if (date && onDateSelect) {\n onDateSelect({ date, isEnabled: meta.isEnabled });\n }\n };\n\n handleDateSelect = (date: Date) => {\n this.setState(\n (state) => {\n const originalDate = state.originalDate ?? this.props.value;\n return { originalDate };\n },\n () => {\n this.props.onChange(date);\n this.close();\n this.focusOn('.btn');\n },\n );\n };\n\n getCalendar = () => {\n const { value, min, max, monthFormat, placeholder, disabledRules } = this.props;\n return (\n <div className=\"p-a-1\">\n <Calendar\n value={value}\n min={min}\n max={max}\n monthFormat={monthFormat}\n placeholder={placeholder}\n disabledRules={disabledRules}\n onDateFocus={this.handleDateChange}\n onChange={this.handleDateSelect}\n />\n </div>\n );\n };\n\n handleClear = () => {\n this.props.onChange(null);\n this.focusOn('.np-date-trigger');\n };\n\n render() {\n const { open } = this.state;\n\n const {\n inputAttributes,\n id: idProp,\n 'aria-labelledby': ariaLabelledByProp,\n size,\n placeholder,\n label,\n monthFormat,\n disabled,\n clearable,\n value,\n } = this.props;\n const id = idProp ?? inputAttributes?.id;\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];\n\n return (\n <div\n ref={this.element}\n aria-labelledby={id}\n aria-invalid={inputAttributes?.['aria-invalid']}\n aria-describedby={inputAttributes?.['aria-describedby']}\n className={clsx('input-group', disabled && 'disabled')}\n onKeyDown={this.handleKeyDown}\n >\n <OverlayIdProvider open={open}>\n <DateTrigger\n id={id}\n ariaLabelledBy={ariaLabelledBy}\n selectedDate={value}\n size={size}\n placeholder={placeholder}\n label={label}\n monthFormat={monthFormat}\n disabled={disabled || false}\n onClick={this.open}\n onClear={!disabled && clearable && value ? this.handleClear : undefined}\n />\n <ResponsivePanel\n anchorRef={this.element}\n open={open}\n className=\"tw-date-lookup-menu\"\n position={Position.BOTTOM}\n considerHeight\n onClose={this.discard}\n >\n {this.getCalendar()}\n </ResponsivePanel>\n </OverlayIdProvider>\n </div>\n );\n }\n}\n\nexport const DateLookupWithoutInputAttributes = DateLookup;\n\nconst WrappedDateLookup = withInputAttributes(\n DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,\n { nonLabelable: true },\n);\nWrappedDateLookup.displayName = 'DateLookup';\n\nexport default WrappedDateLookup;\n"],"names":["DateLookup","PureComponent","defaultProps","value","min","max","size","Size","MEDIUM","placeholder","label","monthFormat","MonthFormat","LONG","disabled","clearable","element","createRef","constructor","props","state","originalDate","open","componentDidUpdate","previousProps","getTime","focusOn","onFocus","setState","discard","onChange","close","onBlur","handleKeyDown","event","key","preventDefault","preferredElement","fallbackElement","current","querySelector","focus","handleDateChange","date","meta","onDateSelect","isEnabled","handleDateSelect","getCalendar","disabledRules","_jsx","className","children","Calendar","onDateFocus","handleClear","render","inputAttributes","id","idProp","ariaLabelledByProp","ariaLabelledBy","ref","clsx","onKeyDown","_jsxs","OverlayIdProvider","DateTrigger","selectedDate","onClick","onClear","undefined","ResponsivePanel","anchorRef","position","Position","BOTTOM","considerHeight","onClose","WrappedDateLookup","withInputAttributes","nonLabelable","displayName"],"mappings":"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"}
|
package/build/Sticky/Sticky.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sticky.js","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n
|
|
1
|
+
{"version":3,"file":"Sticky.js","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
|
package/build/Sticky/Sticky.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sticky.mjs","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n
|
|
1
|
+
{"version":3,"file":"Sticky.mjs","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function hasDisabledDatesInMonth(month, year, disabledRules, min, max) {
|
|
4
|
+
if (!disabledRules) return false;
|
|
5
|
+
if (disabledRules.weekdays?.length) {
|
|
6
|
+
return true;
|
|
7
|
+
}
|
|
8
|
+
const monthStart = new Date(year, month, 1);
|
|
9
|
+
const monthEnd = new Date(year, month + 1, 0);
|
|
10
|
+
if (disabledRules.dates?.length) {
|
|
11
|
+
const hasDateInMonth = disabledRules.dates.some(date => {
|
|
12
|
+
if (date.getFullYear() !== year || date.getMonth() !== month) return false;
|
|
13
|
+
if (min && date < min) return false;
|
|
14
|
+
if (max && date > max) return false;
|
|
15
|
+
return true;
|
|
16
|
+
});
|
|
17
|
+
if (hasDateInMonth) return true;
|
|
18
|
+
}
|
|
19
|
+
if (disabledRules.ranges?.length) {
|
|
20
|
+
const hasOverlap = disabledRules.ranges.some(range => {
|
|
21
|
+
const rangeStart = new Date(range.start.getFullYear(), range.start.getMonth(), range.start.getDate());
|
|
22
|
+
const rangeEnd = new Date(range.end.getFullYear(), range.end.getMonth(), range.end.getDate());
|
|
23
|
+
if (max && rangeStart > max) return false;
|
|
24
|
+
if (min && rangeEnd < min) return false;
|
|
25
|
+
return rangeStart <= monthEnd && rangeEnd >= monthStart;
|
|
26
|
+
});
|
|
27
|
+
if (hasOverlap) return true;
|
|
28
|
+
}
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
exports.hasDisabledDatesInMonth = hasDisabledDatesInMonth;
|
|
33
|
+
//# sourceMappingURL=hasDisabledDatesInMonth.js.map
|