From 483f894e561d1ed48828baa1d1005d5951e28ea5 Mon Sep 17 00:00:00 2001 From: Goran Udosic Date: Thu, 25 Aug 2016 23:34:23 +0200 Subject: [PATCH 1/6] Upgrade to babel 6 --- package.json | 7 ++++--- webpack.config.dev.js | 25 +++++++++++++------------ 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 7122b98..1695f6e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 27eaaa8..8365c16 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -32,18 +32,19 @@ module.exports = { ], 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'] - }] - } + // stage: 0, + presets: ['airbnb'] + // 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'] + // }] + // } } }, { From 823f6f1ffa21c23cbb52c7a7ff0c13b40df71f0f Mon Sep 17 00:00:00 2001 From: Goran Udosic Date: Thu, 25 Aug 2016 23:57:28 +0200 Subject: [PATCH 2/6] Add children property to notification Add children property explanation and example to readme Update example to include notification with children property set Add airbnb preset for babel 6 Add children test #38 --- README.md | 18 ++++++++++++++++++ example/src/scripts/App.jsx | 12 ++++++++++++ karma.conf.js | 5 ++++- src/NotificationContainer.jsx | 1 + src/NotificationItem.jsx | 10 +++++++++- test/notification-system.test.js | 11 +++++++++++ 6 files changed, 55 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 09f8e84..ef09898 100644 --- a/README.md +++ b/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: ( +
+

Hello World

+ Anchor +
+ ) +} + +``` + ## 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. diff --git a/example/src/scripts/App.jsx b/example/src/scripts/App.jsx index f3ad327..cd45b24 100644 --- a/example/src/scripts/App.jsx +++ b/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: ( +
+

Hello World

+ Anchor +
+ ) + }, { title: 'I\'ll be here forever!', message: 'Just kidding, you can click me.', diff --git a/karma.conf.js b/karma.conf.js index 16c5743..69e9ea2 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -37,7 +37,10 @@ module.exports = function (config) { { test: /\.js$|.jsx$/, loader: 'babel', - exclude: /node_modules/ + exclude: /node_modules/, + query: { + presets: ['airbnb'] + } }, { test: /\.js$|.jsx$/, diff --git a/src/NotificationContainer.jsx b/src/NotificationContainer.jsx index 9ccf4e1..2c1dbec 100644 --- a/src/NotificationContainer.jsx +++ b/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 } /> ); }); diff --git a/src/NotificationItem.jsx b/src/NotificationItem.jsx index eba803d..2db3eff 100644 --- a/src/NotificationItem.jsx +++ b/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 (
{ title } diff --git a/test/notification-system.test.js b/test/notification-system.test.js index e3aab6f..b7b256f 100644 --- a/test/notification-system.test.js +++ b/test/notification-system.test.js @@ -265,6 +265,17 @@ describe('Notification Component', function() { done(); }); + it('should render a children if passed', done => { + defaultNotification.children = ( +
+ ); + + 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); From 864be818a0a80f3e24e8a36cfa5f01882b24a55e Mon Sep 17 00:00:00 2001 From: Goran Udosic Date: Fri, 26 Aug 2016 00:01:03 +0200 Subject: [PATCH 3/6] Add babel airbnb preset to production webpack config #38 --- webpack.config.prod.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 8a277d1..83c522a 100644 --- a/webpack.config.prod.js +++ b/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$/, From 63fe233ed0153c1c11af30c5f593e12f973ba3f2 Mon Sep 17 00:00:00 2001 From: Goran Udosic Date: Fri, 26 Aug 2016 00:04:50 +0200 Subject: [PATCH 4/6] Cleanup Move presets to inline query #38 --- karma.conf.js | 7 ++----- webpack.config.dev.js | 17 +---------------- 2 files changed, 3 insertions(+), 21 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 69e9ea2..3e6e4b5 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -36,11 +36,8 @@ module.exports = function (config) { // see: https://github.com/deepsweet/isparta-loader/issues/1 { test: /\.js$|.jsx$/, - loader: 'babel', - exclude: /node_modules/, - query: { - presets: ['airbnb'] - } + loader: 'babel?presets=airbnb', + exclude: /node_modules/ }, { test: /\.js$|.jsx$/, diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 8365c16..26b926a 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -30,22 +30,7 @@ module.exports = { path.resolve(__dirname, 'src'), path.resolve(__dirname, 'example/src') ], - loader: 'babel', - query: { - // stage: 0, - presets: ['airbnb'] - // 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$/, From 067336e0257331709c3b2104f20e6bc52708165d Mon Sep 17 00:00:00 2001 From: Igor Prado Date: Mon, 29 Aug 2016 13:31:34 -0500 Subject: [PATCH 5/6] Remove warnings from tests --- test/notification-system.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/notification-system.test.js b/test/notification-system.test.js index b7b256f..9e89479 100644 --- a/test/notification-system.test.js +++ b/test/notification-system.test.js @@ -338,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(); }); }); From 4ff90c8884a1f0897dda6d5c0451e2d7657fda85 Mon Sep 17 00:00:00 2001 From: Igor Prado Date: Mon, 29 Aug 2016 13:34:57 -0500 Subject: [PATCH 6/6] Bump version in package.json and update CHANGELOG file --- CHANGELOG.md | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 09fa6d0..d002c18 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 1695f6e..c508757 100644 --- a/package.json +++ b/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": {