From 76e8e2e99977e042a52a098e9e8fed1cd9f700c5 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 14 Sep 2023 12:57:17 -0500 Subject: [PATCH] Create a wrapper component around react-hotkeys --- app/soapbox/components/status.tsx | 2 +- app/soapbox/components/tombstone.tsx | 2 +- .../feed-suggestions/feed-suggestions.tsx | 2 +- .../notifications/components/notification.tsx | 2 +- .../features/status/components/thread.tsx | 2 +- app/soapbox/features/ui/components/hotkeys.tsx | 18 ++++++++++++++++++ .../features/ui/util/global-hotkeys.tsx | 5 +++-- 7 files changed, 26 insertions(+), 7 deletions(-) create mode 100644 app/soapbox/features/ui/components/hotkeys.tsx diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 46a37b21e..d3ef12c1d 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -1,6 +1,5 @@ import clsx from 'clsx'; import React, { useEffect, useRef, useState } from 'react'; -import { HotKeys } from 'react-hotkeys'; import { useIntl, FormattedMessage, defineMessages } from 'react-intl'; import { Link, useHistory } from 'react-router-dom'; @@ -11,6 +10,7 @@ import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses'; import TranslateButton from 'soapbox/components/translate-button'; import AccountContainer from 'soapbox/containers/account-container'; import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container'; +import { HotKeys } from 'soapbox/features/ui/components/hotkeys'; import { useAppDispatch, useSettings } from 'soapbox/hooks'; import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status'; diff --git a/app/soapbox/components/tombstone.tsx b/app/soapbox/components/tombstone.tsx index 2c1c0187e..e8efe24c7 100644 --- a/app/soapbox/components/tombstone.tsx +++ b/app/soapbox/components/tombstone.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { HotKeys } from 'react-hotkeys'; import { FormattedMessage } from 'react-intl'; import { Text } from 'soapbox/components/ui'; +import { HotKeys } from 'soapbox/features/ui/components/hotkeys'; interface ITombstone { id: string diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx index 6db977449..6e6af928c 100644 --- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx +++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { HotKeys } from 'react-hotkeys'; import { defineMessages, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; @@ -9,6 +8,7 @@ import { useAppSelector } from 'soapbox/hooks'; import { Card, CardBody, CardTitle, HStack, Stack, Text } from '../../components/ui'; import ActionButton from '../ui/components/action-button'; +import { HotKeys } from '../ui/components/hotkeys'; const messages = defineMessages({ heading: { id: 'feed_suggestions.heading', defaultMessage: 'Suggested Profiles' }, diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx index 29f54bc2f..3395f8d5a 100644 --- a/app/soapbox/features/notifications/components/notification.tsx +++ b/app/soapbox/features/notifications/components/notification.tsx @@ -1,5 +1,4 @@ import React, { useCallback } from 'react'; -import { HotKeys } from 'react-hotkeys'; import { defineMessages, useIntl, FormattedMessage, IntlShape, MessageDescriptor, defineMessage } from 'react-intl'; import { Link, useHistory } from 'react-router-dom'; @@ -12,6 +11,7 @@ import Icon from 'soapbox/components/icon'; import { HStack, Text, Emoji } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account-container'; import StatusContainer from 'soapbox/containers/status-container'; +import { HotKeys } from 'soapbox/features/ui/components/hotkeys'; import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks'; import { makeGetNotification } from 'soapbox/selectors'; import { NotificationType, validType } from 'soapbox/utils/notification'; diff --git a/app/soapbox/features/status/components/thread.tsx b/app/soapbox/features/status/components/thread.tsx index 1e0e79100..84d71d446 100644 --- a/app/soapbox/features/status/components/thread.tsx +++ b/app/soapbox/features/status/components/thread.tsx @@ -2,7 +2,6 @@ import { createSelector } from '@reduxjs/toolkit'; import clsx from 'clsx'; import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable'; import React, { useEffect, useRef, useState } from 'react'; -import { HotKeys } from 'react-hotkeys'; import { useIntl } from 'react-intl'; import { useHistory } from 'react-router-dom'; import { type VirtuosoHandle } from 'react-virtuoso'; @@ -17,6 +16,7 @@ import StatusActionBar from 'soapbox/components/status-action-bar'; import Tombstone from 'soapbox/components/tombstone'; import { Stack } from 'soapbox/components/ui'; import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status'; +import { HotKeys } from 'soapbox/features/ui/components/hotkeys'; import PendingStatus from 'soapbox/features/ui/components/pending-status'; import { useAppDispatch, useAppSelector, useOwnAccount, useSettings } from 'soapbox/hooks'; import { RootState } from 'soapbox/store'; diff --git a/app/soapbox/features/ui/components/hotkeys.tsx b/app/soapbox/features/ui/components/hotkeys.tsx new file mode 100644 index 000000000..432d7375f --- /dev/null +++ b/app/soapbox/features/ui/components/hotkeys.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { HotKeys as _HotKeys } from 'react-hotkeys'; + +type IHotKeys = React.ComponentProps; + +/** + * Wrapper component around `react-hotkeys`. + * `react-hotkeys` is a legacy component, so confining its import to one place is beneficial. + */ +const HotKeys = React.forwardRef(({ children, ...rest }, ref) => { + return ( + <_HotKeys {...rest} ref={ref}> + {children} + + ); +}); + +export { HotKeys, type IHotKeys }; \ No newline at end of file diff --git a/app/soapbox/features/ui/util/global-hotkeys.tsx b/app/soapbox/features/ui/util/global-hotkeys.tsx index 0a4fbb3be..cc8675b63 100644 --- a/app/soapbox/features/ui/util/global-hotkeys.tsx +++ b/app/soapbox/features/ui/util/global-hotkeys.tsx @@ -1,11 +1,12 @@ import React, { useRef } from 'react'; -import { HotKeys } from 'react-hotkeys'; import { useHistory } from 'react-router-dom'; import { resetCompose } from 'soapbox/actions/compose'; import { openModal } from 'soapbox/actions/modals'; import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks'; +import { HotKeys } from '../components/hotkeys'; + const keyMap = { help: '?', new: 'n', @@ -83,7 +84,7 @@ const GlobalHotkeys: React.FC = ({ children, node }) => { } }; - const setHotkeysRef: React.LegacyRef = (c: any) => { + const setHotkeysRef: React.LegacyRef = (c: any) => { hotkeys.current = c; if (!me || !hotkeys.current) return;