makes it possible to close and add a callback when clicking the toastr

* creates the new options check and callbacks in the ToastrBox * renames handleClick to handleClickCloseButton to clarify * adds the prop in ReduxToastr * updates documentation
diegoddox · Jul 20, 2018 · 5dfd1ef · 5dfd1ef
1 parent d844cae
commit 5dfd1ef
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -68,7 +68,8 @@ import ReduxToastr from 'react-redux-toastr'
       position="top-left"
       transitionIn="fadeIn"
       transitionOut="fadeOut"
-      progressBar/>
+      progressBar
+      closeOnToastrClick/>
   </div>
 </Provider>
 ```
@@ -81,7 +82,8 @@ The default configuration is:
   position: 'top-right',
   transitionIn: 'bounceIn',
   transitionOut: 'bounceOut',
-  progressBar: false
+  progressBar: false,
+  closeOnToastrClick: false,
 }
 ```
 
@@ -146,7 +148,7 @@ Toastr accepts the following methods: `success`  `info`  `warning`  `light`  `er
 
 ##### Toastr: `success`  `info`  `warning`  `light`  `error`  `remove` and `removeByType`
 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`.
 
 ``` javascript
 import {toastr} from 'react-redux-toastr'
@@ -157,7 +159,9 @@ const toastrOptions = {
   onShowComplete: () => console.log('SHOW: animation is done'),
   onHideComplete: () => console.log('HIDE: animation is done'),
   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
     <MyCustomComponent myProp="myValue">
       <span>Hello, World!</span>

diff --git a/development/Menu.js b/development/Menu.js
@@ -35,7 +35,7 @@ export default class Menu extends React.Component {
                 timeOut: 10000,
                 position: 'top-left',
                 progressBar: true,
-                width:'300px'
+                width: '300px'
               }
             );
           }}>
@@ -50,7 +50,8 @@ export default class Menu extends React.Component {
               position: 'bottom-right',
               timeOut: 10000,
               transitionIn: 'bounceInDown',
-              transitionOut: 'bounceOutU'
+              transitionOut: 'bounceOutUp',
+              closeOnToastrClick: true
             });
           }}>
             <span className="icon-info-circle"/>

diff --git a/src/ReduxToastr.js b/src/ReduxToastr.js
@@ -21,7 +21,8 @@ export class ReduxToastr extends React.Component {
     progressBar: PropTypes.bool,
     transitionIn: PropTypes.oneOf(TRANSITIONS.in),
     transitionOut: PropTypes.oneOf(TRANSITIONS.out),
-    preventDuplicates: PropTypes.bool
+    preventDuplicates: PropTypes.bool,
+    closeOnToastrClick: PropTypes.bool
   };
 
   static defaultProps = {
@@ -32,6 +33,7 @@ export class ReduxToastr extends React.Component {
     transitionIn: TRANSITIONS.in[0],
     transitionOut: TRANSITIONS.out[0],
     preventDuplicates: false,
+    closeOnToastrClick: false,
     confirmOptions: {
       okText: 'ok',
       cancelText: 'cancel'
@@ -89,6 +91,7 @@ export class ReduxToastr extends React.Component {
               progressBar: this.props.progressBar,
               transitionIn: this.props.transitionIn,
               transitionOut: this.props.transitionOut,
+              closeOnToastrClick: this.props.closeOnToastrClick,
               ...item.options
             }
           };

diff --git a/src/ToastrBox.js b/src/ToastrBox.js
@@ -80,8 +80,36 @@ export default class ToastrBox extends React.Component {
     }
   }
 
-  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;
 
     if (onCloseButtonClick) {
@@ -107,10 +135,10 @@ export default class ToastrBox extends React.Component {
   }
 
   mouseLeave() {
-    const {removeOnHover,removeOnHoverTimeOut} = this.props.item.options;
+    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));
 
       const {progressBar} = this.props.item.options;
@@ -160,7 +188,7 @@ export default class ToastrBox extends React.Component {
       <button
         type="button"
         className="close-toastr"
-        onClick={this.handleClick.bind(this)}
+        onClick={this.handleClickCloseButton.bind(this)}
       >
         &#x2715;
       </button>
@@ -295,6 +323,18 @@ export default class ToastrBox extends React.Component {
       type
     } = this.props.item;
 
+    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.bind(this);
+      toastrClickAttributes.onKeyPress = this.handlePressEnterOrSpaceKeyToastr.bind(this);
+    }
+
     return (
       <div
         ref={(ref) => this.toastrBoxElement = ref}
@@ -304,8 +344,10 @@ export default class ToastrBox extends React.Component {
           'rrt-' + type,
           options.className
         )}
+
         onMouseEnter={this.mouseEnter.bind(this)}
         onMouseLeave={this.mouseLeave.bind(this)}
+        {...toastrClickAttributes}
       >
        {this.toastr()}
       </div>