From eaff0fed22ffa6930e55065739c8d91e54360a52 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@erquh.art>
Date: Mon, 4 Sep 2017 20:19:14 -0400
Subject: [PATCH] fix nested widget shouldComponetUpdate override

broken by rebase after #254 merge
---
 src/components/Widgets/ControlHOC.js    |  2 +-
 src/components/Widgets/ListControl.js   | 10 ++++++
 src/components/Widgets/ObjectControl.js | 46 ++++++++++++++++---------
 3 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/components/Widgets/ControlHOC.js b/src/components/Widgets/ControlHOC.js
index b8c7492a8aed..6ce1f243f47e 100644
--- a/src/components/Widgets/ControlHOC.js
+++ b/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,
diff --git a/src/components/Widgets/ListControl.js b/src/components/Widgets/ListControl.js
index c9d9a5dd6e52..56f84668e43f 100644
--- a/src/components/Widgets/ListControl.js
+++ b/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')) {
diff --git a/src/components/Widgets/ObjectControl.js b/src/components/Widgets/ObjectControl.js
index b4b73224eb2c..62aa5c3a25c3 100644
--- a/src/components/Widgets/ObjectControl.js
+++ b/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>);
   }