Update react-redux to use forwardRef syntax

src/ConnectedField.js

@@ -336,7 +336,7 @@ const createConnectedField = (structure: Structure<*, *>) => {
     },
     undefined,
     undefined,
-    { withRef: true }
+    { forwardRef: true }
   )
   return connector(ConnectedField)
 }

src/ConnectedFieldArray.js

@@ -197,7 +197,7 @@ const createConnectedFieldArray = (structure: Structure<*, *>) => {
       )
     },
     undefined,
-    { withRef: true }
+    { forwardRef: true }
   )
   return connector(ConnectedFieldArray)
 }

src/ConnectedFields.js

@@ -207,7 +207,7 @@ const createConnectedFields = (structure: Structure<*, *>) => {
     },
     undefined,
     undefined,
-    { withRef: true }
+    { forwardRef: true }
   )
   return connector(ConnectedFields)
 }

src/__tests__/reduxForm.spec.js

@@ -1958,7 +1958,11 @@ const describeReduxForm = (name, structure, combineReducers, setup) => {
           formRender(this.props)
           return (
             <form>
-              <Field name="deep.foo" component={deepFooInputRender} type="text" />
+              <Field
+                name="deep.foo"
+                component={deepFooInputRender}
+                type="text"
+              />
               <Field name="hello" component={helloInputRender} type="text" />
             </form>
           )
@@ -2010,10 +2014,9 @@ const describeReduxForm = (name, structure, combineReducers, setup) => {
 
       expect(deepFooInputRender).toHaveBeenCalled()
       expect(deepFooInputRender).toHaveBeenCalledTimes(1)
-      
+
       expect(helloInputRender).toHaveBeenCalled()
       expect(helloInputRender).toHaveBeenCalledTimes(1)
-
 
       // Reinitialize the form
       const initButton = TestUtils.findRenderedDOMComponentWithTag(
@@ -2073,7 +2076,11 @@ const describeReduxForm = (name, structure, combineReducers, setup) => {
           formRender(this.props)
           return (
             <form>
-              <Field name="deep.foo" component={deepFooInputRender} type="text" />
+              <Field
+                name="deep.foo"
+                component={deepFooInputRender}
+                type="text"
+              />
               <Field name="hello" component={helloInputRender} type="text" />
             </form>
           )
@@ -2129,7 +2136,6 @@ const describeReduxForm = (name, structure, combineReducers, setup) => {
       expect(helloInputRender).toHaveBeenCalled()
       expect(helloInputRender).toHaveBeenCalledTimes(1)
 
-
       // Reinitialize the form
       const initButton = TestUtils.findRenderedDOMComponentWithTag(
         dom,
@@ -4826,7 +4832,7 @@ const describeReduxForm = (name, structure, combineReducers, setup) => {
 
       const decorated = TestUtils.findRenderedComponentWithType(dom, Decorated)
 
-      expect(decorated.ref.getWrappedInstance().getFieldList()).toEqual([])
+      expect(decorated.ref.getFieldList()).toEqual([])
     })
 
     it('should set autofilled and unset it on change', () => {

src/createField.js

@@ -83,9 +83,7 @@ const createField = (structure: Structure<*, *>) => {
         'If you want to access getRenderedComponent(), ' +
           'you must specify a withRef prop to Field'
       )
-      return this.ref
-        ? this.ref.getWrappedInstance().getRenderedComponent()
-        : undefined
+      return this.ref ? this.ref.getRenderedComponent() : undefined
     }
 
     get name(): string {
@@ -97,11 +95,11 @@ const createField = (structure: Structure<*, *>) => {
     }
 
     get pristine(): boolean {
-      return !!(this.ref && this.ref.getWrappedInstance().isPristine())
+      return !!(this.ref && this.ref.isPristine())
     }
 
     get value(): any {
-      return this.ref && this.ref.getWrappedInstance().getValue()
+      return this.ref && this.ref.getValue()
     }
 
     normalize = (name: string, value: any): any => {

src/createFieldArray.js

@@ -83,15 +83,15 @@ const createFieldArray = (structure: Structure<*, *>) => {
     }
 
     get dirty(): boolean {
-      return !this.ref || this.ref.getWrappedInstance().dirty
+      return !this.ref || this.ref.dirty
     }
 
     get pristine(): boolean {
-      return !!(this.ref && this.ref.getWrappedInstance().pristine)
+      return !!(this.ref && this.ref.pristine)
     }
 
     get value(): ?(any[]) {
-      return this.ref ? this.ref.getWrappedInstance().value : undefined
+      return this.ref ? this.ref.value : undefined
     }
 
     getRenderedComponent() {
@@ -100,7 +100,7 @@ const createFieldArray = (structure: Structure<*, *>) => {
         'If you want to access getRenderedComponent(), ' +
           'you must specify a withRef prop to FieldArray'
       )
-      return this.ref && this.ref.getWrappedInstance().getRenderedComponent()
+      return this.ref && this.ref.getRenderedComponent()
     }
 
     render() {

src/createFields.js

@@ -76,7 +76,7 @@ const createFields = (structure: Structure<*, *>) => {
         'If you want to access getRenderedComponent(), ' +
           'you must specify a withRef prop to Fields'
       )
-      return this.refs.connected.getWrappedInstance().getRenderedComponent()
+      return this.refs.connected.getRenderedComponent()
     }
 
     get names(): string[] {
@@ -85,18 +85,15 @@ const createFields = (structure: Structure<*, *>) => {
     }
 
     get dirty(): boolean {
-      return this.refs.connected.getWrappedInstance().isDirty()
+      return this.refs.connected.isDirty()
     }
 
     get pristine(): boolean {
       return !this.dirty
     }
 
     get values(): Object {
-      return (
-        this.refs.connected &&
-        this.refs.connected.getWrappedInstance().getValues()
-      )
+      return this.refs.connected && this.refs.connected.getValues()
     }
 
     render() {

src/createReduxForm.js

@@ -1096,7 +1096,7 @@ const createReduxForm = (structure: Structure<*, *>) => {
           return () => computedActions
         },
         undefined,
-        { withRef: true }
+        { forwardRef: true }
       )
       const ConnectedForm = hoistStatics(connector(Form), WrappedComponent)
       ConnectedForm.defaultProps = config
@@ -1106,43 +1106,43 @@ const createReduxForm = (structure: Structure<*, *>) => {
         ref: ?ConnectedComponent<Form>
 
         submit() {
-          return this.ref && this.ref.getWrappedInstance().submit()
+          return this.ref && this.ref.submit()
         }
 
         reset(): void {
           if (this.ref) {
-            this.ref.getWrappedInstance().reset()
+            this.ref.reset()
           }
         }
 
         get valid(): boolean {
-          return !!(this.ref && this.ref.getWrappedInstance().isValid())
+          return !!(this.ref && this.ref.isValid())
         }
 
         get invalid(): boolean {
           return !this.valid
         }
 
         get pristine(): boolean {
-          return !!(this.ref && this.ref.getWrappedInstance().isPristine())
+          return !!(this.ref && this.ref.isPristine())
         }
 
         get dirty(): boolean {
           return !this.pristine
         }
 
         get values(): Values {
-          return this.ref ? this.ref.getWrappedInstance().getValues() : empty
+          return this.ref ? this.ref.getValues() : empty
         }
 
         get fieldList(): string[] {
           // mainly provided for testing
-          return this.ref ? this.ref.getWrappedInstance().getFieldList() : []
+          return this.ref ? this.ref.getFieldList() : []
         }
 
         get wrappedInstance(): ?Component<*, *> {
           // for testing
-          return this.ref && this.ref.getWrappedInstance().wrapped
+          return this.ref && this.ref.wrapped
         }
 
         render() {

src/types.js.flow

@@ -39,9 +39,8 @@ export type Values = any
 export type GetFormState = { (state: any): any }
 
 export type ConnectedComponent<T: React.Component<*, *>> = {
-  getWrappedInstance: { (): T },
   wrapped: ?React.Component<*, *>
-} & React.Component<*, *>
+} & T
 
 export type Option = {
   selected: boolean,