refactor: move menu click handler into Menu component

Former-commit-id: 39e1baa

Author: decaf-dev

src/react/loom-app/app/index.tsx

@@ -132,15 +132,6 @@ export default function App() {
 		//Stop propagation to the global event
 		e.stopPropagation();
 
-		//If we click on the top menu, don't close it
-		const target = e.target as HTMLElement;
-		const menuEl = target.closest(".dataloom-menu");
-		if (menuEl) {
-			const isTargetTopMenu = menuEl.id === topMenu.id;
-			if (isTargetTopMenu) return;
-		}
-
-		//Otherwise close the top menu
 		onRequestCloseTop();
 	}
 

src/react/shared/menu/base-menu.tsx

@@ -7,6 +7,7 @@ import { useLogger } from "src/shared/logger";
 import { LoomMenuCloseRequestType, Position } from "./types";
 
 import "./styles.css";
+import { useMenuOperations } from "./hooks";
 
 interface Props {
 	id: string;
@@ -40,17 +41,27 @@ const BaseMenu = React.forwardRef<HTMLDivElement, Props>(
 		ref
 	) => {
 		const logger = useLogger();
+		const { topMenu, onRequestCloseTop } = useMenuOperations();
+
+		function handleClick(e: React.MouseEvent) {
+			logger("Menu handleClick");
+			//Don't propagate to the app
+			//it will close the menu again
+			e.stopPropagation();
+			if (topMenu.id === id) return;
+			onRequestCloseTop();
+		}
 
 		function handleKeyDown(e: React.KeyboardEvent) {
 			logger("Menu handleKeyDown");
 			if (e.key === "Enter") {
-				//Don't propagate the enter event to the app
-				//it will close all menus
+				//Don't propagate to the app
+				//it will close the menu again
 				e.stopPropagation();
 				onRequestClose("close-on-save");
 			} else if (e.key === "Escape") {
-				//Don't propagate the enter event to the app
-				//it will close all menus
+				//Don't propagate to the app
+				//it will close the menu again
 				e.stopPropagation();
 				onClose();
 			}
@@ -65,6 +76,7 @@ const BaseMenu = React.forwardRef<HTMLDivElement, Props>(
 						id={id}
 						className="dataloom-menu"
 						onKeyDown={handleKeyDown}
+						onClick={handleClick}
 					>
 						<div
 							ref={ref}