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;
+ };
};
}
|