Alihaghighattalab
57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
|
|
import { ArrowDown2 } from 'iconsax-react'
|
|
import { FC, useState } from 'react'
|
|
import { ComboBoxItems } from '../../types'
|
|
|
|
type Props = {
|
|
field?: any
|
|
placeholder?: string
|
|
className?: string,
|
|
data?: ComboBoxItems[] | []
|
|
}
|
|
|
|
export const ComboBox: FC<Props> = ({ field, placeholder, className, data = [] }) => {
|
|
const [query, setQuery] = useState('')
|
|
|
|
const filteredValue =
|
|
query === ''
|
|
? data
|
|
: data?.filter((value) => {
|
|
return value.name.toLowerCase().includes(query.toLowerCase())
|
|
})
|
|
|
|
return (
|
|
<Combobox value={field && field.value} onChange={field && field.onChange} onClose={() => setQuery('')} disabled={data?.length <= 0}>
|
|
<div className="relative w-full">
|
|
<ComboboxInput
|
|
placeholder={placeholder}
|
|
className={`input-style min-w-full ${className}`}
|
|
displayValue={(person: any) => person?.name}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
ref={field && field.ref}
|
|
name={field && field.name}
|
|
onBlur={field && field.onBlur}
|
|
/>
|
|
<ComboboxButton className="absolute top-0 min-w-full h-full bg-transparent">
|
|
<ArrowDown2 className="size-5 absolute left-5 top-5 p-0 text-secondary-text-color/70" />
|
|
</ComboboxButton>
|
|
</div>
|
|
{data?.length > 0 && <ComboboxOptions
|
|
anchor="bottom start"
|
|
transition
|
|
className="bg-white shadow min-w-[220px] mt-2 rounded-xl p-2"
|
|
>
|
|
{filteredValue.map((value) => (
|
|
<ComboboxOption
|
|
key={value?.id}
|
|
value={value}
|
|
className="group flex cursor-default items-center gap-2 rounded-lg py-1.5 px-3 select-none data-[focus]:bg-secondary-text-color/10"
|
|
>
|
|
<div className="text-sm/6 text-black">{value?.name}</div>
|
|
</ComboboxOption>
|
|
))}
|
|
</ComboboxOptions>}
|
|
</Combobox>
|
|
)
|
|
}
|