move validation => rules prop in every component to stick to well kno…

…wn property names of RHF
dohomi · Apr 8, 2024 · dc8ff3d · dc8ff3d
1 parent 389d9fd
commit dc8ff3d
Show file tree

Hide file tree

Showing 17 changed files with 78 additions and 81 deletions.
diff --git a/apps/storybook/stories/DatePickerElement.stories.tsx b/apps/storybook/stories/DatePickerElement.stories.tsx
@@ -44,7 +44,7 @@ export const RequiredCustomMessage: Story = {
     label: 'Required Picker',
     name: 'requiredCustomMessage',
     required: true,
-    validation: {required: 'Custom required message'},
+    rules: {required: 'Custom required message'},
   },
 }
 

diff --git a/apps/storybook/stories/DateTimePickerElement.stories.tsx b/apps/storybook/stories/DateTimePickerElement.stories.tsx
@@ -30,7 +30,7 @@ export const RequiredPickerCustom: Story = {
     label: 'Datetime Picker',
     name: 'required_picker_custom',
     required: true,
-    validation: {required: 'Custom required message'},
+    rules: {required: 'Custom required message'},
   },
 }
 

diff --git a/apps/storybook/stories/MobileDatePickerElement.stories.tsx b/apps/storybook/stories/MobileDatePickerElement.stories.tsx
@@ -32,7 +32,7 @@ export const RequiredPickerCustom: Story = {
     label: 'Mobile Datepicker',
     name: 'required_picker_custom',
     required: true,
-    validation: {required: 'Custom required message'},
+    rules: {required: 'Custom required message'},
   },
 }
 

diff --git a/apps/storybook/stories/TimePickerElement.stories.tsx b/apps/storybook/stories/TimePickerElement.stories.tsx
@@ -25,7 +25,7 @@ export const RequiredPickerCustom: Story = {
     label: 'Time Picker',
     name: 'required_picker_custom',
     required: true,
-    validation: {required: 'Custom required message'},
+    rules: {required: 'Custom required message'},
   },
 }
 

diff --git a/packages/rhf-mui/package.json b/packages/rhf-mui/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.2",
   "license": "MIT",
   "repository": "https://github.com/dohomi/react-hook-form-mui",
   "homepage": "https://react-hook-form-material-ui.vercel.app",

