1 | import React, { Component } from "react";
|
2 | import { type Locale } from "./date_utils";
|
3 | import InputTime from "./input_time";
|
4 | import Month from "./month";
|
5 | import MonthDropdown from "./month_dropdown";
|
6 | import MonthYearDropdown from "./month_year_dropdown";
|
7 | import Time from "./time";
|
8 | import Year from "./year";
|
9 | import YearDropdown from "./year_dropdown";
|
10 | import type { ClickOutsideHandler } from "./click_outside_wrapper";
|
11 | import type { Day } from "date-fns";
|
12 | interface YearDropdownProps extends React.ComponentPropsWithoutRef<typeof YearDropdown> {
|
13 | }
|
14 | interface MonthDropdownProps extends React.ComponentPropsWithoutRef<typeof MonthDropdown> {
|
15 | }
|
16 | interface MonthYearDropdownProps extends React.ComponentPropsWithoutRef<typeof MonthYearDropdown> {
|
17 | }
|
18 | interface YearProps extends React.ComponentPropsWithoutRef<typeof Year> {
|
19 | }
|
20 | interface MonthProps extends React.ComponentPropsWithoutRef<typeof Month> {
|
21 | }
|
22 | interface TimeProps extends React.ComponentPropsWithoutRef<typeof Time> {
|
23 | }
|
24 | interface InputTimeProps extends React.ComponentPropsWithoutRef<typeof InputTime> {
|
25 | }
|
26 | export 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 | }
|
41 | type 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">));
|
92 | interface CalendarState extends Pick<YearProps, "selectingDate">, Pick<MonthProps, "selectingDate"> {
|
93 | date: Required<YearProps>["date"];
|
94 | monthContainer: TimeProps["monthRef"];
|
95 | isRenderAriaLiveMessage: boolean;
|
96 | }
|
97 | export 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 | }
|
169 | export {};
|