External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-07 19:51:08 -03:30
Code Issues Packages Projects Releases Wiki Activity

start usePFSelect hook

Browse Source
This commit is contained in:
Keith Grant
2020-01-09 15:01:44 -08:00
parent 79f0f1940f
commit 7219c17d30
1 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
awx/ui_next/src/screens/Template/shared/LabelSelect.jsx
View File

@@ -12,6 +12,31 @@ function setToString(labels) {
return labels; return labels;
} }
// TODO: extract to shared file
function usePFSelect(value, options, onChange) {
const [currentValue, setCurrentValue] = useState([]);
useEffect(() => {
if (value !== currentValue && options.length) {
const syncedValue = value.map(item =>
options.find(i => i.id === item.id)
);
setCurrentValue(syncedValue);
}
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [value, options]);
const handleSelect = (event, item) => {
if (currentValue.includes(item)) {
onChange(currentValue.filter(i => i.id !== item.id));
} else {
onChange(currentValue.concat(item));
}
};
return [currentValue, handleSelect];
}
async function loadLabelOptions(setLabels, onError) { async function loadLabelOptions(setLabels, onError) {
let labels; let labels;
try { try {
@@ -39,35 +64,17 @@ async function loadLabelOptions(setLabels, onError) {
function LabelSelect({ value, placeholder, onChange, onError }) { function LabelSelect({ value, placeholder, onChange, onError }) {
const [options, setOptions] = useState([]); const [options, setOptions] = useState([]);
const [currentValue, setCurrentValue] = useState([]); const [currentValue, handleSelect] = usePFSelect(value, options, onChange);
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const toggleExpanded = () => { const toggleExpanded = () => {
setIsExpanded(!isExpanded); setIsExpanded(!isExpanded);
}; };
const handleSelect = (event, item) => {
if (currentValue.includes(item)) {
onChange(currentValue.filter(i => i.id !== item.id));
} else {
onChange(currentValue.concat(item));
}
};
useEffect(() => { useEffect(() => {
loadLabelOptions(setOptions, onError); loadLabelOptions(setOptions, onError);
}, [onError]); }, [onError]);
useEffect(() => {
if (value !== currentValue && options.length) {
const syncedValue = value.map(item =>
options.find(i => i.id === item.id)
);
setCurrentValue(syncedValue);
}
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [value, options]);
const renderOptions = opts => { const renderOptions = opts => {
return opts.map(option => ( return opts.map(option => (
<SelectOption key={option.id} value={option}> <SelectOption key={option.id} value={option}>