Require render function for ObjectField/ArrayField

Author: CodeStix

src/Components.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ChildFormState, DefaultError, DefaultState, DirtyMap, ErrorMap, FieldsOfType, FormState, KeysOfType } from "./form";
-import { useArrayField, useListener, useAnyListener, useObjectField, useTruthyListener } from "./hooks";
+import { ChildFormState, DefaultError, DefaultState, FieldsOfType, FormState, KeysOfType } from "./form";
+import { useArrayField, useListener, useAnyListener, useObjectField, useTruthyListener, FormField } from "./hooks";
 
 /**
  * Wrapper around useArrayField (which is a wrapper around useObjectField).
@@ -17,7 +17,7 @@ export function ArrayField<
 >(props: {
     form: FormState<T, State, Error>;
     name: K;
-    render?: (props: {
+    render: (props: {
         form: ChildFormState<T, K, State, Error>;
         remove: (index: number) => void;
         clear: () => void;
@@ -35,7 +35,7 @@ export function ArrayField<
 
     // Do not render anything if the parent field is falsly
     if (!props.form.values[props.name]) return null;
-    return <React.Fragment>{props.render?.(childForm) ?? childForm.values + ""}</React.Fragment>;
+    return <React.Fragment>{props.render(childForm)}</React.Fragment>;
 }
 
 /**
@@ -45,21 +45,14 @@ export function ArrayField<
  * @param form The form to listen on.
  * @param name The form's field to listen to.
  */
-export function Listener<T extends object, K extends keyof T, State extends DefaultState = DefaultState, Error extends string = DefaultError>(props: {
-    form: FormState<T, State, Error>;
-    name: K;
-    render?: (props: {
-        value: T[K];
-        defaultValue: T[K];
-        setValue: (value: T[K]) => void;
-        dirty: DirtyMap<T>[K];
-        error: ErrorMap<T, Error>[K];
-        state: State;
-        form: FormState<T, State, Error>;
-    }) => React.ReactNode;
-}) {
+export function Listener<
+    T extends object,
+    K extends keyof T,
+    State extends DefaultState = DefaultState,
+    Error extends DefaultError = DefaultError
+>(props: { form: FormState<T, State, Error>; name: K; render?: (props: FormField<T, K, State, Error>) => React.ReactNode }) {
     const l = useListener(props.form, props.name);
-    return <React.Fragment>{props.render?.(l) ?? l.value + ""}</React.Fragment>;
+    return <React.Fragment>{props.render?.(l) ?? String(l.value)}</React.Fragment>;
 }
 
 /**
@@ -68,12 +61,12 @@ export function Listener<T extends object, K extends keyof T, State extends Defa
  * You shouldn't use this hook in large components, as it rerenders each time something changes. Use the wrapper <AnyListener /> instead.
  * @param form The form that was passed in.
  */
-export function AnyListener<T extends object, State = DefaultState, Error extends string = DefaultError>(props: {
+export function AnyListener<T extends object, State = DefaultState, Error extends DefaultError = DefaultError>(props: {
     form: FormState<T, State, Error>;
     render?: (props: FormState<T, State, Error>) => React.ReactNode;
 }) {
     const l = useAnyListener(props.form);
-    return <React.Fragment>{props.render?.(l) ?? l.values + ""}</React.Fragment>;
+    return <React.Fragment>{props.render?.(l) ?? JSON.stringify(l.values, null, 2)}</React.Fragment>;
 }
 
 /**
@@ -87,17 +80,17 @@ export function ObjectField<
     T extends FieldsOfType<any, object>,
     K extends KeysOfType<T, object>,
     ParentState = DefaultState,
-    ParentError extends string = DefaultError
+    ParentError extends DefaultError = DefaultError
 >(props: {
     form: FormState<T, ParentState, ParentError>; // Use the parent prop instead of the form prop when using ObjectField.
     name: K;
-    render?: (props: ChildFormState<T, K, ParentState, ParentError>) => React.ReactNode;
+    render: (props: ChildFormState<T, K, ParentState, ParentError>) => React.ReactNode;
 }) {
     const childForm = useObjectField(props.form, props.name);
     // Causes a rerender when the object value becomes null/undefined
     useTruthyListener(props.form, props.name);
 
     // Do not render anything if the parent field is falsly
     if (!props.form.values[props.name]) return null;
-    return <React.Fragment>{props.render?.(childForm)}</React.Fragment>;
+    return <React.Fragment>{props.render(childForm)}</React.Fragment>;
 }