Merge branch 'release/0.2.10'

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 0.2.10 - Aug 29, 2016
+
+* Allows children content to override `action`. (thanks to @gor181)
+
 ## 0.2.9 - Aug 25, 2016
 
 * Improved CSS styles for better performance

README.md

@@ -99,6 +99,7 @@ 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 (callback is optional). [See more](#action)                                                                                                        |
+| children       | element,string          | null      | Adds custom content, and overrides `action` (if defined) [See more](#customContent)                                                                                                        |
 | 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. |
@@ -125,6 +126,23 @@ notification = {
 
 ```
 
+### Children
+
+Add custom content / react elements
+
+```js
+notification = {
+  [...],
+  children: (
+    <div>
+      <h2>Hello World</h2>
+      <a>Anchor</a>
+    </div>
+  )
+}
+
+```
+
 ## Styles
 
 This component was made to work as plug and play. For that, a handcrafted style was added to it and is used as inline CSS.

example/src/scripts/App.jsx

@@ -34,6 +34,18 @@ NotificationSystemExample = React.createClass({
         }
       }
     },
+    {
+      title: 'Hey, it\'s good to see you!',
+      message: 'I come with custom content!',
+      level: 'success',
+      position: 'tr',
+      children: (
+        <div>
+          <h2>Hello World</h2>
+          <a>Anchor</a>
+        </div>
+      )
+    },
     {
       title: 'I\'ll be here forever!',
       message: 'Just kidding, you can click me.',

karma.conf.js

@@ -36,7 +36,7 @@ module.exports = function (config) {
           // see: https://github.com/deepsweet/isparta-loader/issues/1
           {
             test: /\.js$|.jsx$/,
-            loader: 'babel',
+            loader: 'babel?presets=airbnb',
             exclude: /node_modules/
           },
           {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notification-system",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "A React Notification System fully customized",
   "main": "dist/NotificationSystem.js",
   "scripts": {
@@ -40,11 +40,12 @@
   },
   "devDependencies": {
     "autoprefixer-loader": "^3.1.0",
-    "babel-core": "^5.8.25",
+    "babel-core": "^6.14.0",
     "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.2",
+    "babel-loader": "^6.2.5",
     "babel-plugin-react-class-display-name": "^0.1.0",
-    "babel-plugin-react-transform": "^1.1.1",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-preset-airbnb": "^2.0.0",
     "css-loader": "^0.19.0",
     "eslint": "1.9.0",
     "eslint-config-airbnb": "^0.1.0",

src/NotificationContainer.jsx

@@ -39,6 +39,7 @@ var NotificationContainer = React.createClass({
           onRemove={ self.props.onRemove }
           noAnimation={ self.props.noAnimation }
           allowHTML={ self.props.allowHTML }
+          children={ self.props.children }
         />
       );
     });

src/NotificationItem.jsx

@@ -29,7 +29,11 @@ var NotificationItem = React.createClass({
     getStyles: React.PropTypes.object,
     onRemove: React.PropTypes.func,
     allowHTML: React.PropTypes.bool,
-    noAnimation: React.PropTypes.bool
+    noAnimation: React.PropTypes.bool,
+    children: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ])
   },
 
   getDefaultProps: function() {
@@ -304,6 +308,10 @@ var NotificationItem = React.createClass({
       );
     }
 
+    if (notification.children) {
+      actionButton = notification.children;
+    }
+
     return (
       <div className={ className } onClick={ this._dismiss } onMouseEnter={ this._handleMouseEnter } onMouseLeave={ this._handleMouseLeave } style={ notificationStyle }>
         { title }

test/notification-system.test.js

@@ -265,6 +265,17 @@ describe('Notification Component', function() {
     done();
   });
 
+  it('should render a children if passed', done => {
+    defaultNotification.children = (
+      <div className="custom-container"></div>
+    );
+
+    component.addNotification(defaultNotification);
+    let customContainer = TestUtils.findRenderedDOMComponentWithClass(instance, 'custom-container');
+    expect(customContainer).toExist();
+    done();
+  });
+
   it('should pause the timer if a notification has a mouse enter', done => {
     notificationObj.autoDismiss = 2;
     component.addNotification(notificationObj);
@@ -327,25 +338,25 @@ describe('Notification Component', function() {
 
   it('should throw an error if no level is defined', done => {
     delete notificationObj.level;
-    expect(component.addNotification).withArgs(notificationObj).toThrow(/notification level is required/);
+    expect(() => component.addNotification(notificationObj)).toThrow(/notification level is required/);
     done();
   });
 
   it('should throw an error if a invalid level is defined', done => {
     notificationObj.level = 'invalid';
-    expect(component.addNotification).withArgs(notificationObj).toThrow(/is not a valid level/);
+    expect(() => component.addNotification(notificationObj)).toThrow(/is not a valid level/);
     done();
   });
 
   it('should throw an error if a invalid position is defined', done => {
     notificationObj.position = 'invalid';
-    expect(component.addNotification).withArgs(notificationObj).toThrow(/is not a valid position/);
+    expect(() => component.addNotification(notificationObj)).toThrow(/is not a valid position/);
     done();
   });
 
   it('should throw an error if autoDismiss is not a number', done => {
     notificationObj.autoDismiss = 'string';
-    expect(component.addNotification).withArgs(notificationObj).toThrow(/\'autoDismiss\' must be a number./);
+    expect(() => component.addNotification(notificationObj)).toThrow(/\'autoDismiss\' must be a number./);
     done();
   });
 });

webpack.config.dev.js

@@ -30,21 +30,7 @@ module.exports = {
           path.resolve(__dirname, 'src'),
           path.resolve(__dirname, 'example/src')
         ],
-        loader: 'babel',
-        query: {
-          stage: 0,
-          plugins: ['react-class-display-name', 'react-transform'],
-          extra: {
-            'react-transform': [{
-              'target': 'react-transform-hmr',
-              'imports': ['react'],
-              'locals': ['module']
-            }, {
-              'target': 'react-transform-catch-errors',
-              'imports': ['react', 'redbox-react']
-            }]
-          }
-        }
+        loader: 'babel?presets=airbnb'
       },
       {
         test: /\.sass$/,

webpack.config.prod.js

@@ -68,7 +68,7 @@ module.exports = {
           path.resolve(__dirname, 'src'),
           path.resolve(__dirname, 'example/src')
         ],
-        loader: 'babel'
+        loader: 'babel?presets=airbnb'
       },
       {
         test: /\.sass$/,