refactor: remove Select component from UI library

This commit is contained in:
Ardeman 2025-03-06 08:20:39 +08:00
parent d4d9861727
commit 95565b5313

View File

@ -1,67 +0,0 @@
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,
} from 'react-hook-form'
import { useRemixFormContext } from 'remix-hook-form'
type TInputProperties<T extends FieldValues> = Omit<
ComponentProps<'select'>,
'size'
> & {
id: string
label?: ReactNode
name: Path<T>
rules?: RegisterOptions
placeholder?: string
options?: {
code: string
name: string
id: string
}[]
}
export const Select = <TFormValues extends Record<string, unknown>>(
properties: TInputProperties<TFormValues>,
) => {
const { id, label, name, rules, disabled, placeholder, options, ...rest } =
properties
const {
register,
formState: { errors },
} = useRemixFormContext()
const error: FieldError = get(errors, name)
return (
<Field
className="relative"
disabled={disabled}
id={id}
>
<Label className="mb-1 block text-gray-700">
{label} {error && <span className="text-red-500">{error.message}</span>}
</Label>
<HeadlessSelect
className="focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
{...register(name, rules)}
{...rest}
>
<option value="">{placeholder}</option>
{options?.map(({ id, name }) => (
<option
key={id}
value={id}
>
{name}
</option>
))}
</HeadlessSelect>
</Field>
)
}