47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import './Combobox.sass'
|
|
import { Combobox } from '@kobalte/core/combobox'
|
|
import { FaSolidAngleDown } from 'solid-icons/fa'
|
|
import { AiOutlineCheck } from 'solid-icons/ai'
|
|
|
|
interface Props {
|
|
options: any[]
|
|
placeholder: string
|
|
value: string
|
|
onChange: (value: string | null) => void
|
|
}
|
|
|
|
export default (props: Props) => {
|
|
return (
|
|
<>
|
|
<Combobox
|
|
options={props.options}
|
|
defaultFilter="startsWith"
|
|
placeholder={props.placeholder}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
itemComponent={(props) => (
|
|
<Combobox.Item item={props.item} class="combobox__item">
|
|
<Combobox.ItemLabel>{props.item.textValue}</Combobox.ItemLabel>
|
|
<Combobox.ItemIndicator class="combobox__item-indicator">
|
|
<AiOutlineCheck />
|
|
</Combobox.ItemIndicator>
|
|
</Combobox.Item>
|
|
)}
|
|
>
|
|
<Combobox.Control class="combobox__control" aria-label="Assessors">
|
|
<Combobox.Input class="combobox__input" />
|
|
<Combobox.Trigger class="combobox__trigger">
|
|
<Combobox.Icon class="combobox__icon">
|
|
<FaSolidAngleDown />
|
|
</Combobox.Icon>
|
|
</Combobox.Trigger>
|
|
</Combobox.Control>
|
|
<Combobox.Portal>
|
|
<Combobox.Content class="combobox__content">
|
|
<Combobox.Listbox class="combobox__listbox" />
|
|
</Combobox.Content>
|
|
</Combobox.Portal>
|
|
</Combobox>
|
|
</>
|
|
)
|
|
}
|