@refinedev/react-hook-form 4.8.14 → 4.8.15

package/src/useModalForm/index.ts

@@ -1,17 +1,17 @@
 import { useCallback } from "react";
 import {
-    BaseKey,
-    BaseRecord,
-    FormWithSyncWithLocationParams,
-    HttpError,
-    useGo,
-    useModal,
-    useParsed,
-    useResource,
-    useUserFriendlyName,
-    useTranslate,
-    useWarnAboutChange,
-    useInvalidate,
+  BaseKey,
+  BaseRecord,
+  FormWithSyncWithLocationParams,
+  HttpError,
+  useGo,
+  useModal,
+  useParsed,
+  useResource,
+  useUserFriendlyName,
+  useTranslate,
+  useWarnAboutChange,
+  useInvalidate,
 } from "@refinedev/core";
 import { FieldValues } from "react-hook-form";
 
@@ -19,49 +19,49 @@ import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
 import React from "react";
 
 export type UseModalFormReturnType<
-    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
 > & {
-    modal: {
-        submit: (values: TVariables) => void;
-        close: () => void;
-        show: (id?: BaseKey) => void;
-        visible: boolean;
-        title: string;
-    };
+  modal: {
+    submit: (values: TVariables) => void;
+    close: () => void;
+    show: (id?: BaseKey) => void;
+    visible: boolean;
+    title: string;
+  };
 };
 
 export type UseModalFormProps<
-    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 modal.
      * `defaultVisible`: Initial visibility state of the modal.
      * 
@@ -75,253 +75,244 @@ export type UseModalFormProps<
       }`
      * @default `defaultVisible = false` `autoSubmitClose = true` `autoResetForm = true`
      */
-    modalProps?: {
-        defaultVisible?: boolean;
-        autoSubmitClose?: boolean;
-        autoResetForm?: boolean;
-    };
+  modalProps?: {
+    defaultVisible?: boolean;
+    autoSubmitClose?: boolean;
+    autoResetForm?: boolean;
+  };
 } & FormWithSyncWithLocationParams;
 
 export const useModalForm = <
-    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,
 >({
-    modalProps,
-    refineCoreProps,
-    syncWithLocation,
-    ...rest
+  modalProps,
+  refineCoreProps,
+  syncWithLocation,
+  ...rest
 }: UseModalFormProps<
-    TQueryFnData,
-    TError,
-    TVariables,
-    TContext,
-    TData,
-    TResponse,
-    TResponseError
+  TQueryFnData,
+  TError,
+  TVariables,
+  TContext,
+  TData,
+  TResponse,
+  TResponseError
 > = {}): UseModalFormReturnType<
-    TQueryFnData,
-    TError,
-    TVariables,
-    TContext,
-    TData,
-    TResponse,
-    TResponseError
+  TQueryFnData,
+  TError,
+  TVariables,
+  TContext,
+  TData,
+  TResponse,
+  TResponseError
 > => {
-    const invalidate = useInvalidate();
-    const [initiallySynced, setInitiallySynced] = React.useState(false);
-
-    const translate = useTranslate();
+  const invalidate = useInvalidate();
+  const [initiallySynced, setInitiallySynced] = React.useState(false);
 
-    const { resource: resourceProp, action: actionProp } =
-        refineCoreProps ?? {};
+  const translate = useTranslate();
 
-    const {
-        resource,
-        action: actionFromParams,
-        identifier,
-    } = useResource(resourceProp);
+  const { resource: resourceProp, action: actionProp } = refineCoreProps ?? {};
 
-    const parsed = useParsed();
-    const go = useGo();
-    const getUserFriendlyName = useUserFriendlyName();
+  const {
+    resource,
+    action: actionFromParams,
+    identifier,
+  } = useResource(resourceProp);
 
-    const action = actionProp ?? actionFromParams ?? "";
+  const parsed = useParsed();
+  const go = useGo();
+  const getUserFriendlyName = useUserFriendlyName();
 
-    const syncingId = !(
-        typeof syncWithLocation === "object" &&
-        syncWithLocation?.syncId === false
-    );
+  const action = actionProp ?? actionFromParams ?? "";
 
-    const syncWithLocationKey =
-        typeof syncWithLocation === "object" && "key" in syncWithLocation
-            ? syncWithLocation.key
-            : resource && action && syncWithLocation
-            ? `modal-${identifier}-${action}`
-            : undefined;
+  const syncingId = !(
+    typeof syncWithLocation === "object" && syncWithLocation?.syncId === false
+  );
 
-    const {
-        defaultVisible = false,
-        autoSubmitClose = true,
-        autoResetForm = true,
-    } = modalProps ?? {};
+  const syncWithLocationKey =
+    typeof syncWithLocation === "object" && "key" in syncWithLocation
+      ? syncWithLocation.key
+      : resource && action && syncWithLocation
+        ? `modal-${identifier}-${action}`
+        : undefined;
 
-    const useHookFormResult = useForm<
-        TQueryFnData,
-        TError,
-        TVariables,
-        TContext,
-        TData,
-        TResponse,
-        TResponseError
-    >({
-        refineCoreProps: {
-            ...refineCoreProps,
-            meta: {
-                ...(syncWithLocationKey
-                    ? { [syncWithLocationKey]: undefined }
-                    : {}),
-                ...refineCoreProps?.meta,
-            },
-        },
-        ...rest,
-    });
-
-    const {
-        reset,
-        refineCore: { onFinish, id, setId, autoSaveProps },
-        saveButtonProps,
-        handleSubmit,
-    } = useHookFormResult;
+  const {
+    defaultVisible = false,
+    autoSubmitClose = true,
+    autoResetForm = true,
+  } = modalProps ?? {};
 
-    const { visible, show, close } = useModal({
-        defaultVisible,
-    });
+  const useHookFormResult = useForm<
+    TQueryFnData,
+    TError,
+    TVariables,
+    TContext,
+    TData,
+    TResponse,
+    TResponseError
+  >({
+    refineCoreProps: {
+      ...refineCoreProps,
+      meta: {
+        ...(syncWithLocationKey ? { [syncWithLocationKey]: undefined } : {}),
+        ...refineCoreProps?.meta,
+      },
+    },
+    ...rest,
+  });
 
-    React.useEffect(() => {
-        if (initiallySynced === false && syncWithLocationKey) {
-            const openStatus = parsed?.params?.[syncWithLocationKey]?.open;
-            if (typeof openStatus === "boolean") {
-                if (openStatus) {
-                    show();
-                }
-            } else if (typeof openStatus === "string") {
-                if (openStatus === "true") {
-                    show();
-                }
-            }
+  const {
+    reset,
+    refineCore: { onFinish, id, setId, autoSaveProps },
+    saveButtonProps,
+    handleSubmit,
+  } = useHookFormResult;
 
-            if (syncingId) {
-                const idFromParams = parsed?.params?.[syncWithLocationKey]?.id;
-                if (idFromParams) {
-                    setId?.(idFromParams);
-                }
-            }
+  const { visible, show, close } = useModal({
+    defaultVisible,
+  });
 
-            setInitiallySynced(true);
+  React.useEffect(() => {
+    if (initiallySynced === false && syncWithLocationKey) {
+      const openStatus = parsed?.params?.[syncWithLocationKey]?.open;
+      if (typeof openStatus === "boolean") {
+        if (openStatus) {
+          show();
         }
-    }, [syncWithLocationKey, parsed, syncingId, setId]);
+      } else if (typeof openStatus === "string") {
+        if (openStatus === "true") {
+          show();
+        }
+      }
 
-    React.useEffect(() => {
-        if (initiallySynced === 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",
-                });
-            }
+      if (syncingId) {
+        const idFromParams = parsed?.params?.[syncWithLocationKey]?.id;
+        if (idFromParams) {
+          setId?.(idFromParams);
         }
-    }, [id, visible, show, syncWithLocationKey, syncingId]);
+      }
 
-    const submit = async (values: TVariables) => {
-        await onFinish(values);
+      setInitiallySynced(true);
+    }
+  }, [syncWithLocationKey, parsed, syncingId, setId]);
 
-        if (autoSubmitClose) {
-            close();
-        }
+  React.useEffect(() => {
+    if (initiallySynced === 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]);
 
-        if (autoResetForm) {
-            reset();
-        }
-    };
+  const submit = async (values: TVariables) => {
+    await onFinish(values);
 
-    const { warnWhen, setWarnWhen } = useWarnAboutChange();
-    const handleClose = useCallback(() => {
-        if (
-            autoSaveProps.status === "success" &&
-            refineCoreProps?.autoSave?.invalidateOnClose
-        ) {
-            invalidate({
-                id,
-                invalidates: refineCoreProps.invalidates || [
-                    "list",
-                    "many",
-                    "detail",
-                ],
-                dataProviderName: refineCoreProps.dataProviderName,
-                resource: identifier,
-            });
-        }
+    if (autoSubmitClose) {
+      close();
+    }
 
-        if (warnWhen) {
-            const warnWhenConfirm = window.confirm(
-                translate(
-                    "warnWhenUnsavedChanges",
-                    "Are you sure you want to leave? You have unsaved changes.",
-                ),
-            );
+    if (autoResetForm) {
+      reset();
+    }
+  };
 
-            if (warnWhenConfirm) {
-                setWarnWhen(false);
-            } else {
-                return;
-            }
-        }
+  const { warnWhen, setWarnWhen } = useWarnAboutChange();
+  const handleClose = useCallback(() => {
+    if (
+      autoSaveProps.status === "success" &&
+      refineCoreProps?.autoSave?.invalidateOnClose
+    ) {
+      invalidate({
+        id,
+        invalidates: refineCoreProps.invalidates || ["list", "many", "detail"],
+        dataProviderName: refineCoreProps.dataProviderName,
+        resource: identifier,
+      });
+    }
 
-        setId?.(undefined);
-        close();
-    }, [warnWhen, autoSaveProps.status]);
+    if (warnWhen) {
+      const warnWhenConfirm = window.confirm(
+        translate(
+          "warnWhenUnsavedChanges",
+          "Are you sure you want to leave? You have unsaved changes.",
+        ),
+      );
 
-    const handleShow = useCallback(
-        (showId?: BaseKey) => {
-            if (typeof showId !== "undefined") {
-                setId?.(showId);
-            }
-            const needsIdToOpen = action === "edit" || action === "clone";
-            const hasId =
-                typeof showId !== "undefined" || typeof id !== "undefined";
-            if (needsIdToOpen ? hasId : true) {
-                show();
-            }
-        },
-        [id],
-    );
+      if (warnWhenConfirm) {
+        setWarnWhen(false);
+      } else {
+        return;
+      }
+    }
 
-    const title = translate(
-        `${identifier}.titles.${actionProp}`,
-        undefined,
-        `${getUserFriendlyName(
-            `${actionProp} ${
-                resource?.meta?.label ??
-                resource?.options?.label ??
-                resource?.label ??
-                identifier
-            }`,
-            "singular",
-        )}`,
-    );
+    setId?.(undefined);
+    close();
+  }, [warnWhen, autoSaveProps.status]);
 
-    return {
-        modal: {
-            submit,
-            close: handleClose,
-            show: handleShow,
-            visible,
-            title,
-        },
-        ...useHookFormResult,
-        saveButtonProps: {
-            ...saveButtonProps,
-            onClick: (e) => handleSubmit(submit)(e),
-        },
-    };
+  const handleShow = useCallback(
+    (showId?: BaseKey) => {
+      if (typeof showId !== "undefined") {
+        setId?.(showId);
+      }
+      const needsIdToOpen = action === "edit" || action === "clone";
+      const hasId = typeof showId !== "undefined" || typeof id !== "undefined";
+      if (needsIdToOpen ? hasId : true) {
+        show();
+      }
+    },
+    [id],
+  );
+
+  const title = translate(
+    `${identifier}.titles.${actionProp}`,
+    undefined,
+    `${getUserFriendlyName(
+      `${actionProp} ${
+        resource?.meta?.label ??
+        resource?.options?.label ??
+        resource?.label ??
+        identifier
+      }`,
+      "singular",
+    )}`,
+  );
+
+  return {
+    modal: {
+      submit,
+      close: handleClose,
+      show: handleShow,
+      visible,
+      title,
+    },
+    ...useHookFormResult,
+    saveButtonProps: {
+      ...saveButtonProps,
+      onClick: (e) => handleSubmit(submit)(e),
+    },
+  };
 };