fix: compatibility with formik 1.0.1+

Almouro · Almouro · commit f5e975b27122 · 2018-08-01T09:44:26.000+02:00
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "cz-conventional-changelog": "^2.1.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.0.0",
+    "formik": "^1.0.2",
     "husky": "^0.14.3",
     "jest": "^22.4.2",
     "react": "16.2.0",
diff --git a/src/__tests__/makeReactNativeField.js b/src/__tests__/makeReactNativeField.js
@@ -5,26 +5,25 @@ import { TextInput } from "react-native";
 import { mount } from "enzyme";
 
 import { makeReactNativeField } from "../..";
+import withFormikMock from "../testUtils/withFormikMock";
 
 console.error = jest.fn();
 
 const setFieldValue = jest.fn();
 const setFieldTouched = jest.fn();
 
-const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
-  formik: {
-    setFieldValue,
-    setFieldTouched,
-    values: {
-      email: "contact@bam.tech",
-      user: {
-        username: "bam-dev",
-        password: 'goodchallenge',
-      }
+const formikContext = {
+  setFieldValue,
+  setFieldTouched,
+  values: {
+    email: "contact@bam.tech",
+    user: {
+      username: "bam-dev",
+      password: 'goodchallenge',
     }
   }
-}));
-const Input = compose(withFormikMock, makeReactNativeField)(TextInput);
+};
+const Input = compose(withFormikMock(formikContext), makeReactNativeField)(TextInput);
 
 describe("makeReactNativeField", () => {
   it("sets the input value", () => {
diff --git a/src/__tests__/setFormikInitialValue.js b/src/__tests__/setFormikInitialValue.js
@@ -5,6 +5,7 @@ import { TextInput } from "react-native";
 import { mount } from "enzyme";
 
 import { setFormikInitialValue } from "../..";
+import withFormikMock from "../testUtils/withFormikMock";
 
 console.error = jest.fn();
 
@@ -14,15 +15,14 @@ let Input;
 beforeEach(() => {
   setFieldValue = jest.fn();
 
-  const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
-    formik: {
-      setFieldValue,
-      values: {
-        "this input has been set by formik": "set value"
-      }
+  const formikContext = {
+    setFieldValue,
+    values: {
+      "this input has been set by formik": "set value"
     }
-  }));
-  Input = compose(withFormikMock, setFormikInitialValue)(TextInput);
+  };
+
+  Input = compose(withFormikMock(formikContext), setFormikInitialValue)(TextInput);
 });
 
 describe("setFormikInitialValue", () => {
diff --git a/src/__tests__/withError.js b/src/__tests__/withError.js
@@ -5,20 +5,19 @@ import { TextInput } from "react-native";
 import { mount } from "enzyme";
 
 import { withError } from "../..";
+import withFormikMock from "../testUtils/withFormikMock";
 
 console.error = jest.fn();
 
-const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
-  formik: {
-    errors: {
-      email: "This is not a valid email.",
-      user: {
-        password: "Password is too short!"
-      }
+const formikContext = {
+  errors: {
+    email: "This is not a valid email.",
+    user: {
+      password: "Password is too short!"
     }
   }
-}));
-const Input = compose(withFormikMock, withError)(TextInput);
+};
+const Input = compose(withFormikMock(formikContext), withError)(TextInput);
 
 describe("withError", () => {
   it("sets the error prop", () => {
diff --git a/src/__tests__/withNextInputAutoFocus.js b/src/__tests__/withNextInputAutoFocus.js
@@ -5,15 +5,13 @@ import { Button, View } from "react-native";
 import { mount } from "enzyme";
 
 import { withNextInputAutoFocusForm, withNextInputAutoFocusInput } from "../..";
+import withFormikMock from "../testUtils/withFormikMock";
 
 const submitForm = jest.fn();
-const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
-  formik: {
-    submitForm
-  }
-}));
 
-const Form = compose(withFormikMock, withNextInputAutoFocusForm)(View);
+const Form = compose(withFormikMock({
+  submitForm
+}), withNextInputAutoFocusForm)(View);
 
 const focusInput = jest.fn();
 class TextInput extends React.PureComponent {
diff --git a/src/__tests__/withTouched.js b/src/__tests__/withTouched.js
@@ -5,20 +5,23 @@ import { TextInput } from "react-native";
 import { mount } from "enzyme";
 
 import { withTouched } from "../..";
+import withFormikMock from "../testUtils/withFormikMock";
 
 console.error = jest.fn();
 
-const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
-  formik: {
-    touched: {
-      email: true,
-      user: {
-        username: true,
-      }
+const formikContext = {
+  touched: {
+    email: true,
+    user: {
+      username: true
     }
   }
-}));
-const Input = compose(withFormikMock, withTouched)(TextInput);
+};
+
+const Input = compose(
+  withFormikMock(formikContext),
+  withTouched
+)(TextInput);
 
 describe("withTouched", () => {
   it("sets the touched prop", () => {
diff --git a/src/testUtils/withFormikMock.js b/src/testUtils/withFormikMock.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { FormikProvider } from "formik";
+
+export default formikContextValue => Component => props => (
+  <FormikProvider value={formikContextValue}>
+    <Component {...props} />
+  </FormikProvider>
+);
diff --git a/src/withFormik.js b/src/withFormik.js
@@ -1,6 +1,3 @@
-import { getContext } from "recompose";
-import PropTypes from "prop-types";
+import { connect } from "formik";
 
-const withFormik = getContext({ formik: PropTypes.object });
-
-export default withFormik;
+export default connect;
diff --git a/src/withNextInputAutoFocus.js b/src/withNextInputAutoFocus.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { compose, mapProps } from "recompose";
 import PropTypes from "prop-types";
 import { isArray } from "lodash";
 import withFormik from "./withFormik";
@@ -12,7 +11,7 @@ const withNextInputAutoFocusContextType = {
 
 const getInputs = children =>
   (isArray(children) ? children : [children]).reduce((partialInputs, child) => {
-    if (child.props && child.props.children) {
+    if (child && child.props && child.props.children) {
       return partialInputs.concat(getInputs(child.props.children));
     }
     if (child && child.props && !!child.props.name) return partialInputs.concat(child);
@@ -22,12 +21,11 @@ const getInputs = children =>
 export const withNextInputAutoFocusForm = WrappedComponent => {
   class WithNextInputAutoFocusForm extends React.PureComponent {
     static childContextTypes = withNextInputAutoFocusContextType;
-    static contextTypes = { formik: PropTypes.object };
 
     constructor(props) {
       super(props);
       const { children } = props;
-      this.inputs = getInputs(children);
+      this.inputs = getInputs(children || []);
     }
 
     inputs;
@@ -46,7 +44,7 @@ export const withNextInputAutoFocusForm = WrappedComponent => {
         const isLastInput = inputPosition === this.inputs.length - 1;
 
         if (isLastInput) {
-          this.context.formik.submitForm();
+          this.props.formik.submitForm();
         } else {
           const nextInputs = this.inputs.slice(inputPosition + 1);
           const nextFocusableInput = nextInputs.find(
@@ -70,7 +68,7 @@ export const withNextInputAutoFocusForm = WrappedComponent => {
     }
   }
 
-  return WithNextInputAutoFocusForm;
+  return withFormik(WithNextInputAutoFocusForm);
 };
 
 export const withNextInputAutoFocusInput = Input => {
diff --git a/yarn.lock b/yarn.lock
@@ -1839,6 +1839,13 @@ create-react-class@^15.5.2, create-react-class@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+create-react-context@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -1999,6 +2006,10 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
+deepmerge@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.1.tgz#e862b4e45ea0555072bf51e7fd0d9845170ae768"
+
 default-require-extensions@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
@@ -2565,6 +2576,18 @@ fbjs-scripts@^0.8.1:
     semver "^5.1.0"
     through2 "^2.0.0"
 
+fbjs@^0.8.0:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fbjs@^0.8.1, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
@@ -2719,14 +2742,18 @@ form-data@~2.3.1:
     combined-stream "1.0.6"
     mime-types "^2.1.12"
 
-formik@^0.11.11:
-  version "0.11.11"
-  resolved "https://registry.yarnpkg.com/formik/-/formik-0.11.11.tgz#4b02838133c0196b1ef443aa973766cd097ec4a5"
+formik@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-1.0.2.tgz#333962ab3f09f137992b13198fefa4ec91b15af5"
   dependencies:
+    create-react-context "^0.2.2"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^2.5.5"
     lodash.clonedeep "^4.5.0"
-    lodash.isequal "4.5.0"
     lodash.topath "4.5.2"
-    prop-types "^15.5.10"
+    prop-types "^15.6.1"
+    react-fast-compare "^1.0.0"
+    tslib "^1.9.3"
     warning "^3.0.0"
 
 fragment-cache@^0.2.1:
@@ -3014,6 +3041,10 @@ growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+
 gulp-util@^3.0.4:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@@ -3176,6 +3207,10 @@ hoist-non-react-statics@^2.3.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
 
+hoist-non-react-statics@^2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -4342,10 +4377,6 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
-lodash.isequal@4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
-
 lodash.keys@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
@@ -5408,6 +5439,13 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.6.1:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 protocols@^1.1.0, protocols@^1.4.0:
   version "1.4.6"
   resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.6.tgz#f8bb263ea1b5fd7a7604d26b8be39bd77678bf8a"
@@ -5525,6 +5563,10 @@ react-dom@16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-fast-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-1.0.0.tgz#813a039155e49b43ceffe99528fe5e9d97a6c938"
+
 react-native@0.53.0:
   version "0.53.0"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.53.0.tgz#d57b49b1683f3bbfffd098fd07f7be0ff9e9df74"
@@ -6693,6 +6735,10 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+tslib@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
+
 tsscmp@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.5.tgz#7dc4a33af71581ab4337da91d85ca5427ebd9a97"
@@ -6724,6 +6770,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+ua-parser-js@^0.7.18:
+  version "0.7.18"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
+
 ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
