/* eslint react/jsx-props-no-spreading: 0 */ import React, {useState, useCallback} from 'react' import {useCombobox} from 'downshift' import classNames from 'classnames' import debounce from 'debounce-promise' import { ChevronDownIcon } from '@heroicons/react/20/solid' function selectInputText(e) { e.target.select() } function Spinner() { return ( ) } export default function SearchSelect(props) { const [items, setItems] = useState([]) const [loading, setLoading] = useState(false) function fetchOptions({inputValue, isOpen}) { setLoading(isOpen) return props.fetchOptions(inputValue || '').then((loadedItems) => { setLoading(false) setItems(loadedItems) }) } const debouncedFetchOptions = useCallback(debounce(fetchOptions, 200), []) const { isOpen, inputValue, getToggleButtonProps, getMenuProps, getInputProps, getComboboxProps, highlightedIndex, getItemProps, closeMenu, } = useCombobox({ items, itemToString: (item) => item.hasOwnProperty('name') ? item.name : item, onInputValueChange: (changes) => { debouncedFetchOptions(changes) props.onInput(changes.inputValue) if (changes.inputValue === '') { props.onSelect({name: '', code: ''}) } }, onSelectedItemChange: (changes) => { props.onSelect(changes.selectedItem) }, initialSelectedItem: props.initialSelectedItem, onIsOpenChange: (state) => { if (state.isOpen) { fetchOptions(state) } } }) function keydown(e) { if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || e.isComposing || e.keyCode === 229) return if (e.key === 'Enter' && isOpen && highlightedIndex === -1) { closeMenu() e.preventDefault() } } return (
{ !loading && } { loading && }
{ isOpen && ( )}
) }