Rename ArrayForm/ChildForm -> ArrayField/ObjectField

Author: CodeStix

docs/advanced/Array-fields.md

@@ -6,12 +6,12 @@ title: Array fields
 
 # Array fields
 
-To create dynamic array fields, you should use the [`ArrayForm`](/typed-react-form/reference/ArrayForm) component or [`useArrayForm`](/typed-react-form/useArrayForm) hook. These are wrappers around [`useChildForm`](/typed-react-form/reference/useChildForm) which provide useful functions and optimizations for arrays.
+To create dynamic array fields, you should use the [`ArrayForm`](/typed-react-form/reference/ArrayForm) component or [`useArrayForm`](/typed-react-form/useArrayForm) hook. These are wrappers around [`useObjectField`](/typed-react-form/reference/useObjectField) which provide useful functions and optimizations for arrays.
 
 -   [ArrayForm](/typed-react-form/reference/ArrayForm)
 -   [useArrayForm](/typed-react-form/reference/useArrayForm)
 
-If you have an array field with a constant size, you should probably just use [`ChildForm`](/typed-react-form/reference/ChildForm). (See bottom for examples)
+If you have an array field with a constant size, you should probably just use [`ObjectField`](/typed-react-form/reference/ObjectField). (See bottom for examples)
 
 **Note on keys**: you **should** use the index as key, this seems against nature at first, but remember that this library does not rerender each time something in the array changes. When 2 array items get swapped, it does not rerender either, only when the array size changes, it rerenders. For this reason, it is not a problem (and it's recommended) to use index as the key. (This can change in the future)
 
@@ -89,7 +89,7 @@ function ShoppingListForm() {
 
                         {values.map((_, i) => (
                             // Create a child form for each item in the array, because each array item is an object.
-                            <ChildForm
+                            <ObjectField
                                 key={i} // You should index as key
                                 form={form} // Pass the parent form
                                 name={i} // Pass the current index as the name
@@ -171,7 +171,7 @@ function ShoppingListItemsForm(props: { parent: FormState<ShoppingList> }) {
 }
 
 function ShoppingListItemForm(props: { parent: FormState<ShoppingListItem[]>; index: number; remove: (i: number) => void }) {
-    const form = useChildForm(props.parent, props.index);
+    const form = useObjectField(props.parent, props.index);
     return (
         <div>
             <Field form={form} type="text" name="name" />
@@ -186,7 +186,7 @@ function ShoppingListItemForm(props: { parent: FormState<ShoppingListItem[]>; in
 
 ## Fixed array example
 
-A fixed array always has the same size, [`ChildForm`](/typed-react-form/reference/ChildForm) is used, and the index into the array is given using the name prop.
+A fixed array always has the same size, [`ObjectField`](/typed-react-form/reference/ObjectField) is used, and the index into the array is given using the name prop.
 
 ✔️ **Fixed array field containing strings**
 
@@ -203,7 +203,7 @@ function AnswerForm() {
                 console.log("submit", form.values);
             }}
         >
-            <ChildForm
+            <ObjectField
                 parent={form}
                 name="answers"
                 render={(form) => (

docs/advanced/Object-fields.md

@@ -33,7 +33,7 @@ function PersonForm() {
         >
             {/* Input on root form */}
             <Field form={form} type="text" name="name" />
-            <ChildForm
+            <ObjectField
                 form={form}
                 name="info"
                 render={(form) => (

docs/advanced/Toggling-a-field.md

@@ -56,7 +56,7 @@ function ToggleForm() {
             {/* Use the setNullOnUncheck prop. The value prop contains the value that is set when the box gets checked again, you can omit it to use the default value */}
             <Field form={form} name="location" type="checkbox" setNullOnUncheck />
             {/* ChildForm hides its contents when null/undefined by default */}
-            <ChildForm
+            <ObjectField
                 form={form}
                 name="location"
                 render={(form) => (

docs/reference/ChildForm.md

@@ -4,7 +4,7 @@ parent: Reference
 title: ChildForm component
 ---
 
-# `<ChildForm />`
+# `<ObjectField />`
 
 Use the `ChildForm` component if you want to make fields inside an object field available to inputs. This is a wrapper around [`useChildForm`](/typed-react-form/reference/useChildForm).
 

src/Components.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 import { ChildFormState, DefaultError, DefaultState, DirtyMap, ErrorMap, FieldsOfType, FormState, KeysOfType } from "./form";
-import { useArrayForm, useListener, useAnyListener, useChildForm, useTruthyListener } from "./hooks";
+import { useArrayField, useListener, useAnyListener, useObjectField, useTruthyListener } from "./hooks";
 
 /**
- * Wrapper around useArrayForm (which is a wrapper around useChildForm).
+ * Wrapper around useArrayForm (which is a wrapper around useObjectField).
  * Exports useful functions to manipulate arrays.
  * This hook does cause a rerender, but only if the whole array becomes null/undefined.
  * @param parent The parent form.
  * @param name The parent's field to create a child form for.
  */
-export function ArrayForm<
+export function ArrayField<
     T extends FieldsOfType<any, any[]>,
     K extends KeysOfType<T, any[] | object>,
     State = DefaultState,
@@ -28,7 +28,7 @@ export function ArrayForm<
         setValues: (values: NonNullable<T[K]>) => void;
     }) => React.ReactNode;
 }) {
-    const childForm = useArrayForm(props.form, props.name);
+    const childForm = useArrayField(props.form, props.name);
 
     // Causes a rerender when the array becomes null/not null
     useTruthyListener(props.form, props.name);
@@ -77,13 +77,13 @@ export function AnyListener<T extends object, State = DefaultState, Error extend
 }
 
 /**
- * Wrapper around useChildForm
+ * Wrapper around useObjectField
  * Creates a child form for another root or child form. You must use this for object and array (see useArrayForm) fields.
  * This hook does cause a rerender, but only if the object field becomes null/undefined.
  * @param parentForm The parent form.
  * @param name The parent's field to create a child form for.
  */
-export function ChildForm<
+export function ObjectField<
     T extends FieldsOfType<any, object>,
     K extends KeysOfType<T, object>,
     ParentState = DefaultState,
@@ -93,7 +93,7 @@ export function ChildForm<
     name: K;
     render?: (props: ChildFormState<T, K, ParentState, ParentError>) => React.ReactNode;
 }) {
-    const childForm = useChildForm(props.form, props.name);
+    const childForm = useObjectField(props.form, props.name);
     // Causes a rerender when the object value becomes null/undefined
     useTruthyListener(props.form, props.name);
 

src/hooks.ts

@@ -39,7 +39,7 @@ export function useForm<T extends object, State = DefaultState, Error extends st
  * @param parentForm The parent form.
  * @param name The parent's field to create a child form for.
  */
-export function useChildForm<
+export function useObjectField<
     T extends FieldsOfType<any, object | any[]>,
     K extends KeysOfType<T, object | any[]>,
     State = DefaultState,
@@ -128,13 +128,13 @@ export function useAnyListener<T extends object, State = DefaultState, Error ext
  * @param parentForm The parent form.
  * @param name The parent's field to create a child form for.
  */
-export function useArrayForm<
+export function useArrayField<
     T extends FieldsOfType<any, any[]>,
     K extends KeysOfType<T, any[] | object>,
     State = DefaultState,
     Error extends string = DefaultError
 >(parentForm: FormState<T, State, Error>, name: K) {
-    const form = useChildForm(parentForm, name);
+    const form = useObjectField(parentForm, name);
     const oldLength = useRef(-1);
     const [, setRender] = useState(0);
 

testing/src/ExampleForm.tsx

@@ -1,4 +1,4 @@
-import { AnyListener, ArrayForm, ChildForm, ErrorMap, Field, useForm } from "typed-react-form";
+import { AnyListener, ArrayField, ObjectField, ErrorMap, Field, useForm } from "typed-react-form";
 import tv, { SchemaType } from "typed-object-validator";
 import React from "react";
 import { VisualRender } from "./VisualRender";
@@ -174,7 +174,7 @@ export function ExampleForm() {
             {/* Object field */}
             <label>Object field</label>
             <div>
-                <ChildForm
+                <ObjectField
                     form={form}
                     name="object"
                     render={(form) => (
@@ -189,7 +189,7 @@ export function ExampleForm() {
             </div>
             <pre>
                 {`
-<ChildForm
+<ObjectField
     form={form}
     name="parentObjectFieldName"
     render={(childForm) => (
@@ -217,7 +217,7 @@ export function ExampleForm() {
 
             {/* Simple string array */}
             <label>String array</label>
-            <ArrayForm
+            <ArrayField
                 form={form}
                 name="array"
                 render={({ form }) => (
@@ -232,7 +232,7 @@ export function ExampleForm() {
             />
             <pre>
                 {`
-<ArrayForm
+<ArrayField
     form={form}
     name="array"
     render={({ form }) => (
@@ -249,7 +249,7 @@ export function ExampleForm() {
 
             {/* Dynamic string array */}
             <label>Dynamic string array</label>
-            <ArrayForm
+            <ArrayField
                 form={form}
                 name="array"
                 render={({ form, append, remove }) => (
@@ -268,7 +268,7 @@ export function ExampleForm() {
             />
             <pre>
                 {`
-<ArrayForm
+<ArrayField
     form={form}
     name="arrayFieldName"
     render={({ form, append, remove }) => (
@@ -291,13 +291,13 @@ export function ExampleForm() {
 
             {/* Object array */}
             <label>Object array</label>
-            <ArrayForm
+            <ArrayField
                 form={form}
                 name="objectArray"
                 render={({ form }) => (
                     <ul>
                         {form.values.map((_, i) => (
-                            <ChildForm
+                            <ObjectField
                                 form={form}
                                 name={i}
                                 render={(form) => (
@@ -319,7 +319,7 @@ export function ExampleForm() {
     render={({ form }) => (
         <ul>
             {form.values.map((_, i) => (
-                <ChildForm
+                <ObjectField
                     form={form}
                     name={i}
                     render={(form) => (
@@ -336,13 +336,13 @@ export function ExampleForm() {
 
             {/* Dynamic object array */}
             <label>Dynamic object array</label>
-            <ArrayForm
+            <ArrayField
                 form={form}
                 name="objectArray"
                 render={({ form, append, remove }) => (
                     <ul>
                         {form.values.map((_, i) => (
-                            <ChildForm
+                            <ObjectField
                                 form={form}
                                 name={i}
                                 render={(form) => (
@@ -364,13 +364,13 @@ export function ExampleForm() {
             />
             <pre>
                 {`
-<ArrayForm
+<ArrayField
     form={form}
     name="objectArrayField"
     render={({ form, append, remove }) => (
         <ul>
             {form.values.map((_, i) => (
-                <ChildForm
+                <ObjectField
                     form={form}
                     name={i}
                     render={(form) => (

testing/src/OneOfObjectArrayForm.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AnyListener, ArrayForm, Field, FormState, useChildForm, useForm, useListener } from "typed-react-form";
+import { AnyListener, ArrayField, Field, FormState, useObjectField, useForm, useListener } from "typed-react-form";
 
 interface Apple {
     type: "apple";
@@ -40,7 +40,7 @@ export default function OneOfObjectArrayForm() {
             }}
         >
             <a href="https://github.com/CodeStix/typed-react-form/blob/master/example/src/OneOfObjectArrayForm.tsx">View source code</a>
-            <ArrayForm
+            <ArrayField
                 form={form}
                 name="objects"
                 render={({ form, values, append, remove }) => (
@@ -82,7 +82,7 @@ export default function OneOfObjectArrayForm() {
 
 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);
+    const form = useObjectField(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 (

testing/src/OneOfObjectForm.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AnyListener, Field, FormState, Listener, useChildForm, useForm } from "typed-react-form";
+import { AnyListener, Field, FormState, Listener, useObjectField, useForm } from "typed-react-form";
 
 interface Apple {
     type: "apple";
@@ -59,7 +59,7 @@ export default function OneOfObjectArrayForm() {
 
 function AppleOrBreadForm(props: { parent: FormState<FormData> }) {
     // Create a new form based on the 'breadOrApple' field
-    const form = useChildForm(props.parent, "breadOrApple");
+    const form = useObjectField(props.parent, "breadOrApple");
     return (
         <div style={{ background: "#0001", padding: "1em", margin: "1em" }}>
             <label>Object type: </label>