Merge deb2481 into aec4cae

.changeset/honest-roses-float.md

@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+feat(useForm): add ignoreFields config

.github/workflows/codeql-analysis.yml

@@ -15,7 +15,7 @@ on:
     #        │  │ │ │ │
     #        │  │ │ │ │
     #        *  * * * *
-    - cron: "0 12 * * 0"
+    - cron: "0 6 * * 0"
 
 jobs:
   analyze:

examples/src/BasicForm/index.tsx

@@ -73,6 +73,7 @@ export default (): JSX.Element => {
     initialValues,
     // validateOnChange: false,
     // validateOnBlur: false,
+    ignoreFields: ["text.nest", "number"],
     // validate: async (values, set) => {
     //   let errors: any = { text: { nest: "" } };
 

src/index.ts

@@ -29,6 +29,7 @@ import {
 import useLatest from "./useLatest";
 import useFormState from "./useFormState";
 import {
+  arrayToObject,
   deepMerge,
   get,
   isArray,
@@ -92,6 +93,7 @@ export function useForm<V extends FormValues = FormValues>({
   validate,
   validateOnChange = true,
   validateOnBlur = true,
+  ignoreFields = [],
   onReset,
   onSubmit,
   onError,
@@ -104,7 +106,7 @@ export function useForm<V extends FormValues = FormValues>({
   const onResetRef = useLatest(onReset);
   const onSubmitRef = useLatest(onSubmit);
   const onErrorRef = useLatest(onError);
-  const controllersRef = useRef<UsedRef>({});
+  const ignoreFieldsRef = useRef<UsedRef>(arrayToObject(ignoreFields));
   const changedFieldRef = useRef<string>();
   const {
     stateRef,
@@ -114,7 +116,7 @@ export function useForm<V extends FormValues = FormValues>({
   } = useFormState<V>(initialValues, debug);
 
   const setDomValue = useCallback((name: string, value: any) => {
-    if (controllersRef.current[name] || !fieldsRef.current[name]) return;
+    if (ignoreFieldsRef.current[name] || !fieldsRef.current[name]) return;
 
     const { field, options } = fieldsRef.current[name];
 
@@ -157,7 +159,7 @@ export function useForm<V extends FormValues = FormValues>({
 
   const validateRef = useCallback<ValidateRef<V>>(
     (validate) => (field) => {
-      if (field?.name && !controllersRef.current[field.name])
+      if (field?.name && !ignoreFieldsRef.current[field.name])
         fieldValidatorsRef.current[field.name] = validate;
     },
     []
@@ -540,7 +542,7 @@ export function useForm<V extends FormValues = FormValues>({
         return {};
       }
 
-      controllersRef.current[name] = true;
+      ignoreFieldsRef.current[name] = true;
       if (validate) fieldValidatorsRef.current[name] = validate;
 
       return {
@@ -607,7 +609,7 @@ export function useForm<V extends FormValues = FormValues>({
         return;
       }
 
-      if (fieldsRef.current[name] && !controllersRef.current[name])
+      if (fieldsRef.current[name] && !ignoreFieldsRef.current[name])
         handleFieldChange(field);
     };
 
@@ -620,7 +622,7 @@ export function useForm<V extends FormValues = FormValues>({
 
       const { name } = target as FieldElement;
 
-      if (fieldsRef.current[name] && !controllersRef.current[name])
+      if (fieldsRef.current[name] && !ignoreFieldsRef.current[name])
         setFieldTouchedIfNeeded(name);
     };
 

src/types/index.ts

@@ -183,6 +183,7 @@ export interface Config<V> {
   validate?: FormValidator<V>;
   validateOnChange?: boolean;
   validateOnBlur?: boolean;
+  ignoreFields?: string[];
   onReset?: OnReset<V>;
   onSubmit?: OnSubmit<V>;
   onError?: OnError<V>;

src/types/react-cool-form.d.ts

@@ -154,6 +154,7 @@ declare module "react-cool-form" {
     validate?: FormValidator<V>;
     validateOnChange?: boolean;
     validateOnBlur?: boolean;
+    ignoreFields?: string[];
     onReset?: OnReset<V>;
     onSubmit?: OnSubmit<V>;
     onError?: OnError<V>;

src/useFormState.ts

@@ -10,7 +10,7 @@ import {
   UsedRef,
 } from "./types";
 import useLatest from "./useLatest";
-import { get, set, isEmptyObject } from "./utils";
+import { get, isEmptyObject, set } from "./utils";
 
 export default <V>(
   initialValues: V,

src/utils.ts

@@ -6,6 +6,12 @@ export const warn = (...args: any[]): void => {
   if (__DEV__) console.warn(...args);
 };
 
+export const arrayToObject = (arr: any[]): Record<string, boolean> =>
+  arr.reduce((obj, key) => {
+    obj[key] = true;
+    return obj;
+  }, {});
+
 export const isNumberField = (field: FieldElement): field is HTMLInputElement =>
   field.type === "number";