@refinedev/react-hook-form 4.0.0

package/src/useModalForm/index.ts

@@ -0,0 +1,241 @@
+import { useCallback } from "react";
+import {
+    BaseKey,
+    BaseRecord,
+    FormWithSyncWithLocationParams,
+    HttpError,
+    useGo,
+    useModal,
+    useParsed,
+    useResource,
+    userFriendlyResourceName,
+    useTranslate,
+    useWarnAboutChange,
+} from "@refinedev/core";
+import { FieldValues } from "react-hook-form";
+
+import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
+import React from "react";
+
+export type UseModalFormReturnType<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables extends FieldValues = FieldValues,
+    TContext extends object = {},
+> = UseFormReturnType<TData, TError, TVariables, TContext> & {
+    modal: {
+        submit: (values: TVariables) => void;
+        close: () => void;
+        show: (id?: BaseKey) => void;
+        visible: boolean;
+        title: string;
+    };
+};
+
+export type UseModalFormProps<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables extends FieldValues = FieldValues,
+    TContext extends object = {},
+> = UseFormProps<TData, TError, TVariables, TContext> & {
+    /**
+     * @description Configuration object for the modal.
+     * `defaultVisible`: Initial visibility state of the modal.
+     * 
+     * `autoSubmitClose`: Whether the form should be submitted when the modal is closed.
+     * 
+     * `autoResetForm`: Whether the form should be reset when the form is submitted.
+     * @type `{
+      defaultVisible?: boolean;
+      autoSubmitClose?: boolean;
+      autoResetForm?: boolean;
+      }`
+     * @default `defaultVisible = false` `autoSubmitClose = true` `autoResetForm = true`
+     */
+    modalProps?: {
+        defaultVisible?: boolean;
+        autoSubmitClose?: boolean;
+        autoResetForm?: boolean;
+    };
+} & FormWithSyncWithLocationParams;
+
+export const useModalForm = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables extends FieldValues = FieldValues,
+    TContext extends object = {},
+>({
+    modalProps,
+    refineCoreProps,
+    syncWithLocation,
+    ...rest
+}: UseModalFormProps<
+    TData,
+    TError,
+    TVariables,
+    TContext
+> = {}): UseModalFormReturnType<TData, TError, TVariables, TContext> => {
+    const initiallySynced = React.useRef(false);
+
+    const translate = useTranslate();
+
+    const { resource: resourceProp, action: actionProp } =
+        refineCoreProps ?? {};
+
+    const { resource, action: actionFromParams } = useResource(resourceProp);
+
+    const parsed = useParsed();
+    const go = useGo();
+
+    const action = actionProp ?? actionFromParams ?? "";
+
+    const syncingId =
+        typeof syncWithLocation === "object" && syncWithLocation.syncId;
+
+    const syncWithLocationKey =
+        typeof syncWithLocation === "object" && "key" in syncWithLocation
+            ? syncWithLocation.key
+            : resource && action && syncWithLocation
+            ? `modal-${resource?.identifier ?? resource?.name}-${action}`
+            : undefined;
+
+    const {
+        defaultVisible = false,
+        autoSubmitClose = true,
+        autoResetForm = true,
+    } = modalProps ?? {};
+
+    const useHookFormResult = useForm<TData, TError, TVariables, TContext>({
+        refineCoreProps,
+        ...rest,
+    });
+
+    const {
+        reset,
+        refineCore: { onFinish, id, setId },
+        saveButtonProps,
+        handleSubmit,
+    } = useHookFormResult;
+
+    const { visible, show, close } = useModal({
+        defaultVisible,
+    });
+
+    React.useEffect(() => {
+        if (initiallySynced.current === false && syncWithLocationKey) {
+            const openStatus = parsed?.params?.[syncWithLocationKey]?.open;
+            if (typeof openStatus === "boolean") {
+                if (openStatus) {
+                    show();
+                }
+            } else if (typeof openStatus === "string") {
+                if (openStatus === "true") {
+                    show();
+                }
+            }
+
+            if (syncingId) {
+                const idFromParams = parsed?.params?.[syncWithLocationKey]?.id;
+                if (idFromParams) {
+                    setId?.(idFromParams);
+                }
+            }
+
+            initiallySynced.current = true;
+        }
+    }, [syncWithLocationKey, parsed, syncingId, setId]);
+
+    React.useEffect(() => {
+        if (initiallySynced.current === true) {
+            if (visible && syncWithLocationKey) {
+                go({
+                    query: {
+                        [syncWithLocationKey]: {
+                            ...parsed?.params?.[syncWithLocationKey],
+                            open: true,
+                            ...(syncingId && id && { id }),
+                        },
+                    },
+                    options: { keepQuery: true },
+                    type: "replace",
+                });
+            } else if (syncWithLocationKey && !visible) {
+                go({
+                    query: {
+                        [syncWithLocationKey]: undefined,
+                    },
+                    options: { keepQuery: true },
+                    type: "replace",
+                });
+            }
+        }
+    }, [id, visible, show, syncWithLocationKey, syncingId]);
+
+    const submit = async (values: TVariables) => {
+        await onFinish(values);
+
+        if (autoSubmitClose) {
+            close();
+        }
+
+        if (autoResetForm) {
+            reset();
+        }
+    };
+
+    const { warnWhen, setWarnWhen } = useWarnAboutChange();
+    const handleClose = useCallback(() => {
+        if (warnWhen) {
+            const warnWhenConfirm = window.confirm(
+                translate(
+                    "warnWhenUnsavedChanges",
+                    "Are you sure you want to leave? You have unsaved changes.",
+                ),
+            );
+
+            if (warnWhenConfirm) {
+                setWarnWhen(false);
+            } else {
+                return;
+            }
+        }
+
+        setId?.(undefined);
+        close();
+    }, [warnWhen]);
+
+    const handleShow = useCallback((id?: BaseKey) => {
+        setId?.(id);
+
+        show();
+    }, []);
+
+    const title = translate(
+        `${resource?.name}.titles.${actionProp}`,
+        undefined,
+        `${userFriendlyResourceName(
+            `${actionProp} ${
+                resource?.meta?.label ??
+                resource?.options?.label ??
+                resource?.label ??
+                resource?.name
+            }`,
+            "singular",
+        )}`,
+    );
+
+    return {
+        modal: {
+            submit,
+            close: handleClose,
+            show: handleShow,
+            visible,
+            title,
+        },
+        ...useHookFormResult,
+        saveButtonProps: {
+            ...saveButtonProps,
+            onClick: (e) => handleSubmit(submit)(e),
+        },
+    };
+};

