@refinedev/antd 5.27.0 → 5.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.27.0",
+  "version": "5.29.0",
   "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.7.0",
-    "@refinedev/ui-tests": "^1.8.0",
-    "@refinedev/core": "^4.25.1",
+    "@refinedev/ui-tests": "^1.10.0",
+    "@refinedev/core": "^4.27.0",
     "@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.17.0",
+    "@refinedev/ui-types": "^1.19.0",
     "@tanstack/react-query": "^4.10.1",
     "antd": "^5.0.5",
     "dayjs": "^1.10.7",

package/src/components/autoSaveIndicator/index.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { AutoSaveIndicatorProps, useTranslate } from "@refinedev/core";
+import { Typography, theme } from "antd";
+import {
+    EllipsisOutlined,
+    SyncOutlined,
+    CheckCircleOutlined,
+    ExclamationCircleOutlined,
+} from "@ant-design/icons";
+
+export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
+    status,
+}) => {
+    const translate = useTranslate();
+    const { useToken } = theme;
+    const { token } = useToken();
+
+    let message = null;
+    let icon = <EllipsisOutlined />;
+
+    switch (status) {
+        case "success":
+            message = translate("autoSave.success", "saved");
+            icon = <CheckCircleOutlined />;
+            break;
+        case "error":
+            message = translate("autoSave.error", "auto save failure");
+            icon = <ExclamationCircleOutlined />;
+
+            break;
+        case "loading":
+            message = translate("autoSave.loading", "saving...");
+            icon = <SyncOutlined />;
+
+            break;
+        default:
+            // for idle
+            message = translate("autoSave.idle", "waiting for changes");
+            break;
+    }
+
+    return (
+        <Typography.Text
+            style={{
+                marginRight: 5,
+                color: token.colorTextTertiary,
+                fontSize: ".8rem",
+            }}
+        >
+            {message}
+            <span style={{ marginLeft: ".2rem" }}>{icon}</span>
+        </Typography.Text>
+    );
+};

package/src/components/crud/edit/index.tsx

@@ -25,6 +25,7 @@ import {
     RefreshButtonProps,
     DeleteButtonProps,
     SaveButtonProps,
+    AutoSaveIndicator,
 } from "@components";
 import { EditProps } from "../types";
 
