UNPKG

8.15 kBTypeScriptView Raw
1import React, { Component } from "react";
2import { type Locale } from "./date_utils";
3import InputTime from "./input_time";
4import Month from "./month";
5import MonthDropdown from "./month_dropdown";
6import MonthYearDropdown from "./month_year_dropdown";
7import Time from "./time";
8import Year from "./year";
9import YearDropdown from "./year_dropdown";
10import type { ClickOutsideHandler } from "./click_outside_wrapper";
11import type { Day } from "date-fns";
12interface YearDropdownProps extends React.ComponentPropsWithoutRef<typeof YearDropdown> {
13}
14interface MonthDropdownProps extends React.ComponentPropsWithoutRef<typeof MonthDropdown> {
15}
16interface MonthYearDropdownProps extends React.ComponentPropsWithoutRef<typeof MonthYearDropdown> {
17}
18interface YearProps extends React.ComponentPropsWithoutRef<typeof Year> {
19}
20interface MonthProps extends React.ComponentPropsWithoutRef<typeof Month> {
21}
22interface TimeProps extends React.ComponentPropsWithoutRef<typeof Time> {
23}
24interface InputTimeProps extends React.ComponentPropsWithoutRef<typeof InputTime> {
25}
26export interface ReactDatePickerCustomHeaderProps {
27 date: CalendarState["date"];
28 customHeaderCount: number;
29 monthDate: Date;
30 changeMonth: (month: number) => void;
31 changeYear: (year: number) => void;
32 decreaseMonth: VoidFunction;
33 increaseMonth: VoidFunction;
34 decreaseYear: VoidFunction;
35 increaseYear: VoidFunction;
36 prevMonthButtonDisabled: boolean;
37 nextMonthButtonDisabled: boolean;
38 prevYearButtonDisabled: boolean;
39 nextYearButtonDisabled: boolean;
40}
41type CalendarProps = React.PropsWithChildren & Omit<YearDropdownProps, "date" | "onChange" | "year" | "minDate" | "maxDate"> & Omit<MonthDropdownProps, "month" | "onChange"> & Omit<MonthYearDropdownProps, "date" | "onChange" | "minDate" | "maxDate"> & Omit<YearProps, "onDayClick" | "selectingDate" | "clearSelectingDate" | "onYearMouseEnter" | "onYearMouseLeave" | "minDate" | "maxDate"> & Omit<MonthProps, "ariaLabelPrefix" | "onChange" | "day" | "onDayClick" | "handleOnKeyDown" | "handleOnMonthKeyDown" | "onDayMouseEnter" | "onMouseLeave" | "orderInDisplay" | "monthShowsDuplicateDaysEnd" | "monthShowsDuplicateDaysStart" | "minDate" | "maxDate"> & Omit<TimeProps, "onChange" | "format" | "intervals" | "monthRef"> & Omit<InputTimeProps, "date" | "timeString" | "onChange"> & {
42 className?: string;
43 container?: React.ElementType;
44 showYearPicker?: boolean;
45 showMonthYearPicker?: boolean;
46 showQuarterYearPicker?: boolean;
47 showTimeSelect?: boolean;
48 showTimeInput?: boolean;
49 showYearDropdown?: boolean;
50 showMonthDropdown?: boolean;
51 yearItemNumber?: number;
52 useWeekdaysShort?: boolean;
53 forceShowMonthNavigation?: boolean;
54 showDisabledMonthNavigation?: boolean;
55 formatWeekDay?: (date: string) => string;
56 onDropdownFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
57 calendarStartDay?: Day;
58 weekDayClassName?: (date: Date) => string;
59 onMonthChange?: (date: Date) => void;
60 onYearChange?: (date: Date) => void;
61 onDayMouseEnter?: (date: Date) => void;
62 onMonthMouseLeave?: VoidFunction;
63 weekLabel?: string;
64 onClickOutside: ClickOutsideHandler;
65 outsideClickIgnoreClass?: string;
66 previousMonthButtonLabel?: React.ReactNode;
67 previousYearButtonLabel?: string;
68 previousMonthAriaLabel?: string;
69 previousYearAriaLabel?: string;
70 nextMonthButtonLabel?: React.ReactNode;
71 nextYearButtonLabel?: string;
72 nextMonthAriaLabel?: string;
73 nextYearAriaLabel?: string;
74 showPreviousMonths?: boolean;
75 monthsShown?: number;
76 monthSelectedIn?: number;
77 onSelect: (day: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, monthSelectedIn?: number) => void;
78 renderCustomHeader?: (props: ReactDatePickerCustomHeaderProps) => JSX.Element;
79 onYearMouseEnter?: YearProps["onYearMouseEnter"];
80 onYearMouseLeave?: YearProps["onYearMouseLeave"];
81 monthAriaLabelPrefix?: MonthProps["ariaLabelPrefix"];
82 handleOnDayKeyDown?: MonthProps["handleOnKeyDown"];
83 handleOnKeyDown?: (event: React.KeyboardEvent<HTMLDivElement> | React.KeyboardEvent<HTMLLIElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
84 onTimeChange?: TimeProps["onChange"] | InputTimeProps["onChange"];
85 timeFormat?: TimeProps["format"];
86 timeIntervals?: TimeProps["intervals"];
87} & (({
88 showMonthYearDropdown: true;
89} & Pick<MonthYearDropdownProps, "maxDate" | "minDate">) | ({
90 showMonthYearDropdown?: never;
91} & Pick<YearDropdownProps, "maxDate" | "minDate"> & Pick<YearProps, "maxDate" | "minDate"> & Pick<MonthProps, "maxDate" | "minDate">));
92interface CalendarState extends Pick<YearProps, "selectingDate">, Pick<MonthProps, "selectingDate"> {
93 date: Required<YearProps>["date"];
94 monthContainer: TimeProps["monthRef"];
95 isRenderAriaLiveMessage: boolean;
96}
97export default class Calendar extends Component<CalendarProps, CalendarState> {
98 static get defaultProps(): {
99 monthsShown: number;
100 forceShowMonthNavigation: boolean;
101 timeCaption: string;
102 previousYearButtonLabel: string;
103 nextYearButtonLabel: string;
104 previousMonthButtonLabel: string;
105 nextMonthButtonLabel: string;
106 yearItemNumber: number;
107 };
108 constructor(props: CalendarProps);
109 componentDidMount(): void;
110 componentDidUpdate(prevProps: CalendarProps): void;
111 containerRef: React.RefObject<HTMLDivElement>;
112 monthContainer: CalendarState["monthContainer"];
113 assignMonthContainer: void | undefined;
114 handleClickOutside: (event: MouseEvent) => void;
115 setClickOutsideRef: () => HTMLDivElement | null;
116 handleDropdownFocus: (event: React.FocusEvent<HTMLDivElement>) => void;
117 getDateInView: () => Date;
118 increaseMonth: () => void;
119 decreaseMonth: () => void;
120 handleDayClick: (day: Date, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, monthSelectedIn?: number) => void;
121 handleDayMouseEnter: (day: Date) => void;
122 handleMonthMouseLeave: () => void;
123 handleYearMouseEnter: (event: React.MouseEvent<HTMLDivElement>, year: number) => void;
124 handleYearMouseLeave: (event: React.MouseEvent<HTMLDivElement>, year: number) => void;
125 handleYearChange: (date: Date) => void;
126 getEnabledPreSelectionDateForMonth: (date: Date) => Date | null;
127 handleMonthChange: (date: Date) => void;
128 handleCustomMonthChange: (date: Date) => void;
129 handleMonthYearChange: (date: Date) => void;
130 changeYear: (year: number) => void;
131 changeMonth: (month: number) => void;
132 changeMonthYear: (monthYear: Date) => void;
133 header: (date?: Date) => JSX.Element[];
134 formatWeekday: (day: Date, locale?: Locale) => string;
135 decreaseYear: () => void;
136 clearSelectingDate: () => void;
137 renderPreviousButton: () => JSX.Element | void;
138 increaseYear: () => void;
139 renderNextButton: () => JSX.Element | void;
140 renderCurrentMonth: (date?: Date) => JSX.Element;
141 renderYearDropdown: (overrideHide?: boolean) => JSX.Element | undefined;
142 renderMonthDropdown: (overrideHide?: boolean) => JSX.Element | undefined;
143 renderMonthYearDropdown: (overrideHide?: boolean) => JSX.Element | undefined;
144 handleTodayButtonClick: (event: React.MouseEvent<HTMLDivElement>) => void;
145 renderTodayButton: () => JSX.Element | undefined;
146 renderDefaultHeader: ({ monthDate, i }: {
147 monthDate: Date;
148 i: number;
149 }) => React.JSX.Element;
150 renderCustomHeader: (headerArgs: {
151 monthDate: Date;
152 i: number;
153 }) => React.JSX.Element | null;
154 renderYearHeader: ({ monthDate }: {
155 monthDate: Date;
156 }) => JSX.Element;
157 renderHeader: ({ monthDate, i, }: {
158 monthDate: Date;
159 i?: number;
160 }) => JSX.Element | null;
161 renderMonths: () => JSX.Element[] | undefined;
162 renderYears: () => JSX.Element | undefined;
163 renderTimeSection: () => JSX.Element | undefined;
164 renderInputTimeSection: () => JSX.Element | undefined;
165 renderAriaLiveRegion: () => JSX.Element;
166 renderChildren: () => JSX.Element | undefined;
167 render(): JSX.Element;
168}
169export {};