148 lines
3.5 KiB
TypeScript
148 lines
3.5 KiB
TypeScript
import {
|
|
useDisclosure,
|
|
useOutsideClick,
|
|
Flex,
|
|
Popover,
|
|
PopoverTrigger,
|
|
Input,
|
|
PopoverContent,
|
|
Button,
|
|
InputProps,
|
|
} from '@chakra-ui/react'
|
|
import { useState, useRef, useEffect, ChangeEvent } from 'react'
|
|
import { useDebouncedCallback } from 'use-debounce'
|
|
|
|
type Props = {
|
|
selectedItem?: string
|
|
items: string[]
|
|
debounceTimeout?: number
|
|
onValueChange?: (value: string) => void
|
|
} & InputProps
|
|
|
|
export const SearchableDropdown = ({
|
|
selectedItem,
|
|
items,
|
|
debounceTimeout = 1000,
|
|
onValueChange,
|
|
...inputProps
|
|
}: Props) => {
|
|
const { onOpen, onClose, isOpen } = useDisclosure()
|
|
const [inputValue, setInputValue] = useState(selectedItem ?? '')
|
|
const debounced = useDebouncedCallback(
|
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
onValueChange ? onValueChange : () => {},
|
|
process.env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
|
|
)
|
|
const [filteredItems, setFilteredItems] = useState([
|
|
...items
|
|
.filter((item) =>
|
|
item.toLowerCase().includes((selectedItem ?? '').toLowerCase())
|
|
)
|
|
.slice(0, 50),
|
|
])
|
|
const dropdownRef = useRef(null)
|
|
const inputRef = useRef(null)
|
|
|
|
useEffect(
|
|
() => () => {
|
|
debounced.flush()
|
|
},
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[]
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (filteredItems.length > 0) return
|
|
setFilteredItems([
|
|
...items
|
|
.filter((item) =>
|
|
item.toLowerCase().includes((selectedItem ?? '').toLowerCase())
|
|
)
|
|
.slice(0, 50),
|
|
])
|
|
if (inputRef.current === document.activeElement) onOpen()
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [items])
|
|
|
|
useOutsideClick({
|
|
ref: dropdownRef,
|
|
handler: onClose,
|
|
})
|
|
|
|
const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
if (!isOpen) onOpen()
|
|
setInputValue(e.target.value)
|
|
debounced(e.target.value)
|
|
if (e.target.value === '') {
|
|
setFilteredItems([...items.slice(0, 50)])
|
|
return
|
|
}
|
|
setFilteredItems([
|
|
...items
|
|
.filter((item) =>
|
|
item.toLowerCase().includes((inputValue ?? '').toLowerCase())
|
|
)
|
|
.slice(0, 50),
|
|
])
|
|
}
|
|
|
|
const handleItemClick = (item: string) => () => {
|
|
setInputValue(item)
|
|
debounced(item)
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<Flex ref={dropdownRef} w="full">
|
|
<Popover
|
|
isOpen={isOpen}
|
|
initialFocusRef={inputRef}
|
|
matchWidth
|
|
offset={[0, 0]}
|
|
isLazy
|
|
>
|
|
<PopoverTrigger>
|
|
<Input
|
|
ref={inputRef}
|
|
value={inputValue}
|
|
onChange={onInputChange}
|
|
onClick={onOpen}
|
|
type="text"
|
|
{...inputProps}
|
|
/>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
maxH="35vh"
|
|
overflowY="scroll"
|
|
role="menu"
|
|
w="inherit"
|
|
shadow="lg"
|
|
>
|
|
{filteredItems.length > 0 && (
|
|
<>
|
|
{filteredItems.map((item, idx) => {
|
|
return (
|
|
<Button
|
|
minH="40px"
|
|
key={idx}
|
|
onClick={handleItemClick(item)}
|
|
fontSize="16px"
|
|
fontWeight="normal"
|
|
rounded="none"
|
|
colorScheme="gray"
|
|
role="menuitem"
|
|
variant="ghost"
|
|
justifyContent="flex-start"
|
|
>
|
|
{item}
|
|
</Button>
|
|
)
|
|
})}
|
|
</>
|
|
)}
|
|
</PopoverContent>
|
|
</Popover>
|
|
</Flex>
|
|
)
|
|
}
|