Merge branch 'release/0.2.14' into develop

Author: igorprado

.eslintrc

@@ -17,7 +17,7 @@
     }
   },
   "rules": {
-    "react/display-name": 2,
+    "react/display-name": 0,
     "react/jsx-curly-spacing": [2, "always"],
     "react/jsx-no-duplicate-props": 2,
     "react/jsx-no-undef": 2,

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 0.2.14 - May 3, 2017
+
+* Ability to [edit notifications](https://github.com/igorprado/react-notification-system#removenotificationnotification). (thanks to @syndbg)
+* Removed deprecation warning. Now using `prop-types` and `create-react-class`packages. (thanks to @andrewBalekha)
+* Fix calling `onRemove` before updating the notifications state. (thanks to @szdc)
+
 ## 0.2.13 - Mar 14, 2017
 
 * UMD support. (thanks to @jochenberger)

README.md

@@ -86,6 +86,12 @@ Returns the notification object to be used to programmatically dismiss a notific
 
 Remove a notification programmatically. You can pass an object returned by `addNotification()` or by `onAdd()` callback. If passing an object, you need to make sure it must contain the `uid` property. You can pass only the `uid` too: `removeNotification(uid)`.
 
+
+### `editNotification(notification)`
+
+Edit a notification programmatically. You can pass an object previously returned by `addNotification()` or by `onAdd()` callback. If passing an object, you need to make sure it must contain the `uid` property. You can pass only the `uid` too: `editNotification(uid)`.
+
+
 ### `clearNotifications()`
 
 Removes ALL notifications programatically.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notification-system",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "A React Notification System fully customized",
   "main": "dist/NotificationSystem.js",
   "scripts": {

src/NotificationSystem.jsx

@@ -68,17 +68,18 @@ var NotificationSystem = createReactClass({
     var notifications = this.state.notifications.filter(function(toCheck) {
       if (toCheck.uid === uid) {
         notification = toCheck;
+        return false;
       }
-      return toCheck.uid !== uid;
+      return true;
     });
 
-    if (notification && notification.onRemove) {
-      notification.onRemove(notification);
-    }
-
     if (this._isMounted) {
       this.setState({ notifications: notifications });
     }
+
+    if (notification && notification.onRemove) {
+      notification.onRemove(notification);
+    }
   },
 
   getInitialState: function() {
@@ -154,18 +155,63 @@ var NotificationSystem = createReactClass({
     return _notification;
   },
 
-  removeNotification: function(notification) {
+  getNotificationRef: function(notification) {
     var self = this;
+    var foundNotification = null;
+
     Object.keys(this.refs).forEach(function(container) {
       if (container.indexOf('container') > -1) {
         Object.keys(self.refs[container].refs).forEach(function(_notification) {
           var uid = notification.uid ? notification.uid : notification;
           if (_notification === 'notification-' + uid) {
-            self.refs[container].refs[_notification]._hideNotification();
+            // NOTE: Stop iterating further and return the found notification.
+            // Since UIDs are uniques and there won't be another notification found.
+            foundNotification = self.refs[container].refs[_notification];
+            return;
           }
         });
       }
     });
+
+    return foundNotification;
+  },
+
+  removeNotification: function(notification) {
+    var foundNotification = this.getNotificationRef(notification);
+    return foundNotification && foundNotification._hideNotification();
+  },
+
+  editNotification: function(notification, newNotification) {
+    var foundNotification = null;
+    // NOTE: Find state notification to update by using
+    // `setState` and forcing React to re-render the component.
+    var uid = notification.uid ? notification.uid : notification;
+
+    var newNotifications = this.state.notifications.filter(function(stateNotification) {
+      if (uid === stateNotification.uid) {
+        foundNotification = stateNotification;
+        return false;
+      }
+
+      return true;
+    });
+
+
+    if (!foundNotification) {
+      return;
+    }
+
+    newNotifications.push(
+      merge(
+        {},
+        foundNotification,
+        newNotification
+      )
+    );
+
+    this.setState({
+      notifications: newNotifications
+    });
   },
 
   clearNotifications: function() {
@@ -223,7 +269,6 @@ var NotificationSystem = createReactClass({
       <div className="notifications-wrapper" style={ this._getStyles.wrapper() }>
         { containers }
       </div>
-
     );
   }
 });

test/notification-system.test.js

@@ -172,6 +172,38 @@ describe('Notification Component', function() {
     done();
   });
 
+  it('should edit an existing notification using returned object', (done) => {
+    const notificationCreated = component.addNotification(defaultNotification);
+    const notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
+    expect(notification.length).toEqual(1);
+
+    const newTitle = 'foo';
+    const newContent = 'foobar';
+
+    component.editNotification(notificationCreated, { title: newTitle, message: newContent });
+    clock.tick(1000);
+    const notificationEdited = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
+    expect(notificationEdited.getElementsByClassName('notification-title')[0].textContent).toEqual(newTitle);
+    expect(notificationEdited.getElementsByClassName('notification-message')[0].textContent).toEqual(newContent);
+    done();
+  });
+
+  it('should edit an existing notification using uid', (done) => {
+    const notificationCreated = component.addNotification(defaultNotification);
+    const notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
+    expect(notification.length).toEqual(1);
+
+    const newTitle = 'foo';
+    const newContent = 'foobar';
+
+    component.editNotification(notificationCreated.uid, { title: newTitle, message: newContent });
+    clock.tick(1000);
+    const notificationEdited = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
+    expect(notificationEdited.getElementsByClassName('notification-title')[0].textContent).toEqual(newTitle);
+    expect(notificationEdited.getElementsByClassName('notification-message')[0].textContent).toEqual(newContent);
+    done();
+  });
+
   it('should remove all notifications', done => {
     component.addNotification(defaultNotification);
     component.addNotification(defaultNotification);