react-redux-toastr - npm Package Compare versions

Comparing version 6.0.1 to 6.1.0

lib/actions.js

@@ -7,5 +7,2 @@ 'use strict';
 exports.removeByType = exports.hideConfirm = exports.showConfirm = exports.remove = exports.clean = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 exports.add = add;
@@ -26,3 +23,2 @@
 function add(toastr) {
-  console.log('toastr add: ', toastr);
   if (_config2.default.preventDuplicates && (0, _utils.preventDuplication)(_reducer.toastrsCache, toastr)) {
@@ -38,5 +34,3 @@ return {
     type: _constants.ADD_TOASTR,
-    payload: _extends({
-      position: _config2.default.position
-    }, toastr)
+    payload: toastr
   };
@@ -43,0 +37,0 @@ }

lib/constants.js

@@ -11,2 +11,7 @@ 'use strict';
 var HIDE_CONFIRM = exports.HIDE_CONFIRM = '@ReduxToastr/confirm/HIDE';
-var REMOVE_BY_TYPE = exports.REMOVE_BY_TYPE = '@ReduxToastr/toastr/REMOVE_BY_TYPE';
+var REMOVE_BY_TYPE = exports.REMOVE_BY_TYPE = '@ReduxToastr/toastr/REMOVE_BY_TYPE';
+// before add a new transition - check its presence in src/styles/animations.scss
+var TRANSITIONS = exports.TRANSITIONS = {
+  in: ['bounceIn', 'bounceInDown', 'fadeIn'],
+  out: ['bounceOut', 'bounceOutUp', 'fadeOut']
+};

lib/ReduxToastr.js

@@ -40,2 +40,4 @@ 'use strict';
 
+var _constants = require('./constants');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -190,4 +192,4 @@
   progressBar: _propTypes2.default.bool,
-  transitionIn: _propTypes2.default.string,
-  transitionOut: _propTypes2.default.string,
+  transitionIn: _propTypes2.default.oneOf(_constants.TRANSITIONS.in),
+  transitionOut: _propTypes2.default.oneOf(_constants.TRANSITIONS.out),
   preventDuplicates: _propTypes2.default.bool
@@ -200,4 +202,4 @@ };
   progressBar: false,
-  transitionIn: 'bounceIn',
-  transitionOut: 'bounceOut',
+  transitionIn: _constants.TRANSITIONS.in[0],
+  transitionOut: _constants.TRANSITIONS.out[0],
   preventDuplicates: false,
@@ -204,0 +206,0 @@ confirmOptions: {

lib/ToastrBox.js

@@ -27,2 +27,4 @@ 'use strict';
 
+var _constants = require('./constants');
+
 var _utils = require('./utils');
@@ -362,4 +364,9 @@
 ToastrBox.propTypes = {
-  item: _propTypes2.default.object.isRequired
+  item: _propTypes2.default.shape({
+    options: _propTypes2.default.shape({
+      transitionIn: _propTypes2.default.oneOf(_constants.TRANSITIONS.in),
+      transitionOut: _propTypes2.default.oneOf(_constants.TRANSITIONS.out)
+    })
+  })
 };
 exports.default = ToastrBox;

lib/ToastrConfirm.js

@@ -25,2 +25,4 @@ 'use strict';
 
+var _constants = require('./constants');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -201,5 +203,6 @@
 ToastrConfirm.propTypes = {
-  confirm: _propTypes2.default.object.isRequired
+  confirm: _propTypes2.default.object.isRequired,
+  transitionIn: _propTypes2.default.oneOf(_constants.TRANSITIONS.in),
+  transitionOut: _propTypes2.default.oneOf(_constants.TRANSITIONS.out)
 };
-
 exports.default = ToastrConfirm;

lib/toastrEmitter.js

@@ -18,2 +18,6 @@ 'use strict';
 
+var addToToastr = function addToToastr(type, array) {
+  return emitter.emit('add/toastr', (0, _utils.mapToToastrMessage)(type, array));
+};
+
 var actions = {};
@@ -26,3 +30,3 @@ ['light', 'message', 'info', 'success', 'warning', 'error'].forEach(function (item) {
 
-    emitter.emit('add/toastr', (0, _utils.mapToToastrMessage)(item, args));
+    return addToToastr(item, args);
   };
@@ -29,0 +33,0 @@ });

