Adding getRef={...} prop. Fixes #555

Author: davidkpiano

src/components/control-component.js

@@ -101,6 +101,7 @@ const propTypes = {
     dispatch: PropTypes.func,
     getState: PropTypes.func,
   }),
+  getRef: PropTypes.func,
 };
 
 const defaultStrategy = {
@@ -564,10 +565,15 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
         controlProps = emptyControlProps,
         component,
         control,
+        getRef,
       } = this.props;
 
       const mappedProps = omit(this.getMappedProps(), disallowedProps);
 
+      if (getRef) {
+        mappedProps.ref = getRef;
+      }
+
       // If there is an existing control, clone it
       if (control) {
         return cloneElement(
@@ -585,6 +591,8 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
     }
   }
 
+  Control.displayName = 'Control';
+
   Control.propTypes = propTypes;
 
   Control.defaultProps = {

src/components/field-component.js

@@ -57,6 +57,7 @@ const fieldPropTypes = {
   componentMap: PropTypes.object,
   dynamic: PropTypes.bool,
   dispatch: PropTypes.func,
+  getRef: PropTypes.func,
 
   // Calculated props
   fieldValue: PropTypes.object,

src/components/form-component.js

@@ -42,6 +42,7 @@ const propTypes = {
   }),
   onUpdate: PropTypes.func,
   onChange: PropTypes.func,
+  getRef: PropTypes.func,
 };
 
 const defaultStrategy = {
@@ -118,6 +119,7 @@ function createFormClass(s = defaultStrategy) {
       this._node = node;
 
       this._node.submit = this.handleSubmit;
+      if (this.props.getRef) this.props.getRef(node);
     }
 
     validate(nextProps, initial = false) {

src/components/local-form-component.js

@@ -22,6 +22,8 @@ class LocalForm extends React.Component {
   }
 }
 
+LocalForm.displayName = 'LocalForm';
+
 LocalForm.propTypes = {
   store: PropTypes.shape({
     subscribe: PropTypes.func,

src/utils/resolve-model.js

@@ -41,6 +41,8 @@ export default function wrapWithModelResolver(WrappedComponent) {
     }
   }
 
+  ResolvedModelWrapper.displayName = `Modeled(${WrappedComponent.displayName})`;
+
   ResolvedModelWrapper.propTypes = {
     model: PropTypes.any,
   };

test/field-component-spec.js

@@ -1855,6 +1855,7 @@ Object.keys(testContexts).forEach((testKey) => {
       const filter = ({ constructor }) =>
         constructor.displayName === 'Connect(Control)';
       const components = TestUtils.findAllInRenderedTree(field, filter);
+      console.log(components);
       assert.lengthOf(components, 1, 'exactly one connected Control was rendered');
       const [component] = components;
       const oldStateProps = component.stateProps;

test/ref-spec.js

@@ -0,0 +1,48 @@
+/* eslint react/no-multi-comp:0 react/jsx-no-bind:0 */
+import { assert } from 'chai';
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+
+import { testCreateStore, testRender } from './utils';
+
+import {
+  modelReducer,
+  formReducer,
+  Control,
+  Form,
+  LocalForm,
+} from '../src';
+
+describe('getRef()', () => {
+  const components = [
+    [Control, 'input'],
+    [Form, 'form'],
+    [LocalForm, 'form'],
+  ];
+
+  const store = testCreateStore({
+    test: modelReducer('test', {}),
+    testForm: formReducer('test', {}),
+  });
+
+  components.forEach(([RRFComponent, tag]) => {
+    it(`should retrieve a component instance from ${RRFComponent.displayName}`, () => {
+      let instance;
+
+      function getRef(node) {
+        instance = node;
+      }
+
+      const control = testRender(
+        <RRFComponent
+          model="test"
+          getRef={getRef}
+        />, store);
+
+      const input = TestUtils.findRenderedDOMComponentWithTag(
+        control, tag);
+
+      assert.equal(instance, input);
+    });
+  });
+});