apeman-react-dropdown

'use strict'
 
import React from 'react'
import ApDropdown from '../../lib/ap_dropdown'
import ApDropdownStyle from '../../lib/ap_dropdown_style'
import ApDropdownItem from '../../lib/ap_dropdown_item'
import {ApButton, ApButtonStyle} from 'apeman-react-button'
 
import {ApHeader, ApHeaderStyle, ApHeaderMenu, ApHeaderMenuItem} from 'apeman-react-header'
 
const Demo = React.createClass({
  getInitialState () {
    return {
      spinning: false,
      open: false
    }
  },
  render () {
    const s = this
    return (
      <div>
        <ApButtonStyle highlightColor="#b35600" />
        <ApHeaderStyle highlightColor="#b35600" />
        <ApDropdownStyle highlightColor="#b35600" />
        <ApHeader style={ {position: 'relative' } }
                  onOutside={ s._handleOutside }>
          <ApDropdown title="Jenny"
                      open={ s.state.open }
                      spinning={ s.state.spinning }
                      onTap={ s._handleTap }
                      onOutside={ s._handleOutside }
          >
            <ApDropdownItem>Hoge</ApDropdownItem>
            <ApDropdownItem>Fuge</ApDropdownItem>
          </ApDropdown>
 
          <ApHeaderMenu>
            <ApHeaderMenuItem>Foo</ApHeaderMenuItem>
            <ApHeaderMenuItem>Bar</ApHeaderMenuItem>
          </ApHeaderMenu>
 
        </ApHeader>
 
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <ApButton onTap={ s._toggleSpin }>Toggle Spin</ApButton>
      </div>
    )
  },
  _handleTap () {
    const s = this
    s.setState({ open: !s.state.open })
  },
 
  _handleOutside () {
    const s = this
    if (s.state.open) {
      s.setState({ open: false })
    }
  },
 
  _toggleSpin () {
    const s = this
    s.setState({ spinning: !s.state.spinning })
  }
})
 
export default Demo