toolbar: convert ActionButton to function

src/toolbar/ActionButton.tsx

@@ -3,16 +3,14 @@
 
 import {
     Button,
-    Hotkey,
-    Hotkeys,
-    HotkeysTarget,
     Intent,
     Position,
     Spinner,
     Tooltip,
+    useHotkeys,
 } from '@blueprintjs/core';
-import { WithI18nProps, withI18n } from '@shopify/react-i18n';
-import React from 'react';
+import { useI18n } from '@shopify/react-i18n';
+import React, { useMemo, useRef } from 'react';
 import { tooltipDelay } from '../app/constants';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
@@ -38,84 +36,68 @@ export interface ActionButtonProps {
     readonly onAction: () => void;
 }
 
-type Props = ActionButtonProps & WithI18nProps;
+const ActionButton: React.FC<ActionButtonProps> = (props) => {
+    const buttonRef = useRef<Button>(null);
 
-@HotkeysTarget
-class ActionButton extends React.Component<Props> {
-    private buttonRef: React.RefObject<Button> = React.createRef();
+    const [i18n] = useI18n({ id: 'actionButton', translations: { en }, fallback: en });
 
-    render(): JSX.Element {
-        const {
-            i18n,
-            id,
-            icon,
-            keyboardShortcut,
-            enabled,
-            tooltip,
-            progressTooltip,
-            showProgress,
-            progress,
-            onAction,
-        } = this.props;
+    const tooltipText =
+        props.showProgress && props.progressTooltip
+            ? i18n.translate(props.progressTooltip, {
+                  percent:
+                      props.progress === undefined
+                          ? ''
+                          : i18n.formatPercentage(props.progress),
+              })
+            : i18n.translate(props.tooltip) +
+              (props.keyboardShortcut ? ` (${props.keyboardShortcut})` : '');
 
-        const tooltipText =
-            showProgress && progressTooltip
-                ? i18n.translate(progressTooltip, {
-                      percent:
-                          progress === undefined ? '' : i18n.formatPercentage(progress),
-                  })
-                : i18n.translate(tooltip) +
-                  (keyboardShortcut ? ` (${keyboardShortcut})` : '');
-
-        return (
-            <Tooltip
-                content={tooltipText}
-                position={Position.BOTTOM}
-                hoverOpenDelay={tooltipDelay}
-            >
-                <Button
-                    ref={this.buttonRef}
-                    intent={Intent.PRIMARY}
-                    onMouseDown={(e) => e.preventDefault()} // prevent focus
-                    onClick={(): void => onAction()}
-                    disabled={enabled === false}
-                    className="no-box-shadow"
-                    style={enabled === false ? { pointerEvents: 'none' } : undefined}
-                >
-                    {showProgress ? (
-                        <Spinner value={progress} intent={Intent.PRIMARY} />
-                    ) : (
-                        <img src={icon} alt={id} />
-                    )}
-                </Button>
-            </Tooltip>
-        );
-    }
-
-    renderHotkeys(): React.ReactElement {
-        if (!this.props.keyboardShortcut) {
-            return <Hotkeys />;
+    const hotkeys = useMemo(() => {
+        if (!props.keyboardShortcut) {
+            return [];
         }
 
-        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>
-        );
-    }
-}
+        return [
+            {
+                global: true,
+                allowInInput: true,
+                preventDefault: true,
+                combo: props.keyboardShortcut.replaceAll('-', '+'),
+                label: i18n.translate(props.tooltip),
+                onKeyDown: () => {
+                    if (props.enabled) {
+                        props.onAction();
+                    }
+                },
+            },
+        ];
+    }, [props, i18n]);
 
-export default withI18n({ id: 'actionButton', fallback: en, translations: { en } })(
-    ActionButton,
-);
+    useHotkeys(hotkeys);
+
+    return (
+        <Tooltip
+            content={tooltipText}
+            position={Position.BOTTOM}
+            hoverOpenDelay={tooltipDelay}
+        >
+            <Button
+                ref={buttonRef}
+                intent={Intent.PRIMARY}
+                onMouseDown={(e) => e.preventDefault()} // prevent focus
+                onClick={(): void => props.onAction()}
+                disabled={props.enabled === false}
+                className="no-box-shadow"
+                style={props.enabled === false ? { pointerEvents: 'none' } : undefined}
+            >
+                {props.showProgress ? (
+                    <Spinner value={props.progress} intent={Intent.PRIMARY} />
+                ) : (
+                    <img src={props.icon} alt={props.id} />
+                )}
+            </Button>
+        </Tooltip>
+    );
+};
+
+export default ActionButton;