Merge pull request #6224 from betagouv/main

2021-05-21-01
This commit is contained in:
Kara Diaby 2021-05-21 12:45:38 +02:00 committed by GitHub
commit a59aae07c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 12 deletions

View file

@ -19,6 +19,7 @@ import '@reach/combobox/styles.css';
import { matchSorter } from 'match-sorter'; import { matchSorter } from 'match-sorter';
import { fire } from '@utils'; import { fire } from '@utils';
import { XIcon } from '@heroicons/react/outline'; import { XIcon } from '@heroicons/react/outline';
import isHotkey from 'is-hotkey';
const Context = createContext(); const Context = createContext();
@ -83,7 +84,12 @@ function ComboMultipleDropdownList({
}; };
const onKeyDown = (event) => { const onKeyDown = (event) => {
if (event.key === 'Enter') { if (
isHotkey('enter', event) ||
isHotkey(' ', event) ||
isHotkey(',', event) ||
isHotkey(';', event)
) {
if ( if (
term && term &&
[...extraOptions, ...options].map(([label]) => label).includes(term) [...extraOptions, ...options].map(([label]) => label).includes(term)
@ -94,28 +100,42 @@ function ComboMultipleDropdownList({
} }
}; };
const saveSelection = (selections) => { const onBlur = (event) => {
setSelections(selections); if (
if (hiddenField) { acceptNewValues &&
hiddenField.setAttribute('value', JSON.stringify(selections)); term &&
fire(hiddenField, 'autosave:trigger'); [...extraOptions, ...options].map(([label]) => label).includes(term)
) {
event.preventDefault();
return onSelect(term);
} }
}; };
const saveSelection = (fn) => {
setSelections((selections) => {
selections = fn(selections);
if (hiddenField) {
hiddenField.setAttribute('value', JSON.stringify(selections));
fire(hiddenField, 'autosave:trigger');
}
return selections;
});
};
const onSelect = (value) => { const onSelect = (value) => {
const maybeValue = [...extraOptions, ...options].find( const maybeValue = [...extraOptions, ...options].find(
([val]) => val == value ([val]) => val == value
); );
const selectedValue = maybeValue && maybeValue[1]; const selectedValue = maybeValue && maybeValue[1];
if (value) { if (selectedValue) {
if ( if (
acceptNewValues && acceptNewValues &&
extraOptions[0] && extraOptions[0] &&
extraOptions[0][0] == selectedValue extraOptions[0][0] == selectedValue
) { ) {
setNewValues([...newValues, selectedValue]); setNewValues((newValues) => [...newValues, selectedValue]);
} }
saveSelection([...selections, selectedValue]); saveSelection((selections) => [...selections, selectedValue]);
} }
setTerm(''); setTerm('');
}; };
@ -123,8 +143,12 @@ function ComboMultipleDropdownList({
const onRemove = (label) => { const onRemove = (label) => {
const optionValue = optionValueByLabel(label); const optionValue = optionValueByLabel(label);
if (optionValue) { if (optionValue) {
saveSelection(selections.filter((value) => value != optionValue)); saveSelection((selections) =>
setNewValues(newValues.filter((value) => value != optionValue)); selections.filter((value) => value != optionValue)
);
setNewValues((newValues) =>
newValues.filter((value) => value != optionValue)
);
} }
inputRef.current.focus(); inputRef.current.focus();
}; };
@ -149,10 +173,11 @@ function ComboMultipleDropdownList({
value={term} value={term}
onChange={handleChange} onChange={handleChange}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
onBlur={onBlur}
autocomplete={false} autocomplete={false}
/> />
</ComboboxTokenLabel> </ComboboxTokenLabel>
{results && ( {results && (results.length > 0 || !acceptNewValues) && (
<ComboboxPopover className="shadow-popup"> <ComboboxPopover className="shadow-popup">
{results.length === 0 && ( {results.length === 0 && (
<p> <p>

View file

@ -19,6 +19,7 @@
"email-butler": "^1.0.13", "email-butler": "^1.0.13",
"highcharts": "^8.1.1", "highcharts": "^8.1.1",
"intersection-observer": "^0.12.0", "intersection-observer": "^0.12.0",
"is-hotkey": "^0.2.0",
"mapbox-gl": "^1.3.0", "mapbox-gl": "^1.3.0",
"match-sorter": "^6.2.0", "match-sorter": "^6.2.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",

View file

@ -6982,6 +6982,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
dependencies: dependencies:
is-extglob "^2.1.1" is-extglob "^2.1.1"
is-hotkey@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/is-hotkey/-/is-hotkey-0.2.0.tgz#1835a68171a91e5c9460869d96336947c8340cef"
integrity sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==
is-installed-globally@^0.3.1: is-installed-globally@^0.3.1:
version "0.3.2" version "0.3.2"
resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141" resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"