particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CreateImageWizard: packages can be searched with enter key

Browse source 
When focused on either the available packages or chosen packages search
bar, pressing the enter key will search/filter the packages.
This commit is contained in:
Jacob Kozol 2021-11-01 13:07:03 +01:00 • committed by Tom Gundersen
parent d61fbdcc9b
commit 9feccc66d6
1 changed files with 26 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/Components/CreateImageWizard/formComponents/Packages.js
View file

@ -1,4 +1,4 @@
import React, { useState, useRef, } from 'react';
import React, { useState, useRef, useEffect, } from 'react';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import api from '../../../api';
@ -29,6 +29,7 @@ const Packages = ({ defaultArch, ...props }) => {
const [ packagesAvailable, setPackagesAvailable ] = useState([]);
const [ packagesChosen, setPackagesChosen ] = useState([]);
const [ filterChosen, setFilterChosen ] = useState('');
const [ focus, setFocus ] = useState('');
// call api to list available packages
const handlePackagesAvailableSearch = async () => {
@ -54,6 +55,26 @@ const Packages = ({ defaultArch, ...props }) => {
setPackagesChosen(filteredPackagesChosen);
};
const keydownHandler = (event) => {
if (event.key === 'Enter') {
if (focus === 'available') {
event.stopPropagation();
handlePackagesAvailableSearch();
} else if (focus === 'chosen') {
event.stopPropagation();
handlePackagesChosenSearch();
}
}
};
useEffect(() => {
document.addEventListener('keydown', keydownHandler, false);
return () => {
document.removeEventListener('keydown', keydownHandler, false);
};
});
// move selected packages
const moveSelected = (fromAvailable) => {
const sourcePackages = fromAvailable ? packagesAvailable : packagesChosen;
@ -114,6 +135,8 @@ const Packages = ({ defaultArch, ...props }) => {
searchInput={ <SearchInput
data-testid="search-available-pkgs-input"
value={ packagesSearchName.current }
onFocus={ () => setFocus('available') }
onBlur={ () => setFocus('') }
onChange={ (val) => {
packagesSearchName.current = val;
} } /> }
@ -177,6 +200,8 @@ const Packages = ({ defaultArch, ...props }) => {
title="Chosen packages"
searchInput={ <SearchInput
value={ filterChosen }
onFocus={ () => setFocus('chosen') }
onBlur={ () => setFocus('') }
onChange={ (val) => setFilterChosen(val) } /> }
actions={ [
<Button