Implement action and onClick for stacked notifications

* Allow Action button on Stacked Notifications

- Leave the `action` and `onClick` props to be defines by the Notification component
- Add references to timer to `clearTimeout` when will unmount

* Apply changes for Stacked Notifications in the example

- Use an Object to control the Notifications State
- Add a method to handle Remove Notification, invoked from `onDismiss` and `onClick`

Author: elrumordelaluz

examples/notification-tree/index.js

@@ -8,30 +8,44 @@ class Example extends Component {
     super(props);
 
     this.state = {
-      notifications: OrderedSet(),
-
-      // This is just used for the sake of an example to make sure
-      // notifications have unique keys. In production, you should have
-      // a different system for UIDs.
-      count: 0
+      notifications: {},
     };
+
+    this.removeNotification = this.removeNotification.bind(this);
+    this.renderNotifications = this.renderNotifications.bind(this);
   }
 
+
   addNotification() {
-    const { notifications, count } = this.state;
-    const id = notifications.size + 1;
-    const newCount = count + 1;
+    // This is just used for the sake of an example to make sure
+    // notifications have unique keys. In production, you should have
+    // a different system for UIDs.
+    const id = Date.now();
 
-    return this.setState({
-      count: newCount,
-      notifications: notifications.add({
+    const notifications = Object.assign({}, this.state.notifications, {
+      [id]: {
+        action: 'Dismiss',
+        dismissAfter: 3400,
+        onClick: () => this.removeNotification(id),
         message: `Notification ${id}`,
-        key: newCount,
-        barStyle: {
-          background: 'grey'
-        }
-      })
+        key: id
+      }
     });
+
+    return this.setState({
+      notifications: notifications
+    });
+  }
+
+  removeNotification (notif) {
+    const notifications = Object.assign({}, this.state.notifications);
+    delete notifications[notif];
+
+    this.setState({ notifications })
+  }
+  
+  renderNotifications () {
+    return Object.keys(this.state.notifications).map(notif => this.state.notifications[notif])
   }
 
   render() {
@@ -41,10 +55,8 @@ class Example extends Component {
           Add notification
         </button>
         <NotificationStack
-          notifications={this.state.notifications.toArray()}
-          onDismiss={notification => this.setState({
-            notifications: this.state.notifications.delete(notification)
-          })}
+          notifications={this.renderNotifications()}
+          onDismiss={notif => this.removeNotification(notif.key)}
         />
       </div>
     );

src/notificationStack.js

@@ -21,7 +21,6 @@ const NotificationStack = props => {
             isLast={isLast}
             action={notification.action || props.action}
             dismissAfter={isLast ? dismissAfter : dismissAfter + (index * 1000)}
-            onClick={() => props.onDismiss(notification)}
             onDismiss={() => {
               setTimeout(() => {
                 setTimeout(props.onDismiss.bind(this, notification), 300);

src/stackedNotification.js

@@ -11,22 +11,25 @@ class StackedNotification extends Component {
   }
 
   componentDidMount() {
-    setTimeout(this.setState.bind(this, {
+    this.activeTimeout = setTimeout(this.setState.bind(this, {
       isActive: true
     }), 1);
 
-    setTimeout(this.setState.bind(this, {
+    this.dismissTimeout = setTimeout(this.setState.bind(this, {
       isActive: false
     }), this.props.dismissAfter);
   }
 
+  componentWillUnmount() {
+    clearTimeout(this.dismissTimeout);
+  }
+
   render() {
     const bottomPosition = `${2 + this.props.index * 4}rem`;
 
     return (
       <Notification
         {...this.props}
-        action={false}
         isActive={this.state.isActive}
         barStyle={Object.assign({}, {
           bottom: bottomPosition