feat: escape when submenu is open should close it instead of entire menu

standardnotes · May 7, 2021 · 660525d · 660525d
1 parent dd5873b
commit 660525d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/app/assets/javascripts/components/NotesContextMenu.tsx b/app/assets/javascripts/components/NotesContextMenu.tsx
@@ -2,7 +2,7 @@ import { AppState } from '@/ui_models/app_state';
 import { toDirective, useCloseOnBlur } from './utils';
 import { observer } from 'mobx-react-lite';
 import { NotesOptions } from './NotesOptions';
-import { useEffect, useRef } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 type Props = {
   appState: AppState;
@@ -12,12 +12,18 @@ const NotesContextMenu = observer(({ appState }: Props) => {
   const contextMenuRef = useRef<HTMLDivElement>();
   const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(
     contextMenuRef,
-    (open: boolean) => appState.notes.setContextMenuOpen(open)
+    (open: boolean) => null
   );
+  const [submenuOpen, setSubmenuOpen] = useState(false);
 
   const closeOnClickOutside = (event: MouseEvent) => {
     if (!contextMenuRef.current?.contains(event.target as Node)) {
-      appState.notes.setContextMenuOpen(false);
+      if (submenuOpen) {
+        setSubmenuOpen(false);
+      } else {
+        console.log('here');
+        appState.notes.setContextMenuOpen(false);
+      }
     }
   };
 
@@ -38,6 +44,8 @@ const NotesContextMenu = observer(({ appState }: Props) => {
         appState={appState}
         closeOnBlur={closeOnBlur}
         setLockCloseOnBlur={setLockCloseOnBlur}
+        submenuOpen={submenuOpen}
+        setSubmenuOpen={setSubmenuOpen}
       />
     </div>
   ) : null;

diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
@@ -2,7 +2,7 @@ import { AppState } from '@/ui_models/app_state';
 import { Icon, IconType } from './Icon';
 import { Switch } from './Switch';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useRef, useState, useEffect } from 'preact/hooks';
 import {
   Disclosure,
   DisclosureButton,
@@ -13,19 +13,16 @@ type Props = {
   appState: AppState;
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
   setLockCloseOnBlur: (lock: boolean) => void;
+  onSubmenuChange?: (submenuOpen: boolean) => void;
 };
 
 export const NotesOptions = observer(
-  ({ appState, closeOnBlur, setLockCloseOnBlur }: Props) => {
+  ({ appState, closeOnBlur, setLockCloseOnBlur, onSubmenuChange }: Props) => {
     const [tagsMenuOpen, setTagsMenuOpen] = useState(false);
     const [tagsMenuPosition, setTagsMenuPosition] = useState({
       top: 0,
       right: 0,
     });
-    const [lockedBlurAction, setLockedBlurAction] = useState<
-      Promise<void> | null
-    >(null);
-    const [shouldRunLockedBlurAction, setShouldRunLockedBlurAction] = useState(false);
 
     const notes = Object.values(appState.notes.selectedNotes);
     const hidePreviews = !notes.some((note) => !note.hidePreview);
@@ -43,6 +40,12 @@ export const NotesOptions = observer(
       'cursor-pointer hover:bg-contrast color-text bg-transparent px-3 ' +
       'text-left';
 
+    useEffect(() => {
+      if (onSubmenuChange) {
+        onSubmenuChange(tagsMenuOpen);
+      } 
+    }, [tagsMenuOpen, onSubmenuChange]);
+
     return (
       <>
         <Switch
@@ -173,7 +176,7 @@ export const NotesOptions = observer(
           onClick={async () => {
             setLockCloseOnBlur(true);
             await appState.notes.setTrashSelectedNotes(!trashed, trashButtonRef);
-            setLockCloseOnBlur(true);
+            setLockCloseOnBlur(false);
           }}
         >
           <Icon type={trashed ? IconType.Restore : IconType.Trash} className={iconClass} />

diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -24,6 +24,11 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
   const buttonRef = useRef<HTMLButtonElement>();
   const panelRef = useRef<HTMLDivElement>();
   const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen);
+  const [submenuOpen, setSubmenuOpen] = useState(false);
+
+  const onSubmenuChange = (open: boolean) => {
+    setSubmenuOpen(open);
+  };
 
   return (
     <Disclosure
@@ -39,7 +44,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
     >
       <DisclosureButton
         onKeyUp={(event) => {
-          if (event.key === 'Escape') {
+          if (event.key === 'Escape' && !submenuOpen) {
             setOpen(false);
           }
         }}
@@ -56,7 +61,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
       </DisclosureButton>
       <DisclosurePanel
         onKeyUp={(event) => {
-          if (event.key === 'Escape') {
+          if (event.key === 'Escape' && !submenuOpen) {
             setOpen(false);
             buttonRef.current.focus();
           }
@@ -72,6 +77,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
             appState={appState}
             closeOnBlur={closeOnBlur}
             setLockCloseOnBlur={setLockCloseOnBlur}
+            onSubmenuChange={onSubmenuChange}
           />
         )}
       </DisclosurePanel>