diff --git a/packages/ui-services/src/Keyboard/platformCheck.ts b/packages/ui-services/src/Keyboard/platformCheck.ts index aefcb5c5f..10760145f 100644 --- a/packages/ui-services/src/Keyboard/platformCheck.ts +++ b/packages/ui-services/src/Keyboard/platformCheck.ts @@ -7,3 +7,7 @@ export function isMacPlatform(platform: Platform) { export function isWindowsPlatform(platform: Platform) { return platform === Platform.WindowsDesktop || platform === Platform.WindowsWeb } + +export function isMobilePlatform(platform: Platform) { + return platform === Platform.Ios || platform === Platform.Android +} diff --git a/packages/web/src/javascripts/Components/KeyboardShortcutIndicator/KeyboardShortcutIndicator.tsx b/packages/web/src/javascripts/Components/KeyboardShortcutIndicator/KeyboardShortcutIndicator.tsx index 43c67153e..4ab426267 100644 --- a/packages/web/src/javascripts/Components/KeyboardShortcutIndicator/KeyboardShortcutIndicator.tsx +++ b/packages/web/src/javascripts/Components/KeyboardShortcutIndicator/KeyboardShortcutIndicator.tsx @@ -1,4 +1,10 @@ -import { PlatformedKeyboardShortcut, keyboardCharacterForModifier, isMacPlatform } from '@standardnotes/ui-services' +import { + PlatformedKeyboardShortcut, + keyboardCharacterForModifier, + isMacPlatform, + isMobilePlatform, +} from '@standardnotes/ui-services' +import { useMemo } from 'react' type Props = { shortcut: PlatformedKeyboardShortcut @@ -6,22 +12,31 @@ type Props = { } export const KeyboardShortcutIndicator = ({ shortcut, className }: Props) => { - const modifiers = shortcut.modifiers || [] - const primaryKey = (shortcut.key || '').toUpperCase() const addPluses = !isMacPlatform(shortcut.platform) const spacingClass = addPluses ? '' : 'ml-0.5' - const keys: string[] = [] - modifiers.forEach((modifier, index) => { - keys.push(keyboardCharacterForModifier(modifier, shortcut.platform)) + const keys = useMemo(() => { + const modifiers = shortcut.modifiers || [] + const primaryKey = (shortcut.key || '').toUpperCase() - if (addPluses && (primaryKey || index !== modifiers.length - 1)) { - keys.push('+') + const results: string[] = [] + modifiers.forEach((modifier, index) => { + results.push(keyboardCharacterForModifier(modifier, shortcut.platform)) + + if (addPluses && (primaryKey || index !== modifiers.length - 1)) { + results.push('+') + } + }) + + if (primaryKey) { + results.push(primaryKey) } - }) - if (primaryKey) { - keys.push(primaryKey) + return results + }, [shortcut, addPluses]) + + if (isMobilePlatform(shortcut.platform)) { + return null } return (