transverseChunk.js

export default function CheckboxGrid ({ columns, items, onChange }) {
	// TODO assert that columns > 0

	const didChange = ({ checked, value }) => {
		const nextItems = [...items]
		const index = findIndex(nextItems, (item) => item.value === value)
		nextItems[index] = { ...nextItems[index], checked }
		onChange(nextItems)
	}
	const $columns = items.map(({ checked, label, value }) =>
		<Col key={`checkbox-col-${value}`} md={3}>
			<Checkbox
				checked={checked}
				label={label}
				onChange={({checked}) => didChange({ checked, value })}
				value={value}
			/>
		</Col>)

	let n = 0, i=0, $rows = []
	for(;i < $columns.length; i+= 1) {
		$rows.push()
	}
	return chunk(items, columns).map((row, index) =>
		<Row key={`checkbox-row-${index}`}>
			{row.map(({ checked, label, value }) =>
				<Col key={`checkbox-col-${value}`} md={3}>
					<Checkbox
						checked={checked}
						label={label}
						onChange={({checked}) => didChange({ checked, value })}
						value={value}
					/>
				</Col>)}
		</Row>)
}