File size: 2,967 Bytes
cf86710 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 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 {
DayPickerProps,
Modifiers,
MoveFocusBy,
MoveFocusDir,
} from "./types/index.js";
import type { 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;
if (props.disableNavigation) {
const isNextInCalendar = calendar.days.some((day) =>
day.isEqualTo(nextFocus),
);
if (!isNextInCalendar) {
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;
}
|