reapop - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0

lib/components/NotificationsContainer.js

@@ -18,6 +18,10 @@ 'use strict';
 
-var _CSSTransitionGroup = require('react-transition-group/CSSTransitionGroup');
+var _TransitionGroup = require('react-transition-group/TransitionGroup');
 
-var _CSSTransitionGroup2 = _interopRequireDefault(_CSSTransitionGroup);
+var _TransitionGroup2 = _interopRequireDefault(_TransitionGroup);
 
+var _CSSTransition = require('react-transition-group/CSSTransition');
+
+var _CSSTransition2 = _interopRequireDefault(_CSSTransition);
+
 var _Notification = require('./Notification');
@@ -50,5 +54,8 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = NotificationsContainer.__proto__ || Object.getPrototypeOf(NotificationsContainer)).call.apply(_ref, [this].concat(args))), _this), _this._renderNotifications = function () {
-      var _this$props = _this.props,
-          position = _this$props.position,
-          className = _this$props.theme.notification.className;
+      var position = _this.props.position;
+      var className = _this.props.theme.notification.className;
+      var _this$props$theme$not = _this.props.theme.notificationsContainer.transition,
+          name = _this$props$theme$not.name,
+          enterTimeout = _this$props$theme$not.enterTimeout,
+          leaveTimeout = _this$props$theme$not.leaveTimeout;
       var notifications = _this.props.notifications;
@@ -64,7 +71,21 @@
       return notifications.map(function (notification) {
-        return _react2.default.createElement(_Notification2.default, {
-          key: notification.id,
-          notification: notification,
-          className: className
-        });
+        return _react2.default.createElement(
+          _CSSTransition2.default,
+          {
+            key: notification.id,
+            classNames: {
+              enter: name.enter,
+              exit: name.leave
+            },
+            timeout: {
+              enter: enterTimeout,
+              exit: leaveTimeout
+            }
+          },
+          _react2.default.createElement(_Notification2.default, {
+            key: notification.id,
+            notification: notification,
+            className: className
+          })
+        );
       });
@@ -90,8 +111,3 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
     value: function render() {
-      var _props$theme$notifica = this.props.theme.notificationsContainer,
-          className = _props$theme$notifica.className,
-          _props$theme$notifica2 = _props$theme$notifica.transition,
-          name = _props$theme$notifica2.name,
-          enterTimeout = _props$theme$notifica2.enterTimeout,
-          leaveTimeout = _props$theme$notifica2.leaveTimeout;
+      var className = this.props.theme.notificationsContainer.className;
       var position = this.props.position;
@@ -104,8 +120,4 @@
         _react2.default.createElement(
-          _CSSTransitionGroup2.default,
-          {
-            transitionName: name,
-            transitionEnterTimeout: enterTimeout,
-            transitionLeaveTimeout: leaveTimeout
-          },
+          _TransitionGroup2.default,
+          null,
           this._renderNotifications()
@@ -112,0 +124,0 @@ )

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.removeNotifications = exports.removeNotification = exports.updateNotification = exports.addNotification = exports.reducer = exports.types = exports.actions = exports.POSITIONS = exports.STATUS = exports.DEFAULT_NOTIFICATION = undefined;
+exports.removeNotifications = exports.removeNotification = exports.updateNotification = exports.notify = exports.addNotification = exports.reducer = exports.types = exports.actions = exports.POSITIONS = exports.STATUS = exports.DEFAULT_NOTIFICATION = undefined;
 
@@ -28,2 +28,3 @@ var _NotificationsSystem = require('./components/NotificationsSystem');
 exports.addNotification = _notifications.addNotification;
+exports.notify = _notifications.notify;
 exports.updateNotification = _notifications.updateNotification;
@@ -30,0 +31,0 @@ exports.removeNotification = _notifications.removeNotification;

lib/store/notifications.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.types = exports.actions = exports.updateNotification = exports.addNotification = undefined;
+exports.types = exports.actions = exports.updateNotification = exports.notify = exports.addNotification = undefined;
 exports.removeNotification = removeNotification;
@@ -65,2 +65,22 @@ exports.removeNotifications = removeNotifications;
 /**
+ * Update or create a notification
+ * @param {Object} notification
+ * @returns {{type: string, payload: {Object}}}
+ */
+var notify = exports.notify = function notify(notification) {
+  return function (dispatch, getState) {
+    var notifications = getState().notifications;
+    var doesNotifExist = notifications.find(function (notif) {
+      return notif.id === notification.id;
+    });
+
+    if (doesNotifExist) {
+      return dispatch(updateNotification(notification));
+    }
+
+    return dispatch(addNotification(notification));
+  };
+};
+
+/**
  * Update a notification (thunk action creator)
@@ -67,0 +87,0 @@ *

package.json

 {
   "name": "reapop",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "A React and Redux notifications system",
@@ -15,9 +15,10 @@ "main": "lib/index.js",
     "react:15": "npm run react:clean && npm i react@15 react-dom@15 react-addons-test-utils@15 redux@3",
+    "react:16": "npm run react:clean && npm i react@16 react-dom@16 react-addons-test-utils@15 redux@3",
     "react-redux:2": "npm run react-redux:clean && npm i react-redux@2",
     "react-redux:3.1": "npm run react-redux:clean && npm i react-redux@3.1",
     "react-redux:4": "npm run react-redux:clean && npm i react-redux@4",
-    "react-redux:5": "npm run react-redux:clean && npm i react-redux@5",
+    "react-redux:5": "npm run react-redux:clean && npm i react-redux@5.0.6",
     "test": "babel-node ./node_modules/karma/bin/karma start ./build/karma.conf.js --reporters mocha",
-    "test:all": "npm run react:14 && npm run react-redux:2 && npm test && npm run react:14 && npm run react-redux:3.1 && npm test && npm run react:15 && npm run react-redux:4 && npm test && npm run react:15 && npm run react-redux:5 && npm test",
-    "test:coverage": "babel-node ./node_modules/karma/bin/karma start ./build/karma.conf.js --reporters mocha,coverage",
+    "test:all": "npm run react:14 && npm run react-redux:2 && npm t && npm run react:14 && npm run react-redux:3.1 && npm t && npm run react:15 && npm run react-redux:4 && npm t && npm run react:15 && npm run react-redux:5 && npm t && npm run react:16 && npm run react-redux:5 && npm t",
+    "test:coverage": "npm test -- --reporters mocha,coverage",
     "test:coveralls": "npm test -- --reporters mocha,coverage,coveralls",
@@ -47,63 +48,70 @@ "test:watch": "npm test -- --singleRun=false --reporters mocha",
     "redux": "^2.0.0 || ^3.0.0",
-    "react-redux": "^2.0.0 || ^3.1.0 || ^4.0.0 || ^5.0.0",
-    "react": "^0.14.0 || ^15.0.0",
+    "react-redux": "^2.0.0 || ^3.1.0 || ^4.0.0 || ^5.0.6",
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
     "redux-thunk": "^2.1.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.7.7",
-    "babel-core": "^6.7.7",
-    "babel-eslint": "^7.0.0",
-    "babel-loader": "^6.2.4",
-    "babel-polyfill": "^6.7.4",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "css-loader": "^0.26.0",
-    "enzyme": "^2.2.0",
-    "eslint": "^3.0.1",
-    "eslint-config-standard": "^6.2.0",
-    "eslint-config-standard-react": "^4.2.0",
-    "eslint-plugin-promise": "^3.0.0",
-    "eslint-plugin-react": "^6.4.0",
-    "eslint-plugin-standard": "^2.0.1",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.1.2",
+    "babel-loader": "7.1.1",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "css-loader": "^0.28.7",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-14": "^1.0.5",
+    "enzyme-adapter-react-15.4": "^1.0.5",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.14.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-config-standard-react": "^5.0.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-standard": "^3.0.1",
     "expect": "^1.18.0",
-    "express": "^4.13.4",
-    "faker": "^3.1.0",
-    "file-loader": "^0.9.0",
-    "font-awesome": "^4.6.1",
-    "html-webpack-plugin": "^2.17.0",
+    "express": "^4.16.2",
+    "faker": "^4.1.0",
+    "file-loader": "^1.1.6",
+    "font-awesome": "^4.7.0",
+    "html-webpack-plugin": "^2.30.1",
     "import": "0.0.6",
     "isparta-loader": "^2.0.0",
-    "json-loader": "^0.5.4",
-    "karma": "^1.1.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-coverage": "^1.0.0",
+    "json-loader": "^0.5.7",
+    "karma": "^2.0.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-coverage": "^1.1.1",
     "karma-coveralls": "^1.1.2",
-    "karma-mocha": "^1.2.0",
-    "karma-mocha-reporter": "^2.0.2",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^3.1.0",
-    "node-sass": "^4.1.1",
-    "phantomjs-prebuilt": "^2.1.7",
-    "react": "15.4.1",
-    "react-addons-test-utils": "15.4.1",
-    "react-dom": "15.4.1",
-    "react-redux": "^5.0.1",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-webpack": "^2.0.9",
+    "mocha": "^4.1.0",
+    "node-sass": "^4.7.2",
+    "phantomjs-prebuilt": "^2.1.16",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-addons-update": "^15.6.2",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.6",
+    "reapop-theme-bootstrap": "^0.3.0",
     "reapop-theme-wybo": "^0.4.0",
-    "redux": "^3.5.2",
-    "redux-mock-store": "^1.0.2",
-    "redux-thunk": "^2.1.0",
-    "requirejs": "^2.2.0",
-    "sass-loader": "^4.0.0",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7",
+    "redux": "^3.7.2",
+    "redux-mock-store": "^1.4.0",
+    "redux-thunk": "^2.2.0",
+    "requirejs": "^2.3.5",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.1",
+    "url-loader": "^0.6.2",
     "webpack": "^1.13.0",
-    "webpack-dev-middleware": "^1.6.1",
-    "webpack-hot-middleware": "^2.10.0"
+    "webpack-dev-middleware": "^2.0.3",
+    "webpack-hot-middleware": "^2.21.0"
   },
   "dependencies": {
-    "prop-types": "^15.5.8",
-    "react-transition-group": "^1.1.2"
+    "prop-types": "^15.6.0",
+    "react-transition-group": "^2.2.1"
   }
 }

README.md

@@ -23,4 +23,4 @@ # Reapop
 
-- [react](https://github.com/facebook/react) : **^0.14.0** and **^15.0.0**
-- [react-redux](https://github.com/reactjs/react-redux) : **^2.0.0**, **^3.0.0**, **^4.0.0** and **^5.0.0**
+- [react](https://github.com/facebook/react) : **^0.14.0**,  **^15.0.0** and **^16.0.0**
+- [react-redux](https://github.com/reactjs/react-redux) : **^2.0.0**, **^3.0.0**, **^4.0.0** and **^5.0.6**
 - [redux](https://github.com/reactjs/redux) : **^2.0.0** and **^3.0.0**
@@ -107,6 +107,6 @@
 const store = createStoreWithMiddleware(combineReducers({
-    // reducer must be mounted as `notifications` !
-    notifications: notificationsReducer()
-    // your reducers here
-  }), {});
+  // reducer must be mounted as `notifications` !
+  notifications: notificationsReducer()
+  // your reducers here
+}), {});
 ```
@@ -131,4 +131,4 @@
 import {connect} from 'react-redux';
-// 1. we import `addNotification` (thunk action creator) as `notify`
-import {addNotification as notify} from 'reapop';
+// 1. we import `notify` (thunk action creator)
+import {notify} from 'reapop';
 
@@ -173,4 +173,4 @@ class AmazingComponent extends Component {
 ``` js
-// 1. we import `addNotification` (thunk action creator) as `notify`
-import {addNotification as notify} from 'reapop';
+// 1. we import `notify` (thunk action creator)
+import {notify} from 'reapop';
 
@@ -184,7 +184,7 @@ // we add a notification to inform user about
         // Status code will be converted in an understandable status for the React component
-        dispatch(notify({message:res.data.detail, status:res.statusCode}));
+        dispatch(notify({message: res.data.detail, status: res.statusCode}));
       })
       .catch((res) => {
        // 3. same thing here
-        dispatch(notify({message:res.data.detail, status:res.statusCode}));
+        dispatch(notify({message: res.data.detail, status: res.statusCode}));
       });
@@ -191,0 +191,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

46276

increased by2.63%

Lines of code

855

increased by3.39%

Worsened metrics

Dev dependency count

58

increased by13.73%

Dependency changes

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedreact-transition-group@2.9.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedchain-function@1.0.1(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-transition-group@1.2.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedscheduler@0.19.1(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwarning@3.0.0(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedprop-types@^15.6.0

• Updatedreact-transition-group@^2.2.1