apeman-react-range/lib/ap_range_style.jsx

apeman react package for range input component.

/**
 * Style for ApRange.
 * @class ApRangeStyle
 */

'use strict'

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

/** @lends ApRangeStyle */
const ApRangeStyle = React.createClass({
  propTypes: {
    style: types.object,
    handleSize: types.number,
    barHeight: types.number,
    highlightColor: types.string
  },
  getDefaultProps () {
    return {
      style: {},
      handleSize: 24,
      barHeight: 4,
      highlightColor: '#38E'
    }
  },
  statics: {
    styleData (config) {
      let {handleSize, barHeight, highlightColor} = config
      let barMargin = (handleSize - barHeight) / 2
      let handlePaddingRate = -20

      return {
        all:{
          '.ap-range': {
            position: 'relative',
            height: `${handleSize + 2}px`
          },
          '.ap-range-inner': {
            display: 'flex',
            margin: '2px 0'
          },
          '.ap-range-bar-wrap': {
            display: 'block',
            position: 'relative',
            width: '100%',
            boxSizing: 'border-box'
          },
          '.ap-range-bar': {
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            height: `${barHeight + (barMargin * 2)}px`
          },
          '.ap-range-bar-bg': {
            position: 'absolute',
            top: barMargin,
            left: 0,
            right: 0,
            height: `${barHeight}px`,
            borderRadius: `${barHeight / 2}px`,
            border: '1px solid #BBB',
            backgroundColor: '#CCC'
          },
          '.ap-range-bar-highlight': {
            backgroundColor: `${highlightColor}`,
            top: barMargin - 1,
            position: 'absolute',
            height: barHeight + 2,
            borderRadius: barHeight / 2,
            border: '1px solid rgba(0,0,0,0.1)',
            maxWidth: '100%'
          },
          '.ap-range-handle': {
            position: 'absolute',
            left: `${-handleSize / 2}px`,
            top: 0,
            display: 'inline-block',
            cursor: '-webkit-grab'
          },
          '.ap-range-handle-area': {
            position: 'absolute',
            display: 'inline-block',
            color: 'transparent',
            opacity: 0,
            left: `${handlePaddingRate}%`,
            top: `${handlePaddingRate}%`,
            right: `${handlePaddingRate}%`,
            bottom: `${handlePaddingRate}%`
          },
          '.ap-range-handle:active': {
            cursor: '-webkit-grabbing',
            backgroundColor: '#FCFCFC'
          },
          '.ap-range-handle-from': { left: -handleSize / 2 },
          '.ap-range-handle-to': { left: -handleSize / 2 },
          '.ap-range-handle-icon': {
            width: handleSize,
            height: handleSize,
            borderRadius: 0,
            display: 'inline-block',
            backgroundColor: 'white',
            border: '1px solid #D0D0D0',
            boxShadow: '1px 1px 2px rgba(0,0,0,0.5)',
            position: 'relative',
            zIndex: 3
          },
          '.ap-range-handle-icon:hover': {
            boxShadow: '1px 1px 3px rgba(0,0,0,0.5)'
          },
          '.ap-range-label': {
            display: 'inline-block',
            padding: '2px 4px',
            textAlign: 'right',
            minWidth: '24px',
            fontSize: '14px',
            lineHeight: `${handleSize}px`,
            boxSizing: 'border-box'
          }
        }

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

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

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

export default ApRangeStyle