diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx index b7b1bb7d8c57..e5efff44c03d 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -11,6 +11,7 @@ import { DateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass, } from './dateTimePickerToolbarClasses'; +import { resolveViewTypeFromView } from './shared'; export interface DateTimePickerToolbarProps extends BaseToolbarProps { classes?: Partial; @@ -122,6 +123,7 @@ export function DateTimePickerToolbar( isMobileKeyboardViewOpen={isMobileKeyboardViewOpen} toggleMobileKeyboardView={toggleMobileKeyboardView} className={classes.root} + viewType={resolveViewTypeFromView(openView)} {...other} isLandscape={false} ownerState={ownerState} diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.ts b/packages/x-date-pickers/src/DateTimePicker/shared.ts index ba17d6ce4e16..71ee2acf0cb0 100644 --- a/packages/x-date-pickers/src/DateTimePicker/shared.ts +++ b/packages/x-date-pickers/src/DateTimePicker/shared.ts @@ -7,7 +7,7 @@ import { DateTimeValidationError } from '../internals/hooks/validation/useDateTi import { ValidationProps } from '../internals/hooks/validation/useValidation'; import { BasePickerProps } from '../internals/models/props/basePickerProps'; import { ExportedDateInputProps } from '../internals/components/PureDateInput'; -import { CalendarOrClockPickerView } from '../internals/models'; +import { CalendarOrClockPickerView, ViewType } from '../internals/models'; import { PickerStateValueManager } from '../internals/hooks/usePickerState'; import { parsePickerInputValue, parseNonNullablePickerDate } from '../internals/utils/date-utils'; import { BaseToolbarProps } from '../internals/models/props/baseToolbarProps'; @@ -146,3 +146,14 @@ export const dateTimePickerValueManager: PickerStateValueManager parseInput: parsePickerInputValue, areValuesEqual: (utils, a, b) => utils.isEqual(a, b), }; + +export const resolveViewTypeFromView = (view: CalendarOrClockPickerView): ViewType => { + switch (view) { + case 'year': + case 'month': + case 'day': + return 'calendar'; + default: + return 'clock'; + } +}; diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx index 3145e606656a..82b9c61cd52e 100644 --- a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx @@ -13,6 +13,7 @@ import { pickersToolbarClasses, PickersToolbarClasses, } from './pickersToolbarClasses'; +import { ViewType } from '../models'; export interface PickersToolbarProps extends Pick< @@ -20,7 +21,7 @@ export interface PickersToolbarProps 'getMobileKeyboardInputViewButtonText' | 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView' > { className?: string; - viewType?: 'calendar' | 'clock'; + viewType?: ViewType; isLandscape: boolean; landscapeDirection?: 'row' | 'column'; toolbarTitle: React.ReactNode; @@ -83,7 +84,7 @@ const PickersToolbarPenIconButton = styled(IconButton, { ownerState: PickersToolbarProps; }>({}); -const getViewTypeIcon = (viewType: 'calendar' | 'clock') => +const getViewTypeIcon = (viewType: ViewType) => viewType === 'clock' ? : ; type PickersToolbarComponent = (( diff --git a/packages/x-date-pickers/src/internals/models/props/baseToolbarProps.ts b/packages/x-date-pickers/src/internals/models/props/baseToolbarProps.ts index 8f275ccedf87..07990ed7e246 100644 --- a/packages/x-date-pickers/src/internals/models/props/baseToolbarProps.ts +++ b/packages/x-date-pickers/src/internals/models/props/baseToolbarProps.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { CalendarOrClockPickerView } from '../views'; +import { CalendarOrClockPickerView, ViewType } from '../views'; import type { PickerOnChangeFn } from '../../hooks/useViews'; import type { ExportedCalendarPickerProps } from '../../../CalendarPicker/CalendarPicker'; import type { ExportedClockPickerProps } from '../../../ClockPicker/ClockPicker'; @@ -15,12 +15,12 @@ export interface BaseToolbarProps * Text for aria label of the button switching between input and interactive view. * @deprecated Use the translation key `inputModeToggleButtonAriaLabel` instead, see https://mui.com/x/react-date-pickers/localization * @param {boolean} isKeyboardInputOpen Indicates if the interface is the keyboard input. - * @param {'calendar' | 'clock' } viewType Indicates if the interface is about a date or a time. + * @param {ViewType} viewType Indicates if the interface is about a date or a time. * @returns {string} The arial label */ getMobileKeyboardInputViewButtonText?: ( isKeyboardInputOpen: boolean, - viewType: 'calendar' | 'clock', + viewType: ViewType, ) => string; isLandscape: boolean; onChange: PickerOnChangeFn; diff --git a/packages/x-date-pickers/src/internals/models/views.ts b/packages/x-date-pickers/src/internals/models/views.ts index 1cc58a317038..82f95a4a8092 100644 --- a/packages/x-date-pickers/src/internals/models/views.ts +++ b/packages/x-date-pickers/src/internals/models/views.ts @@ -3,3 +3,5 @@ export type CalendarPickerView = 'year' | 'day' | 'month'; export type ClockPickerView = 'hours' | 'minutes' | 'seconds'; export type CalendarOrClockPickerView = CalendarPickerView | ClockPickerView; + +export type ViewType = 'calendar' | 'clock'; diff --git a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts index 8b4c40bb7be2..2521ea9d6082 100644 --- a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts +++ b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts @@ -1,4 +1,9 @@ -import { CalendarPickerView, ClockPickerView, MuiPickersAdapter } from '../../internals/models'; +import { + CalendarPickerView, + ClockPickerView, + MuiPickersAdapter, + ViewType, +} from '../../internals/models'; /** * Set the types of the texts in the grid. */ @@ -14,10 +19,7 @@ export interface PickersLocaleText { start: string; end: string; calendarViewSwitchingButtonAriaLabel: (currentView: CalendarPickerView) => string; - inputModeToggleButtonAriaLabel: ( - isKeyboardInputOpen: boolean, - viewType: 'calendar' | 'clock', - ) => string; + inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: ViewType) => string; clockLabelText: ( view: ClockPickerView, time: TDate | null,