apeman-react-dropdown/lib/ap_dropdown.jsx

/**
 * Dropdown component
 * @class ApDropdown
 */

'use strict'

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

import {ApLayoutMixin, ApPureMixin, ApOutsideMixin} from 'apeman-react-mixins'
import {ApButton} from 'apeman-react-button'

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

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

  propTypes: {
    /** Icon class name for open state */
    openIcon: types.string,
    /** Icon class name for closed state */
    closedIcon: types.string,
    /** Show spinner */
    spinning: types.bool,
    /** Spinner theme */
    spinner: types.string,
    /** Open or not */
    open: types.bool.isRequired,
    /** Handler for tap event */
    onTap: types.func.isRequired
  },

  mixins: [
    ApLayoutMixin,
    ApOutsideMixin
  ],

  statics: {},

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

  getDefaultProps () {
    return {
      openIcon: 'ion ion-chevron-up',
      closedIcon: 'ion ion-chevron-down',
      spinning: false,
      spinner: ApSpinner.DEFAULT_THEME
    }
  },

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

    return (
      <div className={ classnames('ap-dropdown', {
                'ap-dropdown-open': props.open,
                'ap-dropdown-closed': !props.open
            }, props.className) }
           style={ Object.assign({}, props.style) }>
        { s._renderSpinner() }
        <div className="ap-dropdown-button-wrap">
          <ApButton className="ap-dropdown-button" onTap={ s.handleButtonTap }>
            { props.title }
            <i className={ classnames('ap-dropdown-icon', props.open ? props.openIcon : props.closedIcon) }/>
          </ApButton>
        </div>
        <div className="ap-dropdown-content" style={ layouts.content }>
          <div className="ap-dropdown-content-inner"
               ref={ (inner) => s.registerContentInner(inner) }>
            { props.children }
          </div>
        </div>
      </div>
    )
  },

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

  componentWillMount () {
    const s = this
  },

  componentDidMount () {
    const s = this
    s.layout()
  },

  // ------------------
  // For ApLayoutMixin
  // ------------------

  getInitialLayouts () {
    return {
      content: null
    }
  },

  calcLayouts () {
    const s = this
    let { contentInner } = s
    let contentRect = contentInner.getBoundingClientRect()
    return {
      content: {
        height: contentRect.height
      }
    }
  },

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

  contentInner: null,

  registerContentInner (contentInner) {
    const s = this
    s.contentInner = contentInner
  },

  handleButtonTap (e) {
    const s = this
    let { props } = s
    props.onTap(e)
  },

  // ------------------
  // Private
  // ------------------
  _renderSpinner () {
    const s = this
    let { props } = s
    if (!props.spinning) {
      return null
    }
    return (
      <div className="ap-dropdown-spinner-cover">
        <ApSpinner theme={ props.spinner }
                   className="ap-dropdown-spinner"
                   enabled={ true }/>
      </div>
    )
  }
})

export default ApDropdown