Pass form to Field child

Author: CodeStix

Todo.md

@@ -9,3 +9,4 @@
 -   Rename `setDefaultValues` to `setAllValues`
 -   Let `comparePrimitiveObject` compare deep objects too
 -   Render JSON.stringify by default when using AnyListener without renderer
+-   Field on blur

src/Components.tsx

@@ -45,7 +45,7 @@ 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 = DefaultState, Error extends string = DefaultError>(props: {
+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: {

src/Field.tsx

@@ -1,5 +1,5 @@
 import { FormState } from "./form";
-import React, { useCallback } from "react";
+import React from "react";
 import { useListener } from "./hooks";
 
 export type ElementProps<C extends React.FunctionComponent<any> | keyof JSX.IntrinsicElements> = C extends React.FunctionComponent<infer P>
@@ -46,7 +46,9 @@ export type FieldProps<T extends object, K extends keyof T, C> = {
 };
 
 export function Field<T extends object, K extends keyof T, C extends React.FunctionComponent<any> | keyof JSX.IntrinsicElements = "input">(
-    props: FieldProps<T, K, C> & Omit<ElementProps<C>, "value" | "onChange" | keyof FieldProps<T, K, C> | keyof SerializeProps> & SerializeProps<T[K]>
+    props: FieldProps<T, K, C> &
+        Omit<ElementProps<C>, "value" | "checked" | "onChange" | "field" | keyof FieldProps<T, K, C> | keyof SerializeProps> &
+        SerializeProps<T[K]>
 ) {
     const { form, as = "input", serializer, dateAsNumber, setNullOnUncheck, setUndefinedOnUncheck, deserializer, hideWhenNull, ...rest } = props;
     const serializeProps = {
@@ -56,23 +58,21 @@ export function Field<T extends object, K extends keyof T, C extends React.Funct
         type: props.type,
         value: props.value
     };
-    const { value, setValue, state } = useListener(form, props.name);
-    const onChange = useCallback(
-        (ev: any) => {
-            let v = "target" in ev ? (["checkbox", "radio"].includes(props.type!) ? ev.target.checked : ev.target.value) : ev;
-            if (typeof v === "string" || typeof v === "boolean") setValue((deserializer ?? defaultDeserializer)(v, value, serializeProps));
-            else setValue(v);
-        },
-        [setValue, props.type]
-    );
-    if (hideWhenNull && (value === undefined || value === null)) return null;
-    let v = (serializer ?? defaultSerializer)(value, serializeProps);
+    const field = useListener(form, props.name);
+    if (hideWhenNull && (field.value === undefined || field.value === null)) return null;
+    let v = (serializer ?? defaultSerializer)(field.value, serializeProps);
     return React.createElement(as, {
         ...rest,
         checked: typeof v === "boolean" ? v : undefined,
         value: typeof v === "boolean" ? undefined : v,
-        disabled: state.isSubmitting,
-        onChange
+        disabled: field.state.isSubmitting || props.disabled,
+        field,
+        onChange: (ev: any) => {
+            let v = "target" in ev ? (["checkbox", "radio"].includes(props.type!) ? ev.target.checked : ev.target.value) : ev;
+            if (typeof v === "string" || typeof v === "boolean")
+                field.setValue((deserializer ?? defaultDeserializer)(v, field.value, serializeProps));
+            else field.setValue(v);
+        }
     });
 }
 

src/FieldError.tsx

@@ -7,8 +7,8 @@ export function FieldError<
     T extends object,
     K extends keyof T,
     C extends React.FunctionComponent<any> | keyof JSX.IntrinsicElements,
-    Error extends string = DefaultError,
-    State = DefaultState
+    Error extends DefaultError = DefaultError,
+    State extends DefaultState = DefaultState
 >(
     props: {
         /**

src/hooks.ts

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState, useCallback } from "react";
-import { DefaultState, DefaultError, FormState, ChildFormState, Validator, FieldsOfType, KeysOfType } from "./form";
+import { DefaultState, DefaultError, FormState, ChildFormState, Validator, FieldsOfType, KeysOfType, ErrorType } from "./form";
 
 /**
  * Creates a new root form.
@@ -71,16 +71,31 @@ export function useObjectField<
     return c.current;
 }
 
+export interface FormField<
+    T extends object = any,
+    K extends keyof T = never,
+    State extends DefaultState = DefaultState,
+    Error extends string = DefaultError
+> {
+    value: T[K];
+    defaultValue: T[K];
+    setValue: (value: T[K]) => void;
+    dirty: boolean;
+    error: ErrorType<T[K], Error> | undefined;
+    state: State;
+    form: FormState<T, State, Error>;
+}
+
 /**
  * Listen for changes on a form's field. Behaves like useState.
  * You shouldn't use this hook in large components, as it rerenders each time something changes. Use the wrapper <Listener /> instead.
  * @param form The form to listen on.
  * @param name The form's field to listen to.
  */
-export function useListener<T extends object, K extends keyof T, State = DefaultState, Error extends string = DefaultError>(
+export function useListener<T extends object, K extends keyof T, State extends DefaultState = DefaultState, Error extends string = DefaultError>(
     form: FormState<T, State, Error>,
     name: K
-) {
+): FormField<T, K, State, Error> {
     const [, setRender] = useState(0);
 
     useEffect(() => {
@@ -94,7 +109,7 @@ export function useListener<T extends object, K extends keyof T, State = Default
         value: form.values[name],
         defaultValue: form.defaultValues[name],
         setValue: (value: T[K]) => form.setValue(name, value),
-        dirty: form.dirtyMap[name],
+        dirty: form.dirtyMap[name] ?? false,
         error: form.errorMap[name],
         state: form.state,
         form