apeman-react-checkbox/lib/ap_checkbox.jsx

apeman react package for checkbox component.

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

'use strict'

import React, { Component, 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 */
class ApCheckbox extends Component {
  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>
    )
  }
}

Object.assign(ApCheckbox, {
  // --------------------
  // Specs
  // --------------------

  propTypes: {
    /** Document id */
    id: types.string.isRequired,
    /** Name of checkbox input */
    name: types.string.isRequired,
    /** Value of checkbox input */
    value: types.oneOfType([
      types.string,
      types.bool
    ]).isRequired,
    /** Label title */
    title: types.node,
    /** 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
  },

  defaultProps: {
    id: null,
    name: null,
    value: '',
    title: '',
    checked: false,
    onChange: null,
    icon: DEFAULT_ICON,
    checkedIcon: DEFAULT_CHECKED_ICON
  },

  DEFAULT_ICON,
  DEFAULT_CHECKED_ICON

})

export default ApCheckbox