From 5b76624f40cfed423c10bb55335c623459843891 Mon Sep 17 00:00:00 2001 From: foyarash Date: Mon, 7 Dec 2020 12:20:25 +0100 Subject: [PATCH] Change hotkeys package (#110) --- package.json | 2 +- src/hooks/useShortcuts.ts | 41 +++++++++++++++++---------------------- src/pages/index.tsx | 11 ++++------- yarn.lock | 17 ++++++++++------ 4 files changed, 34 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 6fbfe3e4b5..8d24ed83cb 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "react-dnd": "^10.0.2", "react-dnd-html5-backend": "^10.0.2", "react-dom": "^16.12.0", - "react-hotkeys": "^2.0.0", + "react-hotkeys-hook": "^2.4.0", "react-icons": "^3.9.0", "react-redux": "^7.1.3", "react-scripts": "3.3.0", diff --git a/src/hooks/useShortcuts.ts b/src/hooks/useShortcuts.ts index 81527c7b00..06850ff5c6 100644 --- a/src/hooks/useShortcuts.ts +++ b/src/hooks/useShortcuts.ts @@ -2,20 +2,19 @@ import useDispatch from './useDispatch' import { useSelector } from 'react-redux' import { ActionCreators as UndoActionCreators } from 'redux-undo' import { getSelectedComponent } from '~core/selectors/components' +import { useHotkeys } from 'react-hotkeys-hook' -export const keyMap = { - DELETE_NODE: ['backspace', 'del'], +const keyMap = { + DELETE_NODE: 'Backspace, del', TOGGLE_BUILDER_MODE: 'b', TOGGLE_CODE_PANEL: 'c', - UNDO: ['ctrl+z', 'cmd+z'], - REDO: ['ctrl+y', 'cmd+y'], - UNSELECT: ['Escape'], + UNDO: 'ctrl+z, command+z', + REDO: 'ctrl+y, cmd+y', + UNSELECT: 'esc', PARENT: 'p', - DUPLICATE: ['ctrl+d', 'cmd+d'], - KONAMI_CODE: [ - 'up up down down left right left right b a', - 'up up down down left right left right B A', - ], + DUPLICATE: 'ctrl+d, command+d', + KONAMI_CODE: + 'up up down down left right left right b a, up up down down left right left right B A', } const hasNoSpecialKeyPressed = (event: KeyboardEvent | undefined) => @@ -85,19 +84,15 @@ const useShortcuts = () => { dispatch.components.loadDemo('secretchakra') } - const handlers = { - DELETE_NODE: deleteNode, - TOGGLE_BUILDER_MODE: toggleBuilderMode, - TOGGLE_CODE_PANEL: toggleCodePanel, - UNDO: undo, - REDO: redo, - UNSELECT: onUnselect, - PARENT: onSelectParent, - DUPLICATE: onDuplicate, - KONAMI_CODE: onKonamiCode, - } - - return { handlers } + useHotkeys(keyMap.DELETE_NODE, deleteNode, {}, [selected.id]) + useHotkeys(keyMap.TOGGLE_BUILDER_MODE, toggleBuilderMode) + useHotkeys(keyMap.TOGGLE_CODE_PANEL, toggleCodePanel) + useHotkeys(keyMap.UNDO, undo) + useHotkeys(keyMap.REDO, redo) + useHotkeys(keyMap.UNSELECT, onUnselect) + useHotkeys(keyMap.PARENT, onSelectParent) + useHotkeys(keyMap.DUPLICATE, onDuplicate) + useHotkeys(keyMap.KONAMI_CODE, onKonamiCode) } export default useShortcuts diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e5a165e832..c4e072abbc 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,9 +3,8 @@ import { Flex, Box } from '@chakra-ui/react' import { DndProvider } from 'react-dnd' import Backend from 'react-dnd-html5-backend' import { Global } from '@emotion/react' -import { HotKeys } from 'react-hotkeys' import Metadata from '~components/Metadata' -import useShortcuts, { keyMap } from '~hooks/useShortcuts' +import useShortcuts from '~hooks/useShortcuts' import Header from '~components/Header' import Sidebar from '~components/sidebar/Sidebar' import EditorErrorBoundary from '~components/errorBoundaries/EditorErrorBoundary' @@ -14,18 +13,16 @@ import { InspectorProvider } from '~contexts/inspector-context' import Inspector from '~components/inspector/Inspector' const App = () => { - const { handlers } = useShortcuts() + useShortcuts() return ( - + <> ({ html: { minWidth: '860px', backgroundColor: '#1a202c' }, })} /> - -
@@ -50,7 +47,7 @@ const App = () => { - + ) } diff --git a/yarn.lock b/yarn.lock index e1c576cf0c..11cb723c77 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8189,6 +8189,11 @@ hosted-git-info@^2.1.4, hosted-git-info@^2.4.2: resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c" integrity sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg== +hotkeys-js@3.8.1: + version "3.8.1" + resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.1.tgz#fa7051f73bf1dc92a8b8d580a40b247f91966376" + integrity sha512-YlhVQtyG9f1b7GhtzdhR0Pl+cImD1ZrKI6zYUa7QLd0zuThiL7RzZ+ANJyy7z+kmcCpNYBf5PjBa3CjiQ5PFpw== + hpack.js@^2.1.6: version "2.1.6" resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2" @@ -12567,7 +12572,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.3" -prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -12891,12 +12896,12 @@ react-focus-lock@2.4.1: use-callback-ref "^1.2.1" use-sidecar "^1.0.1" -react-hotkeys@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f" - integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q== +react-hotkeys-hook@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-2.4.0.tgz#becf941641bab04c8095917b5876ad8ed53b0dc6" + integrity sha512-Veh9FUe+iXab+lZ5shPoyGDnFBu5codQ15omOXiOvCC/Q5QfTY1lefLVx/Zi2NnYBSXfkfQbhnpE+Rnhi2+wBw== dependencies: - prop-types "^15.6.1" + hotkeys-js "3.8.1" react-icons@^3.9.0: version "3.9.0"