apeman-react-checkbox/lib/ap_checkbox_style.jsx

apeman react package for checkbox component.

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

'use strict'

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

/** @lends ApCheckboxStyle */
const ApCheckboxStyle = React.createClass({
  propTypes: {
    style: types.object,
    highlightColor: types.string
  },
  getDefaultProps () {
    return {
      style: {},
      highlightColor: '#38E'
    }
  },
  render () {
    const s = this
    let { props } = s

    let highlightColor = props.highlightColor

    let data = {
      '.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
      },
      '.ap-checkbox:hover .ap-checkbox-icon': {
        color: `${highlightColor}`
      },
      '.ap-checkbox:active .ap-checkbox-icon': {
        opacity: 0.5
      },
      '.ap-checkbox-icon-checked': {
        color: `${highlightColor}`
      }
    }
    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 ApCheckboxStyle