99 lines
2.2 KiB
TypeScript
99 lines
2.2 KiB
TypeScript
|
import { Field, Label, Select as HeadlessSelect } from '@headlessui/react'
|
||
|
|
import { type ComponentProps, type ReactNode } from 'react'
|
||
|
|
import {
|
||
|
|
get,
|
||
|
|
type FieldError,
|
||
|
|
type FieldValues,
|
||
|
|
type Path,
|
||
|
|
type RegisterOptions,
|
||
|
|
Controller,
|
||
|
|
} from 'react-hook-form'
|
||
|
|
import { useRemixFormContext } from 'remix-hook-form'
|
||
|
|
import { twMerge } from 'tailwind-merge'
|
||
|
|
|
||
|
|
type TSelectProperties<T extends FieldValues> = Omit<
|
||
|
|
ComponentProps<'select'>,
|
||
|
|
'size'
|
||
|
|
> & {
|
||
|
|
id: string
|
||
|
|
label?: ReactNode
|
||
|
|
name: Path<T>
|
||
|
|
rules?: RegisterOptions
|
||
|
|
containerClassName?: string
|
||
|
|
labelClassName?: string
|
||
|
|
placeholder?: string
|
||
|
|
options?: {
|
||
|
|
name: string
|
||
|
|
value: string | number
|
||
|
|
}[]
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Select = <TFormValues extends Record<string, unknown>>(
|
||
|
|
properties: TSelectProperties<TFormValues>,
|
||
|
|
) => {
|
||
|
|
const {
|
||
|
|
id,
|
||
|
|
label,
|
||
|
|
name,
|
||
|
|
rules,
|
||
|
|
disabled,
|
||
|
|
placeholder,
|
||
|
|
options,
|
||
|
|
className,
|
||
|
|
labelClassName,
|
||
|
|
containerClassName,
|
||
|
|
...restProperties
|
||
|
|
} = properties
|
||
|
|
const {
|
||
|
|
control,
|
||
|
|
formState: { errors },
|
||
|
|
} = useRemixFormContext()
|
||
|
|
|
||
|
|
const error: FieldError = get(errors, name)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Field
|
||
|
|
className={twMerge('relative', containerClassName)}
|
||
|
|
disabled={disabled}
|
||
|
|
id={id}
|
||
|
|
>
|
||
|
|
<Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
|
||
|
|
{label} {error && <span className="text-red-500">{error.message}</span>}
|
||
|
|
</Label>
|
||
|
|
<Controller
|
||
|
|
name={name}
|
||
|
|
control={control}
|
||
|
|
rules={rules}
|
||
|
|
render={({ field }) => (
|
||
|
|
<HeadlessSelect
|
||
|
|
value={field.value}
|
||
|
|
onChange={field.onChange}
|
||
|
|
disabled={disabled}
|
||
|
|
className={twMerge(
|
||
|
|
'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...restProperties}
|
||
|
|
>
|
||
|
|
<option
|
||
|
|
value=""
|
||
|
|
disabled
|
||
|
|
selected={!field.value}
|
||
|
|
>
|
||
|
|
{placeholder}
|
||
|
|
</option>
|
||
|
|
{options?.map(({ value, name }) => (
|
||
|
|
<option
|
||
|
|
key={value}
|
||
|
|
value={value}
|
||
|
|
>
|
||
|
|
{name}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</HeadlessSelect>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
)
|
||
|
|
}
|