UNPKG

react-day-picker

Version:

Customizable Date Picker for React

101 lines (86 loc) 2.76 kB
import { useState } from "react"; import type { CalendarDay, DateLib } from "./classes/index.js"; import { calculateFocusTarget } from "./helpers/calculateFocusTarget.js"; import { getNextFocus } from "./helpers/getNextFocus.js"; import type { MoveFocusBy, MoveFocusDir, DayPickerProps, Modifiers } from "./types/index.js"; import { Calendar } from "./useCalendar.js"; export type UseFocus = { /** The date that is currently focused. */ focused: CalendarDay | undefined; /** Check if the given day is the focus target when entering the calendar. */ isFocusTarget: (day: CalendarDay) => boolean; /** Focus the given day. */ setFocused: (day: CalendarDay | undefined) => void; /** Blur the focused day. */ blur: () => void; /** Move the current focus to the next day according to the given direction. */ moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void; }; /** * Manages focus behavior for the DayPicker component, including setting, * moving, and blurring focus on calendar days. * * @template T - The type of DayPicker props. * @param props - The DayPicker props. * @param calendar - The calendar object containing the displayed days and * months. * @param getModifiers - A function to retrieve modifiers for a given day. * @param isSelected - A function to check if a date is selected. * @param dateLib - The date utility library instance. * @returns An object containing focus-related methods and the currently focused * day. */ export function useFocus<T extends DayPickerProps>( props: T, calendar: Calendar, getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, dateLib: DateLib ): UseFocus { const { autoFocus } = props; const [lastFocused, setLastFocused] = useState<CalendarDay | undefined>(); const focusTarget = calculateFocusTarget( calendar.days, getModifiers, isSelected || (() => false), lastFocused ); const [focusedDay, setFocused] = useState<CalendarDay | undefined>( autoFocus ? focusTarget : undefined ); const blur = () => { setLastFocused(focusedDay); setFocused(undefined); }; const moveFocus = (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => { if (!focusedDay) return; const nextFocus = getNextFocus( moveBy, moveDir, focusedDay, calendar.navStart, calendar.navEnd, props, dateLib ); if (!nextFocus) return; calendar.goToDay(nextFocus); setFocused(nextFocus); }; const isFocusTarget = (day: CalendarDay) => { return Boolean(focusTarget?.isEqualTo(day)); }; const useFocus: UseFocus = { isFocusTarget, setFocused, focused: focusedDay, blur, moveFocus }; return useFocus; }