Add escape handler
This commit is contained in:
parent
226fea2c6d
commit
b4301486f3
1 changed files with 10 additions and 2 deletions
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Reference in a new issue