OneOfObjectArrayForm example

Author: CodeStix

Todo.md

@@ -4,3 +4,4 @@
 -   Nested validators in child forms to improve validation performance
 -   Typed FormInput type prop
 -   Combine array helpers into one object? This is usefull to pass to other components
+-   Require index for array fields

example/src/App.tsx

@@ -12,7 +12,9 @@ import {
     Listener,
     FormTextArea,
     ChildForm,
-    yupValidator
+    yupValidator,
+    useArrayForm,
+    memberCopy
 } from "typed-react-form";
 import { VisualRender } from "./VisualRender";
 import * as yup from "yup";
@@ -90,6 +92,40 @@ const TodoListSchema = yup.object({
     )
 });
 
+export function ArrayTest() {
+    const [values, setValues] = useState({ name: "a list", items: ["asdf"] });
+    const form = useForm(values);
+    const arrayForm = useArrayForm(form, "items");
+
+    return (
+        <form
+            onSubmit={(ev) => {
+                ev.preventDefault();
+                console.log(form.values);
+                setValues(memberCopy(form.values));
+            }}
+        >
+            <p>Name</p>
+            <FormInput form={form} name="name" />
+            <p>Items</p>
+            <ul>
+                {arrayForm.values.map((_, i) => (
+                    <li>
+                        <FormInput key={i} form={arrayForm.form} name={i} />
+                        <button type="button" onClick={() => arrayForm.remove(i)}>
+                            Remove
+                        </button>
+                    </li>
+                ))}
+            </ul>
+            <button type="button" onClick={() => arrayForm.append("")}>
+                Add item
+            </button>
+            <button>Submit</button>
+        </form>
+    );
+}
+
 export function Form() {
     const form = useForm(
         initialValues, // <- Default values, may change

example/src/OneOfObjectArrayForm.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { AnyListener, ArrayForm, FormInput, FormState, useChildForm, useForm, useListener } from "typed-react-form";
+
+interface Apple {
+    type: "apple";
+    color: string;
+}
+
+interface Bread {
+    type: "bread";
+    size: number;
+}
+
+type FormDataObject = Apple | Bread;
+
+interface FormData {
+    objects: FormDataObject[];
+}
+
+export default function OneOfObjectArrayForm() {
+    const form = useForm<FormData>({
+        objects: [
+            { type: "apple", color: "#ff0000" },
+            { type: "bread", size: 200 }
+        ]
+    });
+    return (
+        <form
+            style={{ margin: "0.5em" }}
+            onReset={() => form.resetAll()}
+            onSubmit={async (ev) => {
+                ev.preventDefault();
+                form.setState({ isSubmitting: true });
+                await new Promise((res) => setTimeout(res, 500));
+                form.setState({ isSubmitting: false });
+                console.log(form.values);
+                form.setDefaultValues(form.values);
+            }}
+        >
+            <ArrayForm
+                form={form}
+                name="objects"
+                render={({ form, values, append, remove }) => (
+                    <>
+                        <ul>
+                            {values.map((_, i) => (
+                                <li key={i}>
+                                    {/* Make sure to use the form from ArrayForm! */}
+                                    <BreadOrAppleForm parent={form} index={i} remove={() => remove(i)} />
+                                </li>
+                            ))}
+                        </ul>
+                        <hr />
+                        <button type="button" onClick={() => append({ type: "apple", color: "#ff0000" })}>
+                            Add Apple
+                        </button>
+                        <button type="button" onClick={() => append({ type: "bread", size: 200 })}>
+                            Add Bread
+                        </button>
+                    </>
+                )}
+            />
+            <AnyListener
+                form={form}
+                render={({ values, dirty }) => (
+                    <pre>
+                        {dirty ? "MODIFIED" : "UNMODIFIED"}
+                        <br />
+                        {JSON.stringify(values, null, 2)}
+                    </pre>
+                )}
+            />
+            <button>Submit!</button>
+            <button type="reset">Reset</button>
+        </form>
+    );
+}
+
+function BreadOrAppleForm(props: { parent: FormState<FormDataObject[]>; index: number; remove: () => void }) {
+    // Create a new child form with the array as the parent and index as the key
+    const form = useChildForm(props.parent, props.index);
+    // Listen for changes on the 'type' field, which contains 'apple' or 'bread'. This component will rerender when it changes
+    const { value: type } = useListener(form, "type");
+    return (
+        <div style={{ background: "#0001", padding: "1em", margin: "1em" }}>
+            {/* A select input that sets new form values when a new object type (apple or bread) was chosen */}
+            <label>Object type: </label>
+            <select
+                value={type}
+                onChange={(ev) => {
+                    if (ev.target.value === "apple") form.setValues({ type: "apple", color: "red" });
+                    else if (ev.target.value === "bread") form.setValues({ type: "bread", size: 200 });
+                }}
+            >
+                <option value="apple">Apple</option>
+                <option value="bread">Bread</option>
+            </select>
+
+            {/* Render AppleForm when the type is 'apple'. When type is 'bread', render BreadForm */}
+            {type === "apple" ? <AppleForm form={form as FormState<Apple>} /> : <BreadForm form={form as FormState<Bread>} />}
+
+            {/* Remove this item from the list */}
+            <button type="button" onClick={() => props.remove()}>
+                Remove
+            </button>
+        </div>
+    );
+}
+
+function AppleForm({ form }: { form: FormState<Apple> }) {
+    return (
+        <div>
+            <h4>Apple editor</h4>
+            <p>Select the color of your apple</p>
+            <FormInput form={form} type="color" name="color" />
+        </div>
+    );
+}
+
+function BreadForm({ form }: { form: FormState<Bread> }) {
+    return (
+        <div>
+            <h4>Bread editor</h4>
+            <p>Select the size of your bread</p>
+            <FormInput form={form} type="number" name="size" />
+        </div>
+    );
+}

example/src/index.tsx

@@ -2,6 +2,7 @@ import "./index.css";
 
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+// import App from "./App";
+import App from "./OneOfObjectArrayForm";
 
 ReactDOM.render(<App />, document.getElementById("root"));