apeman-react-dropdown/lib/ap_dropdown_style.jsx

/**
 * Style for ApDropdown.
 * @class ApDropdownStyle
 */

'use strict'

import React, {PropTypes as types} from 'react'
import {ApStyle} from 'apeman-react-style'

/** @lends ApDropdownStyle */
const ApDropdownStyle = React.createClass({
  propTypes: {
    style: types.object,
    highlightColor: types.string
  },
  getDefaultProps () {
    return {
      style: {},
      highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR,
      backgroundColor: ApStyle.DEFAULT_BACKGROUND_COLOR
    }
  },
  render () {
    const s = this
    let { props } = s

    let { highlightColor, backgroundColor } = props

    let duration = '400ms'
    let buttonHeight = 44

    let data = {
      '.ap-dropdown': {
        position: 'relative',
        boxSizing: 'border-box',
        display: 'inline-block'
      },
      '.ap-dropdown-content': {
        position: 'absolute',
        boxSizing: 'border-box',
        overflow: 'hidden',
        transition: `width ${duration}, height ${duration}`,
        top: `${buttonHeight}px`,
        left: 0,
        background: 'rgba(255,255,255,0.95)',
        width: '100%',
        maxWidth: ApStyle.CONTENT_WIDTH,
        border: '1px solid #EEE',
        zIndex: 99
      },
      '.ap-dropdown-content-inner': {
        minWidth: '192px',
        minHeight: '40px'
      },
      '.ap-dropdown-open .ap-dropdown-content': {},
      '.ap-dropdown-closed .ap-dropdown-content': {
        height: '0 !important',
        border: 'none'
      },

      '.ap-dropdown-button-wrap': {
        position: 'relative'
      },
      '.ap-dropdown-button': {
        margin: 0,
        padding: '0 8px',
        boxSizing: 'border-box',
        verticalAlign: 'middle',
        border: 'none',
        display: 'block',
        color: 'inherit',
        lineHeight: `${buttonHeight}px`,
        backgroundColor: 'transparent'
      },
      '.ap-dropdown-button-aligner': {
        height: '100%',
        width: '1px',
        verticalAlign: 'middle'
      },
      '.ap-dropdown-item': {
        display: 'block',
        boxSizing: 'border-box',
        textDecoration: 'none',
        padding: '4px 8px',
        lineHeight: '36px',
        borderBottom: '1px solid #F0F0F0'
      },
      '.ap-dropdown-item:hover': {
        cursor: 'pointer',
        background: '#FAFAFA'
      },
      '.ap-dropdown-item:active': {
        background: '#F0F0F0'
      },
      '.ap-dropdown-icon': {
        display: 'inline-block',
        margin: '0 8px',
        fontSize: '12px'
      },
      '.ap-dropdown-spinner-cover': {
        position: 'absolute',
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        textAlign: 'center',
        boxSizing: 'border-box',
        padding: '16px 32px',
        background: 'rgba(255, 255, 255, 0.75)',
        border: '1px solid rgba(255, 255, 255, 0.9)',
        zIndex: 101,
        color: '#888'
      }
    }
    let smallMediaData = {}
    let mediumMediaData = {}
    let largeMediaData = {}
    return (
      <ApStyle data={ Object.assign(data, props.style) }
               smallMediaData={ smallMediaData }
               mediumMediaData={ mediumMediaData }
               largeMediaData={ largeMediaData }
      >{ props.children }</ApStyle>
    )
  }
})

export default ApDropdownStyle