fix nested widget shouldComponetUpdate override

broken by rebase after #254 merge

src/components/Widgets/ControlHOC.js

@@ -17,7 +17,7 @@ class ControlHOC extends Component {
     mediaPaths: ImmutablePropTypes.map.isRequired,
     metadata: ImmutablePropTypes.map,
     onChange: PropTypes.func.isRequired,
-    onValidate: PropTypes.func.isRequired,
+    onValidate: PropTypes.func,
     onOpenMediaLibrary: PropTypes.func.isRequired,
     onAddAsset: PropTypes.func.isRequired,
     onRemoveAsset: PropTypes.func.isRequired,

src/components/Widgets/ListControl.js

@@ -45,6 +45,16 @@ export default class ListControl extends Component {
     this.valueType = null;
   }
 
+  /**
+   * Always update so that each nested widget has the option to update. This is
+   * required because ControlHOC provides a default `shouldComponentUpdate`
+   * which only updates if the value changes, but every widget must be allowed
+   * to override this.
+   */
+  shouldComponentUpdate() {
+    return true;
+  }
+
   componentDidMount() {
     const { field } = this.props;
     if (field.get('fields')) {

src/components/Widgets/ObjectControl.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import ControlHOC from './ControlHOC';
 import { resolveWidget } from '../Widgets';
 import controlStyles from '../ControlPanel/ControlPane.css';
 import styles from './ObjectControl.css';
@@ -23,6 +24,23 @@ export default class ObjectControl extends Component {
     className: PropTypes.string,
   };
 
+  /**
+   * Always update so that each nested widget has the option to update. This is
+   * required because ControlHOC provides a default `shouldComponentUpdate`
+   * which only updates if the value changes, but every widget must be allowed
+   * to override this.
+   */
+  shouldComponentUpdate() {
+    return true;
+  }
+
+  onChange = (fieldName, newValue, newMetadata) => {
+    const { value, onChange } = this.props;
+    const objectValue = value || Map();
+    const newObjectValue = objectValue.set(fieldName, newValue);
+    return this.props.onChange(newObjectValue, newMetadata);
+  };
+
   controlFor(field) {
     const { onAddAsset, onOpenMediaLibrary, mediaPaths, onRemoveAsset, getAsset, value, onChange } = this.props;
     if (field.get('widget') === 'hidden') {
@@ -34,22 +52,18 @@ export default class ObjectControl extends Component {
     return (<div className={controlStyles.widget} key={field.get('name')}>
       <div className={controlStyles.control} key={field.get('name')}>
         <label className={controlStyles.label} htmlFor={field.get('name')}>{field.get('label')}</label>
-        {
-          React.createElement(widget.control, {
-            id: field.get('name'),
-            field,
-            value: fieldValue,
-            onChange: (val, metadata) => {
-              onChange((value || Map()).set(field.get('name'), val), metadata);
-            },
-            onOpenMediaLibrary,
-            mediaPaths,
-            onAddAsset,
-            onRemoveAsset,
-            getAsset,
-            forID: field.get('name'),
-          })
-        }
+        <ControlHOC
+          controlComponent={widget.control}
+          field={field}
+          value={fieldValue}
+          onChange={this.onChange.bind(this, field.get('name'))}
+          mediaPaths={mediaPaths}
+          onOpenMediaLibrary={onOpenMediaLibrary}
+          onAddAsset={onAddAsset}
+          onRemoveAsset={onRemoveAsset}
+          getAsset={getAsset}
+          forID={field.get('name')}
+        />
       </div>
     </div>);
   }