Checkbox Multiselect Feature about redux-form-material-ui

[zazapeta]

Its wath i did for it :

Render.js

import Checkbox from 'material-ui/Checkbox';
/**
/* @param options {object[]} 
/* @param options.label {string}
/* @param options.value {any}
*/ 
 export const renderCheckboxGroup = ({ name, options,  input, meta, ...custom}) => {
  let $options = options.map((option, i) => (
    <div key={i}>
      <Checkbox
        name={`${name}[${i}]`}
        defaultChecked={input.value.indexOf(option.value) !== -1}
        label={option.label}
        onCheck={(e, checked) => {
          let newValue = [...input.value];
          if (checked){
            newValue.push(option.value);
          } else {
            newValue.splice(newValue.indexOf(option.value), 1);
          }
          return input.onChange(newValue);
        }}
        {...custom}
      />
    </div>
  ));
  return (
    <div>
      {$options}
    </div>
  );
};

And how to use it :

ToppingCheckBoxGroup.view.jsx

import {renderCheckboxGroup} from 'Renderers';
class ToppingCheckBoxGroup extends React.Component {
  render() {
    return (
      <fieldset>
        <legend>Toppings</legend>
        <Field
          name="toppings"
          component={renderCheckboxGroup}
          options={this.props.toppings}
        />
      </fieldset>
    );
  }
}
ToppingCheckBoxGroup.propTypes = {
  toppings: React.PropTypes.arrayOf(
                       React.PropTypes.shape({
                           label: React.PropTypes.string.isRequired,
                           value: React.PropTypes.any.isRequired
                       })
                   ).isRequired,
};

[mihirsoni]

I'll add this in example. @zazapeta Thank you for example.