Upgraded to new React Context API (redux-form#4289)

* Upgraded to new React Context API

* Fixed some code climate problems

* Fixed typo bug

* Fixed flow errors

* Build fixes?

* Build fixes?

* Disabled identical-code on code climate

* Disabled identical-code on code climate

* Dropped old node versions

* Updated npm on travis

* Fixed react warning in FormSection

* Maybe fixed build?

* Fixed react warning in Form

.babelrc.js

@@ -0,0 +1,37 @@
+const { NODE_ENV } = process.env
+const test = NODE_ENV === 'test'
+const loose = true
+
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose,
+        ...(test ? { targets: { node: '8' } } : {})
+      }
+    ],
+    '@babel/preset-react',
+    '@babel/preset-flow'
+  ],
+  plugins: [
+    'lodash',
+    '@babel/plugin-transform-flow-strip-types',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-syntax-import-meta',
+    ['@babel/plugin-proposal-class-properties', { loose }],
+    '@babel/plugin-proposal-json-strings',
+    [
+      '@babel/plugin-proposal-decorators',
+      {
+        legacy: true
+      }
+    ],
+    '@babel/plugin-proposal-function-sent',
+    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-proposal-numeric-separator',
+    '@babel/plugin-proposal-throw-expressions',
+    test && '@babel/plugin-transform-react-jsx-source',
+    test && 'istanbul'
+  ].filter(Boolean)
+}

.codeclimate.yml

@@ -20,6 +20,9 @@ checks:
     config:
       threshold: 100
   identical-code:
-    enabled: true
+    enabled: false
+  similar-code:
+    config:
+      threshold: 100
 exclude_patterns:
 - "**/*.spec.js"

.flowconfig

@@ -1,6 +1,7 @@
 [ignore]
 .*/node_modules/editions/.*
 .*/node_modules/@webassemblyjs/.*
+.*/examples/.*
 .*/__tests__/.*
 
 [include]
@@ -9,5 +10,4 @@
 [libs]
 
 [options]
-esproposal.decorators=ignore
-unsafe.enable_getters_and_setters=true
+esproposal.decorators=ignore

.travis.yml

@@ -1,11 +1,9 @@
 language: node_js
 
 before_install:
-  - npm install -g npm@5.6.0
+  - npm install -g npm@6.4.1
 
 node_js:
-  - "6"
-  - "7"
   - "8"
   - "9"
   - "10"

docs/MigrationGuide.md

@@ -37,7 +37,7 @@ from the string name of your field is the new `Field` component.
 import React, { Component } from 'react'
 import { reduxForm } from 'redux-form'
 
