From 2e8cc856c3bcf7d3258fa9fe9d0e5efec52c542d Mon Sep 17 00:00:00 2001
From: Daniel Keller <dkeller@tocco.ch>
Date: Mon, 11 Dec 2017 14:50:26 +0100
Subject: [PATCH] add onAttentionClick and expose remove

- Feature request: #170
- Expose remove on toastr object to simply copy default behavior
---
 README.md            |  8 +++++---
 development/Menu.js  |  4 ++++
 package.json         |  2 +-
 src/ReduxToastr.js   | 14 ++++++++++++--
 src/toastrEmitter.js |  2 ++
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index c5656d9..5ecc0d4 100644
--- a/README.md
+++ b/README.md
@@ -123,6 +123,7 @@ constructor(props) {
    title: 'your title',
    position: 'top-left', // This will override the global props position.
    attention: true, // This will add a shadow like the confirm method.
+   onAttentionClick: (id) => {}, //override default behavior of 'attention' background click.
    message: 'message',
    options: {}
   });
@@ -132,11 +133,11 @@ constructor(props) {
 ```
 
 # Toastr methods
-Toastr accepts the following methods: `success`  `info`  `warning`  `light`  `error` `confirm` `message` and `removeByType`
+Toastr accepts the following methods: `success`  `info`  `warning`  `light`  `error` `confirm` `message`, `remove` and `removeByType`
 
-##### Toastr: `success`  `info`  `warning`  `light`  `error` and `removeByType`
+##### 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`, `showCloseButton`, `onCloseButtonClick`, `progressBar`, `transitionIn`, `position`, `attention`  and `transitionOut`.
+In `options` you can specify `timeOut` `icon` `onShowComplete` `onHideComplete` `className` `component` `removeOnHover`, `showCloseButton`, `onCloseButtonClick`, `progressBar`, `transitionIn`, `position`, `attention`, `onAttentionClick`  and `transitionOut`.
 
 ``` javascript
 import {toastr} from 'react-redux-toastr'
@@ -160,6 +161,7 @@ toastr.info('The message', toastrOptions)
 toastr.warning('The title', 'The message')
 toastr.error('The message')
 toastr.removeByType('error') // Remove all toastrs with the type error.
+toastr.remove('123') // Removes toastr with id '123'
 ```
 
 ##### Toastr methods light
diff --git a/development/Menu.js b/development/Menu.js
index f004d1d..830986d 100644
--- a/development/Menu.js
+++ b/development/Menu.js
@@ -66,6 +66,10 @@ export default class Menu extends React.Component {
                 icon: (<Avatar />),
                 position: 'top-center',
                 attention: true,
+                onAttentionClick: (id) => {
+                  console.log('Attention background clicked, id: ', id);
+                  toastr.remove(id);
+                },
                 timeOut: 0,
                 transitionIn: 'fadeIn',
                 transitionOut: 'fadeOut'
diff --git a/package.json b/package.json
index 0e285c7..11b4944 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-redux-toastr",
-  "version": "7.1.6",
+  "version": "7.2.0",
   "description": "react-redux-toastr is a React toastr message implemented with Redux",
   "main": "lib/index.js",
   "jsnext:main": "./src/index.js",
diff --git a/src/ReduxToastr.js b/src/ReduxToastr.js
index 6db0b2b..520f803 100644
--- a/src/ReduxToastr.js
+++ b/src/ReduxToastr.js
@@ -55,11 +55,12 @@ export class ReduxToastr extends React.Component {
   }
 
   componentDidMount() {
-    const {add, showConfirm, clean, removeByType} = this.props;
+    const {add, showConfirm, clean, removeByType, remove} = this.props;
     EE.on('toastr/confirm', showConfirm);
     EE.on('add/toastr', add);
     EE.on('clean/toastr', clean);
     EE.on('removeByType/toastr', removeByType);
+    EE.on('remove/toastr', remove);
   }
 
   componentWillUnmount() {
@@ -67,6 +68,7 @@ export class ReduxToastr extends React.Component {
     EE.removeListener('add/toastr');
     EE.removeListener('clean/toastr');
     EE.removeListener('removeByType/toastr');
+    EE.removeListener('remove/toastr');
     this.toastrFired = {};
   }
 
@@ -100,7 +102,15 @@ export class ReduxToastr extends React.Component {
                 {...this.props}
               />
               {item.options && item.options.attention &&
-                <div onClick={() => this.props.remove(item.id)} className="toastr-attention" />
+              <div
+                onClick={() => {
+                  if (typeof item.options.onAttentionClick === 'function') {
+                    item.options.onAttentionClick(item.id);
+                  } else {
+                    this.props.remove(item.id);
+                  }
+                }}
+                className="toastr-attention"/>
               }
             </span>
           );
diff --git a/src/toastrEmitter.js b/src/toastrEmitter.js
index 7f9bc18..1e88c6f 100644
--- a/src/toastrEmitter.js
+++ b/src/toastrEmitter.js
@@ -17,6 +17,8 @@ actions.clean = () => emitter.emit('clean/toastr');
  */
 actions.removeByType = (type) => emitter.emit('removeByType/toastr', type);
 
+actions.remove = (id) => emitter.emit('remove/toastr', id);
+
 actions.confirm = (...args) => {
   emitter.emit('toastr/confirm', {
     message: args[0],