Convert CheckboxGroup to proper Component

recipe-server/client/control/components/Fields.js

@@ -52,6 +52,7 @@ buildControlField.propTypes = {
   children: pt.node,
 };
 
+<<<<<<< HEAD
 export class IntegerControlField extends React.Component {
   parse(value) {
     return Number.parseInt(value, 10);
@@ -115,52 +116,67 @@ buildErrorMessageField.propTypes = {
 };
 
 
-export const CheckboxGroup = ({ name, onChange, options = [], value }) => {
+export class CheckboxGroup extends React.Component {
+  static propTypes = {
+    name: pt.string.isRequired,
+    onChange: pt.func.isRequired,
+    options: pt.array,
+    value: pt.arrayOf(pt.string),
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+
+    this.handleChange = ::this.handleChange;
+  }
   /**
    * Checkbox change event handler. Appends or removes the selected checkbox's
    * value to the existing `value` prop, and reports the change up to redux-form.
    *
    * @param  {Event} onChange event object
    */
-  const handleChange = ({ event: target }) => {
+  handleChange({ target }) {
+    const {
+      value = [],
+      onChange,
+    } = this.props;
+
     if (target.checked) {
       // Use Set to remove any dupes from the new value array
       const newValue = new Set(value.concat([target.value]));
-      // Report an array up to redux-form
+
       onChange(Array.from(newValue));
     } else {
       // Remove this target's value from the array of values and return that array
       onChange(value.filter(val => val !== target.value));
     }
-  };
+  }
 
-  /**
-   * Render the full list of inputs
-   */
-  return (
-    <div>
-      {
-        options.map((option, index) =>
-          <label className="checkbox" key={index}>
-            <input
-              type="checkbox"
-              name={name}
-              value={option.value}
-              checked={value.includes(option.value)}
-              onChange={handleChange}
-            />
-            <span>{option.label}</span>
-          </label>
-        )
-      }
-    </div>
-  );
-};
+  render() {
+    const {
+      name,
+      options = [],
+      value = [],
+    } = this.props;
 
-CheckboxGroup.propTypes = {
-  name: pt.string.isRequired,
-  input: pt.object.isRequired,
-  value: pt.oneOfType([pt.string, pt.array]),
-  onChange: pt.func.isRequired,
-  options: pt.array,
-};
+    return (
+      <div>
+        {
+          options.map((option, index) =>
+            <label className="checkbox" key={index}>
+              <input
+                type="checkbox"
+                name={name}
+                value={option.value}
+                checked={value.includes(option.value)}
+                onChange={this.handleChange}
+              />
+              <span>{option.label}</span>
+            </label>
+          )
+        }
+      </div>
+    );
+  }
+}

recipe-server/client/control/components/MultiPicker.js

@@ -1,5 +1,4 @@
 import React, { PropTypes as pt } from 'react';
-import { propTypes as reduxFormPropTypes } from 'redux-form';
 import cx from 'classnames';
 
 /**
@@ -209,9 +208,9 @@ class PickerControl extends React.Component {
 export default class MultiPicker extends React.Component {
   static propTypes = {
     unit: pt.string.isRequired,
+    onChange: pt.func.isRequired,
     options: pt.array,
-    value: reduxFormPropTypes.value,
-    onChange: reduxFormPropTypes.onChange,
+    value: pt.arrayOf(pt.string),
   };
 
   constructor(props) {