diff --git a/packages/rhf-mui/src/CheckboxElement.tsx b/packages/rhf-mui/src/CheckboxElement.tsx
@@ -26,7 +26,7 @@ export type CheckboxElementProps<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
   TValue = unknown
 > = Omit<CheckboxProps, 'name'> & {
-  validation?: UseControllerProps<TFieldValues, TName>['rules']
+  rules?: UseControllerProps<TFieldValues, TName>['rules']
   name: TName
   parseError?: (error: FieldError) => ReactNode
   label?: FormControlLabelProps['label']
@@ -61,7 +61,7 @@ const CheckboxElement = forwardRef(function CheckboxElement<
 ) {
   const {
     name,
-    validation = {},
+    rules = {},
     required,
     parseError,
     label,
@@ -76,10 +76,10 @@ const CheckboxElement = forwardRef(function CheckboxElement<
   const errorMsgFn = useFormError()
   const customErrorFn = parseError || errorMsgFn
 
-  const rules = {
-    ...validation,
+  const rulesTmp = {
+    ...rules,
     ...(required &&
-      !validation.required && {
+      !rules.required && {
         required: 'This field is required',
       }),
   }
@@ -91,7 +91,7 @@ const CheckboxElement = forwardRef(function CheckboxElement<
     name,
     control,
     disabled: rest.disabled,
-    rules,
+    rules: rulesTmp,
   })
 
   const {value, onChange} = useTransform<TFieldValues, TName, TValue>({

diff --git a/packages/rhf-mui/src/DatePickerElement.tsx b/packages/rhf-mui/src/DatePickerElement.tsx
@@ -38,7 +38,7 @@ export type DatePickerElementProps<
   required?: boolean
   isDate?: boolean
   parseError?: (error: FieldError | DateValidationError) => ReactNode
-  validation?: UseControllerProps<TFieldValues, TName>['rules']
+  rules?: UseControllerProps<TFieldValues, TName>['rules']
   control?: Control<TFieldValues>
   inputProps?: TextFieldProps
   helperText?: TextFieldProps['helperText']
@@ -78,7 +78,7 @@ const DatePickerElement = forwardRef(function DatePickerElement<
     parseError,
     name,
     required,
-    validation = {},
+    rules = {},
     inputProps,
     control,
     textReadOnly,
@@ -99,10 +99,10 @@ const DatePickerElement = forwardRef(function DatePickerElement<
     ...overwriteErrorMessages,
   }
 
-  const rules = {
-    ...validation,
+  const rulesTmp = {
+    ...rules,
     ...(required &&
-      !validation.required && {
+      !rules.required && {
         required: 'This field is required',
       }),
     validate: {
@@ -123,7 +123,7 @@ const DatePickerElement = forwardRef(function DatePickerElement<
         })
         return internalError == null || errorMessages[internalError]
       },
-      ...validation.validate,
+      ...rules.validate,
     },
   }
 
@@ -133,7 +133,7 @@ const DatePickerElement = forwardRef(function DatePickerElement<
   } = useController({
     name,
     control,
-    rules,
+    rules: rulesTmp,
     disabled: rest.disabled,
     defaultValue: null as PathValue<TFieldValues, TName>,
   })

diff --git a/packages/rhf-mui/src/DateTimePickerElement.tsx b/packages/rhf-mui/src/DateTimePickerElement.tsx
@@ -38,7 +38,7 @@ export type DateTimePickerElementProps<
   required?: boolean
   isDate?: boolean
   parseError?: (error: FieldError) => ReactNode
-  validation?: UseControllerProps<TFieldValues, TName>['rules']
+  rules?: UseControllerProps<TFieldValues, TName>['rules']
   control?: Control<TFieldValues>
   inputProps?: TextFieldProps
   helperText?: TextFieldProps['helperText']
@@ -78,7 +78,7 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
     parseError,
     name,
     required,
-    validation = {},
+    rules = {},
     inputProps,
     control,
     textReadOnly,
@@ -98,10 +98,10 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
     ...overwriteErrorMessages,
   }
 
-  const rules = {
-    ...validation,
+  const rulesTmp = {
+    ...rules,
     ...(required &&
-      !validation.required && {
+      !rules.required && {
         required: 'This field is required',
       }),
     validate: {
@@ -129,7 +129,7 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
 
         return internalError == null || errorMessages[internalError]
       },
-      ...validation.validate,
+      ...rules.validate,
     },
   }
 
@@ -138,7 +138,7 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
     fieldState: {error},
   } = useController({
     name,
-    rules,
+    rules: rulesTmp,
     control,
     disabled: rest.disabled,
     defaultValue: null as PathValue<TFieldValues, TName>,

diff --git a/packages/rhf-mui/src/MobileDatePickerElement.tsx b/packages/rhf-mui/src/MobileDatePickerElement.tsx
@@ -38,7 +38,7 @@ export type MobileDatePickerElementProps<
   required?: boolean
   isDate?: boolean
   parseError?: (error: FieldError) => ReactNode
-  validation?: UseControllerProps<TFieldValues, TName>['rules']
+  rules?: UseControllerProps<TFieldValues, TName>['rules']
   control?: Control<TFieldValues>
   inputProps?: TextFieldProps
   helperText?: TextFieldProps['helperText']
@@ -77,7 +77,7 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
     parseError,
     name,
     required,
-    validation = {},
+    rules = {},
     inputProps,
     control,
     slotProps,
@@ -97,10 +97,10 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
     ...overwriteErrorMessages,
   }
 
-  const rules = {
-    ...validation,
+  const rulesTmp = {
+    ...rules,
     ...(required &&
-      !validation.required && {
+      !rules.required && {
         required: 'This field is required',
       }),
     validate: {
@@ -121,7 +121,7 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
         })
         return internalError == null || errorMessages[internalError]
       },
-      ...validation.validate,
+      ...rules.validate,
     },
   }
 
@@ -131,7 +131,7 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
   } = useController({
     name,
     control,
-    rules,
+    rules: rulesTmp,
     disabled: rest.disabled,
     defaultValue: null as PathValue<TFieldValues, TName>,
   })

diff --git a/packages/rhf-mui/src/MultiSelectElement.tsx b/packages/rhf-mui/src/MultiSelectElement.tsx
@@ -38,7 +38,7 @@ export type MultiSelectElementProps<
   itemValue?: string
   itemLabel?: string
   required?: boolean
-  validation?: UseControllerProps<TFieldValues, TName>['rules']
+  rules?: UseControllerProps<TFieldValues, TName>['rules']
   name: TName
   parseError?: (error: FieldError) => ReactNode
   minWidth?: number
@@ -86,7 +86,7 @@ const MultiSelectElement = forwardRef(function MultiSelectElement<
     itemValue = '',
     itemLabel = 'label',
     required = false,
-    validation = {},
+    rules = {},
     parseError,
     name,
     menuMaxHeight = ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
@@ -112,10 +112,10 @@ const MultiSelectElement = forwardRef(function MultiSelectElement<
       return optionVal === item
     })?.[itemLabel] ?? item
 
-  const rules = {
-    ...validation,
+  const rulesTmp = {
+    ...rules,
     ...(required &&
-      !validation.required && {
+      !rules.required && {
         required: 'This field is required',
       }),
   }
@@ -125,7 +125,7 @@ const MultiSelectElement = forwardRef(function MultiSelectElement<
     fieldState: {error},
   } = useController({
     name,
-    rules,
+    rules: rulesTmp,
     disabled: rest.disabled,
     control,
   })

diff --git a/packages/rhf-mui/src/PasswordRepeatElement.tsx b/packages/rhf-mui/src/PasswordRepeatElement.tsx
@@ -55,7 +55,7 @@ const PasswordRepeatElement = forwardRef(function PasswordRepeatElement<
       control={control}
       {...rest}
       ref={ref}
-      validation={{
+      rules={{
         validate: (value: string) => {
           return (
             value === pwValue ||

diff --git a/packages/rhf-mui/src/RadioButtonGroup.tsx b/packages/rhf-mui/src/RadioButtonGroup.tsx
@@ -28,7 +28,7 @@ export type RadioButtonGroupProps<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
   TValue = unknown
 > = {
-  validation?: UseControllerProps<TFieldValues, TName>['rules']
+  rules?: UseControllerProps<TFieldValues, TName>['rules']
   options: TValue[]
   helperText?: ReactNode
   name: TName
@@ -91,26 +91,25 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup<
     disabled,
     formLabelProps,
     transform,
-    validation = {},
+    rules = {},
     ...rest
   } = props
   const theme = useTheme()
 
   const errorMsgFn = useFormError()
   const customErrorFn = parseError || errorMsgFn
 
-  const rules = {
-    ...validation,
-    ...(required &&
-      !validation.required && {required: 'This field is required'}),
+  const rulesTmp = {
+    ...rules,
+    ...(required && !rules.required && {required: 'This field is required'}),
   }
 
   const {
     field,
     fieldState: {error},
   } = useController({
     name,
-    rules,
+    rules: rulesTmp,
     disabled,
     control,
   })

diff --git a/packages/rhf-mui/src/SelectElement.tsx b/packages/rhf-mui/src/SelectElement.tsx
@@ -18,7 +18,7 @@ export type SelectElementProps<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
   TValue = unknown
 > = Omit<TextFieldProps, 'name' | 'type' | 'onChange'> & {
-  validation?: UseControllerProps<TFieldValues, TName>['rules']
+  rules?: UseControllerProps<TFieldValues, TName>['rules']
   name: TName
   options?: TValue[]
   valueKey?: string
@@ -62,7 +62,7 @@ const SelectElement = forwardRef(function SelectElement<
     parseError,
     type,
     objectOnChange,
-    validation = {},
+    rules = {},
     control,
     inputRef,
     transform,
@@ -73,10 +73,10 @@ const SelectElement = forwardRef(function SelectElement<
   const customErrorFn = parseError || errorMsgFn
   const isNativeSelect = !!rest.SelectProps?.native
 
-  const rules = {
-    ...validation,
+  const rulesTmp = {
+    ...rules,
     ...(required &&
-      !validation.required && {
+      !rules.required && {
         required: 'This field is required',
       }),
   }
@@ -86,7 +86,7 @@ const SelectElement = forwardRef(function SelectElement<
     fieldState: {error},
   } = useController({
     name,
-    rules,
+    rules: rulesTmp,
     disabled: rest.disabled,
     control,
   })