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