Merge pull request #332 from BinaryStudioAcademy/fix/OV-326-close-vid…

…eo-menu-on-studio-page OV-326: Close Video Menu Studio Page When Click Outside
BinaryStudioAcademy · Sep 17, 2024 · 9be4314 · 9be4314
2 parents ceb2a6d + 8029bfe
commit 9be4314
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/frontend/src/bundles/common/enums/dom-event.ts b/frontend/src/bundles/common/enums/dom-event.ts
@@ -0,0 +1,5 @@
+const DOM_EVENT = {
+    MOUSE_DOWN: 'mousedown',
+} as const;
+
+export { DOM_EVENT };
diff --git a/frontend/src/bundles/common/enums/enums.ts b/frontend/src/bundles/common/enums/enums.ts
@@ -1,5 +1,6 @@
 export { AppRoute } from './app-route.enum.js';
 export { DataStatus } from './data-status.enum.js';
+export { DOM_EVENT } from './dom-event.js';
 export { VideoPreview } from './video-preview.enum.js';
 export {
     ApiPath,

diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-body/menu-body.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-body/menu-body.tsx
@@ -6,6 +6,8 @@ import {
     Icon,
     IconButton,
 } from '~/bundles/common/components/components.js';
+import { DOM_EVENT } from '~/bundles/common/enums/enums.js';
+import { useEffect, useRef } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
 
 import styles from './styles.module.css';
@@ -22,8 +24,34 @@ const MenuBody: React.FC<React.PropsWithChildren<Properties>> = ({
     onClose,
     onChatOpen,
 }) => {
+    const menuReference = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent): void => {
+            if (
+                menuReference.current &&
+                !menuReference.current.contains(event.target as Node)
+            ) {
+                onClose();
+            }
+        };
+
+        document.addEventListener(DOM_EVENT.MOUSE_DOWN, handleClickOutside);
+
+        return () => {
+            document.removeEventListener(
+                DOM_EVENT.MOUSE_DOWN,
+                handleClickOutside,
+            );
+        };
+    }, [onClose]);
+
     return (
-        <Box bg="background.900" className={styles['menu-body']}>
+        <Box
+            ref={menuReference}
+            bg="background.900"
+            className={styles['menu-body']}
+        >
             <Flex
                 justifyContent="space-between"
                 alignItems="center"