import React, { useState, useRef, ChangeEventHandler } from 'react'; import { useDebounce } from 'use-debounce'; import { useQuery } from 'react-query'; import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from '@reach/combobox'; import '@reach/combobox/styles.css'; import invariant from 'tiny-invariant'; import { useDeferredSubmit, useHiddenField, groupId } from './shared/hooks'; type TransformResults = (term: string, results: unknown) => Result[]; type TransformResult = ( result: Result ) => [key: string, value: string, label: string]; export type ComboSearchProps = { onChange?: (value: string | null, result?: Result) => void; value?: string; scope: string; scopeExtra?: string; minimumInputLength: number; transformResults: TransformResults; transformResult: TransformResult; allowInputValues?: boolean; id?: string; describedby?: string; className?: string; placeholder?: string; }; type QueryKey = readonly [ scope: string, term: string, extra: string | undefined ]; function ComboSearch({ onChange, value: controlledValue, scope, scopeExtra, minimumInputLength, transformResult, allowInputValues = false, transformResults = (_, results) => results as Result[], id, describedby, ...props }: ComboSearchProps) { invariant(id || onChange, 'ComboSearch: `id` or `onChange` are required'); const group = !onChange && id ? groupId(id) : undefined; const [externalValue, setExternalValue, hiddenField] = useHiddenField(group); const [, setExternalId] = useHiddenField(group, 'external_id'); const initialValue = externalValue ? externalValue : controlledValue; const [searchTerm, setSearchTerm] = useState(''); const [debouncedSearchTerm] = useDebounce(searchTerm, 300); const [value, setValue] = useState(initialValue); const resultsMap = useRef< Record >({}); const getLabel = (result: Result) => { const [, value, label] = transformResult(result); return label ?? value; }; const setExternalValueAndId = (label: string) => { const { key, value, result } = resultsMap.current[label]; if (onChange) { onChange(value, result); } else { setExternalId(key); setExternalValue(value); } }; const awaitFormSubmit = useDeferredSubmit(hiddenField); const handleOnChange: ChangeEventHandler = ({ target: { value } }) => { setValue(value); if (!value) { if (onChange) { onChange(null); } else { setExternalId(''); setExternalValue(''); } } else if (value.length >= minimumInputLength) { setSearchTerm(value.trim()); if (allowInputValues) { setExternalId(''); setExternalValue(value); } } }; const handleOnSelect = (value: string) => { setExternalValueAndId(value); setValue(value); setSearchTerm(''); awaitFormSubmit.done(); }; const { isSuccess, data } = useQuery( [scope, debouncedSearchTerm, scopeExtra], { enabled: !!debouncedSearchTerm, refetchOnMount: false } ); const results = isSuccess && data ? transformResults(debouncedSearchTerm, data) : []; const onBlur = () => { if (!allowInputValues && isSuccess && results[0]) { const label = getLabel(results[0]); awaitFormSubmit(() => { handleOnSelect(label); }); } }; return ( {isSuccess && ( {results.length > 0 ? ( {results.map((result, index) => { const label = getLabel(result); const [key, value] = transformResult(result); resultsMap.current[label] = { key, value, result }; return ; })} ) : ( Aucun résultat trouvé )} )} ); } export default ComboSearch;