From 0cf3aad910514262b2127c40317c3aca79b43310 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Thu, 10 Dec 2020 21:37:21 -0600
Subject: [PATCH] Add keyboard shortcuts to action buttons

Just run and stop button have keys assigned for now.
---
 src/components/ActionButton.tsx | 42 +++++++++++++++++++++++++++++----
 src/components/DocsButton.tsx   |  3 ++-
 src/components/ReplButton.tsx   |  3 ++-
 src/components/RunButton.tsx    |  3 ++-
 src/components/SaveAsButton.tsx |  3 ++-
 src/components/StopButton.tsx   |  3 ++-
 src/components/Terminal.tsx     |  4 ++++
 src/components/Toolbar.tsx      |  4 ++--
 tsconfig.json                   |  1 +
 9 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index 050b3bf4..3f7a9c13 100644
--- a/src/components/ActionButton.tsx
+++ b/src/components/ActionButton.tsx
@@ -1,7 +1,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
-import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
+import { Button, Hotkey, Hotkeys, Intent, Position, Tooltip } from '@blueprintjs/core';
+// importing this way due to https://github.com/palantir/blueprint/issues/3604
+import { HotkeysTarget } from '@blueprintjs/core/lib/esnext/components/hotkeys/hotkeysTarget';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
 import { TooltipId } from './button-i18n';
@@ -10,6 +12,8 @@ import en from './button-i18n.en.json';
 export interface ActionButtonProps {
     /** A unique id for each instance. */
     readonly id: string;
+    /** Keyboard shortcut. */
+    readonly keyboardShortcut?: string;
     /** Tooltip text that appears when hovering over the button. */
     readonly tooltip: TooltipId;
     /** Icon shown on the button. */
@@ -22,14 +26,19 @@ export interface ActionButtonProps {
 
 type Props = ActionButtonProps & WithI18nProps;
 
+@HotkeysTarget
 class ActionButton extends React.Component<Props> {
+    private buttonRef: React.RefObject<Button> = React.createRef();
+
     render(): JSX.Element {
+        let tooltipText = this.props.i18n.translate(this.props.tooltip);
+        if (this.props.keyboardShortcut) {
+            tooltipText += ` (${this.props.keyboardShortcut})`;
+        }
         return (
-            <Tooltip
-                content={this.props.i18n.translate(this.props.tooltip)}
-                position={Position.BOTTOM}
-            >
+            <Tooltip content={tooltipText} position={Position.BOTTOM}>
                 <Button
+                    ref={this.buttonRef}
                     intent={Intent.PRIMARY}
                     onClick={(): void => this.props.onAction()}
                     disabled={this.props.enabled === false}
@@ -45,6 +54,29 @@ class ActionButton extends React.Component<Props> {
             </Tooltip>
         );
     }
+
+    renderHotkeys(): React.ReactElement {
+        if (!this.props.keyboardShortcut) {
+            return <Hotkeys />;
+        }
+
+        return (
+            <Hotkeys>
+                <Hotkey
+                    global={true}
+                    allowInInput={true}
+                    preventDefault={true}
+                    combo={this.props.keyboardShortcut.replaceAll('-', '+')}
+                    label={this.props.i18n.translate(this.props.tooltip)}
+                    onKeyDown={(): void => {
+                        if (this.props.enabled) {
+                            this.props.onAction();
+                        }
+                    }}
+                />
+            </Hotkeys>
+        );
+    }
 }
 
 export default withI18n({ id: 'actionButton', fallback: en, translations: { en } })(
diff --git a/src/components/DocsButton.tsx b/src/components/DocsButton.tsx
index 46afb705..d6206163 100644
--- a/src/components/DocsButton.tsx
+++ b/src/components/DocsButton.tsx
@@ -12,7 +12,8 @@ import docsIcon from './images/pybricks.svg';
 
 type StateProps = undefined;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
     onAction: (): Action => dispatch(toggleDocs()),
diff --git a/src/components/ReplButton.tsx b/src/components/ReplButton.tsx
index 44c943d3..b09418d7 100644
--- a/src/components/ReplButton.tsx
+++ b/src/components/ReplButton.tsx
@@ -12,7 +12,8 @@ import replIcon from './images/repl.svg';
 
 type StateProps = Pick<ActionButtonProps, 'enabled'>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapStateToProps = (state: RootState): StateProps => ({
     enabled:
diff --git a/src/components/RunButton.tsx b/src/components/RunButton.tsx
index af5a3986..1f1462ab 100644
--- a/src/components/RunButton.tsx
+++ b/src/components/RunButton.tsx
@@ -12,7 +12,8 @@ import runIcon from './images/run.svg';
 
 type StateProps = Pick<ActionButtonProps, 'enabled'>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapStateToProps = (state: RootState): StateProps => ({
     enabled:
diff --git a/src/components/SaveAsButton.tsx b/src/components/SaveAsButton.tsx
index 1c11ddc3..53da0bca 100644
--- a/src/components/SaveAsButton.tsx
+++ b/src/components/SaveAsButton.tsx
@@ -11,7 +11,8 @@ import downloadIcon from './images/download.svg';
 
 type StateProps = Pick<ActionButtonProps, 'enabled'>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapStateToProps = (state: RootState): StateProps => ({
     enabled: state.editor.current !== null,
diff --git a/src/components/StopButton.tsx b/src/components/StopButton.tsx
index 881f5cac..abc217c9 100644
--- a/src/components/StopButton.tsx
+++ b/src/components/StopButton.tsx
@@ -12,7 +12,8 @@ import stopIcon from './images/stop.svg';
 
 type StateProps = Pick<ActionButtonProps, 'enabled'>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapStateToProps = (state: RootState): StateProps => ({
     enabled: state.hub.runtime === HubRuntimeState.Running,
diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx
index 135a1fe8..94afad60 100644
--- a/src/components/Terminal.tsx
+++ b/src/components/Terminal.tsx
@@ -62,6 +62,10 @@ class Terminal extends React.Component<TerminalProps> {
             // a control character to the terminal.
             return false;
         }
+        if (e.key === 'F5' || e.key === 'F6') {
+            // allow global handler for these keys
+            return false;
+        }
         return true;
     };
 
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 3b7608ab..44207f29 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -29,8 +29,8 @@ class Toolbar extends React.Component {
                     <Navbar.Divider />
                     <ButtonGroup>
                         <BluetoothButton id="bluetooth" />
-                        <RunButton id="run" />
-                        <StopButton id="stop" />
+                        <RunButton id="run" keyboardShortcut="F5" />
+                        <StopButton id="stop" keyboardShortcut="F6" />
                     </ButtonGroup>
                     <Navbar.Divider />
                     <ButtonGroup>
diff --git a/tsconfig.json b/tsconfig.json
index f8cf35a5..298c6c5a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,6 +16,7 @@
         "jsx": "react",
         "downlevelIteration": true,
         "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
         "noFallthroughCasesInSwitch": true
     },
     "include": ["src", "test"]