Temporary component
This commit is contained in:
parent
99cd91158a
commit
55f17c4ef6
1 changed files with 41 additions and 0 deletions
41
src/components/Combobox/Combobox.tsx
Normal file
41
src/components/Combobox/Combobox.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import Input from '../../../fwt/components/Input'
|
||||||
|
import { createSignal } from 'solid-js'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
placeholder?: string
|
||||||
|
value?: string
|
||||||
|
onChange?: (value: string) => void
|
||||||
|
options: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default (props: Props) => {
|
||||||
|
const [sample, setSample] = createSignal(props.value || '')
|
||||||
|
const [isOpen, setIsOpen] = createSignal(false)
|
||||||
|
const [selectedOption, setSelectedOption] = createSignal('')
|
||||||
|
|
||||||
|
const handleInputChange = (val: string) => {
|
||||||
|
setSample(val)
|
||||||
|
setSelectedOption('')
|
||||||
|
setIsOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSelectOption = (option: string) => {
|
||||||
|
setSelectedOption(option)
|
||||||
|
setSample(option)
|
||||||
|
setIsOpen(false)
|
||||||
|
props.onChange?.(option)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Input onChange={handleInputChange} placeholder={props.placeholder || 'Select an option'} value={sample()}></Input>
|
||||||
|
{isOpen() && (
|
||||||
|
<ul>
|
||||||
|
{props.options.map((option, index) => (
|
||||||
|
<li onClick={() => handleSelectOption(option)}>{option}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue