@refinedev/antd 5.2.0 → 5.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.2.0",
+  "version": "5.3.1",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "main": "dist/index.js",
@@ -24,8 +24,8 @@
   },
   "devDependencies": {
     "@refinedev/cli": "^2.1.0",
-    "@refinedev/ui-tests": "^1.2.0",
-    "@refinedev/core": "^4.4.0",
+    "@refinedev/ui-tests": "^1.3.0",
+    "@refinedev/core": "^4.5.1",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
@@ -49,7 +49,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@ant-design/pro-layout": "7.8.3",
-    "@refinedev/ui-types": "^1.2.0",
+    "@refinedev/ui-types": "^1.3.0",
     "@tanstack/react-query": "^4.10.1",
     "antd": "^5.0.5",
     "dayjs": "^1.10.7",

package/src/components/buttons/delete/index.tsx

@@ -8,6 +8,7 @@ import {
     useCan,
     useResource,
     pickNotDeprecated,
+    useWarnAboutChange,
 } from "@refinedev/core";
 import { RefineButtonTestIds } from "@refinedev/ui-types";
 
@@ -62,6 +63,8 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
         },
     });
 
+    const { setWarnWhen } = useWarnAboutChange();
+
     if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
         return null;
     }
@@ -80,6 +83,7 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
             okButtonProps={{ disabled: isLoading }}
             onConfirm={(): void => {
                 if ((recordItemId ?? id) && resource?.name) {
+                    setWarnWhen(false);
                     mutate(
                         {
                             id: recordItemId ?? id ?? "",

package/src/components/layout/sider/index.tsx

@@ -20,6 +20,7 @@ import {
     useRouterType,
     useActiveAuthProvider,
     pickNotDeprecated,
+    useWarnAboutChange,
 } from "@refinedev/core";
 
 import { Title as DefaultTitle } from "@components";
@@ -39,6 +40,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
     const isExistAuthentication = useIsExistAuthentication();
     const routerType = useRouterType();
     const NewLink = useLink();
+    const { warnWhen, setWarnWhen } = useWarnAboutChange();
     const { Link: LegacyLink } = useRouterContext();
     const Link = routerType === "legacy" ? LegacyLink : NewLink;
     const TitleFromContext = useTitle();
@@ -121,10 +123,28 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
         });
     };
 
+    const handleLogout = () => {
+        if (warnWhen) {
+            const confirm = window.confirm(
+                translate(
+                    "warnWhenUnsavedChanges",
+                    "Are you sure you want to leave? You have unsaved changes.",
+                ),
+            );
+
+            if (confirm) {
+                setWarnWhen(false);
+                mutateLogout();
+            }
+        } else {
+            mutateLogout();
+        }
+    };
+
     const logout = isExistAuthentication && (
         <Menu.Item
             key="logout"
-            onClick={() => mutateLogout()}
+            onClick={handleLogout}
             icon={<LogoutOutlined />}
         >
             {translate("buttons.logout", "Logout")}

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

@@ -1,8 +1,7 @@
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback } from "react";
 import { UseFormConfig } from "sunflower-antd";
 import { FormInstance, FormProps, DrawerProps, ButtonProps } from "antd";
 import {
-    useMutationMode,
     useTranslate,
     useWarnAboutChange,
     UseFormProps as UseFormPropsCore,
@@ -14,11 +13,11 @@ import {
     useResource,
     useParsed,
     useGo,
+    useModal,
 } from "@refinedev/core";
 
 import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
 import { DeleteButtonProps } from "../../../components";
-import React from "react";
 
 export interface UseDrawerFormConfig extends UseFormConfig {
     action: "show" | "edit" | "create" | "clone";
@@ -32,7 +31,11 @@ export type UseDrawerFormProps<
     UseFormProps<TData, TError, TVariables> &
     UseDrawerFormConfig &
     LiveModeProps &
-    FormWithSyncWithLocationParams;
+    FormWithSyncWithLocationParams & {
+        defaultVisible?: boolean;
+        autoSubmitClose?: boolean;
+        autoResetForm?: boolean;
+    };
 
 export type UseDrawerFormReturnType<
     TData extends BaseRecord = BaseRecord,
@@ -67,8 +70,10 @@ export const useDrawerForm = <
     TError extends HttpError = HttpError,
     TVariables = {},
 >({
-    mutationMode: mutationModeProp,
     syncWithLocation,
+    defaultVisible = false,
+    autoSubmitClose = true,
+    autoResetForm = true,
     ...rest
 }: UseDrawerFormProps<TData, TError, TVariables>): UseDrawerFormReturnType<
     TData,
@@ -77,13 +82,15 @@ export const useDrawerForm = <
 > => {
     const initiallySynced = React.useRef(false);
 
+    const { visible, show, close } = useModal({
+        defaultVisible,
+    });
+
     const useFormProps = useForm<TData, TError, TVariables>({
         ...rest,
-        mutationMode: mutationModeProp,
     });
 
-    const { form, formProps, formLoading, mutationResult, id, setId } =
-        useFormProps;
+    const { form, formProps, formLoading, id, setId, onFinish } = useFormProps;
 
     const { resource, action: actionFromParams } = useResource(rest.resource);
 
@@ -102,15 +109,15 @@ export const useDrawerForm = <
             ? `drawer-${resource?.identifier ?? resource?.name}-${action}`
             : undefined;
 
-    const [open, setOpen] = useState(false);
-
     React.useEffect(() => {
         if (initiallySynced.current === false && syncWithLocationKey) {
             const openStatus = parsed?.params?.[syncWithLocationKey]?.open;
             if (typeof openStatus === "boolean") {
-                setOpen(openStatus);
+                openStatus ? show() : close();
             } else if (typeof openStatus === "string") {
-                setOpen(openStatus === "true");
+                if (openStatus === "true") {
+                    show();
+                }
             }
 
             if (syncingId) {
@@ -126,7 +133,7 @@ export const useDrawerForm = <
 
     React.useEffect(() => {
         if (initiallySynced.current === true) {
-            if (open && syncWithLocationKey) {
+            if (visible && syncWithLocationKey) {
                 go({
                     query: {
                         [syncWithLocationKey]: {
@@ -138,7 +145,7 @@ export const useDrawerForm = <
                     options: { keepQuery: true },
                     type: "replace",
                 });
-            } else if (syncWithLocationKey && !open) {
+            } else if (syncWithLocationKey && !visible) {
                 go({
                     query: {
                         [syncWithLocationKey]: undefined,
@@ -148,38 +155,27 @@ export const useDrawerForm = <
                 });
             }
         }
-    }, [id, open, syncWithLocationKey, syncingId]);
+    }, [id, visible, show, close, syncWithLocationKey, syncingId]);
 
     const translate = useTranslate();
 
     const { warnWhen, setWarnWhen } = useWarnAboutChange();
 
-    const { mutationMode: mutationModeContext } = useMutationMode();
-    const mutationMode = mutationModeProp ?? mutationModeContext;
+    const submit = async () => {
+        await onFinish(form.getFieldsValue());
 
-    const {
-        isLoading: isLoadingMutation,
-        isSuccess: isSuccessMutation,
-        reset: resetMutation,
-    } = mutationResult ?? {};
+        if (autoSubmitClose) {
+            close();
+        }
 
-    useEffect(() => {
-        if (open && mutationMode === "pessimistic") {
-            if (isSuccessMutation && !isLoadingMutation) {
-                setOpen(false);
-                resetMutation?.();
-            }
+        if (autoResetForm) {
+            form.resetFields();
         }
-    }, [isSuccessMutation, isLoadingMutation]);
+    };
 
     const saveButtonProps = {
         disabled: formLoading,
-        onClick: () => {
-            form?.submit();
-            if (!(mutationMode === "pessimistic")) {
-                setOpen(false);
-            }
-        },
+        onClick: submit,
         loading: formLoading,
     };
 
@@ -187,7 +183,7 @@ export const useDrawerForm = <
         recordItemId: id,
         onSuccess: () => {
             setId?.(undefined);
-            setOpen(false);
+            close();
         },
     };
 
@@ -207,14 +203,14 @@ export const useDrawerForm = <
             }
         }
 
-        setOpen(false);
+        close();
         setId?.(undefined);
     }, [warnWhen]);
 
     const handleShow = useCallback((id?: BaseKey) => {
         setId?.(id);
 
-        setOpen(true);
+        show();
     }, []);
 
     return {
@@ -231,7 +227,7 @@ export const useDrawerForm = <
         drawerProps: {
             width: "500px",
             onClose: handleClose,
-            open,
+            open: visible,
             forceRender: true,
         },
         saveButtonProps,

package/src/hooks/form/useModalForm/useModalForm.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import React, { useCallback } from "react";
 import { FormInstance, FormProps, ModalProps } from "antd";
 import {
     useModalForm as useModalFormSF,
@@ -6,7 +6,6 @@ import {
 } from "sunflower-antd";
 
 import {
-    useMutationMode,
     useTranslate,
     useWarnAboutChange,
     HttpError,
@@ -21,7 +20,6 @@ import {
     useGo,
 } from "@refinedev/core";
 import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
-import React from "react";
 
 export type useModalFormFromSFReturnType<TData, TVariables> = {
     open: boolean;
@@ -80,7 +78,6 @@ export const useModalForm = <
     TError extends HttpError = HttpError,
     TVariables = {},
 >({
-    mutationMode: mutationModeProp,
     syncWithLocation,
     ...rest
 }: UseModalFormProps<TData, TError, TVariables>): UseModalFormReturnType<
@@ -92,11 +89,9 @@ export const useModalForm = <
 
     const useFormProps = useForm<TData, TError, TVariables>({
         ...rest,
-        mutationMode: mutationModeProp,
     });
 
-    const { form, formProps, id, setId, formLoading, mutationResult } =
-        useFormProps;
+    const { form, formProps, id, setId, formLoading, onFinish } = useFormProps;
 
     const { resource, action: actionFromParams } = useResource(rest.resource);
 
@@ -122,13 +117,12 @@ export const useModalForm = <
     const sunflowerUseModal = useModalFormSF<TData, TVariables>({
         ...rest,
         form: form,
+        submit: onFinish as any,
     });
 
     const {
         visible,
-        close,
         show,
-        form: modalForm,
         formProps: modalFormProps,
         modalProps,
     } = sunflowerUseModal;
@@ -183,41 +177,8 @@ export const useModalForm = <
         }
     }, [id, visible, show, syncWithLocationKey, syncingId]);
 
-    const { mutationMode: mutationModeContext } = useMutationMode();
-    const mutationMode = mutationModeProp ?? mutationModeContext;
-
-    const {
-        isLoading: isLoadingMutation,
-        isSuccess: isSuccessMutation,
-        reset: resetMutation,
-    } = mutationResult ?? {};
-
-    useEffect(() => {
-        if (visible && mutationMode === "pessimistic") {
-            if (isSuccessMutation && !isLoadingMutation) {
-                close();
-                resetMutation?.();
-                // Prevents resetting form values before closing modal in UI
-                setTimeout(() => {
-                    form.resetFields();
-                });
-            }
-        }
-    }, [isSuccessMutation, isLoadingMutation]);
-
     const saveButtonPropsSF = {
         disabled: formLoading,
-        onClick: () => {
-            modalForm.submit();
-
-            if (!(mutationMode === "pessimistic")) {
-                close();
-                // Prevents resetting form values before closing modal in UI
-                setTimeout(() => {
-                    form.resetFields();
-                });
-            }
-        },
         loading: formLoading,
     };
 
@@ -247,6 +208,9 @@ export const useModalForm = <
         sunflowerUseModal.show();
     }, []);
 
+    const { visible: _visible, ...otherModalProps } = modalProps;
+    const newModalProps = { open: _visible, ...otherModalProps };
+
     return {
         ...useFormProps,
         ...sunflowerUseModal,
@@ -261,7 +225,7 @@ export const useModalForm = <
             onFinish: formProps.onFinish,
         },
         modalProps: {
-            ...modalProps,
+            ...newModalProps,
             width: "1000px",
             okButtonProps: saveButtonPropsSF,
             title: translate(

package/src/types/sunflower.d.ts

@@ -54,7 +54,6 @@ declare module "sunflower-antd" {
         config: Omit<UseModalFormConfig, "defaultFormValues">,
     ) => {
         form: FormInstance<TVariables>;
-        open: boolean;
         show: () => void;
         close: () => void;
         modalProps: {
@@ -62,18 +61,11 @@ declare module "sunflower-antd" {
             visible: boolean;
             onCancel: () => void;
         };
-        formProps:
-            | {
-                  form: FormInstance<TVariables>;
-                  onFinish: (formValue: TVariables) => Promise<TData>;
-                  initialValues: {};
-              }
-            | {
-                  onSubmit(e: any): void;
-                  form?: undefined;
-                  onFinish?: undefined;
-                  initialValues?: undefined;
-              };
+        formProps: {
+            form: FormInstance<TVariables>;
+            onFinish: (formValue: TVariables) => Promise<TData>;
+            initialValues: {};
+        };
         formLoading: boolean;
         defaultFormValuesLoading: boolean;
         formValues: {};