apeman-react-checkbox/lib/ap_checkbox.jsx

apeman react package for checkbox component.

/**
 * Checkbox component.
 * @class ApCheckbox
 */

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'
import {ApIcon} from 'apeman-react-icon'

const DEFAULT_ICON = 'ion ion-android-checkbox-outline-blank'
const DEFAULT_CHECKED_ICON = 'ion ion-android-checkbox'

/** @lends ApCheckbox */
const ApCheckbox = React.createClass({

  // --------------------
  // Specs
  // --------------------

  propTypes: {
    /** Document id */
    id: types.string.isRequired,
    /** Name of checkbox input */
    name: types.string.isRequired,
    /** Value of checkbox input */
    value: types.string.isRequired,
    /** Label title */
    title: types.string,
    /** Checked or not */
    checked: types.bool,
    /** Handle for change event */
    onChange: types.func,
    /** Icon class name for normal state */
    icon: types.string,
    /** Icon class name for checked state */
    checkedIcon: types.string
  },

  statics: {
    DEFAULT_ICON,
    DEFAULT_CHECKED_ICON
  },

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {
      id: null,
      name: null,
      value: null,
      title: '',
      checked: false,
      onChange: null,
      icon: DEFAULT_ICON,
      checkedIcon: DEFAULT_CHECKED_ICON
    }
  },

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

    let {
      id,
      name,
      value,
      checked,
      onChange
    } = props

    let iconClass = {
      'ap-checkbox-icon-checked': checked,
      [ props.checkedIcon ]: checked,
      [ props.icon ]: !checked
    }

    let className = classnames('ap-checkbox', props.className, {
      'ap-checkbox-checked': checked
    })
    return (
      <label className={ className }
             htmlFor={ id }
             id={`${id}-wrap`}>
        <ApIcon className={ classnames('ap-checkbox-icon', iconClass) }/>
        <input type="checkbox"
               className={ classnames('ap-checkbox-input') }
               id={ id }
               name={ name }
               value={ value }
               checked={ checked }
               onChange={ onChange }/>
        <span className={ classnames('ap-checkbox-title') }>{ props.title }</span>
      </label>
    )
  }
})

export default ApCheckbox