@refinedev/react-hook-form 4.8.14 → 4.8.15

package/src/useStepsForm/index.spec.ts

@@ -6,127 +6,123 @@ import { useStepsForm } from "./";
 import * as UseForm from "../useForm";
 
 describe("useStepsForm Hook", () => {
-    it("'defaultStep' props should set the initial value of 'currentStep'", async () => {
-        const { result } = renderHook(
-            () =>
-                useStepsForm({
-                    stepsProps: {
-                        defaultStep: 4,
-                    },
-                }),
-            {
-                wrapper: TestWrapper({}),
-            },
-        );
-        expect(result.current.steps.currentStep).toBe(4);
-    });
+  it("'defaultStep' props should set the initial value of 'currentStep'", async () => {
+    const { result } = renderHook(
+      () =>
+        useStepsForm({
+          stepsProps: {
+            defaultStep: 4,
+          },
+        }),
+      {
+        wrapper: TestWrapper({}),
+      },
+    );
+    expect(result.current.steps.currentStep).toBe(4);
+  });
 
-    it("'goToStep' should update the current step state", async () => {
-        const { result } = renderHook(() => useStepsForm({}), {
-            wrapper: TestWrapper({}),
-        });
-        await act(async () => {
-            result.current.steps.gotoStep(1);
-        });
-        expect(result.current.steps.currentStep).toBe(1);
+  it("'goToStep' should update the current step state", async () => {
+    const { result } = renderHook(() => useStepsForm({}), {
+      wrapper: TestWrapper({}),
     });
+    await act(async () => {
+      result.current.steps.gotoStep(1);
+    });
+    expect(result.current.steps.currentStep).toBe(1);
+  });
 
-    it("'currentStep' should be 0 when the 'goToSteps' params less than zero", async () => {
-        const { result } = renderHook(() => useStepsForm({}), {
-            wrapper: TestWrapper({}),
-        });
-        await act(async () => {
-            result.current.steps.gotoStep(-7);
-        });
-        expect(result.current.steps.currentStep).toBe(0);
+  it("'currentStep' should be 0 when the 'goToSteps' params less than zero", async () => {
+    const { result } = renderHook(() => useStepsForm({}), {
+      wrapper: TestWrapper({}),
+    });
+    await act(async () => {
+      result.current.steps.gotoStep(-7);
     });
+    expect(result.current.steps.currentStep).toBe(0);
+  });
 
-    it("'currentStep' should be 0 when the 'goToSteps' params less than zero", async () => {
-        const { result } = renderHook(() => useStepsForm({}), {
-            wrapper: TestWrapper({}),
-        });
-        await act(async () => {
-            result.current.steps.gotoStep(-7);
-        });
-        expect(result.current.steps.currentStep).toBe(0);
+  it("'currentStep' should be 0 when the 'goToSteps' params less than zero", async () => {
+    const { result } = renderHook(() => useStepsForm({}), {
+      wrapper: TestWrapper({}),
     });
+    await act(async () => {
+      result.current.steps.gotoStep(-7);
+    });
+    expect(result.current.steps.currentStep).toBe(0);
+  });
 
-    it("'currentStep' should not update when the 'goToSteps' params equal to the 'currentStep'", async () => {
-        const { result } = renderHook(
-            () =>
-                useStepsForm({
-                    stepsProps: {
-                        defaultStep: 2,
-                    },
-                }),
-            {
-                wrapper: TestWrapper({}),
-            },
-        );
-        await act(async () => {
-            result.current.steps.gotoStep(2);
-        });
-        expect(result.current.steps.currentStep).toBe(2);
+  it("'currentStep' should not update when the 'goToSteps' params equal to the 'currentStep'", async () => {
+    const { result } = renderHook(
+      () =>
+        useStepsForm({
+          stepsProps: {
+            defaultStep: 2,
+          },
+        }),
+      {
+        wrapper: TestWrapper({}),
+      },
+    );
+    await act(async () => {
+      result.current.steps.gotoStep(2);
     });
+    expect(result.current.steps.currentStep).toBe(2);
+  });
 
-    it.each([
-        {
-            mockDirtyFields: {},
-        },
-        {
-            mockDirtyFields: { field2: true },
-        },
-    ])(
-        "should call setValue with correct data according to dirty fields",
-        async (scenario) => {
-            const mockData = { field1: "field1", field2: "field2" };
-            const mockDirtyFields = scenario.mockDirtyFields;
-            const setValue = jest.fn();
-            const getValues = () => mockData;
+  it.each([
+    {
+      mockDirtyFields: {},
+    },
+    {
+      mockDirtyFields: { field2: true },
+    },
+  ])(
+    "should call setValue with correct data according to dirty fields",
+    async (scenario) => {
+      const mockData = { field1: "field1", field2: "field2" };
+      const mockDirtyFields = scenario.mockDirtyFields;
+      const setValue = jest.fn();
+      const getValues = () => mockData;
 
-            (jest.spyOn(UseForm, "useForm") as jest.Mock).mockReturnValueOnce({
-                setValue,
-                getValues,
-                formState: { dirtyFields: mockDirtyFields },
-                refineCore: { queryResult: { data: { data: mockData } } },
-            });
+      (jest.spyOn(UseForm, "useForm") as jest.Mock).mockReturnValueOnce({
+        setValue,
+        getValues,
+        formState: { dirtyFields: mockDirtyFields },
+        refineCore: { queryResult: { data: { data: mockData } } },
+      });
 
-            const { result } = renderHook(
-                () =>
-                    useStepsForm({
-                        stepsProps: {
-                            defaultStep: 1,
-                        },
-                    }),
-                {
-                    wrapper: TestWrapper({}),
-                },
-            );
+      const { result } = renderHook(
+        () =>
+          useStepsForm({
+            stepsProps: {
+              defaultStep: 1,
+            },
+          }),
+        {
+          wrapper: TestWrapper({}),
+        },
+      );
 
-            await waitFor(() => {
-                expect(!result.current.refineCore.formLoading).toBeTruthy();
-            });
+      await waitFor(() => {
+        expect(!result.current.refineCore.formLoading).toBeTruthy();
+      });
 
-            expect(result.current.refineCore.queryResult?.data?.data).toEqual(
-                mockData,
-            );
+      expect(result.current.refineCore.queryResult?.data?.data).toEqual(
+        mockData,
+      );
 
-            const setValueCallTimes =
-                Object.keys(mockData).length -
-                Object.keys(mockDirtyFields).length;
-            expect(setValue).toHaveBeenCalledTimes(setValueCallTimes);
+      const setValueCallTimes =
+        Object.keys(mockData).length - Object.keys(mockDirtyFields).length;
+      expect(setValue).toHaveBeenCalledTimes(setValueCallTimes);
 
-            Object.keys(mockData).forEach((key) => {
-                const keyName = key as keyof typeof mockData &
-                    keyof typeof mockDirtyFields;
+      Object.keys(mockData).forEach((key) => {
+        const keyName = key as keyof typeof mockData &
+          keyof typeof mockDirtyFields;
 
-                if (!mockDirtyFields[keyName]) {
-                    expect(setValue).toHaveBeenCalledWith(
-                        key,
-                        mockData[keyName],
-                    );
-                }
-            });
-        },
-    );
+        if (!mockDirtyFields[keyName]) {
+          expect(setValue).toHaveBeenCalledWith(key, mockData[keyName]);
+        }
+      });
+    },
+  );
 });

package/src/useStepsForm/index.ts

@@ -5,46 +5,46 @@ import { BaseRecord, HttpError } from "@refinedev/core";
 import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
 
 export type UseStepsFormReturnType<
-    TQueryFnData extends BaseRecord = BaseRecord,
-    TError extends HttpError = HttpError,
-    TVariables extends FieldValues = FieldValues,
-    TContext extends object = {},
-    TData extends BaseRecord = TQueryFnData,
-    TResponse extends BaseRecord = TData,
-    TResponseError extends HttpError = TError,
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TVariables extends FieldValues = FieldValues,
+  TContext extends object = {},
+  TData extends BaseRecord = TQueryFnData,
+  TResponse extends BaseRecord = TData,
+  TResponseError extends HttpError = TError,
 > = UseFormReturnType<
-    TQueryFnData,
-    TError,
-    TVariables,
-    TContext,
-    TData,
-    TResponse,
-    TResponseError
+  TQueryFnData,
+  TError,
+  TVariables,
+  TContext,
+  TData,
+  TResponse,
+  TResponseError
 > & {
-    steps: {
-        currentStep: number;
-        gotoStep: (step: number) => void;
-    };
+  steps: {
+    currentStep: number;
+    gotoStep: (step: number) => void;
+  };
 };
 
 export type UseStepsFormProps<
-    TQueryFnData extends BaseRecord = BaseRecord,
-    TError extends HttpError = HttpError,
-    TVariables extends FieldValues = FieldValues,
-    TContext extends object = {},
-    TData extends BaseRecord = TQueryFnData,
-    TResponse extends BaseRecord = TData,
-    TResponseError extends HttpError = TError,
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TVariables extends FieldValues = FieldValues,
+  TContext extends object = {},
+  TData extends BaseRecord = TQueryFnData,
+  TResponse extends BaseRecord = TData,
+  TResponseError extends HttpError = TError,
 > = UseFormProps<
-    TQueryFnData,
-    TError,
-    TVariables,
-    TContext,
-    TData,
-    TResponse,
-    TResponseError
+  TQueryFnData,
+  TError,
+  TVariables,
+  TContext,
+  TData,
+  TResponse,
+  TResponseError
 > & {
-    /**
+  /**
      * @description Configuration object for the steps.
      * `defaultStep`: Allows you to set the initial step.
      * 
@@ -55,32 +55,44 @@ export type UseStepsFormProps<
       }`
      * @default `defaultStep = 0` `isBackValidate = false`
      */
-    stepsProps?: {
-        defaultStep?: number;
-        isBackValidate?: boolean;
-    };
+  stepsProps?: {
+    defaultStep?: number;
+    isBackValidate?: boolean;
+  };
 };
 
 export const useStepsForm = <
-    TQueryFnData extends BaseRecord = BaseRecord,
-    TError extends HttpError = HttpError,
-    TVariables extends FieldValues = FieldValues,
-    TContext extends object = {},
-    TData extends BaseRecord = TQueryFnData,
-    TResponse extends BaseRecord = TData,
-    TResponseError extends HttpError = TError,
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TVariables extends FieldValues = FieldValues,
+  TContext extends object = {},
+  TData extends BaseRecord = TQueryFnData,
+  TResponse extends BaseRecord = TData,
+  TResponseError extends HttpError = TError,
 >({
-    stepsProps,
-    ...rest
+  stepsProps,
+  ...rest
 }: UseStepsFormProps<
-    TQueryFnData,
-    TError,
-    TVariables,
-    TContext,
-    TData,
-    TResponse,
-    TResponseError
+  TQueryFnData,
+  TError,
+  TVariables,
+  TContext,
+  TData,
+  TResponse,
+  TResponseError
 > = {}): UseStepsFormReturnType<
+  TQueryFnData,
+  TError,
+  TVariables,
+  TContext,
+  TData,
+  TResponse,
+  TResponseError
+> => {
+  const { defaultStep = 0, isBackValidate = false } = stepsProps ?? {};
+  const [current, setCurrent] = useState(defaultStep);
+
+  const useHookFormResult = useForm<
     TQueryFnData,
     TError,
     TVariables,
@@ -88,77 +100,65 @@ export const useStepsForm = <
     TData,
     TResponse,
     TResponseError
-> => {
-    const { defaultStep = 0, isBackValidate = false } = stepsProps ?? {};
-    const [current, setCurrent] = useState(defaultStep);
-
-    const useHookFormResult = useForm<
-        TQueryFnData,
-        TError,
-        TVariables,
-        TContext,
-        TData,
-        TResponse,
-        TResponseError
-    >({
-        ...rest,
+  >({
+    ...rest,
+  });
+
+  const {
+    trigger,
+    getValues,
+    setValue,
+    formState: { dirtyFields },
+    refineCore: { queryResult },
+  } = useHookFormResult;
+
+  useEffect(() => {
+    const data = queryResult?.data?.data;
+    if (!data) return;
+
+    const registeredFields = Object.keys(getValues());
+    Object.entries(data).forEach(([key, value]) => {
+      const name = key as Path<TVariables>;
+
+      if (registeredFields.includes(name)) {
+        if (!dirtyFields[name]) {
+          setValue(name, value);
+        }
+      }
     });
+  }, [queryResult?.data, current, setValue, getValues]);
 
-    const {
-        trigger,
-        getValues,
-        setValue,
-        formState: { dirtyFields },
-        refineCore: { queryResult },
-    } = useHookFormResult;
-
-    useEffect(() => {
-        const data = queryResult?.data?.data;
-        if (!data) return;
-
-        const registeredFields = Object.keys(getValues());
-        Object.entries(data).forEach(([key, value]) => {
-            const name = key as Path<TVariables>;
-
-            if (registeredFields.includes(name)) {
-                if (!dirtyFields[name]) {
-                    setValue(name, value);
-                }
-            }
-        });
-    }, [queryResult?.data, current, setValue, getValues]);
-
-    const go = (step: number) => {
-        let targetStep = step;
-
-        if (step < 0) {
-            targetStep = 0;
-        }
+  const go = (step: number) => {
+    let targetStep = step;
 
-        setCurrent(targetStep);
-    };
+    if (step < 0) {
+      targetStep = 0;
+    }
 
-    const gotoStep = async (step: number) => {
-        if (step === current) {
-            return;
-        }
+    setCurrent(targetStep);
+  };
 
-        if (step < current && !isBackValidate) {
-            go(step);
-            return;
-        }
+  const gotoStep = async (step: number) => {
+    if (step === current) {
+      return;
+    }
 
-        const isValid = await trigger();
-        if (isValid) {
-            go(step);
-        }
-    };
-
-    return {
-        ...useHookFormResult,
-        steps: {
-            currentStep: current,
-            gotoStep,
-        },
-    };
+    if (step < current && !isBackValidate) {
+      go(step);
+      return;
+    }
+
+    const isValid = await trigger();
+    if (isValid) {
+      go(step);
+    }
+  };
+
+  return {
+    ...useHookFormResult,
+    steps: {
+      currentStep: current,
+      gotoStep,
+    },
+  };
 };