apeman-react-toast/lib/ap_toast.jsx

apeman react package for toast components.

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

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'
import {shallowEqual, deepEqual} from 'asobj'
import ApToastItem from './ap_toast_item'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

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

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

  propTypes: {
    /** Messages to show */
    messages: types.arrayOf(types.string),
    /** Icon to show */
    icon: types.string,
    /** Dismiss an item */
    dismiss: types.func,
    /** Level of toast */
    level: types.string
  },

  mixins: [],

  statics: {},

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {
      transitionTimeout: 100,
      level: 'default',
      messages: [],
      icon: null,
      dismiss: null
    }
  },

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

    let {
      messages, icon, dismiss,
      className, style, level,
      transitionTimeout
    } = props

    let children = messages
      .filter(Boolean)
      .map((message) => (
        <ApToastItem key={ message }
                     text={ message }
                     icon={ icon }
                     onTap={ () => dismiss(message, level) }
        >
        </ApToastItem>
      ))
    if (children.length === 0) {
      return null
    }
    return (
      <div className={ classnames('ap-toast', className, {}) }
           style={ Object.assign({}, style) }>
        <ReactCSSTransitionGroup component='div'
                                 className='ap-toast-inner'
                                 transitionName='ap-toast-transition'
                                 transitionEnterTimeout={ transitionTimeout }
                                 transitionLeaveTimeout={ transitionTimeout }
        >
          { children }
        </ReactCSSTransitionGroup>
      </div>
    )
  },

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

  componentWillMount () {
    const s = this
  },

  componentDidMount () {
    const s = this
    let { props } = s
  },

  componentWillReceiveProps (nextProps) {
    const s = this
  },

  componentWillUnmount () {
    const s = this
  },

  shouldComponentUpdate (nextProps, nextState) {
    const s = this
    let { props, state } = s
    let messageChanged = !deepEqual(props.messages, nextProps.messages)
    if (messageChanged) {
      return true
    }
    return !shallowEqual(props, nextProps) || shallowEqual(state, nextState)
  }

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

  // ------------------
  // Private
  // ------------------
})

export default ApToast