Added nested values proposal prototype (#202)

package.json

@@ -34,6 +34,7 @@
     "gen-docs": "all-contributors generate && doctoc README.md"
   },
   "dependencies": {
+    "lodash": "4.17.4",
     "lodash.isequal": "4.5.0",
     "prop-types": "^15.5.10",
     "warning": "^3.0.0"
@@ -45,6 +46,7 @@
   "devDependencies": {
     "@types/enzyme": "2.8.4",
     "@types/jest": "20.0.6",
+    "@types/lodash": "4.14.77",
     "@types/lodash.isequal": "4.5.2",
     "@types/node": "8.0.19",
     "@types/prop-types": "15.5.1",

src/Field.tsx

@@ -1,5 +1,6 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
+import get from 'lodash/get';
 
 import { FormikProps } from './formik';
 
@@ -15,7 +16,7 @@ export const Field: React.SFC<any> = (
     value:
       props.type === 'radio' || props.type === 'checkbox'
         ? props.value
-        : context.formik.values[name],
+        : get(context.formik.values, name),
     name,
     onChange: context.formik.handleChange,
     onBlur: context.formik.handleBlur,

src/formik.tsx

@@ -1,6 +1,8 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import isEqual from 'lodash.isequal';
+import set from 'lodash/set';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { isFunction, isPromise, isReactNative, values } from './utils';
 
@@ -396,19 +398,11 @@ Formik cannot determine which value to update. For more info see https://github.
     // Set form fields by name
     this.setState(prevState => ({
       ...prevState,
-      values: {
-        ...prevState.values as object,
-        [field]: val,
-      },
+      values: set(cloneDeep(prevState.values), field, val),
     }));
 
     if (this.props.validateOnChange) {
-      this.runValidations(
-        {
-          ...this.state.values as object,
-          [field]: value,
-        } as Object
-      );
+      this.runValidations(set(cloneDeep(this.state.values), field, value));
     }
   };
 
@@ -421,42 +415,23 @@ Formik cannot determine which value to update. For more info see https://github.
     // Set touched and form fields by name
     this.setState(prevState => ({
       ...prevState,
-      values: {
-        ...prevState.values as object,
-        [field]: value,
-      },
-      touched: {
-        ...prevState.touched as object,
-        [field]: true,
-      },
+      values: set(cloneDeep(prevState.values), field, value),
+      touched: set(cloneDeep(prevState.touched), field, true),
     }));
 
-    this.runValidationSchema(
-      {
-        ...this.state.values as object,
-        [field]: value,
-      } as object
-    );
+    this.runValidationSchema(set(cloneDeep(this.state.values), field, value));
   };
 
   setFieldValue = (field: string, value: any) => {
     // Set form field by name
     this.setState(
       prevState => ({
         ...prevState,
-        values: {
-          ...prevState.values as object,
-          [field]: value,
-        },
+        values: set(cloneDeep(prevState.values), field, value),
       }),
       () => {
         if (this.props.validateOnChange) {
-          this.runValidations(
-            {
-              ...this.state.values as object,
-              [field]: value,
-            } as object
-          );
+          this.runValidations(set(cloneDeep(this.state.values), field, value));
         }
       }
     );
@@ -533,7 +508,7 @@ Formik cannot determine which value to update. For more info see https://github.
     const { name, id } = e.target;
     const field = name ? name : id;
     this.setState(prevState => ({
-      touched: { ...prevState.touched as object, [field]: true },
+      touched: set(cloneDeep(prevState.touched), field, true),
     }));
 
     if (this.props.validateOnBlur) {
@@ -546,10 +521,7 @@ Formik cannot determine which value to update. For more info see https://github.
     this.setState(
       prevState => ({
         ...prevState,
-        touched: {
-          ...prevState.touched as object,
-          [field]: touched,
-        },
+        touched: set(cloneDeep(prevState.touched), field, touched),
       }),
       () => {
         if (this.props.validateOnBlur) {
@@ -563,10 +535,7 @@ Formik cannot determine which value to update. For more info see https://github.
     // Set form field by name
     this.setState(prevState => ({
       ...prevState,
-      errors: {
-        ...prevState.errors as object,
-        [field]: message,
-      },
+      errors: set(cloneDeep(prevState.errors), field, message),
     }));
   };
 
@@ -639,7 +608,7 @@ export function yupToFormErrors(yupError: any): FormikErrors {
   let errors: FormikErrors = {};
   for (let err of yupError.inner) {
     if (!errors[err.path]) {
-      errors[err.path] = err.message;
+      set(errors, err.path, err.message);
     }
   }
   return errors;
@@ -660,12 +629,24 @@ export function validateYupSchema<T>(data: T, schema: any): Promise<void> {
   return schema.validate(validateData, { abortEarly: false });
 }
 
-export function touchAllFields<T>(fields: T): FormikTouched {
-  let touched = {} as FormikTouched;
-  for (let k of Object.keys(fields)) {
-    touched[k] = true;
+function setNestedObjectValues(object: any, value: any, response: any = null) {
+  response = response === null ? {} : response;
+
+  for (let k of Object.keys(object)) {
+    const val = object[k];
+    if (typeof val === 'object') {
+      response[k] = {};
+      setNestedObjectValues(val, value, response[k]);
+    } else {
+      response[k] = value;
+    }
   }
-  return touched;
+
+  return response;
+}
+
+export function touchAllFields<T>(fields: T): FormikTouched {
+  return setNestedObjectValues(cloneDeep(fields), true);
 }
 
 export * from './Field';

yarn.lock

@@ -58,6 +58,10 @@
   version "4.14.76"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.76.tgz#87874f766774d54e89589697340be9496fb8bf70"
 
+"@types/lodash@4.14.77":
+  version "4.14.77"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.77.tgz#0bc699413e84d6ed5d927ca30ea0f0a890b42d75"
+
 "@types/node@8.0.19":
   version "8.0.19"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.19.tgz#e46e2b0243de7d03f15b26b45c59ebb84f657a4e"
@@ -2099,7 +2103,7 @@ lodash.some@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
 
-lodash@^4.11.2, lodash@^4.14.0, lodash@^4.17.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
+lodash@4.17.4, lodash@^4.11.2, lodash@^4.14.0, lodash@^4.17.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"