package/src/useStepsForm/index.spec.ts

@@ -0,0 +1,80 @@
+import { renderHook } from "@testing-library/react";
+import { act } from "react-dom/test-utils";
+
+import { TestWrapper } from "../../test";
+
+import { useStepsForm } from "./";
+
+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("'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 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);
+    });
+});

package/src/useStepsForm/index.ts

@@ -0,0 +1,124 @@
+import { useEffect, useState } from "react";
+import { FieldValues } from "react-hook-form";
+import { BaseRecord, HttpError } from "@refinedev/core";
+
+import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
+
+export type UseStepsFormReturnType<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables extends FieldValues = FieldValues,
+    TContext extends object = {},
+> = UseFormReturnType<TData, TError, TVariables, TContext> & {
+    steps: {
+        currentStep: number;
+        gotoStep: (step: number) => void;
+    };
+};
+
+export type UseStepsFormProps<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables extends FieldValues = FieldValues,
+    TContext extends object = {},
+> = UseFormProps<TData, TError, TVariables, TContext> & {
+    /**
+     * @description Configuration object for the steps.
+     * `defaultStep`: Allows you to set the initial step.
+     * 
+     * `isBackValidate`: Whether to validation the current step when going back.
+     * @type `{
+      defaultStep?: number;
+      isBackValidate?: boolean;
+      }`
+     * @default `defaultStep = 0` `isBackValidate = false`
+     */
+    stepsProps?: {
+        defaultStep?: number;
+        isBackValidate?: boolean;
+    };
+};
+
+export const useStepsForm = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables extends FieldValues = FieldValues,
+    TContext extends object = {},
+>({
+    stepsProps,
+    ...rest
+}: UseStepsFormProps<
+    TData,
+    TError,
+    TVariables,
+    TContext
+> = {}): UseStepsFormReturnType<TData, TError, TVariables, TContext> => {
+    const { defaultStep = 0, isBackValidate = false } = stepsProps ?? {};
+    const [current, setCurrent] = useState(defaultStep);
+
+    const useHookFormResult = useForm({
+        ...rest,
+    });
+    const {
+        trigger,
+        getValues,
+        reset,
+        formState: { dirtyFields },
+        refineCore: { queryResult },
+    } = useHookFormResult;
+
+    useEffect(() => {
+        if (queryResult?.data) {
+            const fields: any = {};
+            const registeredFields = Object.keys(getValues());
+            Object.entries(queryResult?.data?.data).forEach(([key, value]) => {
+                if (registeredFields.includes(key)) {
+                    if (dirtyFields[key]) {
+                        fields[key] = getValues(key as any);
+                    } else {
+                        fields[key] = value;
+                    }
+                }
+            });
+
+            reset(fields as any, {
+                keepDirty: true,
+                keepValues: true,
+            });
+        }
+    }, [queryResult?.data, current]);
+
+    const go = (step: number) => {
+        let targetStep = step;
+
+        if (step < 0) {
+            targetStep = 0;
+        }
+
+        setCurrent(targetStep);
+    };
+
+    const gotoStep = async (step: number) => {
+        if (step === current) {
+            return;
+        }
+
+        if (step < current && !isBackValidate) {
+            go(step);
+            return;
+        }
+
+        const isValid = await trigger();
+        if (isValid) {
+            go(step);
+        }
+    };
+
+    return {
+        ...useHookFormResult,
+        steps: {
+            currentStep: current,
+            gotoStep,
+        },
+    };
+};