apeman-react-accordion/lib/ap_accordion_header.jsx

apeman react package for accordion components.

/**
 * Header for accordion.
 * @class ApAccordionHeader
 */

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'

import {ApTouchable} from 'apeman-react-touchable'

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

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

  propTypes: {
    onToggle: types.func,
    busyDuration: types.number
  },

  mixins: [],

  statics: {},

  getInitialState () {
    return {
      busy: false
    }
  },

  getDefaultProps () {
    return {
      onToggle: null,
      busyDuration: 500
    }
  },

  render () {
    const s = this
    let { props } = s
    return (
      <ApTouchable onTap={ s.handleTap }>
        <div className="ap-accordion-header">
          { props.children }
        </div>
      </ApTouchable>
    )
  },

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

  componentWillUnmount () {
    const s = this

    if (s.state.busyTimer) {
      clearTimeout(s.state.busyTimer)
    }
  },

  // ------------------
  // Helper
  // ------------------

  handleTap () {
    const s = this
    let { state, props } = s
    if (state.busy) {
      return // Prevent double tap.
    }
    s.setState({
      busy: true,
      busyTimer: setTimeout(() => {
        s.setState({
          busy: false,
          busyTimer: null
        })
      }, props.busyDuration)
    })

    if (props.onToggle) {
      props.onToggle()
    }
  }
})

export default ApAccordionHeader