feat(forms): allow deep objects and arrays as form control names

Author: assisrafael

demo/FormExamples.jsx

@@ -220,6 +220,21 @@ export function FormExamples() {
       </div>
 
       <FormGroupTextarea name="textareaField" label="Textarea field" />
+
+      {[0, 1].map((index) => (
+        <div className="row" key={index}>
+          <div className="col">
+            <FormGroupInput name={`array[${index}].data.text`} label={`Array text ${index}`} />
+          </div>
+          <div className="col">
+            <FormGroupSelect
+              name={`array[${index}].data.select`}
+              label={`Array select ${index}`}
+              options={['Yes', 'No']}
+            />
+          </div>
+        </div>
+      ))}
     </Form>
   );
 }

src/forms/helpers/form-helpers.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import { getValueByPath } from '../../utils/getters-setters';
 
 export const FormContext = React.createContext(null);
 
 export function validateFormElement({ name, validations = [], formData, elementRefs }) {
   let validationMessage = '';
-  const value = formData[name];
+  const value = getValueByPath(formData, name);
 
   validations.some(({ message, validate }) => {
     const isValid = validate(value, formData);

src/forms/helpers/useForm.js

@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { validateFormElement } from './form-helpers';
 import { useArrayValueMap } from '../../utils/useValueMap';
+import { setValueByPath, deepClone, getValueByPath } from '../../utils/getters-setters';
+import { validateFormElement } from './form-helpers';
 
 export function useForm(initialState, validations) {
   const [formState, setFormState] = useState(initialState);
@@ -21,27 +22,17 @@ export function useForm(initialState, validations) {
       }
     },
     update(name, value) {
-      setFormState((prevFormState) => {
-        const nextState = {
-          ...prevFormState,
-          [name]: value,
-        };
-
-        return nextState;
-      });
+      setFormState((prevFormState) => nextState(prevFormState, name, value));
 
       if (validations) {
-        this.validateForm({
-          ...formState,
-          [name]: value,
-        });
+        this.validateForm(nextState(formState, name, value));
       }
     },
     getFormData() {
       return formState;
     },
     getValue(name) {
-      return formState[name];
+      return getValueByPath(formState, name);
     },
     reset() {
       setFormState(initialState);
@@ -80,3 +71,7 @@ export function useForm(initialState, validations) {
     },
   };
 }
+
+function nextState(previousState, path, value) {
+  return setValueByPath(deepClone(previousState), path, value);
+}

src/utils/getters-setters.js

@@ -57,3 +57,41 @@ export function setValueByPath(obj, objPath, value) {
 
   return obj || lastCursor;
 }
+
+export function deepClone(item) {
+  // null, undefined values check
+  if (!item) {
+    return item;
+  }
+
+  if (Object.prototype.toString.call(item) === '[object Array]') {
+    return item.map(deepClone);
+  }
+
+  if (typeof item != 'object') {
+    return item;
+  }
+
+  // testing that this is DOM
+  if (item.nodeType && typeof item.cloneNode == 'function') {
+    return item.cloneNode(true);
+  }
+
+  if (!item.prototype) {
+    // check that this is a literal
+    if (item instanceof Date) {
+      return new Date(item);
+    }
+
+    // it is an object literal
+    const result = {};
+
+    for (const i in item) {
+      result[i] = deepClone(item[i]);
+    }
+
+    return result;
+  }
+
+  return item;
+}

test/getters-setters.test.js

@@ -1,4 +1,4 @@
-import { setValueByPath, getValueByPath, splitPath } from '../src/utils/getters-setters';
+import { setValueByPath, getValueByPath, splitPath, deepClone } from '../src/utils/getters-setters';
 
 test('splitPath should split path strings into hierarchical components', () => {
   expect(splitPath('a.b.0.c')).toStrictEqual([
@@ -46,3 +46,25 @@ test('getValueByPath should get path value of complex objects', () => {
   expect(getValueByPath({ a: { '0': 6 } }, 'a[0]')).toBe(6);
   expect(getValueByPath({ a: [2, { b: [3, 4, 5, { c: { d: 'efg' } }] }] }, 'a[1].b.3.c')).toStrictEqual({ d: 'efg' });
 });
+
+test('deepClone should not result in a shallow copy', () => {
+  const source = {
+    a: 'hello',
+    c: 'test',
+    po: 33,
+    arr: [1, 2, 3, 4],
+    anotherObj: {
+      a: 33,
+      str: 'whazzup',
+    },
+  };
+  const dest = deepClone(source);
+
+  expect(dest).toStrictEqual(source);
+  source.anotherObj.a = 200;
+  expect(source.anotherObj.a).toBe(200);
+  expect(dest.anotherObj.a).toBe(33);
+  source.arr.push(5);
+  expect(source.arr[4]).toBe(5);
+  expect(dest.arr[4]).toBe(undefined);
+});