55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { DetailedHTMLProps, FC, SelectHTMLAttributes, useMemo } from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { useFormContext } from 'react-hook-form';
|
|
import interClass from '../helpers/inter.font';
|
|
import { RegisterOptions } from 'react-hook-form/dist/types/validator';
|
|
|
|
export const Select: FC<
|
|
DetailedHTMLProps<
|
|
SelectHTMLAttributes<HTMLSelectElement>,
|
|
HTMLSelectElement
|
|
> & {
|
|
error?: any;
|
|
extraForm?: RegisterOptions<any>;
|
|
disableForm?: boolean;
|
|
label: string;
|
|
name: string;
|
|
hideErrors?: boolean;
|
|
}
|
|
> = (props) => {
|
|
const {
|
|
label,
|
|
className,
|
|
hideErrors,
|
|
disableForm,
|
|
error,
|
|
extraForm,
|
|
...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]);
|
|
|
|
return (
|
|
<div className={clsx("flex flex-col", label ? 'gap-[6px]' : '')}>
|
|
<div className={`${interClass} text-[14px]`}>{label}</div>
|
|
<select
|
|
{...(disableForm ? {} : form.register(props.name, extraForm))}
|
|
className={clsx(
|
|
'bg-input h-[44px] px-[16px] outline-none border-fifth border rounded-[4px] text-inputText placeholder-inputText',
|
|
className
|
|
)}
|
|
{...rest}
|
|
/>
|
|
{!hideErrors && (
|
|
<div className="text-red-400 text-[12px]">{err || <> </>}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|