apeman-react-checkbox/lib/ap_checkbox_style.jsx

apeman react package for checkbox component.

/**
 * Style for ApCheckbox.
 * @class ApCheckboxStyle
 */

'use strict'

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

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

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

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

Object.assign(ApCheckboxStyle, {
  propTypes: {
    style: types.object,
    highlightColor: types.string
  },

  defaultProps: {
    style: {},
    highlightColor: '#38E'
  },
  styleData (config) {
    let {
      highlightColor
    } = config

    return {
      all: {
        '.ap-checkbox': {
          display: 'inline-block',
          padding: '0 4px',
          cursor: 'pointer',
          position: 'relative'
        },
        '.ap-checkbox:hover': {
          opacity: 0.9
        },
        '.ap-checkbox:active': {
          opacity: 0.75
        },
        '.ap-checkbox-input': {
          display: 'inline-block',
          padding: '0 2px',
          position: 'relative',
          top: '-2px',
          opacity: 0,
          zIndex: 8
        },
        '.ap-checkbox-title': {},
        '.ap-checkbox-icon': {
          position: 'absolute',
          left: 2,
          top: 0,
          bottom: 0,
          display: 'inline-flex',
          justifyContent: 'center',
          alignItems: 'center'
        },
        '.ap-checkbox:hover .ap-checkbox-icon': {
          color: `${highlightColor}`
        },
        '.ap-checkbox:active .ap-checkbox-icon': {
          opacity: 0.5
        },
        '.ap-checkbox-icon-checked': {
          color: `${highlightColor}`
        }
      },
      small: {},
      medium: {},
      large: {}
    }
  }
})

export default ApCheckboxStyle