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 = [], $columnsInRow = [], rowLength = columns
	while (i < $columns.length) {
		$columnsInRow = []
		
		while (n < rowLength) {
			$columnsInRow.push($columns[i])
			n += 1
		}

		$rows.push(<Row>{$columnsInRow}</Row>)
		i += rowLength
		n = 0
	}

	return $rows
}