add onAttentionClick and expose remove

- Feature request: #170
- Expose remove on toastr object to simply copy default behavior

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

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'

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",

src/ReduxToastr.js

@@ -55,18 +55,20 @@ 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() {
     EE.removeListener('toastr/confirm');
     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>
           );

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],