Dynamically update PickersToolbar viewType

mui · Feb 14, 2023 · 4f136fa · 4f136fa
1 parent 5911db3
commit 4f136fa
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 11 deletions.
diff --git 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<TDate> extends BaseToolbarProps<TDate, TDate | null> {
  classes?: Partial<DateTimePickerToolbarClasses>;
@@ -122,6 +123,7 @@ export function DateTimePickerToolbar<TDate extends unknown>(
  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
@@ -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<any, any, any>
  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
@@ -13,14 +13,15 @@ import {
  pickersToolbarClasses,
  PickersToolbarClasses,
 } from './pickersToolbarClasses';
+import { ViewType } from '../models';
 
 export interface PickersToolbarProps<TDate, TValue>
  extends Pick<
  BaseToolbarProps<TDate, TValue>,
  '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<any, any>;
 }>({});
 
-const getViewTypeIcon = (viewType: 'calendar' | 'clock') =>
+const getViewTypeIcon = (viewType: ViewType) =>
  viewType === 'clock' ? <Clock color="inherit" /> : <Calendar color="inherit" />;
 
 type PickersToolbarComponent = (<TDate, TValue>(

diff --git 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<TDate, TValue>
  * 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<TDate>;

diff --git 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
@@ -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<TDate> {
  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,