File size: 3,048 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 | import { createContext, useContext } from "react";
import type { CalendarDay } from "./classes/CalendarDay.js";
import type { CalendarMonth } from "./classes/CalendarMonth.js";
import type { DayPickerProps } from "./types/props.js";
import type { SelectedValue, SelectHandler } from "./types/selection.js";
import type {
ClassNames,
CustomComponents,
Formatters,
Labels,
Mode,
Modifiers,
Styles,
} from "./types/shared.js";
/** @ignore */
export const dayPickerContext = createContext<
| DayPickerContext<{
mode?: Mode | undefined;
required?: boolean | undefined;
}>
| undefined
>(undefined);
/**
* Represents the context for the DayPicker component, providing various
* properties and methods to interact with the calendar.
*
* @template T - The type of the DayPicker props, which must optionally include
* `mode` and `required` properties. This type can be used to refine the type
* returned by the hook.
*/
export type DayPickerContext<
T extends { mode?: Mode | undefined; required?: boolean | undefined },
> = {
/** The months displayed in the calendar. */
months: CalendarMonth[];
/** The next month to display. */
nextMonth: Date | undefined;
/** The previous month to display. */
previousMonth: Date | undefined;
/** Navigate to the specified month. Will fire the `onMonthChange` callback. */
goToMonth: (month: Date) => void;
/** Returns the modifiers for the given day. */
getModifiers: (day: CalendarDay) => Modifiers;
/** The selected date(s). */
selected: SelectedValue<T> | undefined;
/** Set a selection. */
select: SelectHandler<T> | undefined;
/** Whether the given date is selected. */
isSelected: ((date: Date) => boolean) | undefined;
/** The components used internally by DayPicker. */
components: CustomComponents;
/** The class names for the UI elements. */
classNames: ClassNames;
/** The styles for the UI elements. */
styles: Partial<Styles> | undefined;
/** The labels used in the user interface. */
labels: Labels;
/** The formatters used to format the UI elements. */
formatters: Formatters;
/**
* The props as passed to the DayPicker component.
*
* @since 9.3.0
*/
dayPickerProps: DayPickerProps;
};
/**
* Provides access to the DayPicker context, which includes properties and
* methods to interact with the DayPicker component. This hook must be used
* within a custom component.
*
* @template T - Use this type to refine the returned context type with a
* specific selection mode.
* @returns The context to work with DayPicker.
* @throws {Error} If the hook is used outside of a DayPicker provider.
* @group Hooks
* @see https://daypicker.dev/guides/custom-components
*/
export function useDayPicker<
T extends { mode?: Mode | undefined; required?: boolean | undefined },
>(): DayPickerContext<T> {
const context = useContext(dayPickerContext);
if (context === undefined) {
throw new Error("useDayPicker() must be used within a custom component.");
}
return context;
}
|