feat(preferences): close preferences with Esc button (#647)

* feat(preferences): close preferences with Esc button * feat: use ioService for escape key handling
standardnotes · Sep 27, 2021 · 150f7a7 · 150f7a7
1 parent f12bb7b
commit 150f7a7
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/app/assets/javascripts/preferences/PreferencesView.tsx b/app/assets/javascripts/preferences/PreferencesView.tsx
@@ -8,6 +8,7 @@ import { PreferencesMenuView } from './PreferencesMenuView';
 import { WebApplication } from '@/ui_models/application';
 import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
+import { useCallback, useEffect } from 'preact/hooks';
 
 interface PreferencesProps extends MfaProps {
   application: WebApplication;
@@ -63,6 +64,19 @@ const PreferencesCanvas: FunctionComponent<
 
 export const PreferencesView: FunctionComponent<PreferencesProps> = observer(
   (props) => {
+
+    useEffect(() => {
+      const removeEscKeyObserver = props.application.io.addKeyObserver({
+        key: 'Escape',
+        onKeyDown: (event) => {
+          event.preventDefault();
+          props.closePreferences();
+        }
+      });
+      return () => {
+        removeEscKeyObserver();
+      };
+    }, [props]);
     const menu = new PreferencesMenu();
     return (
       <div className="h-full w-full absolute top-left-0 flex flex-col bg-contrast z-index-preferences">