react-redux-toastr - npm Package Compare versions

Comparing version 7.0.0 to 7.1.0

lib/config.js

@@ -7,2 +7,3 @@ 'use strict';
 var toastr = {
+  maxAnimationDelay: 2000,
   newestOnTop: true,
@@ -9,0 +10,0 @@ position: 'top-right',

lib/ReduxToastr.js

@@ -133,2 +133,6 @@ 'use strict';
 
+    var toastr = this.props.toastr;
+
+    var width = toastr.toastrs && toastr.toastrs[0] && toastr.toastrs[0].options && toastr.toastrs[0].options.width;
+    var style = width ? { width: width } : {};
     return _react2.default.createElement(
@@ -140,3 +144,3 @@ 'span',
           'div',
-          { key: position, className: position },
+          { key: position, className: position, style: style },
           _this3._renderToastrForPosition(position)
@@ -143,0 +147,0 @@ );

lib/ToastrBox.js

@@ -27,4 +27,2 @@ 'use strict';
 
-var _constants = require('./constants');
-
 var _utils = require('./utils');
@@ -366,4 +364,4 @@
     options: _propTypes2.default.shape({
-      transitionIn: _propTypes2.default.oneOf(_constants.TRANSITIONS.in),
-      transitionOut: _propTypes2.default.oneOf(_constants.TRANSITIONS.out)
+      transitionIn: _propTypes2.default.string,
+      transitionOut: _propTypes2.default.string
     })
@@ -370,0 +368,0 @@ })

lib/ToastrConfirm.js

@@ -11,6 +11,2 @@ 'use strict';
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _propTypes = require('prop-types');
@@ -26,4 +22,2 @@
 
-var _constants = require('./constants');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -88,3 +82,3 @@
 
