apeman-react-toast/lib/ap_toast.jsx

/**
 * Toast component
 * @class ApToast
 */

'use strict'

import React, {PropTypes as types} from 'react'
import {ApPureMixin} from 'apeman-react-mixin-pure'
import classnames from 'classnames'
import arrayfilter from 'arrayfilter'
import ApToastItem from './ap_toast_item'

/** @lends ApToast */
const ApToast = React.createClass({

  // --------------------
  // Specs
  // --------------------

  propTypes: {
    message: types.string,
    duration: types.number,
    icon: types.string,
    name: types.string,
    onDismiss: types.func
  },

  mixins: [
    ApPureMixin
  ],

  statics: {
    itemJoiner: '____'
  },

  getInitialState () {
    return {
      items: ''
    }
  },

  getDefaultProps () {
    return {
      message: null,
      duration: 2000,
      icon: null,
      name: null,
      onDismiss: null
    }
  },

  render () {
    const s = this
    let { state, props } = s

    let valid = state.items.length
    if (!valid) {
      return null
    }
    return (
      <div className={ classnames('ap-toast', props.className, {}) }
           style={ Object.assign({}, props.style) }>
        <div className="ap-toast-inner">
          {s._renderToastItem()}
        </div>
      </div>
    )
  },

  // --------------------
  // Lifecycle
  // --------------------

  componentWillMount () {
    const s = this
  },

  componentDidMount () {
    const s = this
    let { props } = s
    s.startTicking()
    s.pushToastItem(props.message)
  },

  componentWillReceiveProps (nextProps) {
    const s = this
    s.pushToastItem(nextProps.message)
  },

  componentWillUnmount () {
    const s = this
    s.stopTicking()
  },

  // ------------------
  // Custom
  // ------------------

  startTicking () {
    const s = this
    clearTimeout(s._tickTimer)
    s._ticking = true
    s.doTick()
  },

  stopTicking () {
    const s = this
    clearTimeout(s._tickTimer)
    s._ticking = false
  },

  doTick () {
    const s = this
    let { props } = s
    if (!s._ticking) {
      return
    }
    s._tickTimer = setTimeout(() => {
      s.shiftToastItem()
      s.doTick()
    }, props.duration)
  },

  pushToastItem (message) {
    const s = this
    if (!message) {
      return
    }
    let items = (s.state.items || '').split(ApToast.itemJoiner)
    let duplicate = items[ items.length - 1 ] === message
    if (duplicate) {
      return
    }
    s.setState({
      items: items.concat(message).join(ApToast.itemJoiner)
    })
  },

  shiftToastItem () {
    const s = this
    let { props } = s
    let items = (s.state.items || '').split(ApToast.itemJoiner)
    if (!items.length) {
      s.setState({ items: null })
      return
    }
    s.dismissToastItem(items[ 0 ])
  },

  dismissToastItem (message) {
    const s = this
    let { props } = s
    let items = (s.state.items || '').split(ApToast.itemJoiner)
    s.setState({
      items: items.filter((filtering) => filtering !== message)
        .join(ApToast.itemJoiner)
    })
    if (props.onDismiss) {
      props.onDismiss({ dismissed: message, name: props.name })
    }
  },

  handleToastItemTap (e) {
    const s = this
    let text = e.target.dataset[ 'text' ]
    s.dismissToastItem(text)
  },

  // ------------------
  // Private
  // ------------------
  _ticking: false,
  _tickTimer: null,
  _renderToastItem () {
    const s = this
    let { state, props } = s
    return (state.items || '').split(ApToast.itemJoiner)
      .filter(arrayfilter.emptyReject())
      .map((text, i) => (
          <ApToastItem key={`toast-${text}-${i}`}
                       text={text}
                       icon={props.icon}
                       onTap={s.handleToastItemTap}
          >
          </ApToastItem>
        )
      )
  }
})

export default ApToast