fix: Handle nested field name

Author: Tketa

src/__tests__/makeReactNativeField.js

@@ -15,7 +15,13 @@ const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
   formik: {
     setFieldValue,
     setFieldTouched,
-    values: { email: "contact@bam.tech" }
+    values: {
+      email: "contact@bam.tech",
+      user: {
+        username: "bam-dev",
+        password: 'goodchallenge',
+      }
+    }
   }
 }));
 const Input = compose(withFormikMock, makeReactNativeField)(TextInput);
@@ -28,6 +34,13 @@ describe("makeReactNativeField", () => {
     expect(otherInput.find(TextInput).props().value).toEqual(undefined);
   });
 
+  it('sets the input value for nested key name', () => {
+    const emailInput = mount(<Input name="user.username" />);
+    expect(emailInput.find(TextInput).props().value).toEqual("bam-dev");
+    const otherInput = mount(<Input name="user.other" />);
+    expect(otherInput.find(TextInput).props().value).toEqual(undefined);
+  });
+
   it("handles input value change", () => {
     const wrapper = mount(<Input name="email" />);
     wrapper

src/__tests__/withError.js

@@ -10,19 +10,31 @@ console.error = jest.fn();
 
 const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
   formik: {
-    errors: { errored: "This is an error" }
+    errors: {
+      email: "This is not a valid email.",
+      user: {
+        password: "Password is too short!"
+      }
+    }
   }
 }));
 const Input = compose(withFormikMock, withError)(TextInput);
 
 describe("withError", () => {
   it("sets the error prop", () => {
-    const erroredInput = mount(<Input name="errored" />);
-    expect(erroredInput.find(TextInput).props().error).toEqual("This is an error");
+    const erroredInput = mount(<Input name="email" />);
+    expect(erroredInput.find(TextInput).props().error).toEqual("This is not a valid email.");
     const validInput = mount(<Input name="valid" />);
     expect(validInput.find(TextInput).props().error).toBeFalsy();
   });
 
+  it('sets the error prop for nested key name', () => {
+    const emailInput = mount(<Input name="user.password" />);
+    expect(emailInput.find(TextInput).props().error).toEqual("Password is too short!");
+    const otherInput = mount(<Input name="user.username" />);
+    expect(otherInput.find(TextInput).props().error).toEqual(undefined);
+  });
+
   it("keeps other props", () => {
     const wrapper = mount(<Input name="inputName" someProp="someValue" />);
     expect(wrapper.find(TextInput).props().someProp).toEqual("someValue");

src/__tests__/withTouched.js

@@ -10,19 +10,31 @@ console.error = jest.fn();
 
 const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
   formik: {
-    touched: { touchedInput: true }
+    touched: {
+      email: true,
+      user: {
+        username: true,
+      }
+    }
   }
 }));
 const Input = compose(withFormikMock, withTouched)(TextInput);
 
 describe("withTouched", () => {
   it("sets the touched prop", () => {
-    const touchedInput = mount(<Input name="touchedInput" />);
+    const touchedInput = mount(<Input name="email" />);
     expect(touchedInput.find(TextInput).props().touched).toEqual(true);
     const untouchedInput = mount(<Input name="untouched" />);
     expect(untouchedInput.find(TextInput).props().touched).toBeFalsy();
   });
 
+  it("sets the touched prop for nested key name", () => {
+    const touchedInput = mount(<Input name="user.username" />);
+    expect(touchedInput.find(TextInput).props().touched).toEqual(true);
+    const untouchedInput = mount(<Input name="user.password" />);
+    expect(untouchedInput.find(TextInput).props().touched).toBeFalsy();
+  });
+
   it("keeps other props", () => {
     const wrapper = mount(<Input name="inputName" someProp="someValue" />);
     expect(wrapper.find(TextInput).props().someProp).toEqual("someValue");

src/makeReactNativeField.js

@@ -1,10 +1,11 @@
 import { compose, mapProps } from "recompose";
 import withFormik from "./withFormik";
+import { selectValue } from './utils';
 
 const makeReactNativeField = compose(
   withFormik,
   mapProps(({ formik: { setFieldValue, setFieldTouched, values }, name, ...props }) => ({
-    value: values[name],
+    value: selectValue(values, name),
     ...props,
     name,
     onChangeText: text => {

src/utils.js

@@ -0,0 +1,13 @@
+export const selectValue = (values, name) => {
+  if (!name.includes('.')) {
+    return values[name];
+  } else {
+    const nestedKeys = name.split('.');
+    selectedValue = values[nestedKeys[0]];
+    for (let i = 1; i < nestedKeys.length; i += 1) {
+      selectedValue = selectedValue[nestedKeys[i]];
+    }
+
+    return selectedValue;
+  }
+};

src/withError.js

@@ -1,10 +1,11 @@
 import { compose, mapProps } from "recompose";
 import withFormik from "./withFormik";
+import { selectValue } from './utils';
 
 const withError = compose(
   withFormik,
   mapProps(({ formik: { errors }, name, ...props }) => ({
-    error: errors[name],
+    error: selectValue(errors, name),
     ...props,
     name
   }))

src/withTouched.js

@@ -1,10 +1,11 @@
 import { compose, mapProps } from "recompose";
 import withFormik from "./withFormik";
+import { selectValue } from './utils';
 
 const withError = compose(
   withFormik,
   mapProps(({ formik: { touched }, name, ...props }) => ({
-    touched: touched[name],
+    touched: selectValue(touched, name),
     ...props,
     name
   }))