fix: hide submenu before hide menu

xhofe · Aug 25, 2022 · e8c47ab · e8c47ab · vercel · Aug 25, 2022
1 parent 553e3a5
commit e8c47ab
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git a/packages/solid-contextmenu/index.html b/packages/solid-contextmenu/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
-    <title>Solid Lib</title>
+    <title>solid-contextmenu</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/packages/solid-contextmenu/src/bus.ts b/packages/solid-contextmenu/src/bus.ts
@@ -1,9 +1,10 @@
 import mitt from "mitt";
-import { ShowContextMenuParams } from ".";
+import { ShowContextMenuParams, MenuId } from ".";
 
 type Events = {
   show: ShowContextMenuParams;
   hideAll: void;
+  hide: MenuId;
 };
 
 export const bus = mitt<Events>();
diff --git a/packages/solid-contextmenu/src/components/Menu.tsx b/packages/solid-contextmenu/src/components/Menu.tsx
@@ -85,18 +85,21 @@ export const Menu = (props: MenuProps) => {
         )
     );
   });
-
+  const hide = () => {
+    bus.emit("hide", local.id);
+    setShown(false);
+  };
   const contextValue = mergeProps(
     {
       shown: shown,
       animation: "scale",
-      hide: () => setShown(false),
+      hide: hide,
       props: showProps,
     },
     local
   );
   bus.on("hideAll", () => {
-    setShown(false);
+    hide();
   });
 
   onCleanup(() => {
@@ -133,7 +136,7 @@ export const Menu = (props: MenuProps) => {
                 top: pos().y + "px",
               }}
               // @ts-ignore
-              use:clickOutside={() => setShown(false)}
+              use:clickOutside={hide()}
               ref={el!}
             />
           </Show>

diff --git a/packages/solid-contextmenu/src/components/Submenu.tsx b/packages/solid-contextmenu/src/components/Submenu.tsx
@@ -4,12 +4,14 @@ import {
   createSignal,
   JSX,
   mergeProps,
+  onCleanup,
   Show,
   splitProps,
 } from "solid-js";
 import { useMenu } from "../context";
 import { STYLE, BooleanPredicate, Pos, Size } from "..";
 import { getPredicateValue } from "../utils";
+import { bus } from "../bus";
 
 export interface LocalSubMenuProps {
   label: JSX.Element;
@@ -37,7 +39,7 @@ export const Submenu = (props: SubMenuProps) => {
     },
     local
   );
-  const { props: showProps } = useMenu();
+  const { props: showProps, id: menuId } = useMenu();
   const handlerParams = createMemo(() => ({
     props: showProps(),
   }));
@@ -74,12 +76,21 @@ export const Submenu = (props: SubMenuProps) => {
       }
     }
     setPos({ x, y });
+    console.log(pos());
   };
   const [shown, setShown] = createSignal(false);
   const show = () => {
     setShown(true);
     updatePos();
   };
+  bus.on("hide", (id) => {
+    if (id === menuId) {
+      setShown(false);
+    }
+  });
+  onCleanup(() => {
+    bus.off("hide");
+  });
   return (
     <Show when={!isHidden()}>
       <div

diff --git a/sites/site/index.html b/sites/site/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
-    <title>Solid App</title>
+    <title>solid-contextmenu</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>