make toolbar hotkeys work in fullscreen

Author: MykolaGolubyev

src/components/viewer/ComponentViewer.tsx

@@ -29,10 +29,10 @@ export interface Props {
 }
 
 class ComponentViewer extends Component<Props, ComponentViewerState> {
-    private registries: Registries;
-    private stateCreator: ComponentViewerStateCreator;
+    private readonly registries: Registries;
+    private readonly hotKeyBoundActions: HotKeyBoundActions;
 
-    private hotKeyBoundActions: HotKeyBoundActions;
+    private stateCreator: ComponentViewerStateCreator;
 
     constructor(props: Props) {
         super(props);
@@ -43,7 +43,9 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
         this.stateCreator = new ComponentViewerStateCreator(this.registries);
 
         this.state = this.stateFromUrl();
-        this.hotKeyBoundActions = {'Alt F': this.onFullScreenToggle};
+        this.hotKeyBoundActions = {
+            'Alt F': this.onFullScreenToggle,
+            ...this.dropDownKeyBoundActions()};
     }
 
     render() {
@@ -169,6 +171,21 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
         this.unsubscribeFromUrlChanges();
     }
 
+    private dropDownKeyBoundActions() {
+        const result: HotKeyBoundActions = {};
+
+        const {dropDown} = this.props;
+        if (!dropDown) {
+            return result;
+        }
+
+        dropDown.items
+            .filter(item => !!item.hotKey)
+            .forEach(item => result[item.hotKey!] = () => this.selectToolbarItem(item.label));
+
+        return result;
+    }
+
     private subscribeToUrlChanges() {
         window.addEventListener('popstate', () => this.updateStateFromUrl());
     }

src/components/viewer/toolbar/ToolbarDropDown.tsx

@@ -3,10 +3,6 @@ import * as React from 'react';
 import { ToolbarDropDownItem } from './ToolbarDropDownItem';
 
 import { ToolbarDropDownSelectionPlacement } from './ToolbarDropDownSelectionPlacement';
-import { GlobalHotKeysHandler } from '../../hotkeys/GlobalHotKeysHandler';
-
-import { HotKeyBoundActions } from '../../hotkeys/HotKeyBoundActions';
-
 import { ToolbarDropDownSelectionItem } from './ToolbarDropDownSelectionItem';
 
 import './ToolbarDropDown.css';
@@ -35,26 +31,13 @@ export class ToolbarDropDown extends React.Component<Props, State> {
 
         return (
             <div className="rcv-toolbar-drop-down">
-                <GlobalHotKeysHandler keyBoundActions={this.hotKeyBoundActions()}/>
-
                 <div className="rcv-toolbar-drop-down-label">{label}</div>
                 {this.renderSelected()}
                 {this.renderSelectionIfRequired()}
             </div>
         );
     }
 
-    private hotKeyBoundActions(): HotKeyBoundActions {
-        const result: HotKeyBoundActions = {};
-
-        const {items} = this.props;
-        items
-            .filter(item => !!item.hotKey)
-            .forEach(item => result[item.hotKey!] = () => this.onItemSelect(item.label));
-
-        return result;
-    }
-
     private saveSelectedLabelNode = (node: HTMLDivElement) => {
         this.selectedLabelNode = node;
     }