Merge pull request #370 from mattsoftware/NotificationTray-MarkAllAsR…

…ead-Implementation Notification tray mark all as read implementation
tabler · Nov 28, 2018 · 313e14a · 313e14a
2 parents 1678d8a + e26d736
commit 313e14a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/example/src/SiteWrapper.react.js b/example/src/SiteWrapper.react.js
@@ -16,6 +16,10 @@ type Props = {|
   +children: React.Node,
 |};
 
+type State = {|
+  +unreadCount: number,
+|};
+
 type subNavItem = {|
   +value: string,
   +to?: string,
@@ -160,8 +164,13 @@ const accountDropdownProps = {
   ],
 };
 
-class SiteWrapper extends React.Component<Props, void> {
+class SiteWrapper extends React.Component<Props, State> {
+  state = {
+    unreadCount: 2,
+  };
+
   render(): React.Node {
+    const unreadCount = this.state.unreadCount || 0;
     return (
       <Site.Wrapper
         headerProps={{
@@ -182,7 +191,14 @@ class SiteWrapper extends React.Component<Props, void> {
               </Button>
             </Nav.Item>
           ),
-          notificationsTray: { notificationsObjects },
+          notificationsTray: {
+            notificationsObjects,
+            markAllAsRead: () =>
+              this.setState({ unreadCount: 0 }, () =>
+                setTimeout(() => this.setState({ unreadCount: 4 }), 5000)
+              ),
+            unread: unreadCount > 0,
+          },
           accountDropdown: accountDropdownProps,
         }}
         navProps={{ itemsObjects: navBarItems }}

diff --git a/src/components/Notification/NotificationTray.react.js b/src/components/Notification/NotificationTray.react.js
@@ -16,13 +16,17 @@ export type Props = {|
    * Display a small red circle to symbolize that there are unread notifications
    */
   +unread?: boolean,
+  /**
+   * Action to run when the 'Mark All As Read' button is activated
+   */
+  +markAllAsRead?: () => void,
 |};
 
 /**
  * An Icon triggered Dropdown containing Notifications
  */
 function NotificationTray(props: Props): React.Node {
-  const { children, unread, notificationsObjects } = props;
+  const { children, unread, notificationsObjects, markAllAsRead } = props;
   const notifications = children && React.Children.toArray(children);
   return (
     <Dropdown
@@ -52,10 +56,17 @@ function NotificationTray(props: Props): React.Node {
                   />
                 </Dropdown.Item>
               )))}
-          <Dropdown.ItemDivider />
-          <Dropdown.Item className="text-center text-muted-dark">
-            Mark all as read
-          </Dropdown.Item>
+          {markAllAsRead && unread && (
+            <React.Fragment>
+              <Dropdown.ItemDivider />
+              <Dropdown.Item
+                className="text-center text-muted-dark"
+                onClick={() => markAllAsRead()}
+              >
+                Mark all as read
+              </Dropdown.Item>
+            </React.Fragment>
+          )}
         </React.Fragment>
       }
     />