@refinedev/antd 5.37.4 → 6.0.0

package/src/hooks/form/useDrawerForm/useDrawerForm.ts

@@ -2,83 +2,83 @@ import React, { useCallback } from "react";
 import { UseFormConfig } from "sunflower-antd";
 import { FormInstance, FormProps, DrawerProps, ButtonProps } from "antd";
 import {
-    useTranslate,
-    useWarnAboutChange,
-    UseFormProps as UseFormPropsCore,
-    HttpError,
-    LiveModeProps,
-    BaseRecord,
-    FormWithSyncWithLocationParams,
-    BaseKey,
-    useResource,
-    useParsed,
-    useGo,
-    useModal,
-    useInvalidate,
+  useTranslate,
+  useWarnAboutChange,
+  UseFormProps as UseFormPropsCore,
+  HttpError,
+  LiveModeProps,
+  BaseRecord,
+  FormWithSyncWithLocationParams,
+  BaseKey,
+  useResource,
+  useParsed,
+  useGo,
+  useModal,
+  useInvalidate,
 } from "@refinedev/core";
 
 import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
 import { DeleteButtonProps } from "../../../components";
 
 export interface UseDrawerFormConfig extends UseFormConfig {
-    action: "show" | "edit" | "create" | "clone";
+  action: "show" | "edit" | "create" | "clone";
 }
 
 export type UseDrawerFormProps<
-    TQueryFnData extends BaseRecord = BaseRecord,
-    TError extends HttpError = HttpError,
-    TVariables = {},
-    TData extends BaseRecord = TQueryFnData,
-    TResponse extends BaseRecord = TData,
-    TResponseError extends HttpError = TError,
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TVariables = {},
+  TData extends BaseRecord = TQueryFnData,
+  TResponse extends BaseRecord = TData,
+  TResponseError extends HttpError = TError,
 > = UseFormPropsCore<
+  TQueryFnData,
+  TError,
+  TVariables,
+  TData,
+  TResponse,
+  TResponseError
+> &
+  UseFormProps<
     TQueryFnData,
     TError,
     TVariables,
     TData,
     TResponse,
     TResponseError
-> &
-    UseFormProps<
-        TQueryFnData,
-        TError,
-        TVariables,
-        TData,
-        TResponse,
-        TResponseError
-    > &
-    UseDrawerFormConfig &
-    LiveModeProps &
-    FormWithSyncWithLocationParams & {
-        defaultVisible?: boolean;
-        autoSubmitClose?: boolean;
-        autoResetForm?: boolean;
-    };
+  > &
+  UseDrawerFormConfig &
+  LiveModeProps &
+  FormWithSyncWithLocationParams & {
+    defaultVisible?: boolean;
+    autoSubmitClose?: boolean;
+    autoResetForm?: boolean;
+  };
 
 export type UseDrawerFormReturnType<
-    TQueryFnData extends BaseRecord = BaseRecord,
-    TError extends HttpError = HttpError,
-    TVariables = {},
-    TData extends BaseRecord = TQueryFnData,
-    TResponse extends BaseRecord = TData,
-    TResponseError extends HttpError = TError,
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TVariables = {},
+  TData extends BaseRecord = TQueryFnData,
+  TResponse extends BaseRecord = TData,
+  TResponseError extends HttpError = TError,
 > = UseFormReturnType<
-    TQueryFnData,
-    TError,
-    TVariables,
-    TData,
-    TResponse,
-    TResponseError
+  TQueryFnData,
+  TError,
+  TVariables,
+  TData,
+  TResponse,
+  TResponseError
 > & {
-    formProps: FormProps<TVariables> & {
-        form: FormInstance<TVariables>;
-    };
-    show: (id?: BaseKey) => void;
-    close: () => void;
-    drawerProps: DrawerProps;
-    saveButtonProps: ButtonProps;
-    deleteButtonProps: DeleteButtonProps;
-    formLoading: boolean;
+  formProps: FormProps<TVariables> & {
+    form: FormInstance<TVariables>;
+  };
+  show: (id?: BaseKey) => void;
+  close: () => void;
+  drawerProps: DrawerProps;
+  saveButtonProps: ButtonProps;
+  deleteButtonProps: DeleteButtonProps;
+  formLoading: boolean;
 };
 
 /**
@@ -94,236 +94,232 @@ export type UseDrawerFormReturnType<
  */
 
 export const useDrawerForm = <
