Merge pull request #378 from mattsoftware/NotificationTray-UnreadNotificationHighlight

feat(NotificationTray): Style the unread notifications

Author: AaronCoplan

example/src/SiteWrapper.react.js

@@ -12,12 +12,14 @@ import {
   RouterContextProvider,
 } from "tabler-react";
 
+import type { NotificationProps } from "tabler-react";
+
 type Props = {|
   +children: React.Node,
 |};
 
 type State = {|
-  unreadCount: number,
+  notificationsObjects: Array<NotificationProps>,
 |};
 
 type subNavItem = {|
@@ -118,37 +120,6 @@ const navBarItems: Array<navItem> = [
   },
 ];
 
-const notificationsObjects = [
-  {
-    avatarURL: "demo/faces/male/41.jpg",
-    message: (
-      <React.Fragment>
-        <strong>Nathan</strong> pushed new commit: Fix page load performance
-        issue.
-      </React.Fragment>
-    ),
-    time: "10 minutes ago",
-  },
-  {
-    avatarURL: "demo/faces/female/1.jpg",
-    message: (
-      <React.Fragment>
-        <strong>Alice</strong> started new task: Tabler UI design.
-      </React.Fragment>
-    ),
-    time: "1 hour ago",
-  },
-  {
-    avatarURL: "demo/faces/female/18.jpg",
-    message: (
-      <React.Fragment>
-        <strong>Rose</strong> deployed new version of NodeJS REST Api // V3
-      </React.Fragment>
-    ),
-    time: "2 hours ago",
-  },
-];
-
 const accountDropdownProps = {
   avatarURL: "./demo/faces/female/25.jpg",
   name: "Jane Pearson",
@@ -166,11 +137,47 @@ const accountDropdownProps = {
 
 class SiteWrapper extends React.Component<Props, State> {
   state = {
-    unreadCount: 2,
+    notificationsObjects: [
+      {
+        unread: true,
+        avatarURL: "demo/faces/male/41.jpg",
+        message: (
+          <React.Fragment>
+            <strong>Nathan</strong> pushed new commit: Fix page load performance
+            issue.
+          </React.Fragment>
+        ),
+        time: "10 minutes ago",
+      },
+      {
+        unread: true,
+        avatarURL: "demo/faces/female/1.jpg",
+        message: (
+          <React.Fragment>
+            <strong>Alice</strong> started new task: Tabler UI design.
+          </React.Fragment>
+        ),
+        time: "1 hour ago",
+      },
+      {
+        unread: false,
+        avatarURL: "demo/faces/female/18.jpg",
+        message: (
+          <React.Fragment>
+            <strong>Rose</strong> deployed new version of NodeJS REST Api // V3
+          </React.Fragment>
+        ),
+        time: "2 hours ago",
+      },
+    ],
   };
 
   render(): React.Node {
-    const unreadCount = this.state.unreadCount || 0;
+    const notificationsObjects = this.state.notificationsObjects || [];
+    const unreadCount = this.state.notificationsObjects.reduce(
+      (a, v) => a || v.unread,
+      false
+    );
     return (
       <Site.Wrapper
         headerProps={{
@@ -194,10 +201,24 @@ class SiteWrapper extends React.Component<Props, State> {
           notificationsTray: {
             notificationsObjects,
             markAllAsRead: () =>
-              this.setState({ unreadCount: 0 }, () =>
-                setTimeout(() => this.setState({ unreadCount: 4 }), 5000)
+              this.setState(
+                () => ({
+                  notificationsObjects: this.state.notificationsObjects.map(
+                    v => ({ ...v, unread: false })
+                  ),
+                }),
+                () =>
+                  setTimeout(
+                    () =>
+                      this.setState({
+                        notificationsObjects: this.state.notificationsObjects.map(
+                          v => ({ ...v, unread: true })
+                        ),
+                      }),
+                    5000
+                  )
               ),
-            unread: unreadCount > 0,
+            unread: unreadCount,
           },
           accountDropdown: accountDropdownProps,
         }}

src/components/Notification/Notification.react.js

@@ -16,12 +16,16 @@ export type Props = {|
    * The time displayed within the Notification
    */
   +time?: string,
+  /**
+   * Indicate the notification as unread
+   */
+  +unread?: boolean,
 |};
 
 /**
  * An individual Notification made up of an Avatar alongside some text and the time
  */
-function Notification({ avatarURL, message, time }: Props): React.Node {
+function Notification({ avatarURL, message, time, unread }: Props): React.Node {
   return (
     <React.Fragment>
       {avatarURL && (

src/components/Notification/NotificationTray.react.js

@@ -48,8 +48,12 @@ function NotificationTray(props: Props): React.Node {
             ))) ||
             (notificationsObjects &&
               notificationsObjects.map((n, i) => (
-                <Dropdown.Item className="d-flex" key={i}>
+                <Dropdown.Item
+                  className={`d-flex ${n.unread ? "bg-light" : ""}`}
+                  key={i}
+                >
                   <Notification
+                    unread={n.unread}
                     avatarURL={n.avatarURL}
                     message={n.message}
                     time={n.time}

src/components/Notification/index.js

@@ -1,5 +1,7 @@
 // @flow
 
 import Notification from "./Notification.react";
+import type Props from "./Notification.react";
 
 export { Notification as default };
+export type { Props as NotificationProps };

src/components/index.js

@@ -1,5 +1,8 @@
 // @flow
 
+import type NotificationProps from "./Notification";
+export type { NotificationProps };
+
 export { default as AccountDropdown } from "./AccountDropdown";
 export { default as Alert } from "./Alert";
 export { default as Avatar } from "./Avatar";

src/index.js

@@ -16,6 +16,7 @@ export type { Selection as SelectionEvents } from "./flow";
 export type { Touch as TouchEvents } from "./flow";
 export type { UserInterface as UIEvents } from "./flow";
 export type { Wheel as WheelEvents } from "./flow";
+export type { NotificationProps } from "./components";
 
 export {
   default as RouterContextProvider,