@bigfishtv/cockpit/src/components/input/CheckboxGroup.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import Checkbox from '../input/Checkbox'
import { isArray } from '../../utils/typeUtils'

export default class CheckboxGroup extends Component {
	static propTypes = {
		value: PropTypes.array,
		options: PropTypes.array,
		onChange: PropTypes.func,
		inline: PropTypes.bool,
	}

	static defaultProps = {
		value: [],
		options: [],
		onChange: () => {},
		inline: false,
		disabled: false,
		readOnly: false,
	}

	handleChange(value, checked) {
		const selected = this.props.options
			.filter(option => {
				if (value !== option.value) {
					return this._contains(option.value)
				} else {
					return checked
				}
			})
			.map(option => option.value)
		this.props.onChange(selected)
	}

	_contains(value) {
		if (!this.props.value || !isArray(this.props.value)) return false
		return this.props.value.indexOf(value) !== -1
	}

	render() {
		return (
			<div className={this.props.className}>
				{this.props.children}
				{this.props.options.map((option, i) => (
					<Checkbox
						key={i}
						value={this._contains(option.value)}
						text={option.text}
						onChange={checked => this.handleChange(option.value, checked)}
						readOnly={this.props.disabled || this.props.readOnly}
						inline={this.props.inline}
					/>
				))}
			</div>
		)
	}
}