Add component to disable validation updates (#9)

.changeset/plenty-chefs-allow.md

@@ -0,0 +1,5 @@
+---
+"@radiantguild/form-contexts": minor
+---
+
+Added a `<NoValidationUpdates>` component that disables any validation update calls in its children. See `useValidationUpdate`’s docs for more info.

src/contexts/NoValidationUpdateContext.ts

@@ -0,0 +1,3 @@
+import {createContext} from "react";
+
+export const NoValidationUpdateContext = createContext<boolean>(false);

src/hooks/useInputValidity.ts

@@ -1,5 +1,6 @@
 import {useContext, useEffect} from "react";
 import {FormContext} from "~/contexts/FormContext";
+import {NoValidationUpdateContext} from "~/contexts/NoValidationUpdateContext";
 
 /**
  * Notifies the wrapping form about the validity of this input
@@ -9,11 +10,12 @@ import {FormContext} from "~/contexts/FormContext";
  */
 export default function useInputValidity(isValid: boolean) {
     const context = useContext(FormContext);
+    const disabled = useContext(NoValidationUpdateContext);
 
     useEffect(() => {
-        if (!context || isValid) return;
+        if (!context || isValid || disabled) return;
 
         context.addInvalid();
         return () => context.removeInvalid();
-    }, [context, isValid]);
+    }, [context, disabled, isValid]);
 }

src/hooks/useValidationUpdate.ts

@@ -1,18 +1,25 @@
 import {ValidateResult} from "@radiantguild/yoogi";
 import {useContext, useEffect} from "react";
 import {ValidationSetterContext} from "~/contexts/ValidationSetterContext";
+import {NoValidationUpdateContext} from "~/contexts/NoValidationUpdateContext";
 
 /**
- * Sets the validation result of this input so that `useValidation` can read it
+ * Sets the validation result of this input so that `useValidation` can read it.
+ *
+ * If a composite form field includes sub-fields with `useValidationUpdate` (or `useInputState`),
+ * the composite form field should wrap those elements in `<NoValidationUpdates>` to prevent clashing updates.
  *
  * @see ValidationProvider
  * @see useValidation
+ * @see NoValidationUpdates
  */
 export default function useValidationUpdate(result: ValidateResult | null): void {
     const setValidateResult = useContext(ValidationSetterContext);
+    const disabled = useContext(NoValidationUpdateContext);
 
     useEffect(() => {
+        if (disabled) return;
         setValidateResult?.update(result);
-    }, [setValidateResult, result]);
+    }, [disabled, setValidateResult, result]);
 }
 

src/index.ts

@@ -21,3 +21,5 @@ export {InlineGroup} from "~/providers/InlineGroup";
 export type {InlineGroupProps} from "~/providers/InlineGroup";
 export {ValidationProvider} from "~/providers/ValidationProvider";
 export type {ValidationProviderProps} from "~/providers/ValidationProvider";
+export {NoValidationUpdates} from "~/providers/NoValidationUpdates";
+export type {NoValidationUpdatesProps} from "~/providers/NoValidationUpdates";

src/providers/NoValidationUpdates.ts

@@ -0,0 +1,19 @@
+import {createElement, ReactNode} from "react";
+import {NoValidationUpdateContext} from "~/contexts/NoValidationUpdateContext";
+
+export interface NoValidationUpdatesProps {
+    children: ReactNode;
+}
+
+/**
+ * Nullifies any `useValidationUpdate` calls by child nodes
+ *
+ * @see useValidationUpdate
+ */
+export function NoValidationUpdates({children}: NoValidationUpdatesProps) {
+    return createElement(
+        NoValidationUpdateContext.Provider,
+        {value: true},
+        children
+    )
+}