diff --git a/examples/__snapshots__/Range.test.tsx.snap b/examples/__snapshots__/Range.test.tsx.snap index c2b2808c5..d4e374401 100644 --- a/examples/__snapshots__/Range.test.tsx.snap +++ b/examples/__snapshots__/Range.test.tsx.snap @@ -338,7 +338,7 @@ exports[`should match the snapshot 1`] = ` @@ -353,7 +353,7 @@ exports[`should match the snapshot 1`] = ` @@ -368,7 +368,7 @@ exports[`should match the snapshot 1`] = ` @@ -383,7 +383,7 @@ exports[`should match the snapshot 1`] = ` @@ -398,7 +398,7 @@ exports[`should match the snapshot 1`] = ` diff --git a/src/useGetModifiers.test.tsx b/src/useGetModifiers.test.tsx new file mode 100644 index 000000000..92b7efe1a --- /dev/null +++ b/src/useGetModifiers.test.tsx @@ -0,0 +1,79 @@ +import { DayFlag } from "./UI"; +import { CalendarDay, defaultDateLib } from "./classes/index"; +import { useGetModifiers } from "./useGetModifiers"; + +const dateLib = defaultDateLib; + +const month1 = new Date(2022, 10, 1); +const month2 = new Date(2022, 11, 1); + +const date1 = new Date(2022, 10, 10); +const date2 = new Date(2022, 10, 11); +const date3 = new Date(2022, 10, 12); +const date4 = new Date(2022, 10, 13); +const date5 = new Date(2022, 10, 14); +const date6 = new Date(2022, 10, 30); + +const day1 = new CalendarDay(date1, month1); +const day2 = new CalendarDay(date2, month1); +const day3 = new CalendarDay(date3, month1); +const day4 = new CalendarDay(date4, month1); +const day5 = new CalendarDay(date5, month1); +const day6 = new CalendarDay(date6, month2); + +const days: CalendarDay[] = [day1, day2, day3, day4, day5, day6]; + +const props = { + disabled: [date1], + hidden: [date2], + modifiers: { + custom: [date3], + selected: [date5] + }, + selected: date6, + showOutsideDays: true, + today: date4, + timeZone: "UTC" +}; + +describe("useGetModifiers", () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const getModifiers = useGetModifiers(days, props, dateLib); + + test("return the modifiers for a given day", () => { + const modifiers = getModifiers(day1); + + expect(modifiers[DayFlag.focused]).toBe(false); + expect(modifiers[DayFlag.disabled]).toBe(true); + expect(modifiers[DayFlag.hidden]).toBe(false); + expect(modifiers[DayFlag.outside]).toBe(false); + expect(modifiers[DayFlag.today]).toBe(false); + expect(modifiers.custom).toBe(false); + }); + + test("return the custom modifiers for a given day", () => { + const modifiers = getModifiers(day3); + expect(modifiers.custom).toBe(true); + }); + + test("return the custom `selected` modifier for a given day", () => { + const modifiers = getModifiers(day5); + expect(modifiers.selected).toBe(true); + }); + + test("return the today modifier for a given day", () => { + const modifiers = getModifiers(day4); + expect(modifiers[DayFlag.today]).toBe(true); + }); + + test("return the hidden modifier for a given day", () => { + const modifiers = getModifiers(day2); + expect(modifiers[DayFlag.hidden]).toBe(true); + }); + + test("return the outside modifier for a given day", () => { + const modifiers = getModifiers(day6); + + expect(modifiers[DayFlag.outside]).toBe(true); + }); +}); diff --git a/src/useGetModifiers.tsx b/src/useGetModifiers.tsx index 29a561558..3d67a705f 100644 --- a/src/useGetModifiers.tsx +++ b/src/useGetModifiers.tsx @@ -1,6 +1,6 @@ import { TZDate } from "@date-fns/tz"; -import { DayFlag, SelectionState } from "./UI.js"; +import { DayFlag } from "./UI.js"; import type { CalendarDay, DateLib } from "./classes/index.js"; import type { DayPickerProps, Modifiers } from "./types/index.js"; import { dateMatchModifiers } from "./utils/dateMatchModifiers.js"; @@ -8,6 +8,8 @@ import { dateMatchModifiers } from "./utils/dateMatchModifiers.js"; /** * Return a function to get the modifiers for a given day. * + * NOTE: this is not an hook, but a factory for `getModifiers`. + * * @private */ export function useGetModifiers( @@ -29,13 +31,6 @@ export function useGetModifiers( const customModifiersMap: Record = {}; - const selectionModifiersMap: Record = { - [SelectionState.range_end]: [], - [SelectionState.range_middle]: [], - [SelectionState.range_start]: [], - [SelectionState.selected]: [] - }; - for (const day of days) { const { date, displayMonth } = day; @@ -81,7 +76,7 @@ export function useGetModifiers( } } - return (day: CalendarDay) => { + return (day: CalendarDay): Modifiers => { // Initialize all the modifiers to false const dayFlags: Record = { [DayFlag.focused]: false, @@ -90,12 +85,6 @@ export function useGetModifiers( [DayFlag.outside]: false, [DayFlag.today]: false }; - const selectionStates: Record = { - [SelectionState.range_end]: false, - [SelectionState.range_middle]: false, - [SelectionState.range_start]: false, - [SelectionState.selected]: false - }; const customModifiers: Modifiers = {}; // Find the modifiers for the given day @@ -103,19 +92,14 @@ export function useGetModifiers( const days = internalModifiersMap[name as DayFlag]; dayFlags[name as DayFlag] = days.some((d) => d === day); } - for (const name in selectionModifiersMap) { - const days = selectionModifiersMap[name as SelectionState]; - selectionStates[name as SelectionState] = days.some((d) => d === day); - } for (const name in customModifiersMap) { customModifiers[name] = customModifiersMap[name].some((d) => d === day); } return { - ...selectionStates, ...dayFlags, // custom modifiers should override all the previous ones ...customModifiers - } as Modifiers; + }; }; }