feat(notifications): allow panel to use ClickAwayListener to close on outer click

Author: duranmla

src/notifications/Notifications.mdx

@@ -2,6 +2,7 @@
 name: Notifications
 ---
 
+import noop from "lodash/noop";
 import { Playground, PropsTable } from "docz";
 import Notifications, { NotificationsPanel } from "./";
 import { notifications } from "../__fixtures__/notifications";
@@ -37,7 +38,7 @@ When a given user has _unread_ notifications, the component will inject notifica
 <PropsTable of={NotificationsPanel} />
 
 <Playground>
-  <NotificationsPanel notifications={notifications} />
+  <NotificationsPanel notifications={notifications} handleClose={noop} />
 </Playground>
 
 ## Types

src/notifications/NotificationsPanel.js

@@ -4,7 +4,7 @@ import { getNotificationIcon } from "./helpers";
 import moment from "moment";
 import { NotificationsPanelComponents as NPC } from "./styled";
 import React from "react";
-import { Typography } from "@material-ui/core";
+import { ClickAwayListener, Typography } from "@material-ui/core";
 
 type Props = {
   handleClose: Function,
@@ -13,35 +13,37 @@ type Props = {
 
 export const NotificationsPanel = ({ handleClose, notifications }: Props) => {
   return (
-    <NPC.Container>
-      <NPC.Header>
-        <Typography variant="caption">Notifications</Typography>
-      </NPC.Header>
-      <NPC.Body>
-        {notifications.map(n => (
-          <NPC.Item key={n.created_at} onClick={handleClose}>
-            {getNotificationIcon("foo")}
-            <div aria-label="NotificationItem">
-              <Typography variant="body2">{n.data.topic_title}</Typography>
-              <Typography variant="caption">
-                {moment(n.created_at).fromNow()}
-              </Typography>
-            </div>
-          </NPC.Item>
-        ))}
-        {notifications.length === 0 && (
-          <NPC.Item>
-            {getNotificationIcon("announcement")}
-            <div aria-label="EmptyFeedback">
-              <Typography variant="body2">
-                <i>There is not notifications yet</i>
-              </Typography>
-            </div>
-          </NPC.Item>
-        )}
-      </NPC.Body>
-      <NPC.Footer />
-    </NPC.Container>
+    <ClickAwayListener onClickAway={handleClose}>
+      <NPC.Container>
+        <NPC.Header>
+          <Typography variant="caption">Notifications</Typography>
+        </NPC.Header>
+        <NPC.Body>
+          {notifications.map(n => (
+            <NPC.Item key={n.created_at} onClick={handleClose}>
+              {getNotificationIcon("foo")}
+              <div aria-label="NotificationItem">
+                <Typography variant="body2">{n.data.topic_title}</Typography>
+                <Typography variant="caption">
+                  {moment(n.created_at).fromNow()}
+                </Typography>
+              </div>
+            </NPC.Item>
+          ))}
+          {notifications.length === 0 && (
+            <NPC.Item>
+              {getNotificationIcon("announcement")}
+              <div aria-label="EmptyFeedback">
+                <Typography variant="body2">
+                  <i>There is not notifications yet</i>
+                </Typography>
+              </div>
+            </NPC.Item>
+          )}
+        </NPC.Body>
+        <NPC.Footer />
+      </NPC.Container>
+    </ClickAwayListener>
   );
 };
 

src/profile/AlertsDropdown.js

@@ -48,7 +48,10 @@ export const AlertsDropdown = ({ alerts }: { alerts: Array<Alert> }) => {
               ref={arrowProps.ref}
               style={arrowProps.style}
             />
-            <NotificationsPanel notifications={alerts} />
+            <NotificationsPanel
+              notifications={alerts}
+              handleClose={handleClose}
+            />
           </div>
         )}
       </Popper>