feature/custom-component add custom component render and classNames

.gitignore

@@ -1,4 +1,6 @@
 .DS_Store
+.idea/
+.yarnrc
 coverage/
 node_modules/
 dist/

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lastUpdateCheck 1495138597547

README.md

@@ -103,7 +103,8 @@ The notification object has the following properties:
 | Name         | Type            | Default   | Description                                                                                                                                                               |
 |------------  |---------------  |---------  |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------  |
 | title        | string          | null      | Title of the notification                                                                                                                                                 |
-| message      | string          | null      | Message of the notification                                                                                                                                              |
+| message      | string          | null      | Message of the notification                                                                                                                                               |
+| getContentComponent            | function  | null      | Return a React component to display in the notification (override other settings)                                                                         |
 | level        | string          | null      | Level of the notification. Available: **success**, **error**, **warning** and **info**                                                                                    |
 | position     | string          | tr        | Position of the notification. Available: **tr (top right)**, **tl (top left)**, **tc (top center)**, **br (bottom right)**, **bl (bottom left)**, **bc (bottom center)**  |
 | autoDismiss  | integer         | 5         | Delay in seconds for the notification go away. Set this to **0** to not auto-dismiss the notification                                                                      |

package.json

@@ -32,6 +32,7 @@
   },
   "homepage": "https://github.com/igorprado/react-notification-system",
   "dependencies": {
+    "classnames": "^2.2.5",
     "create-react-class": "^15.5.1",
     "object-assign": "^4.0.1",
     "prop-types": "^15.5.6"

src/NotificationContainer.jsx

@@ -3,6 +3,7 @@ var createReactClass = require('create-react-class');
 var PropTypes = require('prop-types');
 var NotificationItem = require('./NotificationItem');
 var Constants = require('./constants');
+var classnames = require('classnames');
 
 var NotificationContainer = createReactClass({
 
@@ -26,28 +27,34 @@ var NotificationContainer = createReactClass({
   render: function() {
     var self = this;
     var notifications;
+    var classNameContainer = this.props.classNameContainer;
+
+    var classNameSelector = classnames(
+      'notification-container',
+      'notifications-' + this.props.position, {
+        [classNameContainer]: !!classNameContainer
+      }
+    );
 
     if ([Constants.positions.bl, Constants.positions.br, Constants.positions.bc].indexOf(this.props.position) > -1) {
       this.props.notifications.reverse();
     }
 
-    notifications = this.props.notifications.map(function(notification) {
-      return (
-        <NotificationItem
-          ref={ 'notification-' + notification.uid }
-          key={ notification.uid }
-          notification={ notification }
-          getStyles={ self.props.getStyles }
-          onRemove={ self.props.onRemove }
-          noAnimation={ self.props.noAnimation }
-          allowHTML={ self.props.allowHTML }
-          children={ self.props.children }
-        />
-      );
-    });
+    notifications = this.props.notifications.map(notification => (
+      <NotificationItem
+        ref={ 'notification-' + notification.uid }
+        key={ notification.uid }
+        notification={ notification }
+        getStyles={ self.props.getStyles }
+        onRemove={ self.props.onRemove }
+        noAnimation={ self.props.noAnimation }
+        allowHTML={ self.props.allowHTML }
+        children={ self.props.children }
+      />
+    ));
 
     return (
-      <div className={ 'notifications-' + this.props.position } style={ this._style }>
+      <div className={ classNameSelector } style={ this._style }>
         { notifications }
       </div>
     );

src/NotificationItem.jsx

@@ -5,6 +5,7 @@ var ReactDOM = require('react-dom');
 var Constants = require('./constants');
 var Helpers = require('./helpers');
 var merge = require('object-assign');
+var classnames = require('classnames');
 
 /* From Modernizr */
 var whichTransitionEvent = function() {
@@ -242,23 +243,20 @@ var NotificationItem = createReactClass({
 
   render: function() {
     var notification = this.props.notification;
-    var className = 'notification notification-' + notification.level;
     var notificationStyle = merge({}, this._styles.notification);
     var cssByPos = this._getCssPropertyByPosition();
     var dismiss = null;
     var actionButton = null;
     var title = null;
     var message = null;
+    var content = null;
+    var getContentComponent = notification.getContentComponent;
 
-    if (this.state.visible) {
-      className += ' notification-visible';
-    } else if (this.state.visible === false) {
-      className += ' notification-hidden';
-    }
-
-    if (!notification.dismissible) {
-      className += ' notification-not-dismissible';
-    }
+    var className = classnames('notification', 'notification-' + notification.level, {
+      'notification-visible': this.state.visible,
+      'notification-hidden': !this.state.visible,
+      'notification-not-dismissible': !notification.dismissible
+    });
 
     if (this.props.getStyles.overrideStyle) {
       if (!this.state.visible && !this.state.removed) {
@@ -316,12 +314,26 @@ var NotificationItem = createReactClass({
       actionButton = notification.children;
     }
 
+    if (getContentComponent) {
+      content = getContentComponent();
+    } else {
+      content = [
+        title,
+        message,
+        dismiss,
+        actionButton
+      ];
+    }
+
     return (
-      <div className={ className } onClick={ this._dismiss } onMouseEnter={ this._handleMouseEnter } onMouseLeave={ this._handleMouseLeave } style={ notificationStyle }>
-        { title }
-        { message }
-        { dismiss }
-        { actionButton }
+      <div
+        className={ className }
+        onClick={ this._dismiss }
+        onMouseEnter={ this._handleMouseEnter }
+        onMouseLeave={ this._handleMouseLeave }
+        style={ notificationStyle }
+      >
+        {content}
       </div>
     );
   }

src/NotificationSystem.jsx

@@ -5,6 +5,7 @@ var merge = require('object-assign');
 var NotificationContainer = require('./NotificationContainer');
 var Constants = require('./constants');
 var Styles = require('./styles');
+var classnames = require('classnames');
 
 var NotificationSystem = createReactClass({
 
@@ -238,6 +239,13 @@ var NotificationSystem = createReactClass({
     var self = this;
     var containers = null;
     var notifications = this.state.notifications;
+    var className = this.props.className;
+
+    var classNameSelector = classnames(
+      'notifications-wrapper', {
+        [className]: !!className
+      }
+    );
 
     if (notifications.length) {
       containers = Object.keys(Constants.positions).map(function(position) {
@@ -266,7 +274,7 @@ var NotificationSystem = createReactClass({
 
 
     return (
-      <div className="notifications-wrapper" style={ this._getStyles.wrapper() }>
+      <div className={ classNameSelector } style={ this._getStyles.wrapper() }>
         { containers }
       </div>
     );

src/constants.js

@@ -26,7 +26,8 @@ var CONSTANTS = {
     position: 'tr',
     autoDismiss: 5,
     dismissible: true,
-    action: null
+    action: null,
+    getContentComponent: null
   }
 };