import { FieldPath, FieldValues, useController, UseControllerProps } from 'react-hook-form'; import { isBoolean, isNumber, isRegExp, isString } from 'lodash'; import { useDefaultProps } from '../../hooks'; import { useLocalization } from '../../localization'; import { CodeField, CodeFieldProps } from '../code-field'; export type RHFCodeFieldProps< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, Nullable extends boolean = true > = Omit & UseControllerProps & { /** * When enabled, an empty string input ("") will be treated as a null value for the field * @default true */ nullable?: Nullable; onChange?: (value: Nullable extends true ? string | null : string) => void; }; function RHFCodeField>( inProps: RHFCodeFieldProps ) { const { /** React Hook Form */ name, control, defaultValue, disabled, shouldUnregister, rules, /** React Hook Form */ label, required, onChange, onBlur, helperText, nullable = true, ...props } = useDefaultProps({ name: 'ReevolveRHFCodeField', props: inProps }); const { translate } = useLocalization(); const isFieldRequired = isBoolean(rules?.required) ? rules.required : isString(rules?.required) || rules?.required?.value || required; const { field, fieldState: { error } } = useController({ name, control, defaultValue, shouldUnregister, disabled, rules: rules && { ...rules, required: rules?.required === true ? translate('validation.required', { label }) : rules?.required, pattern: isRegExp(rules?.pattern) ? { value: rules.pattern, message: translate('validation.pattern', { label, pattern: rules.pattern }) } : rules?.pattern, minLength: isNumber(rules?.minLength) ? { value: rules.minLength, message: translate('validation.minLength', { minLength: rules.minLength, label }) } : rules?.minLength, maxLength: isNumber(rules?.maxLength) ? { value: rules.maxLength, message: translate('validation.maxLength', { maxLength: rules.maxLength, label }) } : rules?.maxLength } }); function onChangeHandler(value: string | null) { if (value === '' && nullable) { value = null; } field.onChange(value); onChange?.(value); } function onBlurHandler(value: string, isCompleted: boolean) { field.onBlur(); onBlur?.(value, isCompleted); } return ( ); } declare module '@mui/material' { interface Components { ReevolveRHFCodeField?: { defaultProps?: Partial; }; } } export default RHFCodeField;