-    TQueryFnData extends BaseRecord = BaseRecord,
-    TError extends HttpError = HttpError,
-    TVariables = {},
-    TData extends BaseRecord = TQueryFnData,
-    TResponse extends BaseRecord = TData,
-    TResponseError extends HttpError = TError,
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TVariables = {},
+  TData extends BaseRecord = TQueryFnData,
+  TResponse extends BaseRecord = TData,
+  TResponseError extends HttpError = TError,
 >({
-    syncWithLocation,
-    defaultVisible = false,
-    autoSubmitClose = true,
-    autoResetForm = true,
-    autoSave,
-    invalidates,
-    ...rest
+  syncWithLocation,
+  defaultVisible = false,
+  autoSubmitClose = true,
+  autoResetForm = true,
+  autoSave,
+  invalidates,
+  ...rest
 }: UseDrawerFormProps<
-    TQueryFnData,
-    TError,
-    TVariables,
-    TData,
-    TResponse,
-    TResponseError
+  TQueryFnData,
+  TError,
+  TVariables,
+  TData,
+  TResponse,
+  TResponseError
 >): UseDrawerFormReturnType<
-    TQueryFnData,
-    TError,
-    TVariables,
-    TData,
-    TResponse,
-    TResponseError
+  TQueryFnData,
+  TError,
+  TVariables,
+  TData,
+  TResponse,
+  TResponseError
 > => {
-    const invalidate = useInvalidate();
-    const [initiallySynced, setInitiallySynced] = React.useState(false);
-
-    const { visible, show, close } = useModal({
-        defaultVisible,
-    });
-
-    const {
-        resource,
-        action: actionFromParams,
-        identifier,
-    } = useResource(rest.resource);
+  const invalidate = useInvalidate();
+  const [initiallySynced, setInitiallySynced] = React.useState(false);
 
-    const parsed = useParsed();
-    const go = useGo();
+  const { visible, show, close } = useModal({
+    defaultVisible,
+  });
 
-    const action = rest.action ?? actionFromParams ?? "";
+  const {
+    resource,
+    action: actionFromParams,
+    identifier,
+  } = useResource(rest.resource);
 
-    const syncingId = !(
-        typeof syncWithLocation === "object" &&
-        syncWithLocation?.syncId === false
-    );
+  const parsed = useParsed();
+  const go = useGo();
 
-    const syncWithLocationKey =
-        typeof syncWithLocation === "object" && "key" in syncWithLocation
-            ? syncWithLocation.key
-            : resource && action && syncWithLocation
-            ? `drawer-${resource?.identifier ?? resource?.name}-${action}`
-            : undefined;
+  const action = rest.action ?? actionFromParams ?? "";
 
-    const useFormProps = useForm<
-        TQueryFnData,
-        TError,
-        TVariables,
-        TData,
-        TResponse,
-        TResponseError
-    >({
-        meta: {
-            ...(syncWithLocationKey
-                ? { [syncWithLocationKey]: undefined }
-                : {}),
-            ...rest.meta,
-        },
-        autoSave,
-        invalidates,
-        ...rest,
-    });
+  const syncingId = !(
+    typeof syncWithLocation === "object" && syncWithLocation?.syncId === false
+  );
 
-    const { form, formProps, formLoading, id, setId, onFinish, autoSaveProps } =
-        useFormProps;
+  const syncWithLocationKey =
+    typeof syncWithLocation === "object" && "key" in syncWithLocation
+      ? syncWithLocation.key
+      : resource && action && syncWithLocation
+        ? `drawer-${resource?.identifier ?? resource?.name}-${action}`
+        : undefined;
 
-    React.useEffect(() => {
-        if (initiallySynced === false && syncWithLocationKey) {
-            const openStatus = parsed?.params?.[syncWithLocationKey]?.open;
-            if (typeof openStatus === "boolean") {
-                openStatus ? show() : close();
-            } else if (typeof openStatus === "string") {
-                if (openStatus === "true") {
-                    show();
-                }
-            }
+  const useFormProps = useForm<
+    TQueryFnData,
+    TError,
+    TVariables,
+    TData,
+    TResponse,
+    TResponseError
+  >({
+    meta: {
+      ...(syncWithLocationKey ? { [syncWithLocationKey]: undefined } : {}),
+      ...rest.meta,
+    },
+    autoSave,
+    invalidates,
+    ...rest,
+  });
 
-            if (syncingId) {
-                const idFromParams = parsed?.params?.[syncWithLocationKey]?.id;
-                if (idFromParams) {
-                    setId?.(idFromParams);
-                }
-            }
+  const { form, formProps, formLoading, id, setId, onFinish, autoSaveProps } =
+    useFormProps;
 
-            setInitiallySynced(true);
+  React.useEffect(() => {
+    if (initiallySynced === false && syncWithLocationKey) {
+      const openStatus = parsed?.params?.[syncWithLocationKey]?.open;
+      if (typeof openStatus === "boolean") {
+        openStatus ? show() : close();
+      } else if (typeof openStatus === "string") {
+        if (openStatus === "true") {
+          show();
         }
-    }, [syncWithLocationKey, parsed, syncingId, setId, initiallySynced]);
+      }
 
-    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,
-        close,
-        syncWithLocationKey,
-        syncingId,
-        initiallySynced,
-    ]);
+      }
 
-    const translate = useTranslate();
+      setInitiallySynced(true);
+    }
+  }, [syncWithLocationKey, parsed, syncingId, setId, initiallySynced]);
 
