pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add escape handler

Browse source
This commit is contained in:
jeffvli 2022-12-21 01:37:12 -08:00
parent 226fea2c6d
commit b4301486f3
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/components/search-input/index.tsx
View file

@ -1,4 +1,4 @@
import { ChangeEvent } from 'react'; import { ChangeEvent, KeyboardEvent } from 'react';
import { TextInputProps } from '@mantine/core'; import { TextInputProps } from '@mantine/core';
import { useFocusWithin, useHotkeys, useMergedRef } from '@mantine/hooks'; import { useFocusWithin, useHotkeys, useMergedRef } from '@mantine/hooks';
import { RiSearchLine } from 'react-icons/ri'; import { RiSearchLine } from 'react-icons/ri';
@ -6,7 +6,6 @@ import { TextInput } from '/@/renderer/components/input';
interface SearchInputProps extends TextInputProps { interface SearchInputProps extends TextInputProps {
initialWidth?: number; initialWidth?: number;
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
openedWidth?: number; openedWidth?: number;
value?: string; value?: string;
} }
@ -31,6 +30,14 @@ export const SearchInput = ({
], ],
]); ]);
const handleEscape = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.code === 'Escape') {
onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>);
ref.current.value = '';
ref.current.blur();
}
};
return ( return (
<TextInput <TextInput
ref={mergedRef} ref={mergedRef}
@ -45,6 +52,7 @@ export const SearchInput = ({
}} }}
width={isOpened ? openedWidth || 200 : initialWidth || 50} width={isOpened ? openedWidth || 200 : initialWidth || 50}
onChange={onChange} onChange={onChange}
onKeyDown={handleEscape}
/> />
); );
}; };