feat(fe/hotkeys): enable hotkeys for components

src/client/web/src/components/layers.tsx

@@ -10,8 +10,16 @@ import { AuthPane, LoginProps } from "./pane_login";
 import { FilesProps } from "./panel_files";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
-import { sharingCtrl, loadingCtrl, ctrlOn } from "../common/controls";
+import {
+  settingsDialogCtrl,
+  ctrlOff,
+  sharingCtrl,
+  loadingCtrl,
+  ctrlOn,
+  ctrlHidden,
+} from "../common/controls";
 import { LoadingIcon } from "./visual/loading";
+import { HotkeyHandler } from "../common/hotkeys";
 
 export interface Props {
   filesInfo: FilesProps;
@@ -24,10 +32,26 @@ export interface Props {
 
 export interface State {}
 export class Layers extends React.Component<Props, State, {}> {
+  private hotkeyHandler: HotkeyHandler;
   constructor(p: Props) {
     super(p);
   }
 
+  componentDidMount(): void {
+    this.hotkeyHandler = new HotkeyHandler();
+
+    const closeHandler = () => {
+      this.setControlOption(settingsDialogCtrl, ctrlOff);
+    };
+    this.hotkeyHandler.add({ key: "Escape" }, closeHandler);
+
+    document.addEventListener("keyup", this.hotkeyHandler.handle);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keyup", this.hotkeyHandler.handle);
+  }
+
   setControlOption = (targetControl: string, option: string) => {
     updater().setControlOption(targetControl, option);
     this.props.update(updater().updateUI);
@@ -41,11 +65,13 @@ export class Layers extends React.Component<Props, State, {}> {
         ? "hidden"
         : "";
     const showSettings =
-      this.props.ui.control.controls.get("settingsDialog") === ctrlOn
+      this.props.ui.control.controls.get(settingsDialogCtrl) === ctrlOn
         ? ""
         : "hidden";
     const showLoading =
-      this.props.ui.control.controls.get(loadingCtrl) == ctrlOn ? "" : "hidden";
+      this.props.ui.control.controls.get(loadingCtrl) == ctrlOn
+        ? ""
+        : ctrlHidden;
 
     return (
       <div id="layers">
@@ -72,7 +98,7 @@ export class Layers extends React.Component<Props, State, {}> {
                   <h4 id="title">{this.props.msg.pkg.get("pane.settings")}</h4>,
                   <button
                     onClick={() => {
-                      this.setControlOption("settingsDialog", "off");
+                      this.setControlOption(settingsDialogCtrl, ctrlOff);
                     }}
                   >
                     {this.props.msg.pkg.get("panes.close")}

src/client/web/src/components/panel_files.tsx

@@ -35,6 +35,7 @@ import {
   filesViewCtrl,
   loadingCtrl,
 } from "../common/controls";
+import { HotkeyHandler } from "../common/hotkeys";
 
 export interface Item {
   name: string;
@@ -77,6 +78,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
   private uploadInput: Element | Text;
   private assignInput: (input: Element) => void;
   private onClickUpload: () => void;
+  private hotkeyHandler: HotkeyHandler;
 
   constructor(p: Props) {
     super(p);
@@ -99,6 +101,18 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     };
   }
 
+  componentDidMount(): void {
+    this.hotkeyHandler = new HotkeyHandler();
+    this.hotkeyHandler.add({ key: "a", ctrl: true }, this.selectAll);
+    this.hotkeyHandler.add({ key: "q", ctrl: true }, this.onClickUpload);
+
+    document.addEventListener("keyup", this.hotkeyHandler.handle);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keyup", this.hotkeyHandler.handle);
+  }
+
   setLoading = (state: boolean) => {
     updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff);
     this.props.update(updater().updateUI);
@@ -761,7 +775,9 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     const endPoints = (
       <div className={showEndpoints}>
         <Container>
-          <h5 className="pane-title margin-r-m">{this.props.msg.pkg.get("endpoints")}</h5>
+          <h5 className="pane-title margin-r-m">
+            {this.props.msg.pkg.get("endpoints")}
+          </h5>
           <div className="hr"></div>
 
           <button onClick={gotoRoot} className="margin-r-m">

src/client/web/src/components/panel_uploadings.tsx

@@ -15,6 +15,7 @@ import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
 import { Rows, Row } from "./layout/rows";
 import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
+import { HotkeyHandler } from "../common/hotkeys";
 
 export interface UploadingsProps {
   uploadings: List<UploadEntry>;
@@ -31,11 +32,23 @@ export interface Props {
 export interface State {}
 
 export class UploadingsPanel extends React.Component<Props, State, {}> {
+  private hotkeyHandler: HotkeyHandler;
+
   constructor(p: Props) {
     super(p);
     this.state = {};
   }
 
+  componentDidMount(): void {
+    this.hotkeyHandler = new HotkeyHandler();
+
+    document.addEventListener("keyup", this.hotkeyHandler.handle);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keyup", this.hotkeyHandler.handle);
+  }
+
   setLoading = (state: boolean) => {
     updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff);
     this.props.update(updater().updateUI);