@@ -54,6 +55,7 @@ export const Edit: React.FC<EditProps> = ({
     footerButtonProps,
     footerButtons,
     goBack: goBackFromProps,
+    autoSaveProps,
 }) => {
     const translate = useTranslate();
     const { options: { breadcrumb: globalBreadcrumb } = {} } =
@@ -133,6 +135,7 @@ export const Edit: React.FC<EditProps> = ({
 
     const defaultHeaderButtons = (
         <>
+            {autoSaveProps && <AutoSaveIndicator {...autoSaveProps} />}
             {hasList && <ListButton {...listButtonProps} />}
             <RefreshButton {...refreshButtonProps} />
         </>

package/src/components/index.ts

@@ -24,3 +24,4 @@ export * from "./table";
 export * from "./pages";
 export * from "./breadcrumb";
 export * from "./pageHeader";
+export * from "./autoSaveIndicator";

package/src/hooks/form/useForm.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { FormInstance, FormProps, Form } from "antd";
+import { FormInstance, FormProps, Form, ButtonProps } from "antd";
 import { useForm as useFormSF } from "sunflower-antd";
-import { ButtonProps } from "antd";
+import { AutoSaveProps } from "@refinedev/core";
 
 import {
     HttpError,
@@ -13,6 +13,8 @@ import {
     CreateResponse,
     UpdateResponse,
     pickNotDeprecated,
+    useTranslate,
+    useRefineContext,
 } from "@refinedev/core";
 
 export type UseFormProps<
@@ -35,7 +37,13 @@ export type UseFormProps<
      * Shows notification when unsaved changes exist
      */
     warnWhenUnsavedChanges?: boolean;
-};
+    /**
+     * Disables server-side validation
+     * @default false
+     * @see {@link https://refine.dev/docs/advanced-tutorials/forms/server-side-form-validation/}
+     */
+    disableServerSideValidation?: boolean;
+} & AutoSaveProps<TVariables>;
 
 export type UseFormReturnType<
     TQueryFnData extends BaseRecord = BaseRecord,
@@ -87,7 +95,8 @@ export const useForm = <
     action,
     resource,
     onMutationSuccess: onMutationSuccessProp,
-    onMutationError,
+    onMutationError: onMutationErrorProp,
+    autoSave,
     submitOnEnter = false,
     warnWhenUnsavedChanges: warnWhenUnsavedChangesProp,
     redirect,
@@ -109,6 +118,7 @@ export const useForm = <
     updateMutationOptions,
     id: idFromProps,
     overtimeOptions,
+    disableServerSideValidation: disableServerSideValidationProp = false,
 }: UseFormProps<
     TQueryFnData,
     TError,
@@ -124,6 +134,12 @@ export const useForm = <
     TResponse,
     TResponseError
 > => {
+    const { options } = useRefineContext();
+    const disableServerSideValidation =
+        options?.disableServerSideValidation || disableServerSideValidationProp;
+
+    const translate = useTranslate();
+
     const [formAnt] = Form.useForm();
     const formSF = useFormSF<TResponse, TVariables>({
         form: formAnt,
@@ -141,7 +157,77 @@ export const useForm = <
         onMutationSuccess: onMutationSuccessProp
             ? onMutationSuccessProp
             : undefined,
-        onMutationError,
+        onMutationError: async (error, _variables, _context) => {
+            if (disableServerSideValidation) {
+                onMutationErrorProp?.(error, _variables, _context);
+                return;
+            }
+
+            // antd form expects error object to be in a specific format.
+            let parsedErrors: {
+                name: string | number | (string | number)[];
+                errors?: string[] | undefined;
+            }[] = [];
+
+            // reset antd errors before setting new errors
+            const fieldsValue = form.getFieldsValue() as unknown as object;
+            const fields = Object.keys(fieldsValue);
+            parsedErrors = fields.map((field) => {
+                return {
+                    name: field,
+                    errors: undefined,
+                };
+            });
+            form.setFields(parsedErrors);
+
+            const errors = error?.errors;
+            // parse errors to antd form errors
+            for (const key in errors) {
+                const fieldError = errors[key];
+
+                let newError: string[] = [];
+
+                if (Array.isArray(fieldError)) {
+                    newError = fieldError;
+                }
+
+                if (typeof fieldError === "string") {
+                    newError = [fieldError];
+                }
+
+                if (typeof fieldError === "boolean" && fieldError) {
+                    newError = ["Field is not valid."];
+                }
+
+                if (typeof fieldError === "object" && "key" in fieldError) {
+                    const translatedMessage = translate(
+                        fieldError.key,
+                        fieldError.message,
+                    );
+
+                    newError = [translatedMessage];
+                }
+
+                // antd form expects the key to be an array.
+                // if the key is a number, it will be parsed to a number because.
+                const newKey = key.split(".").map((item) => {
+                    // check if item is a number
+                    if (!isNaN(Number(item))) {
+                        return Number(item);
+                    }
+                    return item;
+                });
+
+                parsedErrors.push({
+                    name: newKey,
+                    errors: newError,
+                });
+            }
+
+            form.setFields([...parsedErrors]);
+
+            onMutationErrorProp?.(error, _variables, _context);
+        },
         redirect,
         action,
         resource,
@@ -165,7 +251,8 @@ export const useForm = <
         overtimeOptions,
     });
 
-    const { formLoading, onFinish, queryResult, id } = useFormCoreResult;
+    const { formLoading, onFinish, queryResult, id, onFinishAutoSave } =
+        useFormCoreResult;
 
     const {
         warnWhenUnsavedChanges: warnWhenUnsavedChangesRefine,
@@ -184,10 +271,20 @@ export const useForm = <
         }
     };
 
-    const onValuesChange = (changeValues: object) => {
+    const onValuesChange = (changeValues: object, allValues: any) => {
         if (changeValues && warnWhenUnsavedChanges) {
             setWarnWhen(true);
         }
+
+        if (autoSave?.enabled) {
+            setWarnWhen(false);
+
+            const onFinishFromProps =
+                autoSave?.onFinish ?? ((values) => values);
+
+            return onFinishAutoSave(onFinishFromProps(allValues));
+        }
+
         return changeValues;
     };