Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): clear gallery search on esc key

Browse Source
This commit is contained in:
psychedelicious 2024-07-24 14:07:13 +10:00
parent 9870f5a96f
commit 4fdefe58c7
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx
View File

@ -1,7 +1,7 @@
import { IconButton, Input, InputGroup, InputRightElement, Spinner } from '@invoke-ai/ui-library'; import { IconButton, Input, InputGroup, InputRightElement, Spinner } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors'; import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
import type { ChangeEvent } from 'react'; import type { ChangeEvent, KeyboardEvent } from 'react';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiXBold } from 'react-icons/pi'; import { PiXBold } from 'react-icons/pi';
@ -27,6 +27,16 @@ export const GallerySearch = ({ searchTerm, onChangeSearchTerm, onResetSearchTer
[onChangeSearchTerm] [onChangeSearchTerm]
); );
const handleKeydown = useCallback(
(e: KeyboardEvent<HTMLInputElement>) => {
// exit search mode on escape
if (e.key === 'Escape') {
onResetSearchTerm();
}
},
[onResetSearchTerm]
);
return ( return (
<InputGroup> <InputGroup>
<Input <Input
@ -34,6 +44,7 @@ export const GallerySearch = ({ searchTerm, onChangeSearchTerm, onResetSearchTer
value={searchTerm} value={searchTerm}
onChange={handleChangeInput} onChange={handleChangeInput}
data-testid="image-search-input" data-testid="image-search-input"
onKeyDown={handleKeydown}
/> />
{isPending && ( {isPending && (
<InputRightElement h="full" pe={2}> <InputRightElement h="full" pe={2}>