import { ChangeEvent, KeyboardEvent } from 'react'; import { TextInputProps } from '@mantine/core'; import { useFocusWithin, useHotkeys, useMergedRef } from '@mantine/hooks'; import { RiSearchLine } from 'react-icons/ri'; import { TextInput } from '/@/renderer/components/input'; interface SearchInputProps extends TextInputProps { initialWidth?: number; openedWidth?: number; value?: string; } export const SearchInput = ({ initialWidth, onChange, openedWidth, ...props }: SearchInputProps) => { const { ref, focused } = useFocusWithin(); const mergedRef = useMergedRef(ref); const isOpened = focused || ref.current?.value; useHotkeys([ [ 'ctrl+F', () => { ref.current.select(); }, ], ]); const handleEscape = (e: KeyboardEvent) => { if (e.code === 'Escape') { onChange?.({ target: { value: '' } } as ChangeEvent); ref.current.value = ''; ref.current.blur(); } }; return ( } styles={{ input: { backgroundColor: isOpened ? 'inherit' : 'transparent !important', border: 'none !important', padding: isOpened ? '10px' : 0, }, }} width={isOpened ? openedWidth || 200 : initialWidth || 50} onChange={onChange} onKeyDown={handleEscape} /> ); };