Replace all the opening methods with setOpen

mui · Dec 4, 2024 · 26b4206 · 26b4206
1 parent aeddc0d
commit 26b4206
Show file tree

Hide file tree

Showing 20 changed files with 78 additions and 83 deletions.
diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.js b/docs/data/date-pickers/calendar-systems/AdapterHijri.js
@@ -54,7 +54,7 @@ function ButtonDateTimeField(props) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={pickerContext.onToggleOpening}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx b/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx
@@ -58,7 +58,7 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={pickerContext.onToggleOpening}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js
@@ -99,7 +99,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
     ...textFieldProps.InputProps,
     endAdornment: (
       <InputAdornment position="end">
-        <IconButton onClick={pickerContext.onToggleOpening}>
+        <IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
           <DateRangeIcon />
         </IconButton>
       </InputAdornment>

diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx
@@ -127,7 +127,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
       ...textFieldProps.InputProps,
       endAdornment: (
         <InputAdornment position="end">
-          <IconButton onClick={pickerContext.onToggleOpening}>
+          <IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
             <DateRangeIcon />
           </IconButton>
         </InputAdornment>

diff --git a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js
@@ -98,7 +98,7 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => {
       ref={ref}
       endDecorator={
         <IconButton
-          onClick={pickerContext.onToggleOpening}
+          onClick={() => pickerContext.setOpen((prev) => !prev)}
           variant="plain"
           color="neutral"
           sx={{ marginLeft: 2.5 }}

diff --git a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx
@@ -129,7 +129,7 @@ const JoySingleInputDateRangeField = React.forwardRef(
         ref={ref}
         endDecorator={
           <IconButton
-            onClick={pickerContext.onToggleOpening}
+            onClick={() => pickerContext.setOpen((prev) => !prev)}
             variant="plain"
             color="neutral"
             sx={{ marginLeft: 2.5 }}

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
@@ -42,7 +42,7 @@ function ButtonDateField(props) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={pickerContext.onToggleOpening}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
@@ -46,7 +46,7 @@ function ButtonDateField(props: DatePickerFieldProps) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={pickerContext.onToggleOpening}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js
@@ -46,7 +46,7 @@ function ButtonDateRangeField(props) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={pickerContext.onToggleOpening}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${formattedValue}` : formattedValue}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx
@@ -50,7 +50,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={pickerContext.onToggleOpening}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${formattedValue}` : formattedValue}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js
@@ -38,7 +38,7 @@ function ReadOnlyDateField(props) {
         sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
       }}
       error={hasValidationError}
-      onClick={pickerContext.onToggleOpening}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     />
   );
 }

diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx
@@ -42,7 +42,7 @@ function ReadOnlyDateField(props: DatePickerFieldProps) {
         sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
       }}
       error={hasValidationError}
-      onClick={pickerContext.onToggleOpening}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     />
   );
 }

