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

implement keyboar shortcut search #1646

Browse Source
This commit is contained in:
Mikael Finstad 2023-07-17 00:36:58 +02:00
parent 743d190369
commit 1157694c03
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/KeyboardShortcuts.jsx
View File

@ -1,6 +1,6 @@
import React, { memo, Fragment, useEffect, useMemo, useCallback, useState } from 'react'; import React, { memo, Fragment, useEffect, useMemo, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { 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';
import Mousetrap from 'mousetrap'; import Mousetrap from 'mousetrap';
import groupBy from 'lodash/groupBy'; import groupBy from 'lodash/groupBy';
@ -511,8 +511,11 @@ const KeyboardShortcuts = memo(({
}, [actionsMap, keyBindings, setKeyBindings]); }, [actionsMap, keyBindings, setKeyBindings]);
const [creatingBinding, setCreatingBinding] = useState(); const [creatingBinding, setCreatingBinding] = useState();
const [searchQuery, setSearchQuery] = useState('');
const categoriesWithActions = useMemo(() => Object.entries(groupBy(Object.entries(actionsMap), ([, { category }]) => category)), [actionsMap]); const actionEntries = useMemo(() => Object.entries(actionsMap).filter(([, { name }]) => !searchQuery || name.toLowerCase().includes(searchQuery.toLowerCase())), [actionsMap, searchQuery]);
const categoriesWithActions = useMemo(() => Object.entries(groupBy(actionEntries, ([, { category }]) => category)), [actionEntries]);
const onDeleteBindingClick = useCallback(({ action, keys }) => { const onDeleteBindingClick = useCallback(({ action, keys }) => {
// eslint-disable-next-line no-alert // eslint-disable-next-line no-alert
@ -558,6 +561,10 @@ const KeyboardShortcuts = memo(({
return ( return (
<> <>
<div style={{ color: 'black' }}> <div style={{ color: 'black' }}>
<div>
<SearchInput value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search" width="100%" />
</div>
{categoriesWithActions.map(([category, actionsInCategory]) => ( {categoriesWithActions.map(([category, actionsInCategory]) => (
<div key={category}> <div key={category}>
{category !== 'undefined' && <Heading marginTop={30} marginBottom={14}>{category}</Heading>} {category !== 'undefined' && <Heading marginTop={30} marginBottom={14}>{category}</Heading>}