Checkbox Group widget

[tomdye]

The checkbox group widget will control a number of dojo checkboxes allowing them to behave like native html check boxes.

This would mean setting the same name property of each of the child checkboxes and controlling the checked property of each. Setting the name and value properties of the checkboxes is very important to make this work.

The checkboxes should probably be wrapped in a fieldset and the group widget should accept a label property that gets used as a legend for the fieldset.

There are several ways we might approach this:

middleware

A checkbox group middleware could be used for a functional widget approach. The middleware could provide a getter and setter for the checkbox group value. This would then be used to set the checked status of the widgets.

const factory = create({ checkboxGroup }).properties();
export const ProviderBrowse = factory(function ProviderBrowse({
	middleware: { checkboxGroup }
}) {
	const { name, getValue, setValue } = checkboxGroup;
	
	return [
		<Checkbox value="dog" name={name} checked={() => {getValue('dog')}} onValue={(checked) => {setValue(checked, 'dog')}}/>,
		<Checkbox value="cat" name={name} checked={() => {getValue('cat')}} onValue={(checked) => {setValue(checked, 'cat')}}/>,
		<Checkbox value="fish" name={name} checked={() => {getValue('fish')}} onValue={(checked) => {setValue(checked, 'fish')}}/>
	];
});

renderprops

A render prop could be used to render the child checkboxes. It would make an onValueChange property available to the child checkboxes which they could use to report back their value on change.

<CheckboxGroup value={['dog']} renderCheckboxes={(name, onValue) => [
	<Checkbox value="dog" name={name} onValue={(checked) => {onValue(checked, 'dog')}}/>,
	<Checkbox value="cat" name={name} onValue={(checked) => {onValue(checked, 'cat')}}/>,
	<Checkbox value="fish" name={name} onValue={(checked) => {onValue(checked, 'fish')}}/>
]} />

child checkboxes

The checkbox group widget could take checkbox widgets as it's children. These could then be auto wired up to the get and set value functions of the group.

import { CheckboxGroup } from 'CheckboxGroup';
import { Checkbox } from 'Checkbox';

<CheckboxGroup value={['dog']} >
	<Checkbox value="dog" />
	<Checkbox value="cat" />
	<Checkbox value="fish" />
</CheckboxGroup>

child checkbox factory functions

The checkbox group widget could export a factory function that's used to create the child checkboxes. This would restrict access to the check box properties and give the parent group access to the created widget onValue callbacks.

import { CheckboxGroup, createCheckBox } from 'CheckboxGroup';

<CheckboxGroup label="pets" value={['dog']} >
	createCheckBox("dog")
	createCheckBox("cat")
	createCheckBox("fish")
</CheckboxGroup>