apeman-react-checkbox/lib/ap_checkbox_group.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 uuid from 'uuid'
import ApCheckbox from './ap_checkbox'
import {autobind} from 'breact'

/** @lends ApCheckboxGroup */
class ApCheckboxGroup extends Component {
  constructor (props) {
    super(props)
    const s = this
    s.uuid = uuid.v4()
    autobind(s)
  }

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

    let {
      prefix = s.uuid,
      name,
      options,
      checked,
      icon,
      checkedIcon
    } = props

    return (
      <div className={ classnames('ap-checkbox-group', props.className) }>
        {
          Object.keys(options || {}).map((value) => (
            <ApCheckbox key={ value }
                        name={ name }
                        value={ value }
                        id={ `${prefix}-${value}`}
                        checked={ !!checked[ value ] }
                        title={ options[ value ] }
                        icon={ icon }
                        checkedIcon={ checkedIcon }
                        onChange={ s.handleChange }
            />
          ))
        }
      </div>
    )
  }

  // --------------------
  // Handle
  // --------------------

  handleChange (e) {
    const s = this
    let { props } = s
    if (props.onChange) {
      props.onChange(e)
    }
  }
}

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

  propTypes: {
    /** Document id prefix */
    prefix: types.string,
    /** Name of checkbox input */
    name: types.string.isRequired,
    /** Value and label titles */
    options: types.object.isRequired,
    /** Checked state for each values */
    checked: types.object.isRequired,
    /** 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: {
    prefix: null,
    name: null,
    title: '',
    checked: {},
    options: {},
    onChange: null,
    icon: ApCheckbox.DEFAULT_ICON,
    checkedIcon: ApCheckbox.DEFAULT_CHECKED_ICON
  }

})

export default ApCheckboxGroup