Attempt to move to create-react-context

.gitignore

@@ -5,4 +5,5 @@ compiled
 coverage
 .DS_Store
 next.d.ts
-legacy.d.ts
+legacy.d.ts
+.rpt2_cache

package.json

@@ -34,10 +34,11 @@
     "gen-docs": "all-contributors generate && doctoc README.md"
   },
   "dependencies": {
+    "create-react-context": "^0.1.6",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "4.5.0",
     "lodash.topath": "4.5.2",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.0",
     "warning": "^3.0.0"
   },
   "peerDependencies": {
@@ -51,7 +52,6 @@
     "@types/lodash.clonedeep": "^4.5.3",
     "@types/lodash.isequal": "4.5.2",
     "@types/lodash.topath": "4.5.3",
-    "@types/prop-types": "15.5.1",
     "@types/react": "16.0.28",
     "@types/react-dom": "^16.0.3",
     "@types/react-test-renderer": "15.5.2",

rollup.config.js

@@ -2,24 +2,23 @@ import commonjs from 'rollup-plugin-commonjs';
 import filesize from 'rollup-plugin-filesize';
 import replace from 'rollup-plugin-replace';
 import resolve from 'rollup-plugin-node-resolve';
-import sourceMaps from 'rollup-plugin-sourcemaps';
+
 import uglify from 'rollup-plugin-uglify';
 
 const shared = {
   input: `compiled/formik.js`,
   external: ['react', 'react-native'],
 };
 
+const prod = process.env.NODE_ENV === 'production';
+
 export default [
   Object.assign({}, shared, {
     output: {
       name: 'Formik',
       format: 'umd',
       sourcemap: true,
-      file:
-        process.env.NODE_ENV === 'production'
-          ? './dist/formik.umd.min.js'
-          : './dist/formik.umd.js',
+      file: prod ? './dist/formik.umd.min.js' : './dist/formik.umd.js',
       exports: 'named',
       globals: {
         react: 'React',
@@ -37,21 +36,10 @@ export default [
       }),
       commonjs({
         include: /node_modules/,
-        namedExports: {
-          'node_modules/prop-types/index.js': [
-            'object',
-            'oneOfType',
-            'string',
-            'node',
-            'func',
-            'bool',
-            'element',
-          ],
-        },
       }),
-      sourceMaps(),
-      process.env.NODE_ENV === 'production' && filesize(),
-      process.env.NODE_ENV === 'production' &&
+
+      prod && filesize(),
+      prod &&
         uglify({
           output: { comments: false },
           compress: {
@@ -92,19 +80,7 @@ export default [
       resolve(),
       commonjs({
         include: /node_modules/,
-        namedExports: {
-          'node_modules/prop-types/index.js': [
-            'object',
-            'oneOfType',
-            'string',
-            'node',
-            'func',
-            'bool',
-            'element',
-          ],
-        },
       }),
-      sourceMaps(),
     ],
   }),
 ];

src/Field.tsx

@@ -1,10 +1,8 @@
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
-import { getIn, isPromise } from './utils';
-
-import { FormikProps } from './formik';
-import { isFunction, isEmptyChildren } from './utils';
 import warning from 'warning';
+import { FormikProps } from './types';
+import { getIn, isEmptyChildren, isFunction, isPromise } from './utils';
+import { connect } from './connect';
 
 export type GenericFieldHTMLAttributes =
   | React.InputHTMLAttributes<HTMLInputElement>
@@ -86,23 +84,10 @@ export type FieldAttributes = GenericFieldHTMLAttributes & FieldConfig;
  * Custom Field component for quickly hooking into Formik
  * context and wiring up forms.
  */
-
-export class Field<Props extends FieldAttributes = any> extends React.Component<
-  Props,
-  {}
-> {
-  static contextTypes = {
-    formik: PropTypes.object,
-  };
-
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    render: PropTypes.func,
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-    validate: PropTypes.func,
-  };
-
+class FieldWithContext<
+  Props extends FieldAttributes = any,
+  Values = {}
+> extends React.Component<Props & { formik: FormikProps<Values> }, {}> {
   componentWillMount() {
     const { render, children, component } = this.props;
 
@@ -123,23 +108,23 @@ export class Field<Props extends FieldAttributes = any> extends React.Component<
   }
 
   handleChange = (e: React.ChangeEvent<any>) => {
-    const { handleChange, validateOnChange } = this.context.formik;
+    const { handleChange, validateOnChange } = this.props.formik;
     handleChange(e); // Call Formik's handleChange no matter what
     if (!!validateOnChange && !!this.props.validate) {
       this.runFieldValidations(e.target.value);
     }
   };
 
   handleBlur = (e: any) => {
-    const { handleBlur, validateOnBlur } = this.context.formik;
+    const { handleBlur, validateOnBlur } = this.props.formik;
     handleBlur(e); // Call Formik's handleBlur no matter what
     if (validateOnBlur && this.props.validate) {
       this.runFieldValidations(e.target.value);
     }
   };
 
   runFieldValidations = (value: any) => {
-    const { setFieldError } = this.context.formik;
+    const { setFieldError } = this.props.formik;
     const { name, validate } = this.props;
     // Call validate fn
     const maybePromise = (validate as any)(value);
@@ -162,10 +147,10 @@ export class Field<Props extends FieldAttributes = any> extends React.Component<
       render,
       children,
       component = 'input',
+      formik,
       ...props
-    } = this.props as FieldConfig;
+    } = this.props as FieldConfig & { formik: FormikProps<Values> };
 
-    const { formik } = this.context;
     const field = {
       value:
         props.type === 'radio' || props.type === 'checkbox'
@@ -200,3 +185,5 @@ export class Field<Props extends FieldAttributes = any> extends React.Component<
     });
   }
 }
+
+export const Field = connect<FieldAttributes, any>(FieldWithContext);

src/FieldArray.tsx

@@ -1,8 +1,7 @@
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
-import { FormikProps, FormikState, isFunction } from './formik';
-import { isEmptyChildren, getIn, setIn } from './utils';
-import { SharedRenderProps } from './types';
+import { isFunction, isEmptyChildren, getIn, setIn } from './utils';
+import { SharedRenderProps, FormikProps, FormikState } from './types';
+import { connect } from './connect';
 
 export type FieldArrayConfig = {
   /** Really the path to the array field to be updated */
@@ -53,15 +52,15 @@ export const insert = (array: any[], index: number, value: any) => {
   return copy;
 };
 
-export class FieldArray extends React.Component<FieldArrayConfig, {}> {
+class FieldArrayWithContext<Values = {}> extends React.Component<
+  FieldArrayConfig & { formik: FormikProps<Values> },
+  {}
+> {
   static defaultProps = {
     validateOnChange: true,
   };
-  static contextTypes = {
-    formik: PropTypes.object,
-  };
 
-  constructor(props: FieldArrayConfig) {
+  constructor(props: FieldArrayConfig & { formik: FormikProps<Values> }) {
     super(props);
     // We need TypeScript generics on these, so we'll bind them in the constructor
     this.remove = this.remove.bind(this);
@@ -79,7 +78,7 @@ export class FieldArray extends React.Component<FieldArrayConfig, {}> {
       values,
       touched,
       errors,
-    } = this.context.formik;
+    } = this.props.formik;
     const { name, validateOnChange } = this.props;
     setFormikState(
       (prevState: FormikState<any>) => ({
@@ -194,7 +193,7 @@ export class FieldArray extends React.Component<FieldArrayConfig, {}> {
     };
 
     const { component, render, children, name } = this.props;
-    const props = { ...arrayHelpers, form: this.context.formik, name };
+    const props = { ...arrayHelpers, form: this.props.formik, name };
 
     return component
       ? React.createElement(component as any, props)
@@ -207,3 +206,5 @@ export class FieldArray extends React.Component<FieldArrayConfig, {}> {
           : null;
   }
 }
+
+export const FieldArray = connect<FieldArrayConfig, any>(FieldArrayWithContext);

src/Form.tsx

@@ -1,10 +1,6 @@
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
+import { connect } from './connect';
 
-export const Form: React.SFC<any> = (props, context) => (
-  <form onSubmit={context.formik.handleSubmit} {...props} />
-);
-
-Form.contextTypes = {
-  formik: PropTypes.object,
-};
+export const Form = connect<any>(({ formik: { handleSubmit }, ...props }) => (
+  <form onSubmit={handleSubmit} {...props} />
+));

src/connect.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import createContext from 'create-react-context';
+import { FormikProps } from './types';
+
+export const FormikContext = createContext<FormikProps<any>>({} as any);
+
+/**
+ * Connect any component to Formik context, and inject as a prop called `formik`;
+ * @param Comp React Component
+ */
+export function connect<Outer, Values = {}>(
+  Comp: React.ComponentType<Outer & { formik: FormikProps<Values> }>
+) {
+  return (props: Outer) => (
+    <FormikContext.Consumer>
+      {formik => <Comp {...props} formik={formik} />}
+    </FormikContext.Consumer>
+  );
+}