File size: 1,800 Bytes
41a71fd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import { InputHTMLAttributes, ReactNode } from 'react';
import { Controller, FieldValues, RegisterOptions, useFormContext } from 'react-hook-form';
import { classNames } from '@/shared/lib/classNames/classNames';
import { Input } from '../../fieldsUI/Input/Input';
import { Cell } from '../../fieldsUI/Cell/Cell';
import cls from './HInput.module.scss';
interface HInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'name'> {
className?: string;
name: string;
label?: string;
noteText?: ReactNode;
mask?: string;
maskOptions?: any;
registerOptions?: Omit<RegisterOptions<FieldValues, string>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
}
export const HInput = (props: HInputProps) => {
const { className, name, label, noteText, mask, maskOptions, registerOptions, ...otherProps } = props;
const { control } = useFormContext();
return (
<Controller
name={name}
control={control}
rules={registerOptions}
render={({ field, fieldState }) => (
<Cell //
className={classNames(cls.HInput, {}, [className])}
label={label}
noteText={noteText}
fieldError={fieldState.error}
>
<Input
name={field.name}
inputRef={field.ref}
onBlur={field.onBlur}
onChange={field.onChange}
value={field.value ?? ''}
mask={mask}
maskOptions={maskOptions}
{...otherProps}
/>
</Cell>
)}
/>
);
};
|