From 3eefa47f58b19ecb082ba7961be34c3ff15687eb Mon Sep 17 00:00:00 2001 From: gpbl Date: Sat, 11 Jan 2025 17:25:59 -0500 Subject: [PATCH] =?UTF-8?q?(chore)=20Rename=20getClassNamesForModifiers=20?= =?UTF-8?q?=E2=86=92=20getDayCellClassNames,=20add=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/DayPicker.tsx | 10 ++-- src/helpers/getClassNamesForModifiers.ts | 26 ---------- src/helpers/getDayCellClassNames.test.ts | 64 ++++++++++++++++++++++++ src/helpers/getDayCellClassNames.ts | 27 ++++++++++ 4 files changed, 96 insertions(+), 31 deletions(-) delete mode 100644 src/helpers/getClassNamesForModifiers.ts create mode 100644 src/helpers/getDayCellClassNames.test.ts create mode 100644 src/helpers/getDayCellClassNames.ts diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx index c581c2ffc..991184192 100644 --- a/src/DayPicker.tsx +++ b/src/DayPicker.tsx @@ -4,9 +4,9 @@ import type { MouseEvent, FocusEvent, KeyboardEvent, ChangeEvent } from "react"; import { UI, DayFlag, SelectionState } from "./UI.js"; import type { CalendarDay } from "./classes/CalendarDay.js"; import { DateLib, defaultLocale } from "./classes/DateLib.js"; -import { getClassNamesForModifiers } from "./helpers/getClassNamesForModifiers.js"; import { getComponents } from "./helpers/getComponents.js"; import { getDataAttributes } from "./helpers/getDataAttributes.js"; +import { getDayCellClassNames } from "./helpers/getDayCellClassNames.js"; import { getDefaultClassNames } from "./helpers/getDefaultClassNames.js"; import { getFormatters } from "./helpers/getFormatters.js"; import { getMonthOptions } from "./helpers/getMonthOptions.js"; @@ -486,13 +486,13 @@ export function DayPicker(props: DayPickerProps) { ); } - const style = getStyleForModifiers( + const cellStyle = getStyleForModifiers( modifiers, styles, props.modifiersStyles ); - const className = getClassNamesForModifiers( + const cellClassNames = getDayCellClassNames( modifiers, classNames, props.modifiersClassNames @@ -513,8 +513,8 @@ export function DayPicker(props: DayPickerProps) { key={`${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`} day={day} modifiers={modifiers} - className={className.join(" ")} - style={style} + className={cellClassNames.join(" ")} + style={cellStyle} role="gridcell" aria-selected={modifiers.selected || undefined} aria-label={ariaLabel} diff --git a/src/helpers/getClassNamesForModifiers.ts b/src/helpers/getClassNamesForModifiers.ts deleted file mode 100644 index 580b3547c..000000000 --- a/src/helpers/getClassNamesForModifiers.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { DayFlag, SelectionState, UI } from "../UI.js"; -import type { ModifiersClassNames, ClassNames } from "../types/index.js"; - -export function getClassNamesForModifiers( - modifiers: Record, - classNames: ClassNames, - modifiersClassNames: ModifiersClassNames = {} -) { - const modifierClassNames = Object.entries(modifiers) - .filter(([, active]) => active === true) - .reduce( - (previousValue, [key]) => { - if (modifiersClassNames[key]) { - previousValue.push(modifiersClassNames[key as string]); - } else if (classNames[DayFlag[key as DayFlag]]) { - previousValue.push(classNames[DayFlag[key as DayFlag]]); - } else if (classNames[SelectionState[key as SelectionState]]) { - previousValue.push(classNames[SelectionState[key as SelectionState]]); - } - return previousValue; - }, - [classNames[UI.Day]] as string[] - ); - - return modifierClassNames; -} diff --git a/src/helpers/getDayCellClassNames.test.ts b/src/helpers/getDayCellClassNames.test.ts new file mode 100644 index 000000000..55784c136 --- /dev/null +++ b/src/helpers/getDayCellClassNames.test.ts @@ -0,0 +1,64 @@ +import { DayFlag, SelectionState } from "../UI.js"; +import type { ModifiersClassNames, ClassNames } from "../types/index.js"; + +import { getDayCellClassNames } from "./getDayCellClassNames.js"; +import { getDefaultClassNames } from "./getDefaultClassNames.js"; + +describe("getDayCellClassNames", () => { + const baseClass = "day"; + const classNames: ClassNames = { + ...getDefaultClassNames(), + [DayFlag.disabled]: "disabled", + [SelectionState.selected]: "selected-style" + }; + const modifiersClassNames: ModifiersClassNames = { + today: "today-class", + weekend: "weekend-class" + }; + + it("should return base class when no modifiers are active", () => { + const modifiers = { today: false, weekend: false }; + const result = getDayCellClassNames( + modifiers, + classNames, + modifiersClassNames + ); + expect(result).toEqual([baseClass]); + }); + + it("should return class names for active modifiers", () => { + const modifiers = { today: true, weekend: false }; + const result = getDayCellClassNames( + modifiers, + classNames, + modifiersClassNames + ); + expect(result).toEqual([baseClass, "today-class"]); + }); + + it("should return class names for active day flags", () => { + const modifiers = { selected: true }; + const result = getDayCellClassNames( + modifiers, + classNames, + modifiersClassNames + ); + expect(result).toEqual([baseClass, "selected-style"]); + }); + + it("should return class names for active selection states", () => { + const modifiers = { selected: true }; + const result = getDayCellClassNames(modifiers, classNames); + expect(result).toEqual([baseClass, "selected-style"]); + }); + + it("should prioritize modifiersClassNames over classNames", () => { + const modifiers = { today: true, selected: true }; + const result = getDayCellClassNames( + modifiers, + classNames, + modifiersClassNames + ); + expect(result).toEqual([baseClass, "today-class", "selected-style"]); + }); +}); diff --git a/src/helpers/getDayCellClassNames.ts b/src/helpers/getDayCellClassNames.ts new file mode 100644 index 000000000..7808b989c --- /dev/null +++ b/src/helpers/getDayCellClassNames.ts @@ -0,0 +1,27 @@ +import { DayFlag, SelectionState, UI } from "../UI.js"; +import type { ModifiersClassNames, ClassNames } from "../types/index.js"; + +export function getDayCellClassNames( + modifiers: Record, + classNames: ClassNames, + modifiersClassNames: ModifiersClassNames = {} +) { + const result = Object.entries(modifiers) + .filter(([, active]) => active === true) + .reduce( + (val, [modifier]) => { + val.push(`${classNames[UI.Day]}-${modifier}`); + if (modifiersClassNames[modifier]) { + val.push(modifiersClassNames[modifier as string]); + } else if (classNames[DayFlag[modifier as DayFlag]]) { + val.push(classNames[DayFlag[modifier as DayFlag]]); + } else if (classNames[SelectionState[modifier as SelectionState]]) { + val.push(classNames[SelectionState[modifier as SelectionState]]); + } + return val; + }, + [classNames[UI.Day]] as string[] + ); + + return result; +}