Mirrors/lossless-cut
1
0
Fork 0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-22 10:22:31 +01:00
Code Issues Releases Activity

improve keyboard action search

Browse Source
This commit is contained in:
Mikael Finstad 2024-03-17 23:02:34 +08:00
parent 5432751d43
commit 55a915b2f7
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/KeyboardShortcuts.tsx
View File

@ -1,4 +1,4 @@
import { memo, Fragment, useEffect, useMemo, useCallback, useState, ReactNode, SetStateAction, Dispatch } from 'react'; import { memo, Fragment, useEffect, useMemo, useCallback, useState, ReactNode, SetStateAction, Dispatch, useRef } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { SearchInput, PlusIcon, InlineAlert, UndoIcon, Paragraph, TakeActionIcon, IconButton, Button, DeleteIcon, AddIcon, Heading, Text, Dialog } from 'evergreen-ui'; import { SearchInput, PlusIcon, InlineAlert, UndoIcon, Paragraph, TakeActionIcon, IconButton, Button, DeleteIcon, AddIcon, Heading, Text, Dialog } from 'evergreen-ui';
import { FaMouse, FaPlus, FaStepForward, FaStepBackward } from 'react-icons/fa'; import { FaMouse, FaPlus, FaStepForward, FaStepBackward } from 'react-icons/fa';
@ -621,8 +621,21 @@ const KeyboardShortcuts = memo(({
const [creatingBinding, setCreatingBinding] = useState<KeyboardAction>(); const [creatingBinding, setCreatingBinding] = useState<KeyboardAction>();
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const searchInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
searchInputRef.current?.focus();
}, []);
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const actionEntries = useMemo(() => (Object.entries(actionsMap) as any as [keyof typeof actionsMap, typeof actionsMap[keyof typeof actionsMap]][]).filter(([, { name }]) => !searchQuery || name.toLowerCase().includes(searchQuery.toLowerCase())), [actionsMap, searchQuery]); const actionEntries = useMemo(() => (Object.entries(actionsMap) as any as [keyof typeof actionsMap, typeof actionsMap[keyof typeof actionsMap]][]).filter(([, { name, category }]) => {
const searchQueryTrimmed = searchQuery.toLowerCase().trim();
return (
!searchQuery
|| name.toLowerCase().includes(searchQueryTrimmed)
|| (category != null && category.toLowerCase().includes(searchQueryTrimmed))
);
}), [actionsMap, searchQuery]);
const categoriesWithActions = useMemo(() => Object.entries(groupBy(actionEntries, ([, { category }]) => category)), [actionEntries]); const categoriesWithActions = useMemo(() => Object.entries(groupBy(actionEntries, ([, { category }]) => category)), [actionEntries]);
@ -646,7 +659,7 @@ const KeyboardShortcuts = memo(({
setCreatingBinding(action); setCreatingBinding(action);
}, []); }, []);
const stringifyKeys = (keys) => keys.join('+'); const stringifyKeys = (keys: string[]) => keys.join('+');
const onNewKeyBindingConfirmed = useCallback((action: KeyboardAction, keys: string[]) => { const onNewKeyBindingConfirmed = useCallback((action: KeyboardAction, keys: string[]) => {
const fixedKeys = fixKeys(keys); const fixedKeys = fixKeys(keys);
@ -672,7 +685,7 @@ const KeyboardShortcuts = memo(({
<> <>
<div style={{ color: 'black', marginBottom: '1em' }}> <div style={{ color: 'black', marginBottom: '1em' }}>
<div> <div>
<SearchInput value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search" width="100%" /> <SearchInput ref={searchInputRef} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search" width="100%" />
</div> </div>
{categoriesWithActions.map(([category, actionsInCategory]) => ( {categoriesWithActions.map(([category, actionsInCategory]) => (