Merge pull request #815 from kabbi/fix-resolve-dynamic-model

Fixed deeply dynamic model support

Author: davidkpiano

src/components/control-component.js

@@ -676,8 +676,8 @@ function createControlClass(s = defaultStrategy) {
   /* eslint-disable react/prop-types */
   /* eslint-disable react/no-multi-comp */
   class DefaultConnectedControl extends React.Component {
-    shouldComponentUpdate(nextProps) {
-      return !shallowEqual(this.props, nextProps, {
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+      return !shallowEqual(this.context, nextContext) || !shallowEqual(this.props, nextProps, {
         deepKeys: ['controlProps'],
         omitKeys: ['mapProps'],
       });
@@ -696,6 +696,9 @@ function createControlClass(s = defaultStrategy) {
     }
   }
 
+  // Copy the context types so that we can properly implement shouldComponentUpdate
+  DefaultConnectedControl.contextTypes = ConnectedControl.contextTypes;
+
   DefaultConnectedControl.custom = ConnectedControl;
 
   class DefaultConnectedControlInput extends DefaultConnectedControl {

src/utils/resolve-model.js

@@ -20,29 +20,22 @@ function resolveModel(model, parentModel) {
 
 export default function wrapWithModelResolver(WrappedComponent, deepKeys = [], omitKeys = []) {
   class ResolvedModelWrapper extends ReactComponent {
-    constructor(props, context) {
-      super(props, context);
-
-      this.model = context.model;
-      this.store = context.localStore;
-      this.deepKeys = deepKeys;
-      this.omitKeys = omitKeys;
-    }
-    shouldComponentUpdate(nextProps) {
-      return !shallowEqual(this.props, nextProps, {
-        deepKeys: this.deepKeys,
-        omitKeys: this.omitKeys,
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+      return !shallowEqual(this.context, nextContext) || !shallowEqual(this.props, nextProps, {
+        deepKeys,
+        omitKeys,
       });
     }
     render() {
+      const { model: parentModel, localStore } = this.context;
       const resolvedModel = resolveModel(
         this.props.model,
-        this.model);
+        parentModel);
 
       return (<WrappedComponent
         {...this.props}
         model={resolvedModel}
-        store={this.store || undefined}
+        store={localStore || undefined}
       />);
     }
   }

test/model-resolving-spec.js

@@ -195,4 +195,40 @@ describe('model resolving', () => {
       assert.equal(controlInput.value, 'control value');
     });
   });
+
+  it('deep resolves with dynamic model', () => {
+    const deepInitialState = {
+      foo: { value: 'fooValue' },
+      bar: { value: 'barValue' },
+    };
+
+    const deepStore = testCreateStore({
+      test: modelReducer('test', deepInitialState),
+      testForm: formReducer('test', deepInitialState),
+    });
+
+    class DynamicSubform extends React.Component {
+      state = { model: '.foo' };
+      render() {
+        return (
+          <Fieldset model={this.state.model}>
+            <button onClick={() => this.setState({ model: '.bar' })} />
+            <Control.text model=".value" />
+          </Fieldset>
+        );
+      }
+    }
+
+    const app = testRender(
+      <Form model="test">
+        <DynamicSubform />
+      </Form>, deepStore);
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(app, 'input');
+    const button = TestUtils.findRenderedDOMComponentWithTag(app, 'button');
+
+    assert.equal(input.value, 'fooValue');
+    TestUtils.Simulate.click(button);
+    assert.equal(input.value, 'barValue');
+  });
 });