File size: 2,293 Bytes
f2e9a59 | 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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 'use client';
import {
DetailedHTMLProps,
FC,
InputHTMLAttributes,
ReactNode,
useEffect,
useMemo,
} from 'react';
import { clsx } from 'clsx';
import { useFormContext, useWatch } from 'react-hook-form';
import { TranslatedLabel } from '../translation/translated-label';
export const Input: FC<
DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
removeError?: boolean;
error?: any;
disableForm?: boolean;
customUpdate?: () => void;
label: string;
name: string;
icon?: ReactNode;
translationKey?: string;
translationParams?: Record<string, string | number>;
}
> = (props) => {
const {
label,
icon,
removeError,
customUpdate,
className,
disableForm,
error,
translationKey,
translationParams,
...rest
} = props;
const form = useFormContext();
const err = useMemo(() => {
if (error) return error;
if (!form || !form.formState.errors[props?.name!]) return;
return form?.formState?.errors?.[props?.name!]?.message! as string;
}, [form?.formState?.errors?.[props?.name!]?.message, error]);
const watch = customUpdate ? form?.watch(props.name) : null;
useEffect(() => {
if (customUpdate) {
customUpdate();
}
}, [watch]);
return (
<div className="flex flex-col gap-[6px]">
{!!label && (
<div className={`text-[14px]`}>
<TranslatedLabel
label={label}
translationKey={translationKey}
translationParams={translationParams}
/>
</div>
)}
<div
className={clsx(
'bg-newBgColorInner h-[42px] border-newTableBorder border rounded-[8px] text-textColor placeholder-textColor flex items-center justify-center',
className
)}
>
{icon && <div className="ps-[16px]">{icon}</div>}
<input
className={clsx(
'h-full bg-transparent outline-none flex-1 text-[14px] text-textColor',
icon ? 'pl-[8px] pe-[16px]' : 'px-[16px]'
)}
{...(disableForm ? {} : form.register(props.name))}
{...rest}
/>
</div>
{!removeError && (
<div className="text-red-400 text-[12px]">{err || <> </>}</div>
)}
</div>
);
};
|