From 9285a0ba9ad7f39b7ef3bc1d8e0a3af6ac97cc95 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 12 Apr 2024 23:56:34 +0800 Subject: [PATCH] Test upgrade react-hotkeys-hook for the keys fix --- package-lock.json | 8 ++++---- package.json | 2 +- src/components/background-service.jsx | 2 +- src/components/columns.jsx | 2 +- src/components/compose-button.jsx | 3 +-- src/components/compose.jsx | 2 +- src/components/keyboard-shortcuts-help.jsx | 2 +- src/components/media-modal.jsx | 2 +- src/components/modal.jsx | 2 +- src/components/search-command.jsx | 3 ++- src/components/shortcuts.jsx | 2 +- src/components/status.jsx | 2 +- src/components/timeline.jsx | 2 +- src/pages/catchup.jsx | 2 +- src/pages/notifications.jsx | 2 +- src/pages/search.jsx | 2 +- src/pages/status.jsx | 2 +- src/utils/useHotkeys.js | 16 ++++++++++++++++ 18 files changed, 37 insertions(+), 21 deletions(-) create mode 100644 src/utils/useHotkeys.js diff --git a/package-lock.json b/package-lock.json index c7328de..e3e10c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "p-throttle": "~6.1.0", "preact": "~10.20.1", "punycode": "~2.3.1", - "react-hotkeys-hook": "~4.5.0", + "react-hotkeys-hook": "~5.0.0-1", "react-intersection-observer": "~9.8.1", "react-quick-pinch-zoom": "~5.1.0", "react-router-dom": "6.6.2", @@ -7221,9 +7221,9 @@ } }, "node_modules/react-hotkeys-hook": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz", - "integrity": "sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==", + "version": "5.0.0-1", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.0.0-1.tgz", + "integrity": "sha512-nb8WD8IBrlEn3O2nlMoaBrWCxg2/vjgK3XFquDMM50qMbRzlOrR/p4PUlvh0rfuOMqEtKTGaL5BwkCh3rZ3T1w==", "peerDependencies": { "react": ">=16.8.1", "react-dom": ">=16.8.1" diff --git a/package.json b/package.json index a6f2497..90f940e 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "p-throttle": "~6.1.0", "preact": "~10.20.1", "punycode": "~2.3.1", - "react-hotkeys-hook": "~4.5.0", + "react-hotkeys-hook": "~5.0.0-1", "react-intersection-observer": "~9.8.1", "react-quick-pinch-zoom": "~5.1.0", "react-router-dom": "6.6.2", diff --git a/src/components/background-service.jsx b/src/components/background-service.jsx index 15647fe..08026d6 100644 --- a/src/components/background-service.jsx +++ b/src/components/background-service.jsx @@ -1,10 +1,10 @@ import { memo } from 'preact/compat'; import { useEffect, useRef, useState } from 'preact/hooks'; -import { useHotkeys } from 'react-hotkeys-hook'; import { api } from '../utils/api'; import showToast from '../utils/show-toast'; import states, { saveStatus } from '../utils/states'; +import useHotkeys from '../utils/useHotkeys'; import useInterval from '../utils/useInterval'; import usePageVisibility from '../utils/usePageVisibility'; diff --git a/src/components/columns.jsx b/src/components/columns.jsx index f21e116..5d57b75 100644 --- a/src/components/columns.jsx +++ b/src/components/columns.jsx @@ -1,4 +1,3 @@ -import { useHotkeys } from 'react-hotkeys-hook'; import { useSnapshot } from 'valtio'; import Bookmarks from '../pages/bookmarks'; @@ -12,6 +11,7 @@ import Public from '../pages/public'; import Search from '../pages/search'; import Trending from '../pages/trending'; import states from '../utils/states'; +import useHotkeys from '../utils/useHotkeys'; import useTitle from '../utils/useTitle'; function Columns() { diff --git a/src/components/compose-button.jsx b/src/components/compose-button.jsx index ef64adf..a9c21f8 100644 --- a/src/components/compose-button.jsx +++ b/src/components/compose-button.jsx @@ -1,8 +1,7 @@ -import { useHotkeys } from 'react-hotkeys-hook'; - import openCompose from '../utils/open-compose'; import openOSK from '../utils/open-osk'; import states from '../utils/states'; +import useHotkeys from '../utils/useHotkeys'; import Icon from './icon'; diff --git a/src/components/compose.jsx b/src/components/compose.jsx index de3177a..a589fc3 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -5,7 +5,6 @@ import { MenuItem } from '@szhsin/react-menu'; import { deepEqual } from 'fast-equals'; import { forwardRef } from 'preact/compat'; import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; -import { useHotkeys } from 'react-hotkeys-hook'; import stringLength from 'string-length'; import { uid } from 'uid/single'; import { useDebouncedCallback, useThrottledCallback } from 'use-debounce'; @@ -33,6 +32,7 @@ import { } from '../utils/store-utils'; import supports from '../utils/supports'; import useCloseWatcher from '../utils/useCloseWatcher'; +import useHotkeys from '../utils/useHotkeys'; import useInterval from '../utils/useInterval'; import visibilityIconsMap from '../utils/visibility-icons-map'; diff --git a/src/components/keyboard-shortcuts-help.jsx b/src/components/keyboard-shortcuts-help.jsx index a3925f2..b2bc290 100644 --- a/src/components/keyboard-shortcuts-help.jsx +++ b/src/components/keyboard-shortcuts-help.jsx @@ -1,10 +1,10 @@ import './keyboard-shortcuts-help.css'; import { memo } from 'preact/compat'; -import { useHotkeys } from 'react-hotkeys-hook'; import { useSnapshot } from 'valtio'; import states from '../utils/states'; +import useHotkeys from '../utils/useHotkeys'; import Icon from './icon'; import Modal from './modal'; diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx index 968988b..e4bd93c 100644 --- a/src/components/media-modal.jsx +++ b/src/components/media-modal.jsx @@ -7,11 +7,11 @@ import { useRef, useState, } from 'preact/hooks'; -import { useHotkeys } from 'react-hotkeys-hook'; import { oklab2rgb, rgb2oklab } from '../utils/color-utils'; import showToast from '../utils/show-toast'; import states from '../utils/states'; +import useHotkeys from '../utils/useHotkeys'; import Icon from './icon'; import Link from './link'; diff --git a/src/components/modal.jsx b/src/components/modal.jsx index f1aaaf0..3cdc4d2 100644 --- a/src/components/modal.jsx +++ b/src/components/modal.jsx @@ -2,9 +2,9 @@ import './modal.css'; import { createPortal } from 'preact/compat'; import { useEffect, useRef } from 'preact/hooks'; -import { useHotkeys } from 'react-hotkeys-hook'; import useCloseWatcher from '../utils/useCloseWatcher'; +import useHotkeys from '../utils/useHotkeys'; const $modalContainer = document.getElementById('modal-container'); diff --git a/src/components/search-command.jsx b/src/components/search-command.jsx index c40a92f..cba31be 100644 --- a/src/components/search-command.jsx +++ b/src/components/search-command.jsx @@ -2,7 +2,8 @@ import './search-command.css'; import { memo } from 'preact/compat'; import { useRef, useState } from 'preact/hooks'; -import { useHotkeys } from 'react-hotkeys-hook'; + +import useHotkeys from '../utils/useHotkeys'; import SearchForm from './search-form'; diff --git a/src/components/shortcuts.jsx b/src/components/shortcuts.jsx index ddbe9cd..f043a94 100644 --- a/src/components/shortcuts.jsx +++ b/src/components/shortcuts.jsx @@ -3,7 +3,6 @@ import './shortcuts.css'; import { MenuDivider } from '@szhsin/react-menu'; import { memo } from 'preact/compat'; import { useRef, useState } from 'preact/hooks'; -import { useHotkeys } from 'react-hotkeys-hook'; import { useNavigate } from 'react-router-dom'; import { useSnapshot } from 'valtio'; @@ -11,6 +10,7 @@ import { SHORTCUTS_META } from '../components/shortcuts-settings'; import { api } from '../utils/api'; import { getLists } from '../utils/lists'; import states from '../utils/states'; +import useHotkeys from '../utils/useHotkeys'; import AsyncText from './AsyncText'; import Icon from './icon'; diff --git a/src/components/status.jsx b/src/components/status.jsx index 9c09314..a3f8fad 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -21,7 +21,6 @@ import { useState, } from 'preact/hooks'; import punycode from 'punycode'; -import { useHotkeys } from 'react-hotkeys-hook'; import { useLongPress } from 'use-long-press'; import { useSnapshot } from 'valtio'; @@ -56,6 +55,7 @@ import states, { getStatus, saveStatus, statusKey } from '../utils/states'; import statusPeek from '../utils/status-peek'; import store from '../utils/store'; import unfurlMastodonLink from '../utils/unfurl-link'; +import useHotkeys from '../utils/useHotkeys'; import useTruncated from '../utils/useTruncated'; import visibilityIconsMap from '../utils/visibility-icons-map'; diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index 6fe1273..33cdc9e 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -6,7 +6,6 @@ import { useRef, useState, } from 'preact/hooks'; -import { useHotkeys } from 'react-hotkeys-hook'; import { InView } from 'react-intersection-observer'; import { useDebouncedCallback } from 'use-debounce'; import { useSnapshot } from 'valtio'; @@ -17,6 +16,7 @@ import states, { statusKey } from '../utils/states'; import statusPeek from '../utils/status-peek'; import { isMediaFirstInstance } from '../utils/store-utils'; import { groupBoosts, groupContext } from '../utils/timeline-utils'; +import useHotkeys from '../utils/useHotkeys'; import useInterval from '../utils/useInterval'; import usePageVisibility from '../utils/usePageVisibility'; import useScroll from '../utils/useScroll'; diff --git a/src/pages/catchup.jsx b/src/pages/catchup.jsx index 9a5f318..6801681 100644 --- a/src/pages/catchup.jsx +++ b/src/pages/catchup.jsx @@ -14,7 +14,6 @@ import { useState, } from 'preact/hooks'; import punycode from 'punycode'; -import { useHotkeys } from 'react-hotkeys-hook'; import { useSearchParams } from 'react-router-dom'; import { uid } from 'uid/single'; @@ -42,6 +41,7 @@ import statusPeek from '../utils/status-peek'; import store from '../utils/store'; import { getCurrentAccountNS } from '../utils/store-utils'; import { assignFollowedTags } from '../utils/timeline-utils'; +import useHotkeys from '../utils/useHotkeys'; import useTitle from '../utils/useTitle'; const FILTER_CONTEXT = 'home'; diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 2c46a43..b226978 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -3,7 +3,6 @@ import './notifications.css'; import { Fragment } from 'preact'; import { memo } from 'preact/compat'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; -import { useHotkeys } from 'react-hotkeys-hook'; import { InView } from 'react-intersection-observer'; import { useSearchParams } from 'react-router-dom'; import { useSnapshot } from 'valtio'; @@ -29,6 +28,7 @@ import showToast from '../utils/show-toast'; import states, { saveStatus } from '../utils/states'; import { getCurrentInstance } from '../utils/store-utils'; import supports from '../utils/supports'; +import useHotkeys from '../utils/useHotkeys'; import usePageVisibility from '../utils/usePageVisibility'; import useScroll from '../utils/useScroll'; import useTitle from '../utils/useTitle'; diff --git a/src/pages/search.jsx b/src/pages/search.jsx index 37b30e4..315bc41 100644 --- a/src/pages/search.jsx +++ b/src/pages/search.jsx @@ -2,7 +2,6 @@ import './search.css'; import { useAutoAnimate } from '@formkit/auto-animate/preact'; import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'; -import { useHotkeys } from 'react-hotkeys-hook'; import { InView } from 'react-intersection-observer'; import { useParams, useSearchParams } from 'react-router-dom'; @@ -16,6 +15,7 @@ import Status from '../components/status'; import { api } from '../utils/api'; import { fetchRelationships } from '../utils/relationships'; import shortenNumber from '../utils/shorten-number'; +import useHotkeys from '../utils/useHotkeys'; import usePageVisibility from '../utils/usePageVisibility'; import useTitle from '../utils/useTitle'; diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 50c3b30..25a9708 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -13,7 +13,6 @@ import { useState, } from 'preact/hooks'; import punycode from 'punycode'; -import { useHotkeys } from 'react-hotkeys-hook'; import { InView } from 'react-intersection-observer'; import { matchPath, useSearchParams } from 'react-router-dom'; import { useSnapshot } from 'valtio'; @@ -38,6 +37,7 @@ import states, { } from '../utils/states'; import statusPeek from '../utils/status-peek'; import { getCurrentAccount } from '../utils/store-utils'; +import useHotkeys from '../utils/useHotkeys'; import useScroll from '../utils/useScroll'; import useTitle from '../utils/useTitle'; diff --git a/src/utils/useHotkeys.js b/src/utils/useHotkeys.js new file mode 100644 index 0000000..d3a78a2 --- /dev/null +++ b/src/utils/useHotkeys.js @@ -0,0 +1,16 @@ +import { useHotkeys } from 'react-hotkeys-hook'; + +// Patch useHotKeys to add additional option +// E.g. useHotkeys('!', callback, {useKey: true}) + +export default function (keys, callback, options, deps) { + return useHotkeys( + keys, + callback, + { + useKey: true, + ...options, + }, + deps, + ); +}