MultiSelect = component(({ options, onChange, label, selection, debug }) => { const inputLabel = label ?? 'Search'; // The label to apply to the search input const enableDebug = debug ?? false; // Whether to enable debug mode (to show internal state) if (!options) { throw new Error('Please provide options to the MultiSelect component'); } if (!onChange) { throw new Error( 'Please provide an onChange function to MultiSelect component' ); } if (debug) { console.debug(selection || []); } const [query, setQuery] = useState(''); const [queryResults, setQueryResults] = useState(options); const [selected, setSelected] = useState(selection || []); const selectInverse = () => { setSelected(options.filter(option => !selected.includes(option))); }; const handleSelection = (event, value) => { event.stopPropagation(); if (event.ctrlKey) { if (selected.includes(value)) { const newSelected = selected.filter(el => el != value); setSelected(newSelected); } else { const newSelected = [...selected, value]; setSelected(newSelected); } } }; useEffect(() => setQueryResults(options), [options]); useEffect(() => onChange(selected), [selected]); useEffect(() => { const regexp = new RegExp(query, 'i'); const newQueryResults = options.filter(result => regexp.test(result)); setQueryResults(newQueryResults); }, [query]); return jsx`

${ debug ? jsx`

${JSON.stringify({ query, selected })}

${JSON.stringify({ queryResults })}

` : '' } ${styles}

${inputLabel}: setQuery(e.target.value)}/>

${queryResults.map( (result, idx) => jsx`

handleSelection(e, result)} >${result}

` )}

`; })