-    const { warnWhen, setWarnWhen } = useWarnAboutChange();
+  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,
+    close,
+    syncWithLocationKey,
+    syncingId,
+    initiallySynced,
+  ]);
 
-    const saveButtonProps = {
-        disabled: formLoading,
-        onClick: () => {
-            form.submit();
-        },
-        loading: formLoading,
-    };
+  const translate = useTranslate();
 
-    const deleteButtonProps = {
-        recordItemId: id,
-        onSuccess: () => {
-            setId?.(undefined);
-            close();
-        },
-    };
+  const { warnWhen, setWarnWhen } = useWarnAboutChange();
 
-    const handleClose = useCallback(() => {
-        if (autoSaveProps.status === "success" && autoSave?.invalidateOnClose) {
-            invalidate({
-                id,
-                invalidates: invalidates || ["list", "many", "detail"],
-                dataProviderName: rest.dataProviderName,
-                resource: identifier,
-            });
-        }
+  const saveButtonProps = {
+    disabled: formLoading,
+    onClick: () => {
+      form.submit();
+    },
+    loading: formLoading,
+  };
 
-        if (warnWhen) {
-            const warnWhenConfirm = window.confirm(
-                translate(
-                    "warnWhenUnsavedChanges",
-                    "Are you sure you want to leave? You have unsaved changes.",
-                ),
-            );
+  const deleteButtonProps = {
+    recordItemId: id,
+    onSuccess: () => {
+      setId?.(undefined);
+      close();
+    },
+  };
 
-            if (warnWhenConfirm) {
-                setWarnWhen(false);
-            } else {
-                return;
-            }
-        }
+  const handleClose = useCallback(() => {
+    if (autoSaveProps.status === "success" && autoSave?.invalidateOnClose) {
+      invalidate({
+        id,
+        invalidates: invalidates || ["list", "many", "detail"],
+        dataProviderName: rest.dataProviderName,
+        resource: identifier,
+      });
+    }
 
-        close();
-        setId?.(undefined);
-    }, [warnWhen]);
+    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;
+      }
+    }
 
-    return {
-        ...useFormProps,
-        show: handleShow,
-        close: handleClose,
-        formProps: {
-            form,
-            ...useFormProps.formProps,
-            onValuesChange: formProps?.onValuesChange,
-            onKeyUp: formProps?.onKeyUp,
-            onFinish: async (values) => {
-                await onFinish(values);
+    close();
+    setId?.(undefined);
+  }, [warnWhen]);
 
-                if (autoSubmitClose) {
-                    close();
-                }
+  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 (autoResetForm) {
-                    form.resetFields();
-                }
-            },
-        },
-        drawerProps: {
-            width: "500px",
-            onClose: handleClose,
-            open: visible,
-            forceRender: true,
-        },
-        saveButtonProps,
-        deleteButtonProps,
-        formLoading,
-    };
+  return {
+    ...useFormProps,
+    show: handleShow,
+    close: handleClose,
+    formProps: {
+      form,
+      ...useFormProps.formProps,
+      onValuesChange: formProps?.onValuesChange,
+      onKeyUp: formProps?.onKeyUp,
+      onFinish: async (values) => {
+        await onFinish(values);
+
+        if (autoSubmitClose) {
+          close();
+        }
+
+        if (autoResetForm) {
+          form.resetFields();
+        }
+      },
+    },
+    drawerProps: {
+      width: "500px",
+      onClose: handleClose,
+      open: visible,
+      forceRender: true,
+    },
+    saveButtonProps,
+    deleteButtonProps,
+    formLoading,
+  };
 };