diff --git a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx
@@ -35,7 +35,7 @@ function ButtonDateField(props: DatePickerFieldProps) {
       fullWidth
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={pickerContext.onToggleOpening}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx
@@ -3,6 +3,7 @@ import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { LocalizationProvider } from '../../LocalizationProvider';
 import { PickerOrientation, PickerVariant } from '../models';
+import { UsePickerValueContextValue } from '../hooks/usePicker/usePickerValue.types';
 
 export const PickerContext = React.createContext<PickerContextValue | null>(null);
 
@@ -43,26 +44,7 @@ export interface PickerProviderProps {
   children: React.ReactNode;
 }
 
-export interface PickerContextValue {
-  /**
-   * Open the picker.
-   * @param {React.UIEvent} event The DOM event that triggered the change.
-   */
-  onOpen: (event: React.UIEvent) => void;
-  /**
-   * Close the picker.
-   * @param {React.UIEvent} event The DOM event that triggered the change.
-   */
-  onClose: (event: React.UIEvent) => void;
-  /**
-   * Close the picker if it's open, open it if it's closed.
-   * @param {React.UIEvent} event The DOM event that triggered the change.
-   */
-  onToggleOpening: (event: React.UIEvent) => void;
-  /**
-   * `true` if the picker is open, `false` otherwise.
-   */
-  open: boolean;
+export interface PickerContextValue extends UsePickerValueContextValue {
   /**
    * `true` if the picker is disabled, `false` otherwise.
    */

diff --git a/packages/x-date-pickers/src/internals/hooks/useOpenState.ts b/packages/x-date-pickers/src/internals/hooks/useOpenState.ts
@@ -8,7 +8,7 @@ export interface OpenStateProps {
 
 export const useOpenState = ({ open, onOpen, onClose }: OpenStateProps) => {
   const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
-  const [openState, setIsOpenState] = React.useState(false);
+  const [openState, setOpenState] = React.useState(false);
 
   // It is required to update inner state in useEffect in order to avoid situation when
   // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
@@ -18,26 +18,27 @@ export const useOpenState = ({ open, onOpen, onClose }: OpenStateProps) => {
         throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
       }
 
-      setIsOpenState(open);
+      setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
 
-  const setIsOpen = React.useCallback(
-    (newIsOpen: boolean) => {
+  const setOpen = React.useCallback(
+    (action: React.SetStateAction<boolean>) => {
+      const newOpen = typeof action === 'function' ? action(openState) : action;
       if (!isControllingOpenProp) {
-        setIsOpenState(newIsOpen);
+        setOpenState(newOpen);
       }
 
-      if (newIsOpen && onOpen) {
+      if (newOpen && onOpen) {
         onOpen();
       }
 
-      if (!newIsOpen && onClose) {
+      if (!newOpen && onClose) {
         onClose();
       }
     },
-    [isControllingOpenProp, onOpen, onClose],
+    [isControllingOpenProp, onOpen, onClose, openState],
   );
 
-  return { isOpen: openState, setIsOpen };
+  return { open: openState, setOpen };
 };
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts
@@ -55,11 +55,11 @@ export const usePicker = <
 
   const providerProps = usePickerProvider({
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
     views: pickerViewsResponse.views,
+    paramsFromUsePickerValue: pickerValueResponse.provider,
   });
 
   return {

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts
@@ -62,7 +62,7 @@ export interface UsePickerResponse<
   TValue extends PickerValidValue,
   TView extends DateOrTimeViewWithMeridiem,
   TError,
-> extends Omit<UsePickerValueResponse<TValue, TError>, 'viewProps' | 'layoutProps'>,
+> extends Pick<UsePickerValueResponse<TValue, TError>, 'open' | 'actions' | 'fieldProps'>,
     Omit<UsePickerViewsResponse<TView>, 'layoutProps' | 'views'> {
   ownerState: PickerOwnerState;
   providerProps: UsePickerProviderReturnValue;

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import useEventCallback from '@mui/utils/useEventCallback';
 import { PickerOwnerState } from '../../../models';
-import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
+import { PickerValueManager, UsePickerValueProviderParams } from './usePickerValue.types';
 import {
   PickerProviderProps,
   PickerContextValue,
@@ -63,27 +62,19 @@ export const usePickerOrientation = (
 export function usePickerProvider<TValue extends PickerValidValue>(
   parameters: UsePickerProviderParameters<TValue>,
 ): UsePickerProviderReturnValue {
-  const { props, pickerValueResponse, valueManager, localeText, variant, views } = parameters;
+  const { props, valueManager, localeText, variant, views, paramsFromUsePickerValue } = parameters;
 
   const utils = useUtils();
   const orientation = usePickerOrientation(views, props.orientation);
 
-  const handleTogglePicker = useEventCallback((event: React.UIEvent) => {
-    if (pickerValueResponse.open) {
-      pickerValueResponse.actions.onClose(event);
-    } else {
-      pickerValueResponse.actions.onOpen(event);
-    }
-  });
-
   const ownerState = React.useMemo<PickerOwnerState>(
     () => ({
       isPickerValueEmpty: valueManager.areValuesEqual(
         utils,
-        pickerValueResponse.viewProps.value,
+        paramsFromUsePickerValue.value,
         valueManager.emptyValue,
       ),
-      isPickerOpen: pickerValueResponse.open,
+      isPickerOpen: paramsFromUsePickerValue.contextValue.open,
       isPickerDisabled: props.disabled ?? false,
       isPickerReadOnly: props.readOnly ?? false,
       pickerOrientation: orientation,
@@ -92,8 +83,8 @@ export function usePickerProvider<TValue extends PickerValidValue>(
     [
       utils,
       valueManager,
-      pickerValueResponse.viewProps.value,
-      pickerValueResponse.open,
+      paramsFromUsePickerValue.value,
+      paramsFromUsePickerValue.contextValue.open,
       orientation,
       variant,
       props.disabled,
@@ -103,25 +94,13 @@ export function usePickerProvider<TValue extends PickerValidValue>(
 
   const contextValue = React.useMemo<PickerContextValue>(
     () => ({
-      onOpen: pickerValueResponse.actions.onOpen,
-      onClose: pickerValueResponse.actions.onClose,
-      onToggleOpening: handleTogglePicker,
-      open: pickerValueResponse.open,
+      ...paramsFromUsePickerValue.contextValue,
       disabled: props.disabled ?? false,
       readOnly: props.readOnly ?? false,
       variant,
       orientation,
     }),
-    [
-      pickerValueResponse.actions.onOpen,
-      pickerValueResponse.actions.onClose,
-      handleTogglePicker,
-      pickerValueResponse.open,
-      variant,
-      orientation,
-      props.disabled,
-      props.readOnly,
-    ],
+    [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly],
   );
 
   const privateContextValue = React.useMemo<PickerPrivateContextValue>(
@@ -139,10 +118,10 @@ export function usePickerProvider<TValue extends PickerValidValue>(
 export interface UsePickerProviderParameters<TValue extends PickerValidValue>
   extends Pick<PickerProviderProps, 'localeText'> {
   props: UsePickerProps<TValue, any, any, any, any>;
-  pickerValueResponse: UsePickerValueResponse<TValue, any>;
   valueManager: PickerValueManager<TValue, any>;
   variant: PickerVariant;
   views: readonly DateOrTimeViewWithMeridiem[];
+  paramsFromUsePickerValue: UsePickerValueProviderParams<TValue>;
 }
 
 export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {}