Skip to content

Commit e248488

Browse files
dohomidohomi
authored
Merge pull request #372 from sadik-malik/master
fix: update validation logic for @mui/x-date-pickers v8 API changes
2 parents 82fc3f0 + 99a965b commit e248488

File tree

5 files changed

+78
-90
lines changed

5 files changed

+78
-90
lines changed

‎packages/rhf-mui/src/DatePickerElement.tsx‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {forwardRef, ReactNode, Ref, RefAttributes, type ReactElement} from 'react'
12
import {
23
Control,
34
FieldError,
@@ -9,26 +10,20 @@ import {
910
} from 'react-hook-form'
1011
import {TextFieldProps, useForkRef} from '@mui/material'
1112
import {useFormError} from './FormErrorProvider'
12-
import {
13-
forwardRef,
14-
type ReactElement,
15-
ReactNode,
16-
Ref,
17-
RefAttributes,
18-
} from 'react'
1913
import {
2014
DatePicker,
2115
DatePickerProps,
2216
DatePickerSlotProps,
2317
DateValidationError,
2418
PickerChangeHandlerContext,
19+
usePickerAdapter,
2520
validateDate,
2621
} from '@mui/x-date-pickers'
27-
import {useLocalizationContext} from '@mui/x-date-pickers/internals'
22+
import {PickerValidDate} from '@mui/x-date-pickers/models'
23+
import {useApplyDefaultValuesToDateValidationProps} from '@mui/x-date-pickers/internals'
2824
import {defaultErrorMessages} from './messages/DatePicker'
2925
import {useTransform} from './useTransform'
3026
import {getTimezone, readValueAsDate} from './utils'
31-
import {PickerValidDate} from '@mui/x-date-pickers/models'
3227

3328
export type DatePickerElementProps<
3429
TFieldValues extends FieldValues = FieldValues,
@@ -91,7 +86,8 @@ const DatePickerElement = forwardRef(function DatePickerElement<
9186
...rest
9287
} = props
9388

94-
const adapter = useLocalizationContext()
89+
const adapter = usePickerAdapter()
90+
const validationProps = useApplyDefaultValuesToDateValidationProps(rest)
9591

9692
const errorMsgFn = useFormError()
9793
const customErrorFn = parseError || errorMsgFn
@@ -110,22 +106,19 @@ const DatePickerElement = forwardRef(function DatePickerElement<
110106
validate: {
111107
internal: (value: TValue | null) => {
112108
const date = readValueAsDate(adapter, value)
113-
if (!date || !rest.minDate || !rest.maxDate) {
109+
if (!date) {
114110
return true
115111
}
116112
const internalError = validateDate({
117113
props: {
118114
shouldDisableDate: rest.shouldDisableDate,
119115
shouldDisableMonth: rest.shouldDisableMonth,
120116
shouldDisableYear: rest.shouldDisableYear,
121-
disablePast: Boolean(rest.disablePast),
122-
disableFuture: Boolean(rest.disableFuture),
123-
minDate: rest.minDate,
124-
maxDate: rest.maxDate,
117+
...validationProps,
125118
},
126119
timezone: rest.timezone ?? getTimezone(adapter, date) ?? 'default',
127120
value: date,
128-
adapter: adapter.adapter,
121+
adapter: adapter,
129122
})
130123
return internalError == null || errorMessages[internalError]
131124
},

‎packages/rhf-mui/src/DateTimePickerElement.tsx‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import {
2-
DateTimePicker,
3-
DateTimePickerProps,
4-
DateTimePickerSlotProps,
5-
DateTimeValidationError,
6-
PickerChangeHandlerContext,
7-
PickerValidDate,
8-
validateDateTime,
9-
} from '@mui/x-date-pickers'
10-
import {useLocalizationContext} from '@mui/x-date-pickers/internals'
2+
forwardRef,
3+
type ReactElement,
4+
ReactNode,
5+
Ref,
6+
RefAttributes,
7+
} from 'react'
118
import {
129
Control,
1310
FieldError,
@@ -17,15 +14,19 @@ import {
1714
useController,
1815
UseControllerProps,
1916
} from 'react-hook-form'
17+
import {
18+
DateTimePicker,
19+
DateTimePickerProps,
20+
DateTimePickerSlotProps,
21+
DateTimeValidationError,
22+
PickerChangeHandlerContext,
23+
PickerValidDate,
24+
validateDateTime,
25+
usePickerAdapter,
26+
} from '@mui/x-date-pickers'
2027
import {TextFieldProps, useForkRef} from '@mui/material'
28+
import {useApplyDefaultValuesToDateTimeValidationProps} from '@mui/x-date-pickers/internals'
2129
import {useFormError} from './FormErrorProvider'
22-
import {
23-
forwardRef,
24-
type ReactElement,
25-
ReactNode,
26-
Ref,
27-
RefAttributes,
28-
} from 'react'
2930
import {defaultErrorMessages} from './messages/DateTimePicker'
3031
import {useTransform} from './useTransform'
3132
import {getTimezone, readValueAsDate} from './utils'
@@ -91,8 +92,8 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
9192
...rest
9293
} = props
9394

94-
const adapter = useLocalizationContext()
95-
95+
const adapter = usePickerAdapter()
96+
const validationProps = useApplyDefaultValuesToDateTimeValidationProps(rest)
9697
const errorMsgFn = useFormError()
9798
const customErrorFn = parseError || errorMsgFn
9899
const errorMessages = {
@@ -117,20 +118,15 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
117118
shouldDisableDate: rest.shouldDisableDate,
118119
shouldDisableMonth: rest.shouldDisableMonth,
119120
shouldDisableYear: rest.shouldDisableYear,
120-
disablePast: Boolean(rest.disablePast),
121-
disableFuture: Boolean(rest.disableFuture),
122-
minDate: rest.minDate ?? adapter.defaultDates.minDate,
123-
maxDate: rest.maxDate ?? adapter.defaultDates.maxDate,
124121
disableIgnoringDatePartForTimeValidation:
125122
rest.disableIgnoringDatePartForTimeValidation,
126-
maxTime: rest.maxTime,
127-
minTime: rest.minTime,
128123
minutesStep: rest.minutesStep,
129124
shouldDisableTime: rest.shouldDisableTime,
125+
...validationProps,
130126
},
131127
timezone: rest.timezone ?? getTimezone(adapter, date) ?? 'default',
132128
value: date,
133-
adapter: adapter.adapter,
129+
adapter: adapter,
134130
})
135131

136132
return internalError == null || errorMessages[internalError]

‎packages/rhf-mui/src/MobileDatePickerElement.tsx‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import {
2-
DateValidationError,
3-
MobileDatePicker,
4-
MobileDatePickerProps,
5-
MobileDatePickerSlotProps,
6-
PickerChangeHandlerContext,
7-
validateDate,
8-
} from '@mui/x-date-pickers'
2+
forwardRef,
3+
type ReactElement,
4+
ReactNode,
5+
Ref,
6+
RefAttributes,
7+
} from 'react'
98
import {
109
Control,
1110
FieldError,
@@ -16,19 +15,21 @@ import {
1615
UseControllerProps,
1716
} from 'react-hook-form'
1817
import {TextFieldProps, useForkRef} from '@mui/material'
19-
import {useFormError} from './FormErrorProvider'
2018
import {
21-
forwardRef,
22-
type ReactElement,
23-
ReactNode,
24-
Ref,
25-
RefAttributes,
26-
} from 'react'
19+
DateValidationError,
20+
MobileDatePicker,
21+
MobileDatePickerProps,
22+
MobileDatePickerSlotProps,
23+
PickerChangeHandlerContext,
24+
validateDate,
25+
usePickerAdapter,
26+
} from '@mui/x-date-pickers'
27+
import {useApplyDefaultValuesToDateValidationProps} from '@mui/x-date-pickers/internals'
28+
import {PickerValidDate} from '@mui/x-date-pickers/models'
29+
import {useFormError} from './FormErrorProvider'
2730
import {defaultErrorMessages} from './messages/DatePicker'
28-
import {useLocalizationContext} from '@mui/x-date-pickers/internals'
2931
import {useTransform} from './useTransform'
3032
import {getTimezone, readValueAsDate} from './utils'
31-
import {PickerValidDate} from '@mui/x-date-pickers/models'
3233

3334
export type MobileDatePickerElementProps<
3435
TFieldValues extends FieldValues = FieldValues,
@@ -89,7 +90,8 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
8990
...rest
9091
} = props
9192

92-
const adapter = useLocalizationContext()
93+
const adapter = usePickerAdapter()
94+
const validationProps = useApplyDefaultValuesToDateValidationProps(rest)
9395

9496
const errorMsgFn = useFormError()
9597
const customErrorFn = parseError || errorMsgFn
@@ -116,14 +118,11 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
116118
shouldDisableDate: rest.shouldDisableDate,
117119
shouldDisableMonth: rest.shouldDisableMonth,
118120
shouldDisableYear: rest.shouldDisableYear,
119-
disablePast: Boolean(rest.disablePast),
120-
disableFuture: Boolean(rest.disableFuture),
121-
minDate: rest.minDate ?? adapter.defaultDates.minDate,
122-
maxDate: rest.maxDate ?? adapter.defaultDates.maxDate,
121+
...validationProps,
123122
},
124123
timezone: rest.timezone ?? getTimezone(adapter, date) ?? 'default',
125124
value: date,
126-
adapter: adapter.adapter,
125+
adapter: adapter,
127126
})
128127
return internalError == null || errorMessages[internalError]
129128
},

‎packages/rhf-mui/src/TimePickerElement.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import {
2-
PickerChangeHandlerContext,
3-
TimePicker,
4-
TimePickerProps,
5-
TimePickerSlotProps,
6-
TimeValidationError,
7-
validateTime,
8-
} from '@mui/x-date-pickers'
2+
forwardRef,
3+
type ReactElement,
4+
ReactNode,
5+
Ref,
6+
RefAttributes,
7+
} from 'react'
98
import {
109
Control,
1110
FieldError,
@@ -16,19 +15,21 @@ import {
1615
UseControllerProps,
1716
} from 'react-hook-form'
1817
import {TextFieldProps, useForkRef} from '@mui/material'
19-
import {useFormError} from './FormErrorProvider'
2018
import {
21-
forwardRef,
22-
type ReactElement,
23-
ReactNode,
24-
Ref,
25-
RefAttributes,
26-
} from 'react'
27-
import {useLocalizationContext} from '@mui/x-date-pickers/internals'
19+
PickerChangeHandlerContext,
20+
TimePicker,
21+
TimePickerProps,
22+
TimePickerSlotProps,
23+
TimeValidationError,
24+
usePickerAdapter,
25+
validateTime,
26+
} from '@mui/x-date-pickers'
27+
import {PickerValidDate} from '@mui/x-date-pickers/models'
28+
import {useApplyDefaultValuesToTimeValidationProps} from '@mui/x-date-pickers/internals'
29+
import {useFormError} from './FormErrorProvider'
2830
import {defaultErrorMessages} from './messages/TimePicker'
2931
import {useTransform} from './useTransform'
3032
import {getTimezone, readValueAsDate} from './utils'
31-
import {PickerValidDate} from '@mui/x-date-pickers/models'
3233

3334
export type TimePickerElementProps<
3435
TFieldValues extends FieldValues = FieldValues,
@@ -91,7 +92,8 @@ const TimePickerElement = forwardRef(function TimePickerElement<
9192
...rest
9293
} = props
9394

94-
const adapter = useLocalizationContext()
95+
const adapter = usePickerAdapter()
96+
const validationProps = useApplyDefaultValuesToTimeValidationProps(rest)
9597

9698
const errorMsgFn = useFormError()
9799
const customErrorFn = parseError || errorMsgFn
@@ -120,13 +122,12 @@ const TimePickerElement = forwardRef(function TimePickerElement<
120122
shouldDisableTime: rest.shouldDisableTime,
121123
disableIgnoringDatePartForTimeValidation:
122124
rest.disableIgnoringDatePartForTimeValidation,
123-
disablePast: Boolean(rest.disablePast),
124-
disableFuture: Boolean(rest.disableFuture),
125+
...validationProps,
125126
},
126127

127128
timezone: rest.timezone ?? getTimezone(adapter, date) ?? 'default',
128129
value,
129-
adapter: adapter.adapter,
130+
adapter: adapter,
130131
})
131132
return internalError == null || errorMessages[internalError]
132133
},

‎packages/rhf-mui/src/utils.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import {type PickerValidDate} from '@mui/x-date-pickers'
2-
import {useLocalizationContext} from '@mui/x-date-pickers/internals'
1+
import {usePickerAdapter, type PickerValidDate} from '@mui/x-date-pickers'
32

43
export function propertyExists<X, Y extends PropertyKey>(
54
obj: X,
@@ -13,23 +12,23 @@ export function propertyExists<X, Y extends PropertyKey>(
1312
}
1413

1514
export function getTimezone<TDate extends PickerValidDate>(
16-
adapter: ReturnType<typeof useLocalizationContext>,
15+
adapter: ReturnType<typeof usePickerAdapter>,
1716
value: TDate
1817
): string | null {
19-
return value == null || !adapter.utils.isValid(value as unknown as Date)
18+
return value == null || !adapter.isValid(value as unknown as Date)
2019
? null
21-
: adapter.utils.getTimezone(value as unknown as Date)
20+
: adapter.getTimezone(value as unknown as Date)
2221
}
2322

2423
export function readValueAsDate<TDate extends PickerValidDate>(
25-
adapter: ReturnType<typeof useLocalizationContext>,
24+
adapter: ReturnType<typeof usePickerAdapter>,
2625
value: string | null | TDate
2726
): TDate | null {
2827
if (typeof value === 'string') {
2928
if (value === '') {
3029
return null
3130
}
32-
return adapter.utils.date(value) as TDate
31+
return adapter.date(value) as TDate
3332
}
3433
return value
3534
}

0 commit comments

Comments
 (0)