From 84613df6cc3ada0814e585f0f5f32b95f9845ed1 Mon Sep 17 00:00:00 2001 From: Matt Paine Date: Sun, 2 Dec 2018 17:57:38 +1000 Subject: [PATCH 1/2] feat(NotificationTray): Style the unread notifications --- example/src/SiteWrapper.react.js | 98 ++++++++++++------- .../Notification/Notification.react.js | 4 + .../Notification/NotificationTray.react.js | 6 +- 3 files changed, 70 insertions(+), 38 deletions(-) diff --git a/example/src/SiteWrapper.react.js b/example/src/SiteWrapper.react.js index da962b07..69e3039e 100644 --- a/example/src/SiteWrapper.react.js +++ b/example/src/SiteWrapper.react.js @@ -17,7 +17,12 @@ type Props = {| |}; type State = {| - unreadCount: number, + notificationsObjects: Array<{ + unread: boolean, + avatarURL: string, + message: React.Node, + time: string, + }>, |}; type subNavItem = {| @@ -118,37 +123,6 @@ const navBarItems: Array = [ }, ]; -const notificationsObjects = [ - { - avatarURL: "demo/faces/male/41.jpg", - message: ( - - Nathan pushed new commit: Fix page load performance - issue. - - ), - time: "10 minutes ago", - }, - { - avatarURL: "demo/faces/female/1.jpg", - message: ( - - Alice started new task: Tabler UI design. - - ), - time: "1 hour ago", - }, - { - avatarURL: "demo/faces/female/18.jpg", - message: ( - - Rose deployed new version of NodeJS REST Api // V3 - - ), - time: "2 hours ago", - }, -]; - const accountDropdownProps = { avatarURL: "./demo/faces/female/25.jpg", name: "Jane Pearson", @@ -166,11 +140,47 @@ const accountDropdownProps = { class SiteWrapper extends React.Component { state = { - unreadCount: 2, + notificationsObjects: [ + { + unread: true, + avatarURL: "demo/faces/male/41.jpg", + message: ( + + Nathan pushed new commit: Fix page load performance + issue. + + ), + time: "10 minutes ago", + }, + { + unread: true, + avatarURL: "demo/faces/female/1.jpg", + message: ( + + Alice started new task: Tabler UI design. + + ), + time: "1 hour ago", + }, + { + unread: false, + avatarURL: "demo/faces/female/18.jpg", + message: ( + + Rose deployed new version of NodeJS REST Api // V3 + + ), + 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 ( { 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, }} diff --git a/src/components/Notification/Notification.react.js b/src/components/Notification/Notification.react.js index cddfd91f..8b567cc1 100644 --- a/src/components/Notification/Notification.react.js +++ b/src/components/Notification/Notification.react.js @@ -16,6 +16,10 @@ export type Props = {| * The time displayed within the Notification */ +time?: string, + /** + * The time displayed within the Notification + */ + +unread?: boolean, |}; /** diff --git a/src/components/Notification/NotificationTray.react.js b/src/components/Notification/NotificationTray.react.js index 9ab3bc71..ac7760a3 100644 --- a/src/components/Notification/NotificationTray.react.js +++ b/src/components/Notification/NotificationTray.react.js @@ -48,8 +48,12 @@ function NotificationTray(props: Props): React.Node { ))) || (notificationsObjects && notificationsObjects.map((n, i) => ( - + Date: Mon, 3 Dec 2018 23:28:47 +1000 Subject: [PATCH 2/2] fix(NotificationTray): Fix a copy/paste comment issue and type import --- example/src/SiteWrapper.react.js | 9 +++------ src/components/Notification/Notification.react.js | 4 ++-- src/components/Notification/index.js | 2 ++ src/components/index.js | 3 +++ src/index.js | 1 + 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/example/src/SiteWrapper.react.js b/example/src/SiteWrapper.react.js index 69e3039e..25d318b1 100644 --- a/example/src/SiteWrapper.react.js +++ b/example/src/SiteWrapper.react.js @@ -12,17 +12,14 @@ import { RouterContextProvider, } from "tabler-react"; +import type { NotificationProps } from "tabler-react"; + type Props = {| +children: React.Node, |}; type State = {| - notificationsObjects: Array<{ - unread: boolean, - avatarURL: string, - message: React.Node, - time: string, - }>, + notificationsObjects: Array, |}; type subNavItem = {| diff --git a/src/components/Notification/Notification.react.js b/src/components/Notification/Notification.react.js index 8b567cc1..79ba17f5 100644 --- a/src/components/Notification/Notification.react.js +++ b/src/components/Notification/Notification.react.js @@ -17,7 +17,7 @@ export type Props = {| */ +time?: string, /** - * The time displayed within the Notification + * Indicate the notification as unread */ +unread?: boolean, |}; @@ -25,7 +25,7 @@ export type Props = {| /** * 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 ( {avatarURL && ( diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index f183dc47..426ac511 100644 --- a/src/components/Notification/index.js +++ b/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 }; diff --git a/src/components/index.js b/src/components/index.js index 25f7137e..d5ae564a 100644 --- a/src/components/index.js +++ b/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"; diff --git a/src/index.js b/src/index.js index e5a915a8..49f60eab 100644 --- a/src/index.js +++ b/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,