allow widgets to override controlHOC shouldComponentUpdate

src/components/Widgets/ControlHOC.js

@@ -25,12 +25,25 @@ class ControlHOC extends Component {
   };
 
   shouldComponentUpdate(nextProps) {
+    /**
+     * Allow widgets to provide their own `shouldComponentUpdate` method.
+     */
+    if (this.wrappedControlShouldComponentUpdate) {
+      return this.wrappedControlShouldComponentUpdate(nextProps);
+    }
     return this.props.value !== nextProps.value;
   }
 
   processInnerControlRef = (wrappedControl) => {
     if (!wrappedControl) return;
     this.wrappedControlValid = wrappedControl.isValid || truthy;
+
+    /**
+     * Get the `shouldComponentUpdate` method from the wrapped control, and
+     * provide the control instance is the `this` binding.
+     */
+    const { shouldComponentUpdate: scu } = wrappedControl;
+    this.wrappedControlShouldComponentUpdate = scu && scu.bind(wrappedControl);
   };
 
   validate = (skipWrapped = false) => {

src/components/Widgets/MediaControl.js

@@ -13,6 +13,26 @@ export default class MediaControl extends React.Component {
     this.controlID = uuid.v4();
   }
 
+  shouldComponentUpdate(nextProps) {
+    /**
+     * Always update if the value changes.
+     */
+    if (this.props.value !== nextProps.value) {
+      return true;
+    }
+
+    /**
+     * If there is a media path for this control in the state object, and that
+     * path is different than the value in `nextProps`, update.
+     */
+    const mediaPath = nextProps.mediaPaths.get(this.controlID);
+    if (mediaPath && (nextProps.value !== mediaPath)) {
+      return true;
+    }
+
+    return false;
+  }
+
   componentWillReceiveProps(nextProps) {
     const { mediaPaths, value } = nextProps;
     const mediaPath = mediaPaths.get(this.controlID);