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

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

  // --------------------
  // 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
  },

  mixins: [
    ApUUIDMixin
  ],

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {
      prefix: null,
      name: null,
      title: '',
      checked: {},
      options: {},
      onChange: null,
      icon: ApCheckbox.DEFAULT_ICON,
      checkedIcon: ApCheckbox.DEFAULT_CHECKED_ICON
    }
  },

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

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

    prefix = prefix || s.uuid

    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)
    }
  }

})

export default ApCheckboxGroup