Merge pull request #74 from wellyshen/feature/ignore-fields

feat(useForm): add ignoreFields config

.changeset/honest-roses-float.md

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

.github/workflows/codeql-analysis.yml

@@ -7,15 +7,15 @@ on:
     branches: [master]
   schedule:
     #        ┌───────────── minute (0 - 59)
-    #        │  ┌───────────── hour (0 - 23)
-    #        │  │ ┌───────────── day of the month (1 - 31)
-    #        │  │ │ ┌───────────── month (1 - 12 or JAN-DEC)
-    #        │  │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
-    #        │  │ │ │ │
-    #        │  │ │ │ │
-    #        │  │ │ │ │
-    #        *  * * * *
-    - cron: "0 12 * * 0"
+    #        │ ┌───────────── hour (0 - 23)
+    #        │ │ ┌───────────── day of the month (1 - 31)
+    #        │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)
+    #        │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
+    #        │ │ │ │ │
+    #        │ │ │ │ │
+    #        │ │ │ │ │
+    #        * * * * *
+    - 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

@@ -50,6 +50,12 @@ import {
 const useUniversalLayoutEffect =
   typeof window === "undefined" ? useEffect : useLayoutEffect;
 
+const arrayToObject = (arr: any[]): Record<string, boolean> =>
+  arr.reduce((obj, key) => {
+    obj[key] = true;
+    return obj;
+  }, {});
+
 const isFieldElement = ({ tagName }: HTMLElement) =>
   /INPUT|TEXTAREA|SELECT/.test(tagName);
 
@@ -92,6 +98,7 @@ export function useForm<V extends FormValues = FormValues>({
   validate,
   validateOnChange = true,
   validateOnBlur = true,
+  ignoreFields = [],
   onReset,
   onSubmit,
   onError,
@@ -104,7 +111,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 +121,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 +164,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 +547,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 +614,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 +627,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,