-  ToastrConfirm.prototype.handleConfirmClick = function handleConfirmClick() {
+  ToastrConfirm.prototype.handleButtonClick = function handleButtonClick(callback) {
     var _this2 = this;
@@ -95,8 +89,6 @@
 
-    var options = this.props.confirm.options;
-
     var onAnimationEnd = function onAnimationEnd() {
       _this2.removeConfirm();
-      if (options && options.onOk) {
-        options.onOk();
+      if (callback) {
+        callback();
       }
@@ -109,19 +101,10 @@ };
 
+  ToastrConfirm.prototype.handleConfirmClick = function handleConfirmClick() {
+    var callback = this.props.confirm.options ? this.props.confirm.options.onOk : null;
+    this.handleButtonClick(callback);
+  };
+
   ToastrConfirm.prototype.handleCancelClick = function handleCancelClick() {
-    var _this3 = this;
-
-    if (this.hasClicked) return;
-    this.hasClicked = true;
-
-    var options = this.props.confirm.options;
-
-    var onAnimationEnd = function onAnimationEnd() {
-      _this3.removeConfirm();
-      if (options && options.onCancel) {
-        options.onCancel();
-      }
-    };
-
-    this.setTransition();
-    (0, _utils.onCSSTransitionEnd)(this.confirmElement, onAnimationEnd);
+    var callback = this.props.confirm.options ? this.props.confirm.options.onCancel : null;
+    this.handleButtonClick(callback);
   };
@@ -159,2 +142,48 @@
 
+  ToastrConfirm.prototype.containsOkButton = function containsOkButton(buttons) {
+    return buttons && buttons.filter(function (button) {
+      return button.ok === true;
+    }).length > 0;
+  };
+
+  ToastrConfirm.prototype.containsCancelButton = function containsCancelButton(buttons) {
+    return buttons && buttons.filter(function (button) {
+      return button.cancel === true;
+    }).length > 0;
+  };
+
+  ToastrConfirm.prototype.getCustomButtonHandler = function getCustomButtonHandler(config) {
+    var _this3 = this;
+
+    if (config.ok === true) {
+      return this.handleConfirmClick.bind(this);
+    }
+    if (config.cancel === true) {
+      return this.handleCancelClick.bind(this);
+    }
+    return function () {
+      return _this3.handleButtonClick(config.handler);
+    };
+  };
+
+  ToastrConfirm.prototype.getCustomButtonText = function getCustomButtonText(config) {
+    if (config.ok === true) {
+      return this.okText;
+    }
+    if (config.cancel === true) {
+      return this.cancelText;
+    }
+    return config.text;
+  };
+
+  ToastrConfirm.prototype.getCustomButtonClassName = function getCustomButtonClassName(config) {
+    if (config.ok === true) {
+      return 'rrt-ok-btn';
+    }
+    if (config.cancel === true) {
+      return 'rrt-cancel-btn';
+    }
+    return config.className;
+  };
+
   ToastrConfirm.prototype.render = function render() {
@@ -192,14 +221,31 @@ var _this4 = this;
         _react2.default.createElement(
-          _Button2.default,
-          {
-            className: (0, _classnames2.default)('rrt-ok-btn', { 'full-width': this.disableCancel }),
-            onClick: function onClick() {
-              return _this4.handleConfirmClick();
-            } },
-          this.okText
-        ),
-        !this.disableCancel && _react2.default.createElement(
-          _Button2.default,
-          { className: 'rrt-cancel-btn', onClick: this.handleCancelClick.bind(this) },
-          this.cancelText
+          'div',
+          { className: 'rrt-buttons-holder' },
+          !this.containsOkButton(options.buttons) && _react2.default.createElement(
+            _Button2.default,
+            { className: 'rrt-ok-btn', onClick: function onClick() {
+                return _this4.handleConfirmClick();
+              } },
+            this.okText
+          ),
+          !this.disableCancel && !this.containsCancelButton(options.buttons) && _react2.default.createElement(
+            _Button2.default,
+            { className: 'rrt-cancel-btn', onClick: this.handleCancelClick.bind(this) },
+            this.cancelText
+          ),
+          options.buttons && options.buttons.map(function (button, index) {
+            if (button.cancel === true && _this4.disableCancel) {
+              return null;
+            }
+
+            var handler = _this4.getCustomButtonHandler(button);
+            var text = _this4.getCustomButtonText(button);
+            var className = _this4.getCustomButtonClassName(button);
+
+            return _react2.default.createElement(
+              _Button2.default,
+              { className: className, onClick: handler, key: index },
+              text
+            );
+          })
         )
@@ -216,6 +262,9 @@ ),
 ToastrConfirm.propTypes = {
-  confirm: _propTypes2.default.object.isRequired,
-  transitionIn: _propTypes2.default.oneOf(_constants.TRANSITIONS.in),
-  transitionOut: _propTypes2.default.oneOf(_constants.TRANSITIONS.out)
+  confirm: _propTypes2.default.shape({
+    options: _propTypes2.default.shape({
+      transitionIn: _propTypes2.default.string,
+      transitionOut: _propTypes2.default.string
+    })
+  })
 };
 exports.default = ToastrConfirm;

lib/utils.js

@@ -29,2 +29,18 @@ 'use strict';
 
+function isString(obj) {
+  if (typeof obj == 'string') {
+    return true;
+  }
+  return false;
+}
+
+var toastrWarn;
+if (process.env.NODE_ENV === 'production') {
+  toastrWarn = function toastrWarn() {};
+} else {
+  toastrWarn = function toastrWarn(message) {
+    console.warn('[react-redux-toastr] ' + message);
+  };
+}
+
 function createReducer(initialState, fnMap) {
@@ -42,9 +58,2 @@ return function () {
 
-function isString(obj) {
-  if (typeof obj == 'string') {
-    return true;
-  }
-  return false;
-}
-
 function isBrowser() {
@@ -109,3 +118,11 @@ if (typeof window !== 'undefined') {
 function onCSSTransitionEnd(node, callback) {
+  // if css animation is failed - dispatch event manually
+  var timeoutId = setTimeout(function () {
+    var e = new Event('transitionend');
+    toastrWarn('The toastr box was closed automatically, please check \'transitionOut\' prop value');
+    node.dispatchEvent(e);
+  }, _config2.default.maxAnimationDelay);
+
   var runOnce = function runOnce(e) {
+    clearTimeout(timeoutId);
     // stopPropagation is not working in IE11 and Edge, the transitionend from the Button.js is waiting
@@ -112,0 +129,0 @@ // on the confirm animation to end first and not the Button.js

package.json

 {
   "name": "react-redux-toastr",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "react-redux-toastr is a React toastr message implemented with Redux",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -1,2 +0,2 @@
-##`react-redux-toastr` [demo](http://diegoddox.github.io/react-redux-toastr/)
+## `react-redux-toastr` [demo](http://diegoddox.github.io/react-redux-toastr/)
 
@@ -25,3 +25,3 @@ ![react-redux-toastr](https://raw.githubusercontent.com/diegoddox/react-redux-toastr/master/assets/toastr.png?style=centerme)
 ```html
-<link href="http://diegoddox.github.io/react-redux-toastr/5.0/react-redux-toastr.min.css" rel="stylesheet" type="text/css">
+<link href="http://diegoddox.github.io/react-redux-toastr/7.0/react-redux-toastr.min.css" rel="stylesheet" type="text/css">
 ```
@@ -252,2 +252,34 @@
 
+You can add custom buttons by:
+
+- Passing the `buttons` prop to the `toasterConfirmOptions` object.
+  The buttons are inserted after the OK and the cancel button.
+  
+  Each button config can have a `text`, `handler` and a `className` property.
+  
+  If you want to move the original OK or cancel button to a different place, just
+  insert a button config with a boolean flag `ok` or `cancel` at the desired position
+  (note that all other properties are ignored in this button config).
+
+The following config leads to 3 buttons in this order:
+1. "Apply" (original OK button)
+2. "Do not apply" (our custom button)
+3. "Cancel" (original cancel button)
+
+```javascript
+const toastrConfirmOptions = {
+  ...
+  okText: 'Apply',
+  buttons: [{
+    text: 'Do not apply',
+    className: 'do-not-apply-btn',
+    handler: () => console.log('do-not-apply clicked')
+  }, {
+    cancel: true // move the cancel button to the end
+  }]
+};
+
+toastr.confirm('Your changes are applicable to 5 more records.', toastrConfirmOptions);
+```
+
 You can render your custom message component instead of the simple string message by:
@@ -254,0 +286,0 @@

src/config.js

 let toastr = {
+  maxAnimationDelay: 2000,
   newestOnTop: true,
@@ -3,0 +4,0 @@ position: 'top-right',

src/ReduxToastr.js

@@ -113,2 +113,5 @@ import React from 'react';
   _renderToastrs() {
+    const {toastr} = this.props;
+    const width = toastr.toastrs && toastr.toastrs[0] && toastr.toastrs[0].options && toastr.toastrs[0].options.width;
+    const style = width ? {width:width} : {};
     return (
@@ -118,3 +121,3 @@ <span>
           return (
-            <div key={position} className={position}>
+            <div key={position} className={position} style={style}>
               {this._renderToastrForPosition(position)}
@@ -121,0 +124,0 @@ </div>

src/ToastrBox.js

@@ -6,3 +6,2 @@ import React, {isValidElement} from 'react'; //  eslint-disable-line no-unused-vars
 import Icon from './Icon';
-import {TRANSITIONS} from './constants';
 
@@ -17,4 +16,4 @@ import {onCSSTransitionEnd, _bind} from './utils';
       options: PropTypes.shape({
-        transitionIn: PropTypes.oneOf(TRANSITIONS.in),
-        transitionOut: PropTypes.oneOf(TRANSITIONS.out)
+        transitionIn: PropTypes.string,
+        transitionOut: PropTypes.string
       })
@@ -21,0 +20,0 @@ })

src/ToastrConfirm.js

 import React from 'react';
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import {onCSSTransitionEnd, _bind, keyCode, isBrowser} from './utils';
 import Button from './Button';
-import {TRANSITIONS} from './constants';
 
@@ -14,5 +12,8 @@ const ENTER = 13;
   static propTypes = {
-    confirm: PropTypes.object.isRequired,
-    transitionIn: PropTypes.oneOf(TRANSITIONS.in),
-    transitionOut: PropTypes.oneOf(TRANSITIONS.out)
+    confirm: PropTypes.shape({
+      options: PropTypes.shape({
+        transitionIn: PropTypes.string,
+        transitionOut: PropTypes.string
+      })
+    })
   };
@@ -61,11 +62,10 @@
 
-  handleConfirmClick() {
+  handleButtonClick(callback) {
     if (this.hasClicked) return;
     this.hasClicked = true;
 
-    const {options} = this.props.confirm;
     const onAnimationEnd = () => {
       this.removeConfirm();
-      if (options && options.onOk) {
-        options.onOk();
+      if (callback) {
+        callback();
       }
@@ -78,16 +78,10 @@ };
 
+  handleConfirmClick() {
+    const callback = this.props.confirm.options ? this.props.confirm.options.onOk : null;
+    this.handleButtonClick(callback);
+  }
+
   handleCancelClick() {
-    if (this.hasClicked) return;
-    this.hasClicked = true;
-
-    const {options} = this.props.confirm;
-    const onAnimationEnd = () => {
-      this.removeConfirm();
-      if (options && options.onCancel) {
-        options.onCancel();
-      }
-    };
-
-    this.setTransition();
-    onCSSTransitionEnd(this.confirmElement, onAnimationEnd);
+    const callback = this.props.confirm.options ? this.props.confirm.options.onCancel : null;
+    this.handleButtonClick(callback);
   }
@@ -125,2 +119,40 @@
 
+  containsOkButton(buttons) {
+    return buttons && buttons.filter(button => button.ok === true).length > 0;
+  }
+
+  containsCancelButton(buttons) {
+    return buttons && buttons.filter(button => button.cancel === true).length > 0;
+  }
+
+  getCustomButtonHandler(config) {
+    if (config.ok === true) {
+      return this.handleConfirmClick.bind(this);
+    }
+    if (config.cancel === true) {
+      return this.handleCancelClick.bind(this);
+    }
+    return () => this.handleButtonClick(config.handler);
+  }
+
+  getCustomButtonText(config) {
+    if (config.ok === true) {
+      return this.okText;
+    }
+    if (config.cancel === true) {
+      return this.cancelText;
+    }
+    return config.text;
+  }
+
+  getCustomButtonClassName(config) {
+    if (config.ok === true) {
+      return 'rrt-ok-btn';
+    }
+    if (config.cancel === true) {
+      return 'rrt-cancel-btn';
+    }
+    return config.className;
+  }
+
   render() {
@@ -144,12 +176,25 @@ const {
           {options.component && <options.component/>}
-          <Button
-            className={classnames('rrt-ok-btn', {'full-width': this.disableCancel})}
-            onClick={() => this.handleConfirmClick()}>
-            {this.okText}
-          </Button>
-          {!this.disableCancel &&
-            <Button className="rrt-cancel-btn" onClick={this.handleCancelClick.bind(this)}>
-              {this.cancelText}
-            </Button>
-          }
+          <div className="rrt-buttons-holder">
+            {!this.containsOkButton(options.buttons) &&
+              <Button className="rrt-ok-btn" onClick={() => this.handleConfirmClick()}>
+                {this.okText}
+              </Button>
+            }
+            {!this.disableCancel && !this.containsCancelButton(options.buttons) &&
+              <Button className="rrt-cancel-btn" onClick={this.handleCancelClick.bind(this)}>
+                {this.cancelText}
+              </Button>
+            }
+            {options.buttons && options.buttons.map((button, index) => {
+              if (button.cancel === true && this.disableCancel) {
+                return null;
+              }
+
+              const handler = this.getCustomButtonHandler(button);
+              const text = this.getCustomButtonText(button);
+              const className = this.getCustomButtonClassName(button);
+
+              return <Button className={className} onClick={handler} key={index}>{text}</Button>;
+            })}
+          </div>
         </div>
@@ -156,0 +201,0 @@ <div className="shadow"></div>

src/utils.js

 import ReactTransitionEvents from 'react/lib/ReactTransitionEvents';
 import config from './config';
 
+function isString(obj) {
+  if (typeof obj == 'string') {
+    return true;
+  }
+  return false;
+}
+
+var toastrWarn;
+if (process.env.NODE_ENV === 'production') {
+  toastrWarn = () => {};
+} else {
+  toastrWarn = (message) => {
+    console.warn(`[react-redux-toastr] ${message}`);
+  };
+}
+
 export function createReducer(initialState, fnMap) {
@@ -11,9 +27,2 @@ return (state = initialState, {type, payload}) => {
 
-function isString(obj) {
-  if (typeof obj == 'string') {
-    return true;
-  }
-  return false;
-}
-
 export function isBrowser() {
@@ -74,3 +83,11 @@ if (typeof window !== 'undefined') {
 export function onCSSTransitionEnd(node, callback) {
+  // if css animation is failed - dispatch event manually
+  const timeoutId = setTimeout(function() {
+    var e = new Event('transitionend');
+    toastrWarn('The toastr box was closed automatically, please check \'transitionOut\' prop value');
+    node.dispatchEvent(e);
+  }, config.maxAnimationDelay);
+
   const runOnce = (e) => {
+    clearTimeout(timeoutId);
     // stopPropagation is not working in IE11 and Edge, the transitionend from the Button.js is waiting
@@ -77,0 +94,0 @@ // on the confirm animation to end first and not the Button.js

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128567

increased by4.87%

Lines of code

2141

increased by6.1%

Number of lines in readme file

314

increased by11.35%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes