react-redux-toastr - npm Package Compare versions

Comparing version 7.3.0 to 7.4.0

lib/ReduxToastr.js

@@ -111,3 +111,4 @@ 'use strict';
             transitionIn: _this2.props.transitionIn,
-            transitionOut: _this2.props.transitionOut
+            transitionOut: _this2.props.transitionOut,
+            closeOnToastrClick: _this2.props.closeOnToastrClick
           }, item.options)
@@ -188,3 +189,4 @@ });
   transitionOut: _propTypes2.default.oneOf(_constants.TRANSITIONS.out),
-  preventDuplicates: _propTypes2.default.bool
+  preventDuplicates: _propTypes2.default.bool,
+  closeOnToastrClick: _propTypes2.default.bool
 };
@@ -199,2 +201,3 @@ ReduxToastr.defaultProps = {
   preventDuplicates: false,
+  closeOnToastrClick: false,
   confirmOptions: {
@@ -201,0 +204,0 @@ okText: 'ok',

lib/ToastrBox.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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; };
+
 var _react = require('react');
@@ -49,2 +51,75 @@
 
+    _this.handlePressEnterOrSpaceKeyToastr = function (e) {
+      if (e.key === ' ' || e.key === 'enter') {
+        _this.handleClickToastr(e);
+      }
+    };
+
+    _this.handleClickToastr = function () {
+      var _this$props$item$opti = _this.props.item.options,
+          onToastrClick = _this$props$item$opti.onToastrClick,
+          closeOnToastrClick = _this$props$item$opti.closeOnToastrClick;
+
+      _this.ignoreIsHiding = true;
+
+      if (onToastrClick) {
+        onToastrClick();
+      }
+
+      if (closeOnToastrClick) {
+        _this._setShouldClose(true);
+        _this._removeToastr();
+      }
+    };
+
+    _this.handleClickCloseButton = function (e) {
+      var onCloseButtonClick = _this.props.item.options.onCloseButtonClick;
+
+      e.stopPropagation();
+
+      _this.ignoreIsHiding = true;
+
+      if (onCloseButtonClick) {
+        onCloseButtonClick();
+      }
+
+      _this._setShouldClose(true);
+      _this._removeToastr();
+    };
+
+    _this.mouseEnter = function () {
+      clearTimeout(_this.intervalId);
+
+      _this._setIntervalId(null);
+      _this._setIsHiding(false);
+
+      var progressBar = _this.props.item.options.progressBar;
+
+      var timeOut = _this._getItemTimeOut();
+
+      if (timeOut && progressBar) {
+        _this.setState({ progressBar: null });
+      }
+    };
+
+    _this.mouseLeave = function () {
+      var _this$props$item$opti2 = _this.props.item.options,
+          removeOnHover = _this$props$item$opti2.removeOnHover,
+          removeOnHoverTimeOut = _this$props$item$opti2.removeOnHoverTimeOut;
+
+
+      if (!_this.isHiding && (removeOnHover || _this.shouldClose)) {
+        var interval = removeOnHover === true ? removeOnHoverTimeOut || 1000 : removeOnHover;
+        _this._setIntervalId(setTimeout(_this._removeToastr, interval));
+
+        var progressBar = _this.props.item.options.progressBar;
+
+        var timeOut = _this._getItemTimeOut();
+
+        if (timeOut && progressBar) {
+          _this.setState({ progressBar: { duration: interval } });
+        }
+      }
+    };
+
     var _props$item$options = props.item.options,
@@ -95,50 +170,8 @@ transitionIn = _props$item$options.transitionIn,
 
-  ToastrBox.prototype.handleClick = function handleClick() {
-    var onCloseButtonClick = this.props.item.options.onCloseButtonClick;
-
-    this.ignoreIsHiding = true;
-
-    if (onCloseButtonClick) {
-      onCloseButtonClick();
+  ToastrBox.prototype.handlePressEnterOrSpaceKeyCloseButton = function handlePressEnterOrSpaceKeyCloseButton(e) {
+    if (e.key === ' ' || e.key === 'enter') {
+      this.handleClickCloseButton(e);
     }
-
-    this._setShouldClose(true);
-    this._removeToastr();
   };
 
-  ToastrBox.prototype.mouseEnter = function mouseEnter() {
-    clearTimeout(this.intervalId);
-
-    this._setIntervalId(null);
-    this._setIsHiding(false);
-
-    var progressBar = this.props.item.options.progressBar;
-
-    var timeOut = this._getItemTimeOut();
-
-    if (timeOut && progressBar) {
-      this.setState({ progressBar: null });
-    }
-  };
-
-  ToastrBox.prototype.mouseLeave = function mouseLeave() {
-    var _props$item$options2 = this.props.item.options,
-        removeOnHover = _props$item$options2.removeOnHover,
-        removeOnHoverTimeOut = _props$item$options2.removeOnHoverTimeOut;
-
-
-    if (!this.isHiding && (removeOnHover || this.shouldClose)) {
-      var interval = removeOnHover === true ? removeOnHoverTimeOut || 1000 : removeOnHover;
-      this._setIntervalId(setTimeout(this._removeToastr, interval));
-
-      var progressBar = this.props.item.options.progressBar;
-
-      var timeOut = this._getItemTimeOut();
-
-      if (timeOut && progressBar) {
-        this.setState({ progressBar: { duration: interval } });
-      }
-    }
-  };
-
   ToastrBox.prototype.renderSubComponent = function renderSubComponent() {
@@ -185,3 +218,3 @@ var _this2 = this;
         className: 'close-toastr',
-        onClick: this.handleClick.bind(this)
+        onClick: this.handleClickCloseButton
       },
@@ -346,7 +379,19 @@ '\u2715'
         type = _props$item5.type;
+    var onToastrClick = options.onToastrClick,
+        closeOnToastrClick = options.closeOnToastrClick;
 
+    var hasOnToastrClick = !!onToastrClick;
+    var doesCloseOnToastrClick = closeOnToastrClick;
 
+    var toastrClickAttributes = {};
+    if (hasOnToastrClick || doesCloseOnToastrClick) {
+      toastrClickAttributes.role = 'button';
+      toastrClickAttributes.tabIndex = 0;
+      toastrClickAttributes.onClick = this.handleClickToastr;
+      toastrClickAttributes.onKeyPress = this.handlePressEnterOrSpaceKeyToastr;
+    }
+
     return _react2.default.createElement(
       'div',
-      {
+      _extends({
         ref: function ref(_ref) {
@@ -356,5 +401,6 @@ return _this4.toastrBoxElement = _ref;
         className: (0, _classnames2.default)('toastr', 'animated', 'rrt-' + type, options.className),
-        onMouseEnter: this.mouseEnter.bind(this),
-        onMouseLeave: this.mouseLeave.bind(this)
-      },
+
+        onMouseEnter: this.mouseEnter,
+        onMouseLeave: this.mouseLeave
+      }, toastrClickAttributes),
       this.toastr()
@@ -361,0 +407,0 @@ );

package.json

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

README.md

@@ -71,3 +71,4 @@ ## `react-redux-toastr` [demo](http://diegoddox.github.io/react-redux-toastr/)
       transitionOut="fadeOut"
-      progressBar/>
+      progressBar
+      closeOnToastrClick/>
   </div>
@@ -85,3 +86,4 @@ </Provider>
   transitionOut: 'bounceOut',
-  progressBar: false
+  progressBar: false,
+  closeOnToastrClick: false,
 }
@@ -151,3 +153,3 @@ ```
 Each of these methods can take up to three arguments the `title` a `message` and `options`.
-In `options` you can specify `timeOut` `icon` `onShowComplete` `onHideComplete` `className` `component` `removeOnHover`,`removeOnHoverTimeOut`,`showCloseButton`, `onCloseButtonClick`, `progressBar`, `transitionIn`, `position`, `attention`, `onAttentionClick`  and `transitionOut`.
+In `options` you can specify `timeOut` `icon` `onShowComplete` `onHideComplete` `className` `component` `removeOnHover`,`removeOnHoverTimeOut`,`showCloseButton`, `onCloseButtonClick`, `onToastrClick`, `progressBar`, `transitionIn`, `position`, `attention`, `onAttentionClick`, `transitionOut` and `closeOnToastrClick`.
 
@@ -163,3 +165,5 @@ ``` javascript
   onCloseButtonClick: () => console.log('Close button was clicked'),
+  onToastrClick: () => console.log('Toastr was clicked'),
   showCloseButton: false, // true by default
+  closeOnToastrClick: true, // false by default, this will close the toastr when user clicks on it
   component: ( // this option will give you a func 'remove' as props
@@ -166,0 +170,0 @@ <MyCustomComponent myProp="myValue">

src/ReduxToastr.js

@@ -24,3 +24,4 @@ import React from 'react';
     transitionOut: PropTypes.oneOf(TRANSITIONS.out),
-    preventDuplicates: PropTypes.bool
+    preventDuplicates: PropTypes.bool,
+    closeOnToastrClick: PropTypes.bool
   };
@@ -36,2 +37,3 @@
     preventDuplicates: false,
+    closeOnToastrClick: false,
     confirmOptions: {
@@ -94,2 +96,3 @@ okText: 'ok',
               transitionOut: this.props.transitionOut,
+              closeOnToastrClick: this.props.closeOnToastrClick,
               ...item.options
@@ -96,0 +99,0 @@ }

src/ToastrBox.js

@@ -83,4 +83,32 @@ import React, {isValidElement} from 'react'; //  eslint-disable-line no-unused-vars
 
-  handleClick() {
+  handlePressEnterOrSpaceKeyToastr = (e) => {
+    if (e.key === ' ' || e.key === 'enter') {
+      this.handleClickToastr(e);
+    }
+  }
+
+  handlePressEnterOrSpaceKeyCloseButton(e) {
+    if (e.key === ' ' || e.key === 'enter') {
+      this.handleClickCloseButton(e);
+    }
+  }
+
+  handleClickToastr = () => {
+    let {onToastrClick, closeOnToastrClick} = this.props.item.options;
+    this.ignoreIsHiding = true;
+
+    if (onToastrClick) {
+      onToastrClick();
+    }
+
+    if (closeOnToastrClick) {
+      this._setShouldClose(true);
+      this._removeToastr();
+    }
+  }
+
+  handleClickCloseButton = (e) => {
     let {onCloseButtonClick} = this.props.item.options;
+    e.stopPropagation();
+
     this.ignoreIsHiding = true;
@@ -96,3 +124,3 @@
 
-  mouseEnter() {
+  mouseEnter = () => {
     clearTimeout(this.intervalId);
@@ -111,7 +139,7 @@
 
-  mouseLeave() {
-    const {removeOnHover,removeOnHoverTimeOut} = this.props.item.options;
+  mouseLeave = () => {
+    const {removeOnHover, removeOnHoverTimeOut} = this.props.item.options;
 
     if (!this.isHiding && (removeOnHover || this.shouldClose)) {
-        const interval = removeOnHover === true ? (removeOnHoverTimeOut || 1000) : removeOnHover;
+      const interval = removeOnHover === true ? (removeOnHoverTimeOut || 1000) : removeOnHover;
       this._setIntervalId(setTimeout(this._removeToastr, interval));
@@ -166,3 +194,3 @@
         className="close-toastr"
-        onClick={this.handleClick.bind(this)}
+        onClick={this.handleClickCloseButton}
       >
@@ -302,2 +330,14 @@ ✕
 
+    const {onToastrClick, closeOnToastrClick} = options;
+    const hasOnToastrClick = !!onToastrClick;
+    const doesCloseOnToastrClick = closeOnToastrClick;
+
+    let toastrClickAttributes = {};
+    if (hasOnToastrClick || doesCloseOnToastrClick) {
+      toastrClickAttributes.role = 'button';
+      toastrClickAttributes.tabIndex = 0;
+      toastrClickAttributes.onClick = this.handleClickToastr;
+      toastrClickAttributes.onKeyPress = this.handlePressEnterOrSpaceKeyToastr;
+    }
+
     return (
@@ -312,4 +352,6 @@ <div
         )}
-        onMouseEnter={this.mouseEnter.bind(this)}
-        onMouseLeave={this.mouseLeave.bind(this)}
+
+        onMouseEnter={this.mouseEnter}
+        onMouseLeave={this.mouseLeave}
+        {...toastrClickAttributes}
       >
@@ -316,0 +358,0 @@ {this.toastr()}

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

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

137592

increased by3.28%

Number of package files

38

increased by2.7%

Lines of code

2256

increased by2.83%

Number of lines in readme file

333

increased by1.22%

No dependency changes