suggestions

decentraland · Dec 7, 2023 · 0ef0efd · 0ef0efd
1 parent c7095ce
commit 0ef0efd
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/src/components/Notifications/Notifications.stories.tsx b/src/components/Notifications/Notifications.stories.tsx
@@ -20,7 +20,7 @@ storiesOf('Notifications Toggle', module)
           onChangeTab={(e, newTab) => console.log(newTab)}
           onClick={() => console.log('Toggle button')}
           onBegin={() => console.log('Begin')}
-          onCloseModalMobile={(_, m) => console.log(m)}
+          onClose={(_, m) => console.log(m)}
         />
       </div>
     )
@@ -58,7 +58,7 @@ storiesOf('Notifications Toggle', module)
           onChangeTab={(e, newTab) => console.log(newTab)}
           onClick={() => console.log('Toggle button')}
           onBegin={() => console.log('Begin')}
-          onCloseModalMobile={(_, m) => console.log(m)}
+          onClose={(_, m) => console.log(m)}
         />
       </div>
     )
@@ -96,7 +96,7 @@ storiesOf('Notifications Toggle', module)
           locale="en"
           onClick={() => console.log('Toggle button')}
           onBegin={() => console.log('Begin')}
-          onCloseModalMobile={(_, m) => console.log(m)}
+          onClose={(_, m) => console.log(m)}
         />
       </div>
     )
@@ -363,7 +363,7 @@ storiesOf('Notifications Toggle', module)
           onChangeTab={(e, newTab) => setTab(newTab)}
           onClick={() => console.log('Toggle button')}
           onBegin={() => console.log('Begin')}
-          onCloseModalMobile={(_, m) => console.log(m)}
+          onClose={(_, m) => console.log(m)}
         />
       </div>
     )
@@ -381,7 +381,7 @@ storiesOf('Notifications Toggle', module)
           onChangeTab={(e, newTab) => console.log(newTab)}
           onClick={() => console.log('Toggle button')}
           onBegin={() => console.log('Begin')}
-          onCloseModalMobile={(_, m) => console.log(m)}
+          onClose={(_, m) => console.log(m)}
         />
       </div>
     )
@@ -399,7 +399,7 @@ storiesOf('Notifications Toggle', module)
           onChangeTab={(e, newTab) => console.log(newTab)}
           onClick={() => console.log('Toggle button')}
           onBegin={() => console.log('Begin')}
-          onCloseModalMobile={(_, m) => console.log(m)}
+          onClose={(_, m) => console.log(m)}
         />
       </div>
     )

diff --git a/src/components/Notifications/Notifications.tsx b/src/components/Notifications/Notifications.tsx
@@ -22,9 +22,9 @@ export interface NotificationsProps {
     newActiveTab: ActiveTab
   ) => void
   onBegin: (e: React.MouseEvent<HTMLButtonElement>) => void
-  onCloseModalMobile: (
-    event: React.MouseEvent<HTMLElement>,
-    data: ModalProps
+  onClose: (
+    event: React.MouseEvent<HTMLElement> | MouseEvent,
+    data?: ModalProps
   ) => void
 }
 
@@ -38,7 +38,7 @@ export default function Notifications({
   onClick,
   onChangeTab,
   onBegin,
-  onCloseModalMobile
+  onClose
 }: NotificationsProps) {
   const newNotificationsCount = useMemo(() => {
     return items.filter((notification) => !notification.read).length
@@ -66,7 +66,7 @@ export default function Notifications({
           activeTab={activeTab}
           onChangeTab={onChangeTab}
           onBegin={onBegin}
-          onCloseModalMobile={onCloseModalMobile}
+          onClose={onClose}
         />
       )}
     </div>

diff --git a/src/components/Notifications/NotificationsFeed.tsx b/src/components/Notifications/NotificationsFeed.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 
 import { Loader } from '../Loader/Loader'
 import { ActiveTab, DCLNotification, NotificationLocale } from './types'
@@ -30,9 +30,9 @@ interface NotificationsFeedProps {
     newActiveTab: ActiveTab
   ) => void
   onBegin: (e: React.MouseEvent<HTMLButtonElement>) => void
-  onCloseModalMobile: (
-    event: React.MouseEvent<HTMLElement>,
-    data: ModalProps
+  onClose: (
+    event: React.MouseEvent<HTMLElement> | MouseEvent,
+    data?: ModalProps
   ) => void
 }
 
@@ -151,7 +151,7 @@ export default function NotificationsFeed({
   isOpen,
   onChangeTab,
   onBegin,
-  onCloseModalMobile
+  onClose
 }: NotificationsFeedProps) {
   const unreadNotifications = useMemo(
     () => items.filter((notification) => !notification.read),
@@ -181,6 +181,29 @@ export default function NotificationsFeed({
     [items]
   )
 
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      const element = document.querySelector(".notifications-feed")
+      if (element && !element.contains(event.target as Node)) {
+        event.preventDefault()
+        event.stopPropagation()
+        onClose(event)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+
+  }, [isOpen])
+
+
   if (isOnboarding) {
     return (
       <>
@@ -209,7 +232,7 @@ export default function NotificationsFeed({
           closeIcon={<Close />}
           closeOnDocumentClick
           closeOnTriggerClick
-          onClose={onCloseModalMobile}
+          onClose={onClose}
         >
           <div className="dcl notifications-feed-modal">
             <Feed