63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
'use client';
|
|
import {
|
|
FieldValues,
|
|
Path,
|
|
RegisterOptions,
|
|
UseFormReturn,
|
|
} from 'react-hook-form';
|
|
import SelectTemplate, { Props as SelectTemplateProps } from 'react-select';
|
|
import { cn } from '../../../helper/cn';
|
|
import dynamic from 'next/dynamic';
|
|
|
|
interface SelectProps<T extends FieldValues> {
|
|
name: Path<T>;
|
|
form: UseFormReturn<T>;
|
|
formOptions?: RegisterOptions<T>;
|
|
label?: string;
|
|
placeholder?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const SelectCom = <T extends FieldValues>({
|
|
name,
|
|
label = name,
|
|
placeholder = label,
|
|
form,
|
|
formOptions,
|
|
className,
|
|
...inputProps
|
|
}: SelectProps<T>) => {
|
|
return (
|
|
<div>
|
|
<span className="label-text text-lg flex items-center gap-2">
|
|
{label}
|
|
</span>
|
|
<SelectTemplate
|
|
{...form.register(name, formOptions)}
|
|
onChange={(newValue: any) => {
|
|
if ('value' in newValue) {
|
|
form.setValue(name, newValue.value);
|
|
} else {
|
|
form.setValue(name, newValue);
|
|
}
|
|
form.trigger(name);
|
|
}}
|
|
className={cn('w-full placeholder:text-neutral-600', className)}
|
|
placeholder={placeholder}
|
|
{...inputProps}
|
|
/>
|
|
{form.formState.errors[name] && (
|
|
<p className="text-error">
|
|
{form.formState.errors[name].message as string}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const SelectWrapper = (props: any) => <SelectCom {...props} />;
|
|
|
|
export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
|
|
ssr: false,
|
|
});
|