apeman-react-accordion/lib/ap_accordion_style.jsx

apeman react package for accordion components.

/**
 * Style for ApAccordion.
 * @class ApAccordionStyle
 */

'use strict'

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

/** @lends ApAccordionStyle */
class ApAccordionStyle extends Component {
  render () {
    const s = this
    let { props } = s

    let { all, small, medium, large } = ApAccordionStyle.styleData(props)

    return (
      <ApStyle data={ Object.assign(all, props.style) }
               smallMediaData={ small }
               mediumMediaData={ medium }
               largeMediaData={ large }
      >{ props.children }</ApStyle>
    )
  }
}

Object.assign(ApAccordionStyle, {
  propTypes: {
    style: types.object,
    headerHeight: types.number,
    animationDuration: types.number,
    borderRadius: types.number,
    borderColor: types.string
  },

  defaultProps: {
    style: {},
    headerHeight: 44,
    animationDuration: 300,
    borderRadius: 4,
    borderColor: '#AAA'
  },

  styleData (config) {
    let {
      headerHeight,
      animationDuration,
      borderRadius,
      borderColor
    } = config
    return {
      all: {
        '.ap-accordion': {
          position: 'relative',
          overflow: 'hidden',
          transition: `max-height ${animationDuration}ms`,
          border: `1px solid ${borderColor}`,
          background: 'white',
          boxSizing: 'border-box',
          borderRadius: `${borderRadius}px`
        },
        '.ap-accordion-header': {
          padding: '0 8px',
          lineHeight: `${headerHeight}px`,
          height: `${headerHeight + 1}px`,
          cursor: 'pointer',
          boxSizing: 'border-box',
          margin: '-1px',
          borderRadius: `0 0 ${borderRadius}px ${borderRadius}px`,
          border: `1px solid ${borderColor}`
        },
        '.ap-accordion-header:hover': {
          opacity: 0.9
        },
        '.ap-accordion-header:active': {
          opacity: 0.66
        },
        '.ap-accordion-body': {
          padding: '8px'
        },
        '.ap-accordion-arrow': {
          display: 'inline-block',
          marginRight: '2px',
          transform: 'rotate(0deg)',
          transition: `transform ${animationDuration}ms`
        },
        '.ap-accordion-arrow-icon': {},
        '.ap-accordion-closed': {
          maxHeight: `${headerHeight}px !important`
        },
        '.ap-accordion-closed .ap-accordion-arrow': {
          transform: 'rotate(-90deg)'
        }
      }
    }
  }
})

export default ApAccordionStyle