refactor: remove Select component from UI library
This commit is contained in:
parent
d4d9861727
commit
95565b5313
@ -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>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user