UNPKG

9.31 kBTypeScriptView Raw
1import React, { Component, cloneElement } from "react";
2import Calendar from "./calendar";
3import CalendarIcon from "./calendar_icon";
4import { registerLocale, setDefaultLocale, getDefaultLocale, type HighlightDate, type HolidayItem } from "./date_utils";
5import PopperComponent from "./popper_component";
6import Portal from "./portal";
7import type { ClickOutsideHandler } from "./click_outside_wrapper";
8export { default as CalendarContainer } from "./calendar_container";
9export { registerLocale, setDefaultLocale, getDefaultLocale };
10export { ReactDatePickerCustomHeaderProps } from "./calendar";
11interface Holiday {
12 date: string;
13 holidayName: string;
14}
15type CalendarProps = React.ComponentPropsWithoutRef<typeof Calendar>;
16interface CalendarIconProps extends React.ComponentPropsWithoutRef<typeof CalendarIcon> {
17}
18interface PortalProps extends React.ComponentPropsWithoutRef<typeof Portal> {
19}
20interface PopperComponentProps extends React.ComponentPropsWithoutRef<typeof PopperComponent> {
21}
22type OmitUnion<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
23export type DatePickerProps = OmitUnion<CalendarProps, "setOpen" | "dateFormat" | "preSelection" | "onSelect" | "onClickOutside" | "highlightDates" | "holidays" | "shouldFocusDayInline" | "outsideClickIgnoreClass" | "monthSelectedIn" | "onDropdownFocus" | "onTimeChange" | "className" | "container" | "handleOnKeyDown" | "handleOnDayKeyDown" | "isInputFocused" | "setPreSelection" | "selectsRange" | "selectsMultiple" | "dropdownMode"> & Pick<CalendarIconProps, "icon"> & OmitUnion<PortalProps, "children" | "portalId"> & OmitUnion<PopperComponentProps, "className" | "hidePopper" | "targetComponent" | "popperComponent" | "popperOnKeyDown" | "showArrow"> & {
24 dateFormatCalendar?: CalendarProps["dateFormat"];
25 calendarClassName?: CalendarProps["className"];
26 calendarContainer?: CalendarProps["container"];
27 dropdownMode?: CalendarProps["dropdownMode"];
28 onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
29 popperClassName?: PopperComponentProps["className"];
30 showPopperArrow?: PopperComponentProps["showArrow"];
31 open?: boolean;
32 disabled?: boolean;
33 readOnly?: boolean;
34 startOpen?: boolean;
35 onFocus?: React.FocusEventHandler<HTMLElement>;
36 onBlur?: React.FocusEventHandler<HTMLElement>;
37 onClickOutside?: ClickOutsideHandler;
38 onInputClick?: VoidFunction;
39 preventOpenOnFocus?: boolean;
40 closeOnScroll?: boolean | ((event: Event) => boolean);
41 isClearable?: boolean;
42 clearButtonTitle?: string;
43 clearButtonClassName?: string;
44 ariaLabelClose?: string;
45 className?: string;
46 customInput?: Parameters<typeof cloneElement>[0];
47 dateFormat?: string | string[];
48 showDateSelect?: boolean;
49 highlightDates?: (Date | HighlightDate)[];
50 onCalendarOpen?: VoidFunction;
51 onCalendarClose?: VoidFunction;
52 strictParsing?: boolean;
53 swapRange?: boolean;
54 onInputError?: (error: {
55 code: 1;
56 msg: string;
57 }) => void;
58 allowSameDay?: boolean;
59 withPortal?: boolean;
60 focusSelectedMonth?: boolean;
61 showIcon?: boolean;
62 calendarIconClassname?: never;
63 calendarIconClassName?: string;
64 toggleCalendarOnIconClick?: boolean;
65 holidays?: Holiday[];
66 startDate?: Date;
67 selected?: Date | null;
68 value?: string;
69 customInputRef?: string;
70 id?: string;
71 name?: string;
72 form?: string;
73 autoFocus?: boolean;
74 placeholderText?: string;
75 autoComplete?: string;
76 title?: string;
77 required?: boolean;
78 tabIndex?: number;
79 ariaDescribedBy?: string;
80 ariaInvalid?: string;
81 ariaLabelledBy?: string;
82 ariaRequired?: string;
83 onChangeRaw?: (event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
84 onSelect?: (date: Date | null, event?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => void;
85} & ({
86 selectsRange?: never;
87 selectsMultiple?: never;
88 onChange?: (date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
89} | {
90 selectsRange: true;
91 selectsMultiple?: never;
92 onChange?: (date: [Date | null, Date | null], event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
93} | {
94 selectsRange?: never;
95 selectsMultiple: true;
96 onChange?: (date: Date[] | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
97});
98interface DatePickerState {
99 open: boolean;
100 wasHidden: boolean;
101 lastPreSelectChange?: typeof PRESELECT_CHANGE_VIA_INPUT | typeof PRESELECT_CHANGE_VIA_NAVIGATE;
102 inputValue: string | null;
103 preventFocus: boolean;
104 preSelection?: CalendarProps["preSelection"];
105 shouldFocusDayInline?: CalendarProps["shouldFocusDayInline"];
106 monthSelectedIn?: CalendarProps["monthSelectedIn"];
107 focused?: CalendarProps["isInputFocused"];
108 highlightDates: Required<CalendarProps>["highlightDates"];
109 isRenderAriaLiveMessage?: boolean;
110}
111export default class DatePicker extends Component<DatePickerProps, DatePickerState> {
112 static get defaultProps(): {
113 allowSameDay: boolean;
114 dateFormat: string;
115 dateFormatCalendar: string;
116 disabled: boolean;
117 disabledKeyboardNavigation: boolean;
118 dropdownMode: "scroll";
119 preventOpenOnFocus: boolean;
120 monthsShown: number;
121 readOnly: boolean;
122 withPortal: boolean;
123 selectsDisabledDaysInRange: boolean;
124 shouldCloseOnSelect: boolean;
125 showTimeSelect: boolean;
126 showTimeInput: boolean;
127 showPreviousMonths: boolean;
128 showMonthYearPicker: boolean;
129 showFullMonthYearPicker: boolean;
130 showTwoColumnMonthYearPicker: boolean;
131 showFourColumnMonthYearPicker: boolean;
132 showYearPicker: boolean;
133 showQuarterYearPicker: boolean;
134 showWeekPicker: boolean;
135 strictParsing: boolean;
136 swapRange: boolean;
137 timeIntervals: number;
138 timeCaption: string;
139 previousMonthAriaLabel: string;
140 previousMonthButtonLabel: string;
141 nextMonthAriaLabel: string;
142 nextMonthButtonLabel: string;
143 previousYearAriaLabel: string;
144 previousYearButtonLabel: string;
145 nextYearAriaLabel: string;
146 nextYearButtonLabel: string;
147 timeInputLabel: string;
148 enableTabLoop: boolean;
149 yearItemNumber: number;
150 focusSelectedMonth: boolean;
151 showPopperArrow: boolean;
152 excludeScrollbar: boolean;
153 customTimeInput: null;
154 calendarStartDay: undefined;
155 toggleCalendarOnIconClick: boolean;
156 usePointerEvent: boolean;
157 };
158 constructor(props: DatePickerProps);
159 componentDidMount(): void;
160 componentDidUpdate(prevProps: DatePickerProps, prevState: DatePickerState): void;
161 componentWillUnmount(): void;
162 preventFocusTimeout: ReturnType<typeof setTimeout> | undefined;
163 inputFocusTimeout: ReturnType<typeof setTimeout> | undefined;
164 calendar: Calendar | null;
165 input: HTMLElement | null;
166 getPreSelection: () => Date;
167 modifyHolidays: () => HolidayItem[] | undefined;
168 calcInitialState: () => DatePickerState;
169 resetHiddenStatus: () => void;
170 setHiddenStatus: () => void;
171 setHiddenStateOnVisibilityHidden: () => void;
172 clearPreventFocusTimeout: () => void;
173 setFocus: () => void;
174 setBlur: () => void;
175 setOpen: (open: boolean, skipSetBlur?: boolean) => void;
176 inputOk: () => boolean;
177 isCalendarOpen: () => boolean;
178 handleFocus: (event: React.FocusEvent<HTMLElement>) => void;
179 sendFocusBackToInput: () => void;
180 cancelFocusInput: () => void;
181 deferFocusInput: () => void;
182 handleDropdownFocus: () => void;
183 handleBlur: (event: React.FocusEvent<HTMLElement>) => void;
184 handleCalendarClickOutside: (event: MouseEvent) => void;
185 handleChange: (event?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
186 handleSelect: (date: Date, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, monthSelectedIn?: number) => void;
187 setSelected: (date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, keepInput?: boolean, monthSelectedIn?: number) => void;
188 setPreSelection: (date?: Date | null) => void;
189 toggleCalendar: () => void;
190 handleTimeChange: (time: Date) => void;
191 onInputClick: () => void;
192 onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
193 onPortalKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
194 onDayKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
195 onPopperKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
196 onClearClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
197 clear: () => void;
198 onScroll: (event: Event) => void;
199 renderCalendar: () => React.JSX.Element | null;
200 renderAriaLiveRegion: () => React.JSX.Element;
201 renderDateInput: () => React.FunctionComponentElement<any>;
202 renderClearButton: () => JSX.Element | null;
203 renderInputContainer(): JSX.Element;
204 render(): JSX.Element | null;
205}
206declare const PRESELECT_CHANGE_VIA_INPUT = "input";
207declare const PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";