let the user define a global dismissAfter prop (dismiss is now handled by the component, not the action anymore)

demo/index.js

@@ -27,7 +27,7 @@ CustomNotif.propTypes = {
 class Demo extends Component {
   constructor() {
     super();
-    this.state = { msg: 'hello!', kind: 'info', dismissAfter: 2000, customComponent: false, handleClick: false };
+    this.state = { msg: 'hello!', kind: 'info', dismissAfter: undefined, customComponent: false, handleClick: false };
     this.handleChange = this.handleChange.bind(this);
     this.onKindChange = this.onKindChange.bind(this);
     this.toggleCustomComponent = this.toggleCustomComponent.bind(this);
@@ -47,7 +47,7 @@ class Demo extends Component {
   }
 
   handleDismissAfter(ev) {
-    this.setState({ dismissAfter: ev.target.value });
+    this.setState({ dismissAfter: parseFloat(ev.target.value) });
   }
 
   send() {
@@ -78,13 +78,13 @@ class Demo extends Component {
 
     let notifsComponent;
     if (customComponent && handleClick) {
-      notifsComponent = <Notifs CustomComponent={CustomNotif} onActionClick={id => this.dismiss(id)} actionLabel="close" />;
+      notifsComponent = <Notifs CustomComponent={CustomNotif} onActionClick={id => this.dismiss(id)} actionLabel="close" dismissAfter={dismissAfter} />;
     } else if (customComponent) {
-      notifsComponent = <Notifs CustomComponent={CustomNotif} />;
+      notifsComponent = <Notifs CustomComponent={CustomNotif} dismissAfter={dismissAfter} />;
     } else if (handleClick) {
-      notifsComponent = <Notifs onActionClick={id => this.dismiss(id)} actionLabel="close" />;
+      notifsComponent = <Notifs onActionClick={id => this.dismiss(id)} actionLabel="close" dismissAfter={dismissAfter} />;
     } else {
-      notifsComponent = <Notifs />;
+      notifsComponent = <Notifs dismissAfter={dismissAfter} />;
     }
 
     return (

src/actions/notifs.js

@@ -13,10 +13,6 @@ export function notifSend(notif) {
   }
   return dispatch => {
     dispatch({ type: NOTIF_SEND, payload: notif });
-
-    if (notif.dismissAfter) {
-      setTimeout(() => { dispatch({ type: NOTIF_DISMISS, payload: notif.id }); }, notif.dismissAfter);
-    }
   };
 }
 

src/components/Notif.js

@@ -7,6 +7,12 @@ class Notif extends React.Component {
     this._onActionClick = this._onActionClick.bind(this);
   }
 
+  componentDidMount() {
+    if (this.props.dismissAfter) {
+      setTimeout(() => this.props.onDismiss(this.props.id), this.props.dismissAfter);
+    }
+  }
+
   /*
    * Handle action click event
    * @description Handle click events on the
@@ -58,6 +64,8 @@ Notif.propTypes = {
     React.PropTypes.node,
     React.PropTypes.element
   ]),
+  onDismiss: React.PropTypes.func,
+  dismissAfter: React.PropTypes.number
 };
 
 export default Notif;

src/components/Notifs.js

@@ -8,34 +8,47 @@ import '../../css/styles.css';
 const getter = (obj, propName) => (obj.get ? obj.get(propName) : obj[propName]);
 
 import Notif from './Notif';
+import { notifDismiss } from '../actions/notifs';
 
-function Notifs(props) {
-  const { notifs, className, componentClassName, CustomComponent, transitionEnterTimeout, transitionLeaveTimeout, onActionClick, actionLabel } = props;
-
-  const items = notifs.map((notif) => (
-    <Notif
-      key={getter(notif, 'id')}
-      id={getter(notif, 'id')}
-      message={getter(notif, 'message')}
-      kind={getter(notif, 'kind')}
-      componentClassName={componentClassName}
-      CustomComponent={CustomComponent}
-      onActionClick={onActionClick}
-      actionLabel={actionLabel}
-    />
-  ));
-
-  return (
-    <div className={`${componentClassName}__container ${className}`} >
-      <TransitionGroup
-        transitionName={`${componentClassName}-transition`}
-        transitionEnterTimeout={transitionEnterTimeout}
-        transitionLeaveTimeout={transitionLeaveTimeout}
-      >
-        {items}
-      </TransitionGroup>
-    </div>
-  );
+class Notifs extends React.Component {
+  constructor() {
+    super();
+    this._onDismiss = this._onDismiss.bind(this);
+  }
+
+  _onDismiss(id) {
+    this.props.notifDismiss(id);
+  }
+
+  render() {
+    const { notifs, className, componentClassName, CustomComponent, transitionEnterTimeout, transitionLeaveTimeout, onActionClick, actionLabel, dismissAfter } = this.props;
+    const items = notifs.map((notif) => (
+      <Notif
+        key={getter(notif, 'id')}
+        id={getter(notif, 'id')}
+        message={getter(notif, 'message')}
+        kind={getter(notif, 'kind')}
+        componentClassName={componentClassName}
+        CustomComponent={CustomComponent}
+        dismissAfter={notif.dismissAfter || dismissAfter}
+        onDismiss={this._onDismiss}
+        onActionClick={onActionClick}
+        actionLabel={actionLabel}
+      />
+    ));
+
+    return (
+      <div className={`${componentClassName}__container ${className}`} >
+        <TransitionGroup
+          transitionName={`${componentClassName}-transition`}
+          transitionEnterTimeout={transitionEnterTimeout}
+          transitionLeaveTimeout={transitionLeaveTimeout}
+        >
+          {items}
+        </TransitionGroup>
+      </div>
+    );
+  }
 }
 
 Notifs.defaultProps = {
@@ -44,6 +57,7 @@ Notifs.defaultProps = {
   transitionLeaveTimeout: 600,
   onActionClick: null,
   action: null,
+  dismissAfter: 3000
 };
 
 Notifs.propTypes = {
@@ -55,6 +69,8 @@ Notifs.propTypes = {
   transitionLeaveTimeout: React.PropTypes.number,
   onActionClick: React.PropTypes.func,
   actionLabel: React.PropTypes.string,
+  dismissAfter: React.PropTypes.number,
+  notifDismiss: React.PropTypes.func
 };
 
-export default connect((state) => ({ notifs: state.get ? state.get('notifs') : state.notifs }), {})(Notifs);
+export default connect((state) => ({ notifs: state.get ? state.get('notifs') : state.notifs }), { notifDismiss })(Notifs);