Now is possible to remove a notification by UID too. Added onAdd prop…

…erty to notification object.
riccio82 · Oct 11, 2015 · 64c0ccf · 64c0ccf
1 parent 12b9b78
commit 64c0ccf
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -88,7 +88,7 @@ Returns the notification object to be used to programmatically dismiss a notific
 
 ### `removeNotification(notification)`
 
-Remove programmatically a notification. This object must be returned by `addNotification()` method or contains the properties `position` and `uid` of the notification that you want to remove.
+Remove programmatically a notification. 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)`.
 
 ## Creating a notification
 
@@ -103,7 +103,8 @@ The notification object has the following properties:
 | autoDismiss  | integer         | 5         | Delay in seconds for the notification go away. Set this to **0** to not auto-dismiss the notification                                                                      |
 | dismissible  | bool            | true      | Set if notification is dismissible by the user. [See more](#dismissible)                                                                                                  |
 | action       | object          | null      | Add a button with label and callback function. [See more](#action)                                                                                                        |
-| onRemove     | function        | null      | A callback function that will be called when the notification is about to be removed. The first argument is the original notification e.g. `function (notification) { console.log(notification.title + 'was removed'); }`                                                                                  |
+| onAdd | function | null | A callback function that will be called when the notification is successfully added. The first argument is the original notification e.g. `function (notification) { console.log(notification.title + 'was added'); }` |
+| onRemove     | function        | null      | A callback function that will be called when the notification is about to be removed. The first argument is the original notification e.g. `function (notification) { console.log(notification.title + 'was removed'); }` |
 | uid          | integer/string           | null      | Overrides the internal `uid`. Useful if you are managing your notifications id. Notifications with same `uid` won't be displayed. |
 
 

diff --git a/example/build/app.js b/example/build/app.js
diff --git a/src/notification-system.jsx b/src/notification-system.jsx
@@ -141,6 +141,10 @@ var NotificationSystem = React.createClass({
 
       notifications.push(_notification);
 
+      if (typeof _notification.onAdd === 'function') {
+        notification.onAdd(_notification);
+      }
+
       this.setState({
         notifications: notifications
       });
@@ -150,15 +154,17 @@ var NotificationSystem = React.createClass({
   },
 
   removeNotification: function(notification) {
-    var container = this.refs['container-' + notification.position];
-    var _notification;
-
-    if (container) {
-      _notification = container.refs['notification-' + notification.uid];
-      if (_notification) {
-        _notification._hideNotification();
+    var self = this;
+    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();
+          }
+        });
       }
-    }
+    });
   },
 
   componentDidMount: function() {

diff --git a/src/styles.js b/src/styles.js
@@ -87,7 +87,7 @@ var STYLES = {
       position: 'relative',
       width: '100%',
       cursor: 'pointer',
-      borderRadius: '3px 3px 2px 2px',
+      borderRadius: '2px',
       fontSize: '13px',
       margin: '10px 0 0',
       padding: '10px',
@@ -108,7 +108,7 @@ var STYLES = {
     },
 
     success: {
-      borderTop: '3px solid ' + defaultColors.success.hex,
+      borderTop: '2px solid ' + defaultColors.success.hex,
       backgroundColor: '#f0f5ea',
       color: '#4b583a',
       WebkitBoxShadow: '0 0 1px rgba(' + defaultColors.success.rgb + ',' + defaultShadowOpacity + ')',
@@ -117,7 +117,7 @@ var STYLES = {
     },
 
     error: {
-      borderTop: '3px solid ' + defaultColors.error.hex,
+      borderTop: '2px solid ' + defaultColors.error.hex,
       backgroundColor: '#f4e9e9',
       color: '#412f2f',
       WebkitBoxShadow: '0 0 1px rgba(' + defaultColors.error.rgb + ',' + defaultShadowOpacity + ')',
@@ -126,7 +126,7 @@ var STYLES = {
     },
 
     warning: {
-      borderTop: '3px solid ' + defaultColors.warning.hex,
+      borderTop: '2px solid ' + defaultColors.warning.hex,
       backgroundColor: '#f9f6f0',
       color: '#5a5343',
       WebkitBoxShadow: '0 0 1px rgba(' + defaultColors.warning.rgb + ',' + defaultShadowOpacity + ')',
@@ -135,7 +135,7 @@ var STYLES = {
     },
 
     info: {
-      borderTop: '3px solid ' + defaultColors.info.hex,
+      borderTop: '2px solid ' + defaultColors.info.hex,
       backgroundColor: '#e8f0f4',
       color: '#41555d',
       WebkitBoxShadow: '0 0 1px rgba(' + defaultColors.info.rgb + ',' + defaultShadowOpacity + ')',