-
-
Notifications
You must be signed in to change notification settings - Fork 697
/
DayPickerBase.ts
361 lines (336 loc) · 11.9 KB
/
DayPickerBase.ts
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
import { CSSProperties, ReactNode } from "react";
import { Locale } from "date-fns";
import { CaptionLayout, CaptionProps } from "../components/Caption";
import { CaptionLabelProps } from "../components/CaptionLabel";
import { DayProps } from "../components/Day";
import { DayContentProps } from "../components/DayContent";
import { DropdownProps } from "../components/Dropdown";
import { FooterProps } from "../components/Footer";
import { MonthsProps } from "../components/Months";
import { RowProps } from "../components/Row";
import { WeekNumberProps } from "../components/WeekNumber";
import {
DayClickEventHandler,
DayFocusEventHandler,
DayKeyboardEventHandler,
DayMouseEventHandler,
DayPointerEventHandler,
DayTouchEventHandler,
MonthChangeEventHandler,
WeekNumberClickEventHandler
} from "./EventHandlers";
import { Formatters } from "./Formatters";
import { Labels } from "./Labels";
import { Matcher } from "./Matchers";
import {
DayModifiers,
ModifiersClassNames,
ModifiersStyles
} from "./Modifiers";
import { ClassNames, StyledComponent, Styles } from "./Styles";
/**
* Selection modes supported by DayPicker.
*
* - `single`: use DayPicker to select single days.
* - `multiple`: allow selecting multiple days.
* - `range`: use DayPicker to select a range of days
* - `default`: disable the built-in selection behavior. Customize what is
* selected by using {@link DayPickerBase.onDayClick}.
*/
export type DaySelectionMode = "single" | "multiple" | "range" | "default";
/**
* The base props for the {@link DayPicker} component and the
* {@link DayPickerContext}.
*/
export interface DayPickerBase {
/**
* The CSS class to add to the container element. To change the name of the
* class instead, use `classNames.root`.
*/
className?: string;
/**
* Change the class names of the HTML elements.
*
* Use this prop when you need to change the default class names — for example
* when using CSS modules.
*/
classNames?: ClassNames;
/** Change the class name for the day matching the {@link modifiers}. */
modifiersClassNames?: ModifiersClassNames;
/** Style to apply to the container element. */
style?: CSSProperties;
/** Change the inline styles of the HTML elements. */
styles?: Styles;
/** Change the inline style for the day matching the {@link modifiers}. */
modifiersStyles?: ModifiersStyles;
/**
* A unique id to replace the random generated id – used by DayPicker for
* accessibility.
*/
id?: string;
/**
* The initial month to show in the calendar. Use this prop to let DayPicker
* control the current month. If you need to set the month programmatically,
* use {@link month]] and [[onMonthChange}.
*
* @defaultValue The current month
*/
defaultMonth?: Date;
/**
* The month displayed in the calendar.
*
* As opposed to {@link DayPickerBase.defaultMonth}, use this prop with
* {@link DayPickerBase.onMonthChange} to change the month programmatically.
*/
month?: Date;
/** Event fired when the user navigates between months. */
onMonthChange?: MonthChangeEventHandler;
/**
* The number of displayed months.
*
* @defaultValue 1
*/
numberOfMonths?: number;
/** The earliest day to start the month navigation. */
fromDate?: Date;
/** The latest day to end the month navigation. */
toDate?: Date;
/** The earliest month to start the month navigation. */
fromMonth?: Date;
/** The latest month to end the month navigation. */
toMonth?: Date;
/** The earliest year to start the month navigation. */
fromYear?: number;
/** The latest year to end the month navigation. */
toYear?: number;
/**
* Disable the navigation between months.
*
* @defaultValue false
*/
disableNavigation?: boolean;
/**
* Paginate the month navigation displaying the {@link numberOfMonths} at time.
*
* @defaultValue false
*/
pagedNavigation?: boolean;
/**
* Render the months in reversed order (when {@link numberOfMonths} is greater
* than `1`) to display the most recent month first.
*
* @defaultValue false
*/
reverseMonths?: boolean;
/**
* Change the layout of the caption:
*
* - `buttons`: display prev/right buttons
* - `dropdown`: display drop-downs to change the month and the year
*
* **Note:** the `dropdown` layout is available only when `fromDate`,
* `fromMonth` or`fromYear` and `toDate`, `toMonth` or `toYear` are set.
*
* @defaultValue buttons
*/
captionLayout?: CaptionLayout;
/**
* Display six weeks per months, regardless the month’s number of weeks. To
* use this prop, {@link showOutsideDays} must be set.
*
* @defaultValue false
*/
fixedWeeks?: boolean;
/**
* Hide the month’s head displaying the weekday names.
*
* @defaultValue false
*/
hideHead?: boolean;
/**
* Show the outside days. An outside day is a day falling in the next or the
* previous month.
*
* @defaultValue false
*/
showOutsideDays?: boolean;
/**
* Show the week numbers column. Weeks are numbered according to the local
* week index.
*
* - To use ISO week numbering, use the {@link ISOWeek} prop.
* - To change how the week numbers are displayed, use the {@link Formatters}
* prop.
*
* @defaultValue false
* @see {@link ISOWeek} , {@link weekStartsOn} and {@link firstWeekContainsDate}.
*/
showWeekNumber?: boolean;
/**
* The index of the first day of the week (0 - Sunday). Overrides the locale's
* one.
*
* @see {@link ISOWeek} .
*/
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
/**
* The day of January, which is always in the first week of the year. Can be
* either Monday (`1`) or Thursday (`4`).
*
* @see https://date-fns.org/docs/getWeek
* @see https://en.wikipedia.org/wiki/Week#Numbering
* @see {@link ISOWeek} .
*/
firstWeekContainsDate?: 1 | 4;
/**
* Use ISO week dates instead of the locale setting. Setting this prop will
* ignore {@link weekStartsOn} and {@link firstWeekContainsDate}.
*
* @see https://en.wikipedia.org/wiki/ISO_week_date
*/
ISOWeek?: boolean;
/**
* Map of components used to create the layout. Look at the [components
* source](https://github.com/gpbl/react-day-picker/tree/main/src/components)
* to understand how internal components are built and provide your custom
* components.
*/
components?: CustomComponents;
/** Content to add to the table footer element. */
footer?: ReactNode;
/**
* When a selection mode is set, DayPicker will focus the first selected day
* (if set) or the today's date (if not disabled).
*
* Use this prop when you need to focus DayPicker after a user actions, for
* improved accessibility.
*/
initialFocus?: boolean;
/** Apply the `disabled` modifier to the matching days. */
disabled?: Matcher | Matcher[] | undefined;
/**
* Apply the `hidden` modifier to the matching days. Will hide them from the
* calendar.
*/
hidden?: Matcher | Matcher[] | undefined;
/** Apply the `selected` modifier to the matching days. */
selected?: Matcher | Matcher[] | undefined;
/**
* The today’s date. Default is the current date. This Date will get the
* `today` modifier to style the day.
*/
today?: Date;
/** Add modifiers to the matching days. */
modifiers?: DayModifiers;
/**
* The date-fns locale object used to localize dates.
*
* @defaultValue en-US
*/
locale?: Locale;
/**
* Labels creators to override the defaults. Use this prop to customize the
* ARIA labels attributes.
*/
labels?: Partial<Labels>;
/**
* A map of formatters. Use the formatters to override the default formatting
* functions.
*/
formatters?: Partial<Formatters>;
/**
* The text direction of the calendar. Use `ltr` for left-to-right (default)
* or `rtl` for right-to-left.
*/
dir?: HTMLDivElement["dir"];
/**
* A cryptographic nonce ("number used once") which can be used by Content
* Security Policy for the inline `style` attributes.
*/
nonce?: HTMLDivElement["nonce"];
/** Add a `title` attribute to the container element. */
title?: HTMLDivElement["title"];
/** Add the language tag to the container element. */
lang?: HTMLDivElement["lang"];
/** Event callback fired when the next month button is clicked. */
onNextClick?: MonthChangeEventHandler;
/** Event callback fired when the previous month button is clicked. */
onPrevClick?: MonthChangeEventHandler;
/**
* Event callback fired when the week number is clicked. Requires
* `showWeekNumbers` set.
*/
onWeekNumberClick?: WeekNumberClickEventHandler;
/** Event callback fired when the user clicks on a day. */
onDayClick?: DayClickEventHandler;
/** Event callback fired when the user focuses on a day. */
onDayFocus?: DayFocusEventHandler;
/** Event callback fired when the user blurs from a day. */
onDayBlur?: DayFocusEventHandler;
/** Event callback fired when the user hovers on a day. */
onDayMouseEnter?: DayMouseEventHandler;
/** Event callback fired when the user hovers away from a day. */
onDayMouseLeave?: DayMouseEventHandler;
/** Event callback fired when the user presses a key on a day. */
onDayKeyDown?: DayKeyboardEventHandler;
/** Event callback fired when the user presses a key on a day. */
onDayKeyUp?: DayKeyboardEventHandler;
/** Event callback fired when the user presses a key on a day. */
onDayKeyPress?: DayKeyboardEventHandler;
/** Event callback fired when the pointer enters a day. */
onDayPointerEnter?: DayPointerEventHandler;
/** Event callback fired when the pointer leaves a day. */
onDayPointerLeave?: DayPointerEventHandler;
/** Event callback when a day touch event is canceled. */
onDayTouchCancel?: DayTouchEventHandler;
/** Event callback when a day touch event ends. */
onDayTouchEnd?: DayTouchEventHandler;
/** Event callback when a day touch event moves. */
onDayTouchMove?: DayTouchEventHandler;
/** Event callback when a day touch event starts. */
onDayTouchStart?: DayTouchEventHandler;
}
/**
* Map of the components that can be changed using the `components` prop.
*
* @see https://github.com/gpbl/react-day-picker/tree/main/src/components
*/
export interface CustomComponents {
/** The component for the caption element. */
Caption?: (props: CaptionProps) => JSX.Element | null;
/** The component for the caption element. */
CaptionLabel?: (props: CaptionLabelProps) => JSX.Element | null;
/**
* The component for the day element.
*
* Each `Day` in DayPicker should render one of the following, according to
* the return value of {@link useDayRender}.
*
* - An empty `Fragment`, to render if `isHidden` is true
* - A `button` element, when the day is interactive, e.g. is selectable
* - A `div` or a `span` element, when the day is not interactive
*/
Day?: (props: DayProps) => JSX.Element | null;
/** The component for the content of the day element. */
DayContent?: (props: DayContentProps) => JSX.Element | null;
/** The component for the drop-down elements. */
Dropdown?: (props: DropdownProps) => JSX.Element | null;
/** The component for the table footer. */
Footer?: (props: FooterProps) => JSX.Element | null;
/** The component for the table’s head. */
Head?: () => JSX.Element | null;
/** The component for the table’s head row. */
HeadRow?: () => JSX.Element | null;
/** The component for the small icon in the drop-downs. */
IconDropdown?: (props: StyledComponent) => JSX.Element | null;
/** The arrow right icon (used for the Navigation buttons). */
IconRight?: (props: StyledComponent) => JSX.Element | null;
/** The arrow left icon (used for the Navigation buttons). */
IconLeft?: (props: StyledComponent) => JSX.Element | null;
/** The component wrapping the month grids. */
Months?: (props: MonthsProps) => JSX.Element | null;
/** The component for the table rows. */
Row?: (props: RowProps) => JSX.Element | null;
/** The component for the week number in the table rows. */
WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
}