apeman-react-accordion/lib/ap_accordion.jsx

apeman react package for accordion components.

/**
 * apeman react package for accordion components.
 * @class ApAccordion
 */

'use strict'

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

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

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

  propTypes: {
    /** Is open or not */
    open: types.bool
  },

  mixins: [],

  statics: {},

  getInitialState () {
    const s = this
    return {
      innerHeight: 1200
    }
  },

  getDefaultProps () {
    return {}
  },

  render () {
    const s = this
    let { state, props } = s
    return (
      <div className={ classnames('ap-accordion', {
                'ap-accordion-closed': !props.open
            }) } style={ {maxHeight: state.innerHeight} }>
        <div className="ap-accordion-inner"
             ref={ (inner) => s.registerInner(inner) }>
          { props.children }
        </div>
      </div>
    )
  },

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

  componentWillMount () {
    const s = this
  },

  componentDidMount () {
    const s = this
    window.addEventListener('resize', s.handleResize)
  },

  componentWillReceiveProps (nextProps) {
    const s = this
    s.setState({
      innerHeight: s.getInnerHeight()
    })
  },

  componentWillUnmount () {
    const s = this
    window.removeEventListener('resize', s.handleResize)
  },

  // ------------------
  // Helpers
  // ------------------

  handleResize () {
    const s = this
    s.setState({
      innerHeight: s.getInnerHeight()
    })
  },

  getInnerHeight () {
    const s = this
    let { inner } = s
    return inner.offsetHeight
  },

  // ------------------
  // Custom
  // ---------
  // ---------
  inner: null,

  registerInner (inner) {
    const s = this
    s.inner = inner
  }
})

export default ApAccordion