-class MyForm extends Component {
+class MyForm extends React.Component {
   render() {
     const {
       fields: { username, password },
@@ -50,8 +50,9 @@ class MyForm extends Component {
           <label htmlFor="username">Username</label>
           <div>
             <input type="text" {...username} />
-            {username.touched &&
-              username.error && <span className="error">{username.error}</span>}
+            {username.touched && username.error && (
+              <span className="error">{username.error}</span>
+            )}
           </div>
         </div>
 
@@ -91,7 +92,7 @@ const renderInput = field =>   // Define stateless component to render input and
      <span className="error">{field.meta.error}</span>}
   </div>
 
-class MyForm extends Component {
+class MyForm extends React.Component {
   render() {
 
     const { handleSubmit } = this.props       // No fields prop

docs/api/Field.md

@@ -19,10 +19,11 @@ three fundamental things that you need to understand in order to use `Field` cor
 ## Importing
 
 ```javascript
-var Field = require('redux-form').Field;  // ES5
+var Field = require('redux-form').Field // ES5
 ```
+
 ```javascript
-import { Field } from 'redux-form';  // ES6
+import { Field } from 'redux-form' // ES6
 ```
 
 ## Props you can pass to `Field`
@@ -129,7 +130,7 @@ Allows you to provide a field-level validation rule. The function is given the f
 
 Allows you to provide a field-level warning rule. The function is given the fields current value, all other form values, and the props passed to the form. If the field does not need a warning it should return `undefined`. If the field needs a warning it should return the warning (usually, but not necessarily, a `String`). Note: if the warn prop changes the field will be re-registered.
 
-#### `withRef : boolean` [optional]
+#### `forwardRef : boolean` [optional]
 
 If `true`, the rendered component will be available with the `getRenderedComponent()` method.
 Defaults to `false`. **Cannot be used if your component is a stateless function component.**
@@ -154,14 +155,20 @@ This can be any component class that you have written or have imported from a th
 // MyCustomInput.js
 import React, { Component } from 'react'
 
-class MyCustomInput extends Component {
+class MyCustomInput extends React.Component {
   render() {
-    const { input: { value, onChange } } = this.props
+    const {
+      input: { value, onChange }
+    } = this.props
     return (
       <div>
         <span>The current value is {value}.</span>
-        <button type="button" onClick={() => onChange(value + 1)}>Inc</button>
-        <button type="button" onClick={() => onChange(value - 1)}>Dec</button>
+        <button type="button" onClick={() => onChange(value + 1)}>
+          Inc
+        </button>
+        <button type="button" onClick={() => onChange(value - 1)}>
+          Dec
+        </button>
       </div>
     )
   }
@@ -212,7 +219,7 @@ below.
 So all you really need to render an `redux-form`-connected text input is:
 
 ```js
-<Field component="input" type="text"/>
+<Field component="input" type="text" />
 ```
 
 Remember the third rule above that all other props are passed to the element generated by
@@ -229,7 +236,7 @@ The following properties and methods are available on an instance of a `Field` c
 #### `name : String`
 
 > When nested in `FormSection`, returns the `name` prop prefixed with the `FormSection` name.
-Otherwise, returns the `name` prop that you passed in.
+> Otherwise, returns the `name` prop that you passed in.
 
 #### `pristine : boolean`
 
@@ -242,7 +249,7 @@ Otherwise, returns the `name` prop that you passed in.
 #### `getRenderedComponent()`
 
 > Returns the instance of the rendered component. For this to work, you must provide a
-> `withRef` prop, and your component must not be a stateless function component.
+> `forwardRef` prop, and your component must not be a stateless function component.
 
 ## Props
 
@@ -265,7 +272,7 @@ to be destructured into your `<input/>` component.
 #### `input.name : String`
 
 > When nested in `FormSection`, returns the `name` prop prefixed with the `FormSection` name.
-Otherwise, returns the `name` prop that you passed in.
+> Otherwise, returns the `name` prop that you passed in.
 
 #### `input.onBlur(eventOrValue) : Function`
 

docs/api/FieldArray.md

@@ -12,10 +12,11 @@ With `FieldArray`, you provide a `name` just like with `Field`, but the `compone
 ## Importing
 
 ```javascript
-var FieldArray = require('redux-form').FieldArray;  // ES5
+var FieldArray = require('redux-form').FieldArray // ES5
 ```
+
 ```javascript
-import { FieldArray } from 'redux-form';  // ES6
+import { FieldArray } from 'redux-form' // ES6
 ```
 
 ## Props you can pass to `FieldArray`
@@ -38,7 +39,7 @@ Allows you to provide a field-level validation rule. The function will be given
 
 Allows you to provide a field-level warning rule. The function will be given the current value of the array field, all the other form values, and any props passed to the form. If the array needs a warning, it should return the warning (usually, but not necessarily, a `String`). If the array does not need a warning, it should return `undefined`.
 
-#### `withRef : boolean` [optional]
+#### `forwardRef : boolean` [optional]
 
 If `true`, the rendered component will be available with the `getRenderedComponent()` method.
 Defaults to `false`. **Cannot be used if your component is a stateless function component.**
@@ -59,7 +60,7 @@ The following properties and methods are available on an instance of a `FieldArr
 #### `name : String`
 
 > When nested in `FormSection`, returns the `name` prop prefixed with the `FormSection` name.
-Otherwise, returns the `name` prop that you passed in.
+> Otherwise, returns the `name` prop that you passed in.
 
 #### `valid : boolean`
 
@@ -68,25 +69,25 @@ Otherwise, returns the `name` prop that you passed in.
 #### `getRenderedComponent()`
 
 > Returns the instance of the rendered component. For this to work, you must provide a
-> `withRef` prop, and your component must not be a stateless function component.
+> `forwardRef` prop, and your component must not be a stateless function component.
 
 ## Props
 
 These are props that `FieldArray` will pass to your wrapped component. **All the props provided
 to your component by `redux-form` are divided into `fields` and `meta` objects.**
 
-Any additional props that you pass to your `FieldArray` will be in the root of the `props` 
+Any additional props that you pass to your `FieldArray` will be in the root of the `props`
 object, alongside `fields` and `meta`.
 
 ### Fields Props
 
-The `fields` object is a "pseudo-array", in that it has many of the same properties and methods 
+The `fields` object is a "pseudo-array", in that it has many of the same properties and methods
 as a javascript `Array`, providing both reading and writing functionality.
 
 #### `fields.name : Function`
 
 > When nested in `FormSection`, returns the `name` prop prefixed with the `FormSection` name.
-Otherwise, returns the `name` prop that you passed in.
+> Otherwise, returns the `name` prop that you passed in.
 
 #### `fields.forEach(callback) : Function`
 
@@ -100,7 +101,7 @@ Otherwise, returns the `name` prop that you passed in.
 #### `fields.getAll() : Function`
 
 > A method to get all the values in the array. If you are using ImmutableJS, it will be an
-ImmutableJS `List`.
+> ImmutableJS `List`.
 
 #### `fields.insert(index:Integer, value:Any) : Function`
 
@@ -236,29 +237,35 @@ passed following parameters:
 
 > A reference to the [`fields` prop](#fields-props) to allow for the access to `swap`, `remove`,
 > `pop`, etc., without requiring closure scoping.
+
 ```javascript
 const renderSubFields = (member, index, fields) => (
-    <li key={index}>
-      <button
-        type="button"
-        title="Remove Member"
-        onClick={() => fields.remove(index)}/>
-      <h4>Member #{index + 1}</h4>
-      <Field
-        name={`${member}.firstName`}
-        type="text"
-        component={renderField}
-        label="First Name"/>
-      <Field
-        name={`${member}.lastName`}
-        type="text"
-        component={renderField}
-        label="Last Name"/>
-    </li>
+  <li key={index}>
+    <button
+      type="button"
+      title="Remove Member"
+      onClick={() => fields.remove(index)}
+    />
+    <h4>Member #{index + 1}</h4>
+    <Field
+      name={`${member}.firstName`}
+      type="text"
+      component={renderField}
+      label="First Name"
+    />
+    <Field
+      name={`${member}.lastName`}
+      type="text"
+      component={renderField}
+      label="Last Name"
+    />
+  </li>
 )
 const renderMembers = ({ fields }) => (
   <ul>
-    <button type="button" onClick={() => fields.push({})}>Add Member</button>
+    <button type="button" onClick={() => fields.push({})}>
+      Add Member
+    </button>
     {fields.map(renderSubFields)}
   </ul>
 )

docs/api/Fields.md

@@ -71,7 +71,7 @@ to be stored in the Redux store. Common use cases are to parse currencies into
 `parse` is called with the field `value` and `name` as arguments and should
 return the new parsed value to be stored in the Redux store.
 
-#### `withRef : boolean` [optional]
+#### `forwardRef : boolean` [optional]
 
 If `true`, the rendered component will be available with the
 `getRenderedComponent()` method. Defaults to `false`. **Cannot be used if your
@@ -156,7 +156,7 @@ component.
 #### `getRenderedComponent()`
 
 > Returns the instance of the rendered component. For this to work, you must
-> provide a `withRef` prop, and your component must not be a stateless function
+> provide a `forwardRef` prop, and your component must not be a stateless function
 > component.
 
 ## Props