Finish up context menu - prod ready, with native support & SoC

This splits this context menu options completely from the event row UI,
separated from the HTML/desktop context triggering & handling, separate
from the two actual implementations (one here with react-contexify, one
just added in the desktop).

Author: pimterry

src/components/app.tsx

@@ -16,6 +16,7 @@ import { appHistory } from '../routing';
 import { useHotkeys, Ctrl } from '../util/ui';
 
 import { AccountStore } from '../model/account/account-store';
+import { UiStore } from '../model/ui/ui-store';
 import {
     serverVersion,
     versionSatisfies,
@@ -33,6 +34,7 @@ import { SettingsPage } from './settings/settings-page';
 import { PlanPicker } from './account/plan-picker';
 import { ModalOverlay } from './account/modal-overlay';
 import { CheckoutSpinner } from './account/checkout-spinner';
+import { HtmlContextMenu } from './html-context-menu';
 
 const AppContainer = styled.div<{ inert?: boolean }>`
     display: flex;
@@ -82,8 +84,12 @@ const AppKeyboardShortcuts = (props: {
 };
 
 @inject('accountStore')
+@inject('uiStore')
 @observer
-class App extends React.Component<{ accountStore: AccountStore }> {
+class App extends React.Component<{
+    accountStore: AccountStore,
+    uiStore: UiStore
+}> {
 
     @computed
     get canVisitSettings() {
@@ -198,6 +204,11 @@ class App extends React.Component<{ accountStore: AccountStore }> {
             cancelCheckout
         } = this.props.accountStore;
 
+        const {
+            contextMenuState,
+            clearHtmlContextMenu
+        } = this.props.uiStore;
+
         return <LocationProvider history={appHistory}>
             <AppKeyboardShortcuts
                 navigate={appHistory.navigate}
@@ -242,13 +253,21 @@ class App extends React.Component<{ accountStore: AccountStore }> {
                     onCancel={cancelCheckout}
                 />
             }
+
+            {
+                contextMenuState &&
+                    <HtmlContextMenu
+                        menuState={contextMenuState}
+                        onHidden={clearHtmlContextMenu}
+                    />
+            }
         </LocationProvider>;
     }
 }
 
 // Annoying cast required to handle the store prop nicely in our types
 const AppWithStoreInjected = (
-    App as unknown as WithInjected<typeof App, 'accountStore'>
+    App as unknown as WithInjected<typeof App, 'accountStore' | 'uiStore'>
 );
 
 export { AppWithStoreInjected as App };

src/components/html-context-menu.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { autorun } from 'mobx';
+import { disposeOnUnmount, observer } from 'mobx-react';
+
+import {
+    Menu,
+    Submenu,
+    Separator,
+    Item,
+    contextMenu
+} from 'react-contexify';
+
+import { ContextMenuItem, ContextMenuState } from '../model/ui/context-menu';
+import { UnreachableCheck } from '../util/error';
+
+@observer
+export class HtmlContextMenu<T> extends React.Component<{
+    menuState: ContextMenuState<T>,
+    onHidden: () => void
+}> {
+
+    componentDidMount() {
+        // Automatically show the menu when this is rendered:
+        disposeOnUnmount(this, autorun(() => {
+            const menuState = this.props.menuState;
+
+            // Annoyingly, the menu is not listening immediately after the component
+            // is mounted, so we have to delay this slightly:
+            setTimeout(() => {
+                contextMenu.show({
+                    id: 'menu',
+                    event: menuState.event
+                });
+            }, 10);
+        }));
+    }
+
+    render() {
+        return <Menu
+            id='menu'
+            onVisibilityChange={this.onVisibilityChange}
+        >
+            { this.props.menuState.items.map(this.renderItem) }
+        </Menu>
+    }
+
+    renderItem = (item: ContextMenuItem<T>, i: number) => {
+        if (item.type === 'separator') {
+            return <Separator key={i} />;
+        } else if (item.type === 'option') {
+            return <Item
+                key={i}
+                onClick={() => item.callback(this.props.menuState.data)}
+                disabled={item.enabled === false}
+            >
+                { item.label }
+            </Item>
+        } else if (item.type === 'submenu') {
+            return <Submenu
+                key={i}
+                label={item.label}
+                disabled={item.enabled === false}
+            >
+                { item.items.map(this.renderItem) }
+            </Submenu>
+        } else throw new UnreachableCheck(item, i => i.type);
+    }
+
+    onVisibilityChange = (visible: boolean) => {
+        if (!visible) this.props.onHidden();
+    };
+
+}