diff --git a/demo/index.js b/demo/index.js index b551f65..1b143d4 100644 --- a/demo/index.js +++ b/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 = this.dismiss(id)} actionLabel="close" />; + notifsComponent = this.dismiss(id)} actionLabel="close" dismissAfter={dismissAfter} />; } else if (customComponent) { - notifsComponent = ; + notifsComponent = ; } else if (handleClick) { - notifsComponent = this.dismiss(id)} actionLabel="close" />; + notifsComponent = this.dismiss(id)} actionLabel="close" dismissAfter={dismissAfter} />; } else { - notifsComponent = ; + notifsComponent = ; } return ( diff --git a/src/actions/notifs.js b/src/actions/notifs.js index df21630..046d2ec 100644 --- a/src/actions/notifs.js +++ b/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); - } }; } diff --git a/src/components/Notif.js b/src/components/Notif.js index eac0c6d..699b0cf 100644 --- a/src/components/Notif.js +++ b/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; diff --git a/src/components/Notifs.js b/src/components/Notifs.js index 75bbe88..6897cb0 100644 --- a/src/components/Notifs.js +++ b/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) => ( - - )); - - return ( -
- - {items} - -
- ); +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) => ( + + )); + + return ( +
+ + {items} + +
+ ); + } } 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);