Update model on change (#41)

* refactored tests into multiple files

* call update model with hook

* add on change sandbox

* only update model if on change is defined

* use config flag

* default update on

* use nullish

* rollback changes

* added touched object

* rollback changes

* Update simple-delayed-fields.tsx

* renamed fields

sandbox-app/index.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { NestedField } from './nested-field';
 import { NestedValidation } from './nested-validation';
 import { NullableField } from './nullable-field';
 import { ObjectsArray } from './objects-array';
+import { OnChange } from './on-change';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import { SimpleArray } from './simple-array';
 import { SimpleDelayedFields } from './simple-delayed-fields';
 import { SimpleFields } from './simple-fields';
@@ -17,6 +18,7 @@ const examples = [
   'nested-field',
   'nullable-field',
   'simple-object',
+  'on-change',
 ];
 
 function App(): JSX.Element {
@@ -43,6 +45,7 @@ function App(): JSX.Element {
         <NullableField />
         <SimpleObject />
         <NestedValidation />
+        <OnChange />
       </div>
     </>
   );

sandbox-app/on-change.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useForm } from '../src';
+
+export function OnChange(): JSX.Element {
+  const data = React.useRef({
+    name: 'John Doe',
+    confirm: false,
+  });
+
+  const { fields, changes, touchedValues, onSubmit, reset } = useForm({
+    model: data.current,
+    onSubmit: async ({ model }) => {
+      data.current = model;
+    },
+    onChange: async ({ changes, touchedValues }) => {
+      data.current = {
+        ...data.current,
+        ...changes,
+        ...touchedValues,
+      };
+    },
+  });
+
+  return (
+    <>
+      <h2 id="on-change">On Change</h2>
+      <p>
+        Changes does not reflect a double toggled boolean state because the
+        value will be the same as the initial value. We can now use the touched
+        object to get an updated model with the changes.
+      </p>
+
+      <form onSubmit={onSubmit}>
+        <label>
+          <span>Confirm</span>
+          <input
+            type="checkbox"
+            checked={fields.confirm.value}
+            onChange={(event) => {
+              fields.confirm.touch();
+              fields.confirm.onChange(event.target.checked);
+            }}
+          />
+        </label>
+        <footer>
+          <button>Submit</button>
+          <button onClick={reset} type="button">
+            Reset
+          </button>
+        </footer>
+      </form>
+      <h4>Data</h4>
+      <pre>
+        {JSON.stringify(
+          { data: data.current, changes, touchedValues },
+          null,
+          2
+        )}
+      </pre>
+      <a href="#">Back</a>
+    </>
+  );
+}