package.json

 {
   "name": "react-redux-toastr",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "react-redux-toastr is a React toastr message implemented with Redux",
@@ -14,3 +14,3 @@ "main": "lib/index.js",
     "clean": "./node_modules/.bin/rimraf dist lib",
-    "lint": "better-npm-run lint",
+    "lint": "./node_modules/eslint/bin/eslint.js --fix .",
     "build_app": "concurrent --kill-others & npm run clean & npm run lint & npm run build & npm run sass & npm run clean-css",
@@ -95,2 +95,3 @@ "buildc": "better-npm-run build_client"
     "eslint-loader": "^1.1.1",
+    "eslint-plugin-babel": "^4.1.1",
     "eslint-plugin-react": "^6.10.3",
@@ -97,0 +98,0 @@ "extract-text-webpack-plugin": "^2.1.0",

README.md

@@ -16,13 +16,16 @@ ##`react-redux-toastr` [demo](http://diegoddox.github.io/react-redux-toastr/)
 
-##### 2. Add the `react-redux-toastr` css link to your app
-##### NOTE: This can be change at anytime
-```
+##### 2. Add the styles
+
+- import the scss file into to your project.
+
+  ```scss
+  @import 'react-redux-toastr/src/styles/index';
+  ```
+- or include the css file from the demo site (**NOTE**: This can be change at anytime)
+```html
 <link href="http://diegoddox.github.io/react-redux-toastr/5.0/react-redux-toastr.min.css" rel="stylesheet" type="text/css">
 ```
 
-Or import the scss file into to your project.
-`import 'react-redux-toastr/src/styles/index.scss'`
+##### 3. Add the reducer.
 
-##### 3. The third thing you need to do is to add the `react-redux-toastr` `reducer` to Redux.
-
 ```javascript
@@ -39,5 +42,5 @@ import {createStore, combineReducers} from 'redux'
 
-##### NOTE: The default mount point for `react-redux-toastr` is `toastr`.
+**NOTE**: The default mount point for `react-redux-toastr` is `toastr`.
 
-##### 4. Add the `react-redux-toastr` React component to the root of your app
+##### 4. Add the component into an app root
 
@@ -64,19 +67,25 @@ ```javascript
 
-default props: In case you don't pass the props.
-NOTE: `transitionIn` and `transitionOut` will affect the confirm animation as well
-
+The default configuration is:
+```js
+{
+  timeOut: 5000,
+  newestOnTop: true,
+  position: 'top-right',
+  transitionIn: 'bounceIn',
+  transitionOut: 'bounceOut',
+  progressBar: false
+}
 ```
-timeOut: 5000,
-newestOnTop: true,
-position: 'top-right',
-transitionIn: 'bounceIn',
-transitionOut: 'bounceOut',
-progressBar: false,
-```
 
-positions: `top-left` `top-center` `top-right`  `bottom-left` `bottom-center` and `bottom-right`
-transitionIn: `bounceIn` `bounceInDown` and `fadeIn`
-transitionOut: `bounceOut` `bounceOutUp` and `fadeOut`
+**NOTE**: `transitionIn` and `transitionOut` **will affect the confirm** animation as well
 
-##### 5. Add the `react-redux-toastr`  `toastr` emitter
+Here is the full list of available configurations:
+
+- position: `top-left` `top-center` `top-right`  `bottom-left` `bottom-center` and `bottom-right`
+
+- transitionIn: `bounceIn` `bounceInDown` and `fadeIn`
+
+- transitionOut: `bounceOut` `bounceOutUp` and `fadeOut`
+
+##### 5. Use the emitter
 The `toastr` method use [eventemitter3](https://github.com/primus/eventemitter3) to dispatch the actions
@@ -116,3 +125,3 @@
    title: 'your title',
-   position: 'top-left', // This will override the global props position. 
+   position: 'top-left', // This will override the global props position.
    attention: true, // This will add a shadow like the confirm method.
@@ -119,0 +128,0 @@ message: 'message',

src/actions.js

@@ -15,3 +15,2 @@ import {
 export function add(toastr) {
-  console.log('toastr add: ', toastr);
   if (config.preventDuplicates && preventDuplication(toastrsCache, toastr)) {
@@ -27,6 +26,3 @@ return {
     type: ADD_TOASTR,
-    payload: {
-      position: config.position,
-      ...toastr
-    }
+    payload: toastr
   };
@@ -33,0 +29,0 @@ }

src/constants.js

@@ -7,1 +7,6 @@ export const ADD_TOASTR = '@ReduxToastr/toastr/ADD';
 export const REMOVE_BY_TYPE = '@ReduxToastr/toastr/REMOVE_BY_TYPE';
+// before add a new transition - check its presence in src/styles/animations.scss
+export const TRANSITIONS = {
+  in: ['bounceIn', 'bounceInDown', 'fadeIn'],
+  out: ['bounceOut', 'bounceOutUp', 'fadeOut']
+};

src/Icon.js

@@ -6,7 +6,7 @@ import React from 'react';
 export default class Icon extends React.Component {
-  static displayName = 'ReduxToastrIcon'
+  static displayName = 'ReduxToastrIcon';
 
   static defaultProps = {
     size: 32
-  }
+  };
 
@@ -22,9 +22,9 @@ render() {
       <svg
-          className={classnames(this.props.className, 'toastr-icon')}
-          xmlns="http://www.w3.org/2000/svg"
-          preserveAspectRatio="xMidYMid meet"
-          viewBox={`0 0 ${this.props.size} ${this.props.size}`}
-          style={styles}
+        className={classnames(this.props.className, 'toastr-icon')}
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox={`0 0 ${this.props.size} ${this.props.size}`}
+        style={styles}
       >
-          {icons(this.props.name)}
+        {icons(this.props.name)}
       </svg>
@@ -31,0 +31,0 @@ );

src/ProgressBar.js

 import React from 'react';
 import PropTypes from 'prop-types';
 
-class ProgressBar extends React.Component {
+export default class ProgressBar extends React.Component {
   static displayName = 'ProgressBar';
@@ -49,3 +49,1 @@
 }
-
-export default ProgressBar;

src/ReduxToastr.js

@@ -10,2 +10,3 @@ import React from 'react';
 import {updateConfig} from './utils';
+import {TRANSITIONS} from './constants';
 
@@ -23,4 +24,4 @@ export class ReduxToastr extends React.Component {
     progressBar: PropTypes.bool,
-    transitionIn: PropTypes.string,
-    transitionOut: PropTypes.string,
+    transitionIn: PropTypes.oneOf(TRANSITIONS.in),
+    transitionOut: PropTypes.oneOf(TRANSITIONS.out),
     preventDuplicates: PropTypes.bool
@@ -34,4 +35,4 @@ };
     progressBar: false,
-    transitionIn: 'bounceIn',
-    transitionOut: 'bounceOut',
+    transitionIn: TRANSITIONS.in[0],
+    transitionOut: TRANSITIONS.out[0],
     preventDuplicates: false,
@@ -38,0 +39,0 @@ confirmOptions: {

src/ToastrBox.js

@@ -6,2 +6,3 @@ import React, {isValidElement} from 'react'; //  eslint-disable-line no-unused-vars
 import Icon from './Icon';
+import {TRANSITIONS} from './constants';
 
@@ -14,3 +15,8 @@ import {onCSSTransitionEnd, _bind} from './utils';
   static propTypes = {
-    item: PropTypes.object.isRequired
+    item: PropTypes.shape({
+      options: PropTypes.shape({
+        transitionIn: PropTypes.oneOf(TRANSITIONS.in),
+        transitionOut: PropTypes.oneOf(TRANSITIONS.out)
+      })
+    })
   };
@@ -17,0 +23,0 @@

src/ToastrConfirm.js

@@ -6,2 +6,3 @@ import React from 'react';
 import Button from './Button';
+import {TRANSITIONS} from './constants';
 
@@ -11,3 +12,10 @@ const ENTER = 13;
 
-class ToastrConfirm extends React.Component {
+export default class ToastrConfirm extends React.Component {
+  static displayName = 'ToastrConfirm';
+  static propTypes = {
+    confirm: PropTypes.object.isRequired,
+    transitionIn: PropTypes.oneOf(TRANSITIONS.in),
+    transitionOut: PropTypes.oneOf(TRANSITIONS.out)
+  };
+
   constructor(props) {
@@ -143,8 +151,1 @@ super(props);
 }
-
-ToastrConfirm.displayName = 'ToastrConfirm';
-ToastrConfirm.propTypes = {
-  confirm: PropTypes.object.isRequired
-};
-
-export default ToastrConfirm;

src/toastrEmitter.js

@@ -5,7 +5,7 @@ import {mapToToastrMessage} from './utils.js';
 
+const addToToastr = (type, array) => emitter.emit('add/toastr', mapToToastrMessage(type, array));
+
 let actions = {};
 ['light', 'message', 'info', 'success', 'warning', 'error'].forEach(item => {
-  actions[item] = (...args) => {
-    emitter.emit('add/toastr', mapToToastrMessage(item, args));
-  };
+  actions[item] = (...args) => addToToastr(item, args);
 });
@@ -12,0 +12,0 @@

No alert changes

Improved metrics

Total package byte prevSize

121307

increased by0.89%

Lines of code

2020

increased by1.1%

Number of lines in readme file

265

increased by3.52%

Worsened metrics

Dev dependency count

49

increased by2.08%

No dependency changes