From 98293400e51725a710406d592bde47fb6506bb4b Mon Sep 17 00:00:00 2001 From: Luis Felix Date: Tue, 17 Sep 2024 12:23:44 -0400 Subject: [PATCH] OV-326: + close modal of video studio page on close outside --- .../src/bundles/common/enums/dom-event.ts | 5 ++++ frontend/src/bundles/common/enums/enums.ts | 1 + .../components/menu-body/menu-body.tsx | 30 ++++++++++++++++++- 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 frontend/src/bundles/common/enums/dom-event.ts diff --git a/frontend/src/bundles/common/enums/dom-event.ts b/frontend/src/bundles/common/enums/dom-event.ts new file mode 100644 index 000000000..40be92fad --- /dev/null +++ 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 index abc7ab32c..6bc9ed7f2 100644 --- 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 index 7d9cd9638..d2428568f 100644 --- 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> = ({ onClose, onChatOpen, }) => { + const menuReference = useRef(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 ( - +