Merge branch 'master' of github.com:dohomi/react-hook-form-mui

dohomi · Oct 18, 2024 · c4c0817 · c4c0817
2 parents 6a6927e + 24e7b2d
commit c4c0817
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 64 deletions.
diff --git a/packages/rhf-mui/src/DatePickerElement.tsx b/packages/rhf-mui/src/DatePickerElement.tsx
@@ -17,12 +17,12 @@ import {
   DateValidationError,
   PickerChangeHandlerContext,
   validateDate,
-} from '@mui/x-date-pickers'
-import {useLocalizationContext} from '@mui/x-date-pickers/internals'
-import {defaultErrorMessages} from './messages/DatePicker'
-import {useTransform} from './useTransform'
-import {getTimezone} from './utils'
-import {PickerValidDate} from '@mui/x-date-pickers/models'
+} from "@mui/x-date-pickers";
+import {useLocalizationContext} from "@mui/x-date-pickers/internals";
+import {defaultErrorMessages} from "./messages/DatePicker";
+import {useTransform} from "./useTransform";
+import {getTimezone, readValueAsDate} from "./utils";
+import {PickerValidDate} from "@mui/x-date-pickers/models";
 
 export type DatePickerElementProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -103,7 +103,8 @@ const DatePickerElement = forwardRef(function DatePickerElement<
       }),
     validate: {
       internal: (value: TValue | null) => {
-        if (!value) {
+        const date = readValueAsDate(adapter, value)
+        if (!date) {
           return true
         }
         const internalError = validateDate({
@@ -116,8 +117,8 @@ const DatePickerElement = forwardRef(function DatePickerElement<
             minDate: rest.minDate,
             maxDate: rest.maxDate,
           },
-          timezone: rest.timezone ?? getTimezone(adapter, value) ?? 'default',
-          value,
+          timezone: rest.timezone ?? getTimezone(adapter, date) ?? 'default',
+          value: date,
           adapter,
         })
         return internalError == null || errorMessages[internalError]
@@ -144,11 +145,7 @@ const DatePickerElement = forwardRef(function DatePickerElement<
       input:
         typeof transform?.input === 'function'
           ? transform.input
-          : (newValue) => {
-              return newValue && typeof newValue === 'string'
-                ? (adapter.utils.date(newValue) as unknown as TValue) // need to see if this works for all localization adaptors
-                : newValue
-            },
+          : (newValue) => readValueAsDate(adapter, newValue),
       output:
         typeof transform?.output === 'function'
           ? transform.output

diff --git a/packages/rhf-mui/src/DateTimePickerElement.tsx b/packages/rhf-mui/src/DateTimePickerElement.tsx
@@ -2,27 +2,20 @@ import {
   DateTimePicker,
   DateTimePickerProps,
   DateTimePickerSlotProps,
-  validateDateTime,
   DateTimeValidationError,
   PickerChangeHandlerContext,
   PickerValidDate,
+  validateDateTime,
 } from '@mui/x-date-pickers'
 import {useLocalizationContext} from '@mui/x-date-pickers/internals'
-import {
-  Control,
-  FieldError,
-  FieldPath,
-  PathValue,
-  useController,
-  UseControllerProps,
-} from 'react-hook-form'
-import {TextFieldProps, useForkRef} from '@mui/material'
-import {FieldValues} from 'react-hook-form/dist/types/fields'
-import {useFormError} from './FormErrorProvider'
-import {forwardRef, ReactNode, Ref, RefAttributes} from 'react'
-import {defaultErrorMessages} from './messages/DateTimePicker'
-import {useTransform} from './useTransform'
-import {getTimezone} from './utils'
+import {Control, FieldError, FieldPath, PathValue, useController, UseControllerProps,} from "react-hook-form";
+import {TextFieldProps, useForkRef} from "@mui/material";
+import {FieldValues} from "react-hook-form/dist/types/fields";
+import {useFormError} from "./FormErrorProvider";
+import {forwardRef, ReactNode, Ref, RefAttributes} from "react";
+import {defaultErrorMessages} from "./messages/DateTimePicker";
+import {useTransform} from "./useTransform";
+import {getTimezone, readValueAsDate} from "./utils";
 
 export type DateTimePickerElementProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -102,7 +95,8 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
       }),
     validate: {
       internal: (value: TValue | null) => {
-        if (!value) {
+        const date = readValueAsDate(adapter, value)
+        if (!date) {
           return true
         }
         const internalError = validateDateTime({
@@ -121,8 +115,9 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
             minutesStep: rest.minutesStep,
             shouldDisableTime: rest.shouldDisableTime,
           },
-          timezone: rest.timezone ?? getTimezone(adapter, value) ?? 'default',
-          value,
+
+          timezone: rest.timezone ?? getTimezone(adapter, date) ?? 'default',
+          value: date,
           adapter,
         })
 
@@ -150,11 +145,7 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
       input:
         typeof transform?.input === 'function'
           ? transform.input
-          : (newValue) => {
-              return newValue && typeof newValue === 'string'
-                ? (adapter.utils.date(newValue) as unknown as TValue) // need to see if this works for all localization adaptors
-                : newValue
-            },
+          : (newValue) => readValueAsDate(adapter, newValue),
       output:
         typeof transform?.output === 'function'
           ? transform.output

diff --git a/packages/rhf-mui/src/MobileDatePickerElement.tsx b/packages/rhf-mui/src/MobileDatePickerElement.tsx
@@ -1,7 +1,9 @@
 import {
+  DateValidationError,
   MobileDatePicker,
   MobileDatePickerProps,
   MobileDatePickerSlotProps,
+  PickerChangeHandlerContext,
   validateDate,
 } from '@mui/x-date-pickers'
 import {
@@ -19,11 +21,7 @@ import {forwardRef, ReactNode, Ref, RefAttributes} from 'react'
 import {defaultErrorMessages} from './messages/DatePicker'
 import {useLocalizationContext} from '@mui/x-date-pickers/internals'
 import {useTransform} from './useTransform'
-import {
-  DateValidationError,
-  PickerChangeHandlerContext,
-} from '@mui/x-date-pickers'
-import {getTimezone} from './utils'
+import {getTimezone, readValueAsDate} from './utils'
 import {PickerValidDate} from '@mui/x-date-pickers/models'
 
 export type MobileDatePickerElementProps<
@@ -103,7 +101,8 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
       }),
     validate: {
       internal: (value: TValue | null) => {
-        if (!value) {
+        const date = readValueAsDate(adapter, value)
+        if (!date) {
           return true
         }
         const internalError = validateDate({
@@ -116,8 +115,8 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
             minDate: rest.minDate,
             maxDate: rest.maxDate,
           },
-          timezone: rest.timezone ?? getTimezone(adapter, value) ?? 'default',
-          value,
+          timezone: rest.timezone ?? getTimezone(adapter, date) ?? 'default',
+          value: date,
           adapter,
         })
         return internalError == null || errorMessages[internalError]
@@ -144,11 +143,7 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
       input:
         typeof transform?.input === 'function'
           ? transform.input
-          : (newValue) => {
-              return newValue && typeof newValue === 'string'
-                ? (adapter.utils.date(newValue) as unknown as TValue) // need to see if this works for all localization adaptors
-                : newValue
-            },
+          : (newValue) => readValueAsDate(adapter, newValue),
       output:
         typeof transform?.output === 'function'
           ? transform.output

diff --git a/packages/rhf-mui/src/TimePickerElement.tsx b/packages/rhf-mui/src/TimePickerElement.tsx
@@ -1,7 +1,9 @@
 import {
+  PickerChangeHandlerContext,
   TimePicker,
   TimePickerProps,
   TimePickerSlotProps,
+  TimeValidationError,
   validateTime,
 } from '@mui/x-date-pickers'
 import {
@@ -19,11 +21,7 @@ import {forwardRef, ReactNode, Ref, RefAttributes} from 'react'
 import {useLocalizationContext} from '@mui/x-date-pickers/internals'
 import {defaultErrorMessages} from './messages/TimePicker'
 import {useTransform} from './useTransform'
-import {
-  PickerChangeHandlerContext,
-  TimeValidationError,
-} from '@mui/x-date-pickers'
-import {getTimezone} from './utils'
+import {getTimezone, readValueAsDate} from './utils'
 import {PickerValidDate} from '@mui/x-date-pickers/models'
 
 export type TimePickerElementProps<
@@ -104,7 +102,8 @@ const TimePickerElement = forwardRef(function TimePickerElement<
       }),
     validate: {
       internal: (value: TValue | null) => {
-        if (!value) {
+        const date = readValueAsDate(adapter, value)
+        if (!date) {
           return true
         }
         const internalError = validateTime({
@@ -118,7 +117,8 @@ const TimePickerElement = forwardRef(function TimePickerElement<
             disablePast: Boolean(rest.disablePast),
             disableFuture: Boolean(rest.disableFuture),
           },
-          timezone: rest.timezone ?? getTimezone(adapter, value) ?? 'default',
+
+          timezone: rest.timezone ?? getTimezone(adapter, date) ?? 'default',
           value,
           adapter,
         })
@@ -146,11 +146,7 @@ const TimePickerElement = forwardRef(function TimePickerElement<
       input:
         typeof transform?.input === 'function'
           ? transform.input
-          : (newValue) => {
-              return newValue && typeof newValue === 'string'
-                ? (adapter.utils.date(newValue) as unknown as TValue) // need to see if this works for all localization adaptors
-                : newValue
-            },
+          : (newValue) => readValueAsDate(adapter, newValue),
       output:
         typeof transform?.output === 'function'
           ? transform.output

diff --git a/packages/rhf-mui/src/utils.ts b/packages/rhf-mui/src/utils.ts
@@ -1,3 +1,4 @@
+import { type PickerValidDate } from '@mui/x-date-pickers'
 import {useLocalizationContext} from '@mui/x-date-pickers/internals'
 
 export function propertyExists<X, Y extends PropertyKey>(
@@ -11,11 +12,24 @@ export function propertyExists<X, Y extends PropertyKey>(
   )
 }
 
-export function getTimezone<TDate>(
+export function getTimezone<TDate extends PickerValidDate>(
   adapter: ReturnType<typeof useLocalizationContext>,
   value: TDate
 ): string | null {
   return value == null || !adapter.utils.isValid(value as unknown as Date)
     ? null
     : adapter.utils.getTimezone(value as unknown as Date)
 }
+
+export function readValueAsDate<TDate extends PickerValidDate>(
+  adapter: ReturnType<typeof useLocalizationContext>,
+  value: string | null | TDate
+): TDate | null {
+  if(typeof value === 'string'){
+    if(value === ''){
+      return null
+    }
+    return adapter.utils.date(value) as TDate
+  }
+  return value
+}