Merge pull request #91 from wellyshen/feature/refine-reset

Feature/refine reset
wellyshen · Nov 12, 2020 · 47452ba · 47452ba
2 parents 4531319 + f9bc03e
commit 47452ba
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 80 deletions.
diff --git a/.changeset/honest-lies-think.md b/.changeset/honest-lies-think.md
@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+refactor: use reset() instead of resetStateRef()
diff --git a/examples/src/BasicForm/index.tsx b/examples/src/BasicForm/index.tsx
@@ -30,8 +30,8 @@ export interface FormValues {
 }
 
 const initialValues = {
-  text: { nest: "" },
-  controller: "",
+  text: { nest: "test" },
+  controller: "test",
   hiddenText1: "test",
   hiddenText2: "test",
   password: "test",
@@ -125,21 +125,21 @@ export default (): JSX.Element => {
   });
 
   // console.log("LOG ===> Re-render");
-  // console.log(
-  //   "LOG ===> formState: ",
-  //   getState({
-  //     // values: "values",
-  //     // touched: "touched",
-  //     // errors: "errors",
-  //     // isDirty: "isDirty",
-  //     // dirtyFields: "dirtyFields",
-  //     // isValidating: "isValidating",
-  //     // isValid: "isValid",
-  //     // isSubmitting: "isSubmitting",
-  //     // isSubmitted: "isSubmitted",
-  //     // submitCount: "submitCount",
-  //   })
-  // );
+  console.log(
+    "LOG ===> formState: ",
+    getState({
+      values: "values",
+      touched: "touched",
+      errors: "errors",
+      isDirty: "isDirty",
+      dirtyFields: "dirtyFields",
+      isValidating: "isValidating",
+      isValid: "isValid",
+      isSubmitting: "isSubmitting",
+      isSubmitted: "isSubmitted",
+      submitCount: "submitCount",
+    })
+  );
 
   useEffect(() => {
     // validateField("text.nest");
@@ -321,7 +321,7 @@ export default (): JSX.Element => {
           Validate
         </button>
         <button type="button" onClick={handleResetClick}>
-          Reset Method
+          Reset
         </button>
         <button type="button" onClick={handleSubmit}>
           My Submit

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -27,22 +27,13 @@ export interface SetStateRef {
   (path: string, value?: any): void;
 }
 
-export interface ResetStateRef<V> {
-  (
-    values: V | undefined,
-    exclude: (keyof FormState<V>)[],
-    callback: (nextValues: V) => void
-  ): void;
-}
-
 export interface SetUsedStateRef {
   (path: string): void;
 }
 
 export interface FormStateReturn<V> {
   stateRef: StateRef<V>;
   setStateRef: SetStateRef;
-  resetStateRef: ResetStateRef<V>;
   setUsedStateRef: SetUsedStateRef;
 }
 

diff --git a/src/useForm.ts b/src/useForm.ts
@@ -12,6 +12,7 @@ import {
   FieldElement,
   Fields,
   FieldValidator,
+  FormState,
   FormValues,
   GetState,
   Reset,
@@ -111,8 +112,20 @@ const useForm = <V extends FormValues = FormValues>({
   const onErrorRef = useLatest(onError);
   const ignoreFieldsRef = useRef<UsedRef>(arrayToObject(ignoreFields));
   const changedFieldRef = useRef<string>();
-  const { stateRef, setStateRef, resetStateRef, setUsedStateRef } = useState<V>(
-    initialValues,
+  const initialStateRef = useRef<FormState<V>>({
+    values: initialValues,
+    touched: {},
+    errors: {},
+    isDirty: false,
+    dirtyFields: {},
+    isValidating: false,
+    isValid: true,
+    isSubmitting: false,
+    isSubmitted: false,
+    submitCount: 0,
+  });
+  const { stateRef, setStateRef, setUsedStateRef } = useState<V>(
+    initialStateRef.current,
     debug
   );
 
@@ -447,18 +460,30 @@ const useForm = <V extends FormValues = FormValues>({
       if (e?.preventDefault) e.preventDefault();
       if (e?.stopPropagation) e.stopPropagation();
 
-      resetStateRef(
-        isFunction(values)
-          ? values(stateRef.current.values)
-          : values || undefined,
-        exclude || [],
-        (nextValues) => setAllDomsValue(nextValues)
-      );
+      const state = { ...stateRef.current };
+      const skip = arrayToObject(exclude || []);
+
+      Object.keys(stateRef.current).forEach((key) => {
+        if (skip[key]) return;
+
+        if (key === "values") {
+          values = isFunction(values)
+            ? values(stateRef.current.values)
+            : values || initialStateRef.current.values;
+
+          state[key] = values;
+          setAllDomsValue(values);
+        } else {
+          // @ts-expect-error
+          state[key] = initialStateRef.current[key];
+        }
+      });
+
+      setStateRef("", state);
 
-      if (onResetRef.current)
-        onResetRef.current(stateRef.current.values, getOptions(), e);
+      if (onResetRef.current) onResetRef.current(state.values, getOptions(), e);
     },
-    [getOptions, onResetRef, resetStateRef, setAllDomsValue, stateRef]
+    [getOptions, onResetRef, setAllDomsValue, setStateRef, stateRef]
   );
 
   const submit = useCallback<Submit<V>>(

diff --git a/src/useState.ts b/src/useState.ts
@@ -5,49 +5,44 @@ import {
   Debug,
   FormState,
   FormStateReturn,
-  ResetStateRef,
   SetStateRef,
   UsedRef,
 } from "./types";
 import useLatest from "./useLatest";
 import { get, isEmptyObject, set } from "./utils";
 
 export default <V>(
-  initialValues: V,
+  initialState: FormState<V>,
   onChange?: Debug<V>
 ): FormStateReturn<V> => {
   const [, forceUpdate] = useReducer((c) => c + 1, 0);
-  const initialStateRef = useRef<FormState<V>>({
-    values: initialValues,
-    touched: {},
-    errors: {},
-    isDirty: false,
-    dirtyFields: {},
-    isValidating: false,
-    isValid: true,
-    isSubmitting: false,
-    isSubmitted: false,
-    submitCount: 0,
-  });
+  const initialStateRef = useRef(initialState);
   const stateRef = useRef(initialStateRef.current);
   const usedStateRef = useRef<UsedRef>({});
   const onChangeRef = useLatest(onChange);
 
   const setStateRef = useCallback<SetStateRef>(
     (path, value) => {
       const key = path.split(".")[0];
-      const shouldUpdate =
-        key === "values" || !isEqual(get(stateRef.current, path), value);
 
-      if (shouldUpdate) {
-        const nextState = set(stateRef.current, path, value, true);
+      if (!key) {
+        if (!isEqual(stateRef.current, value)) {
+          stateRef.current = value;
+          forceUpdate();
+        }
+
+        return;
+      }
+
+      if (key === "values" || !isEqual(get(stateRef.current, path), value)) {
+        const state = set(stateRef.current, path, value, true);
         const {
           values,
           errors,
           isDirty: prevIsDirty,
           isValid: prevIsValid,
-        } = nextState;
-        let { submitCount: prevSubmitCount } = nextState;
+        } = state;
+        let { submitCount: prevSubmitCount } = state;
         const isDirty =
           key === "values"
             ? !isEqual(values, initialStateRef.current.values)
@@ -58,7 +53,7 @@ export default <V>(
             ? (prevSubmitCount += 1)
             : prevSubmitCount;
 
-        stateRef.current = { ...nextState, isDirty, isValid, submitCount };
+        stateRef.current = { ...state, isDirty, isValid, submitCount };
 
         if (onChangeRef.current) onChangeRef.current(stateRef.current);
 
@@ -75,28 +70,9 @@ export default <V>(
     [onChangeRef]
   );
 
-  const resetStateRef = useCallback<ResetStateRef<V>>(
-    (values = initialStateRef.current.values, exclude, callback) => {
-      Object.keys(initialStateRef.current)
-        .filter((key) => !exclude.includes(key as keyof FormState<V>))
-        .forEach((key) => {
-          if (key === "values") {
-            stateRef.current[key] = values;
-            callback(values);
-          } else {
-            // @ts-expect-error
-            stateRef.current[key] = initialStateRef.current[key];
-          }
-        });
-
-      forceUpdate();
-    },
-    []
-  );
-
   const setUsedStateRef = useCallback((path: string) => {
     usedStateRef.current[path] = true;
   }, []);
 
-  return { stateRef, setStateRef, resetStateRef, setUsedStateRef };
+  return { stateRef, setStateRef, setUsedStateRef };
 };