/
DesktopDateTimePicker.tsx
632 lines (619 loc) · 21.2 KB
/
DesktopDateTimePicker.tsx
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
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
import * as React from 'react';
import PropTypes from 'prop-types';
import { resolveComponentProps } from '@mui/base/utils';
import { refType } from '@mui/utils';
import Divider from '@mui/material/Divider';
import { singleItemValueManager } from '../internals/utils/valueManagers';
import { DateTimeField } from '../DateTimeField';
import { DesktopDateTimePickerProps } from './DesktopDateTimePicker.types';
import {
useDateTimePickerDefaultizedProps,
DateTimePickerViewRenderers,
} from '../DateTimePicker/shared';
import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers';
import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
import { validateDateTime } from '../internals/utils/validation/validateDateTime';
import { DateOrTimeViewWithMeridiem } from '../internals/models';
import { CalendarIcon } from '../icons';
import { UseDesktopPickerProps, useDesktopPicker } from '../internals/hooks/useDesktopPicker';
import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
import { PickerViewsRendererProps } from '../internals/hooks/usePicker';
import {
resolveDateTimeFormat,
resolveTimeViewsResponse,
} from '../internals/utils/date-time-utils';
import { PickersActionBarAction } from '../PickersActionBar';
import { PickerValidDate } from '../models';
import {
renderDigitalClockTimeView,
renderMultiSectionDigitalClockTimeView,
} from '../timeViewRenderers';
import {
DefaultizedProps,
UsePickerViewsProps,
VIEW_HEIGHT,
isDatePickerView,
isInternalTimeView,
} from '../internals';
import {
multiSectionDigitalClockClasses,
multiSectionDigitalClockSectionClasses,
} from '../MultiSectionDigitalClock';
import { digitalClockClasses } from '../DigitalClock';
import { DesktopDateTimePickerLayout } from './DesktopDateTimePickerLayout';
const rendererInterceptor = function rendererInterceptor<
TDate extends PickerValidDate,
TView extends DateOrTimeViewWithMeridiem,
TEnableAccessibleFieldDOMStructure extends boolean,
>(
inViewRenderers: DateTimePickerViewRenderers<TDate, DateOrTimeViewWithMeridiem, any>,
popperView: TView,
rendererProps: PickerViewsRendererProps<
TDate | null,
TView,
DefaultizedProps<
UseDesktopPickerProps<
TDate,
TView,
TEnableAccessibleFieldDOMStructure,
any,
UsePickerViewsProps<TDate | null, TDate, TView, any, {}>
>,
'openTo'
>,
{}
>,
) {
const { openTo, focusedView, timeViewsCount, ...otherProps } = rendererProps;
const finalProps = {
...otherProps,
focusedView: null,
sx: [
{
[`&.${multiSectionDigitalClockClasses.root}`]: {
borderBottom: 0,
},
[`&.${multiSectionDigitalClockClasses.root}, .${multiSectionDigitalClockSectionClasses.root}, &.${digitalClockClasses.root}`]:
{
maxHeight: VIEW_HEIGHT,
},
},
],
};
const isTimeViewActive = isInternalTimeView(popperView);
return (
<React.Fragment>
{inViewRenderers[!isTimeViewActive ? popperView : 'day']?.({
...rendererProps,
view: !isTimeViewActive ? popperView : 'day',
focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
views: rendererProps.views.filter(isDatePickerView),
sx: [{ gridColumn: 1 }, ...finalProps.sx],
})}
{timeViewsCount > 0 && (
<React.Fragment>
<Divider orientation="vertical" sx={{ gridColumn: 2 }} />
{inViewRenderers[isTimeViewActive ? popperView : 'hours']?.({
...finalProps,
view: isTimeViewActive ? popperView : 'hours',
focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
openTo: isInternalTimeView(openTo) ? openTo : 'hours',
views: rendererProps.views.filter(isInternalTimeView),
sx: [{ gridColumn: 3 }, ...finalProps.sx],
})}
</React.Fragment>
)}
</React.Fragment>
);
};
type DesktopDateTimePickerComponent = (<
TDate extends PickerValidDate,
TEnableAccessibleFieldDOMStructure extends boolean = false,
>(
props: DesktopDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure> &
React.RefAttributes<HTMLDivElement>,
) => React.JSX.Element) & { propTypes?: any };
/**
* Demos:
*
* - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
* - [Validation](https://mui.com/x/react-date-pickers/validation/)
*
* API:
*
* - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)
*/
const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker<
TDate extends PickerValidDate,
TEnableAccessibleFieldDOMStructure extends boolean,
>(
inProps: DesktopDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>,
ref: React.Ref<HTMLDivElement>,
) {
const localeText = useLocaleText<TDate>();
const utils = useUtils<TDate>();
// Props with the default values common to all date time pickers
const defaultizedProps = useDateTimePickerDefaultizedProps<
TDate,
DateOrTimeViewWithMeridiem,
DesktopDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>
>(inProps, 'MuiDesktopDateTimePicker');
const {
shouldRenderTimeInASingleColumn,
thresholdToRenderTimeInASingleColumn,
views: resolvedViews,
timeSteps,
} = resolveTimeViewsResponse<TDate>(defaultizedProps);
const renderTimeView = shouldRenderTimeInASingleColumn
? renderDigitalClockTimeView
: renderMultiSectionDigitalClockTimeView;
const viewRenderers: DateTimePickerViewRenderers<TDate, DateOrTimeViewWithMeridiem, any> = {
day: renderDateViewCalendar,
month: renderDateViewCalendar,
year: renderDateViewCalendar,
hours: renderTimeView,
minutes: renderTimeView,
seconds: renderTimeView,
meridiem: renderTimeView,
...defaultizedProps.viewRenderers,
};
const ampmInClock = defaultizedProps.ampmInClock ?? true;
// Need to avoid adding the `meridiem` view when unexpected renderer is specified
const shouldHoursRendererContainMeridiemView =
viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
const views = !shouldHoursRendererContainMeridiemView
? resolvedViews.filter((view) => view !== 'meridiem')
: resolvedViews;
const actionBarActions: PickersActionBarAction[] = shouldRenderTimeInASingleColumn
? []
: ['accept'];
// Props with the default values specific to the desktop variant
const props = {
...defaultizedProps,
viewRenderers,
format: resolveDateTimeFormat(utils, defaultizedProps),
views,
yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
ampmInClock,
timeSteps,
thresholdToRenderTimeInASingleColumn,
shouldRenderTimeInASingleColumn,
slots: {
field: DateTimeField,
layout: DesktopDateTimePickerLayout,
openPickerIcon: CalendarIcon,
...defaultizedProps.slots,
},
slotProps: {
...defaultizedProps.slotProps,
field: (ownerState: any) => ({
...resolveComponentProps(defaultizedProps.slotProps?.field, ownerState),
...extractValidationProps(defaultizedProps),
ref,
}),
toolbar: {
hidden: true,
ampmInClock,
toolbarVariant: 'desktop',
...defaultizedProps.slotProps?.toolbar,
},
tabs: {
hidden: true,
...defaultizedProps.slotProps?.tabs,
},
actionBar: (ownerState: any) => ({
actions: actionBarActions,
...resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState),
}),
},
};
const { renderPicker } = useDesktopPicker<
TDate,
DateOrTimeViewWithMeridiem,
TEnableAccessibleFieldDOMStructure,
typeof props
>({
props,
valueManager: singleItemValueManager,
valueType: 'date-time',
getOpenDialogAriaText:
props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
validator: validateDateTime,
rendererInterceptor,
});
return renderPicker();
}) as DesktopDateTimePickerComponent;
DesktopDateTimePicker.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* 12h/24h view for hour selection clock.
* @default utils.is12HourCycleInCurrentLocale()
*/
ampm: PropTypes.bool,
/**
* Display ampm controls under the clock (instead of in the toolbar).
* @default true on desktop, false on mobile
*/
ampmInClock: PropTypes.bool,
/**
* If `true`, the main element is focused during the first mount.
* This main element is:
* - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
* - the `input` element if there is a field rendered.
*/
autoFocus: PropTypes.bool,
className: PropTypes.string,
/**
* If `true`, the popover or modal will close after submitting the full date.
* @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
*/
closeOnSelect: PropTypes.bool,
/**
* Formats the day of week displayed in the calendar header.
* @param {TDate} date The date of the day of week provided by the adapter.
* @returns {string} The name to display.
* @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
*/
dayOfWeekFormatter: PropTypes.func,
/**
* The default value.
* Used when the component is not controlled.
*/
defaultValue: PropTypes.object,
/**
* If `true`, the picker and text field are disabled.
* @default false
*/
disabled: PropTypes.bool,
/**
* If `true`, disable values after the current date for date components, time for time components and both for date time components.
* @default false
*/
disableFuture: PropTypes.bool,
/**
* If `true`, today's date is rendering without highlighting with circle.
* @default false
*/
disableHighlightToday: PropTypes.bool,
/**
* Do not ignore date part when validating min/max time.
* @default false
*/
disableIgnoringDatePartForTimeValidation: PropTypes.bool,
/**
* If `true`, the open picker button will not be rendered (renders only the field).
* @default false
*/
disableOpenPicker: PropTypes.bool,
/**
* If `true`, disable values before the current date for date components, time for time components and both for date time components.
* @default false
*/
disablePast: PropTypes.bool,
/**
* If `true`, the week number will be display in the calendar.
*/
displayWeekNumber: PropTypes.bool,
/**
* @default false
*/
enableAccessibleFieldDOMStructure: PropTypes.any,
/**
* The day view will show as many weeks as needed after the end of the current month to match this value.
* Put it to 6 to have a fixed number of weeks in Gregorian calendars
*/
fixedWeekNumber: PropTypes.number,
/**
* Format of the date when rendered in the input(s).
* Defaults to localized format based on the used `views`.
*/
format: PropTypes.string,
/**
* Density of the format when rendered in the input.
* Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
* @default "dense"
*/
formatDensity: PropTypes.oneOf(['dense', 'spacious']),
/**
* Pass a ref to the `input` element.
*/
inputRef: refType,
/**
* The label content.
*/
label: PropTypes.node,
/**
* If `true`, calls `renderLoading` instead of rendering the day calendar.
* Can be used to preload information and show it in calendar.
* @default false
*/
loading: PropTypes.bool,
/**
* Locale for components texts.
* Allows overriding texts coming from `LocalizationProvider` and `theme`.
*/
localeText: PropTypes.object,
/**
* Maximal selectable date.
*/
maxDate: PropTypes.object,
/**
* Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
*/
maxDateTime: PropTypes.object,
/**
* Maximal selectable time.
* The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
*/
maxTime: PropTypes.object,
/**
* Minimal selectable date.
*/
minDate: PropTypes.object,
/**
* Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
*/
minDateTime: PropTypes.object,
/**
* Minimal selectable time.
* The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
*/
minTime: PropTypes.object,
/**
* Step over minutes.
* @default 1
*/
minutesStep: PropTypes.number,
/**
* Months rendered per row.
* @default 3
*/
monthsPerRow: PropTypes.oneOf([3, 4]),
/**
* Name attribute used by the `input` element in the Field.
*/
name: PropTypes.string,
/**
* Callback fired when the value is accepted.
* @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
* @param {TValue} value The value that was just accepted.
*/
onAccept: PropTypes.func,
/**
* Callback fired when the value changes.
* @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
* @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
* @param {TValue} value The new value.
* @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
*/
onChange: PropTypes.func,
/**
* Callback fired when the popup requests to be closed.
* Use in controlled mode (see `open`).
*/
onClose: PropTypes.func,
/**
* Callback fired when the error associated to the current value changes.
* If the error has a non-null value, then the `TextField` will be rendered in `error` state.
*
* @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
* @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
* @param {TError} error The new error describing why the current value is not valid.
* @param {TValue} value The value associated to the error.
*/
onError: PropTypes.func,
/**
* Callback fired on month change.
* @template TDate
* @param {TDate} month The new month.
*/
onMonthChange: PropTypes.func,
/**
* Callback fired when the popup requests to be opened.
* Use in controlled mode (see `open`).
*/
onOpen: PropTypes.func,
/**
* Callback fired when the selected sections change.
* @param {FieldSelectedSections} newValue The new selected sections.
*/
onSelectedSectionsChange: PropTypes.func,
/**
* Callback fired on view change.
* @template TView
* @param {TView} view The new view.
*/
onViewChange: PropTypes.func,
/**
* Callback fired on year change.
* @template TDate
* @param {TDate} year The new year.
*/
onYearChange: PropTypes.func,
/**
* Control the popup or dialog open state.
* @default false
*/
open: PropTypes.bool,
/**
* The default visible view.
* Used when the component view is not controlled.
* Must be a valid option from `views` list.
*/
openTo: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
/**
* Force rendering in particular orientation.
*/
orientation: PropTypes.oneOf(['landscape', 'portrait']),
readOnly: PropTypes.bool,
/**
* If `true`, disable heavy animations.
* @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
*/
reduceAnimations: PropTypes.bool,
/**
* The date used to generate the new value when both `value` and `defaultValue` are empty.
* @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
*/
referenceDate: PropTypes.object,
/**
* Component displaying when passed `loading` true.
* @returns {React.ReactNode} The node to render when loading.
* @default () => <span data-mui-test="loading-progress">...</span>
*/
renderLoading: PropTypes.func,
/**
* The currently selected sections.
* This prop accepts four formats:
* 1. If a number is provided, the section at this index will be selected.
* 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
* 3. If `"all"` is provided, all the sections will be selected.
* 4. If `null` is provided, no section will be selected.
* If not provided, the selected sections will be handled internally.
*/
selectedSections: PropTypes.oneOfType([
PropTypes.oneOf([
'all',
'day',
'empty',
'hours',
'meridiem',
'minutes',
'month',
'seconds',
'weekDay',
'year',
]),
PropTypes.number,
]),
/**
* Disable specific date.
*
* Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
*
* @template TDate
* @param {TDate} day The date to test.
* @returns {boolean} If `true` the date will be disabled.
*/
shouldDisableDate: PropTypes.func,
/**
* Disable specific month.
* @template TDate
* @param {TDate} month The month to test.
* @returns {boolean} If `true`, the month will be disabled.
*/
shouldDisableMonth: PropTypes.func,
/**
* Disable specific time.
* @template TDate
* @param {TDate} value The value to check.
* @param {TimeView} view The clock type of the timeValue.
* @returns {boolean} If `true` the time will be disabled.
*/
shouldDisableTime: PropTypes.func,
/**
* Disable specific year.
* @template TDate
* @param {TDate} year The year to test.
* @returns {boolean} If `true`, the year will be disabled.
*/
shouldDisableYear: PropTypes.func,
/**
* If `true`, days outside the current month are rendered:
*
* - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
*
* - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
*
* - ignored if `calendars` equals more than `1` on range pickers.
* @default false
*/
showDaysOutsideCurrentMonth: PropTypes.bool,
/**
* If `true`, disabled digital clock items will not be rendered.
* @default false
*/
skipDisabled: PropTypes.bool,
/**
* The props used for each component slot.
* @default {}
*/
slotProps: PropTypes.object,
/**
* Overridable component slots.
* @default {}
*/
slots: PropTypes.object,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
PropTypes.func,
PropTypes.object,
]),
/**
* Amount of time options below or at which the single column time renderer is used.
* @default 24
*/
thresholdToRenderTimeInASingleColumn: PropTypes.number,
/**
* The time steps between two time unit options.
* For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
* When single column time renderer is used, only `timeStep.minutes` will be used.
* @default{ hours: 1, minutes: 5, seconds: 5 }
*/
timeSteps: PropTypes.shape({
hours: PropTypes.number,
minutes: PropTypes.number,
seconds: PropTypes.number,
}),
/**
* Choose which timezone to use for the value.
* Example: "default", "system", "UTC", "America/New_York".
* If you pass values from other timezones to some props, they will be converted to this timezone before being used.
* @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
* @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
*/
timezone: PropTypes.string,
/**
* The selected value.
* Used when the component is controlled.
*/
value: PropTypes.object,
/**
* The visible view.
* Used when the component view is controlled.
* Must be a valid option from `views` list.
*/
view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
/**
* Define custom view renderers for each section.
* If `null`, the section will only have field editing.
* If `undefined`, internally defined view will be used.
*/
viewRenderers: PropTypes.shape({
day: PropTypes.func,
hours: PropTypes.func,
meridiem: PropTypes.func,
minutes: PropTypes.func,
month: PropTypes.func,
seconds: PropTypes.func,
year: PropTypes.func,
}),
/**
* Available views.
*/
views: PropTypes.arrayOf(
PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired,
),
/**
* Years rendered per row.
* @default 4
*/
yearsPerRow: PropTypes.oneOf([3, 4]),
} as any;
export { DesktopDateTimePicker };