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