@refinedev/antd 5.0.0

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

@@ -0,0 +1,241 @@
+import { useCallback, useEffect, useState } from "react";
+import { UseFormConfig } from "sunflower-antd";
+import { FormInstance, FormProps, DrawerProps, ButtonProps } from "antd";
+import {
+    useMutationMode,
+    useTranslate,
+    useWarnAboutChange,
+    UseFormProps as UseFormPropsCore,
+    HttpError,
+    LiveModeProps,
+    BaseRecord,
+    FormWithSyncWithLocationParams,
+    BaseKey,
+    useResource,
+    useParsed,
+    useGo,
+} 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";
+}
+
+export type UseDrawerFormProps<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+> = UseFormPropsCore<TData, TError, TVariables> &
+    UseFormProps<TData, TError, TVariables> &
+    UseDrawerFormConfig &
+    LiveModeProps &
+    FormWithSyncWithLocationParams;
+
+export type UseDrawerFormReturnType<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+> = UseFormReturnType<TData, TError, TVariables> & {
+    formProps: FormProps<TVariables> & {
+        form: FormInstance<TVariables>;
+    };
+    show: (id?: BaseKey) => void;
+    close: () => void;
+    drawerProps: DrawerProps;
+    saveButtonProps: ButtonProps;
+    deleteButtonProps: DeleteButtonProps;
+    formLoading: boolean;
+};
+
+/**
+ * `useDrawerForm` hook allows you to manage a form within a drawer. It returns Ant Design {@link https://ant.design/components/form/ Form} and {@link https://ant.design/components/drawer/ Drawer} components props.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/form/useDrawerForm} for more details.
+ *
+ * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/api-references/interfaceReferences#baserecord `BaseRecord`}
+ * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/api-references/interfaceReferences#httperror `HttpError`}
+ * @typeParam TVariables - Values for params. default `{}`
+ *
+ *
+ */
+
+export const useDrawerForm = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+>({
+    mutationMode: mutationModeProp,
+    syncWithLocation,
+    ...rest
+}: UseDrawerFormProps<TData, TError, TVariables>): UseDrawerFormReturnType<
+    TData,
+    TError,
+    TVariables
+> => {
+    const initiallySynced = React.useRef(false);
+
+    const useFormProps = useForm<TData, TError, TVariables>({
+        ...rest,
+        mutationMode: mutationModeProp,
+    });
+
+    const { form, formProps, formLoading, mutationResult, id, setId } =
+        useFormProps;
+
+    const { resource, action: actionFromParams } = useResource(rest.resource);
+
+    const parsed = useParsed();
+    const go = useGo();
+
+    const action = rest.action ?? actionFromParams ?? "";
+
+    const syncingId =
+        typeof syncWithLocation === "object" && syncWithLocation.syncId;
+
+    const syncWithLocationKey =
+        typeof syncWithLocation === "object" && "key" in syncWithLocation
+            ? syncWithLocation.key
+            : resource && action && syncWithLocation
+            ? `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);
+            } else if (typeof openStatus === "string") {
+                setOpen(openStatus === "true");
+            }
+
+            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 (open && syncWithLocationKey) {
+                go({
+                    query: {
+                        [syncWithLocationKey]: {
+                            ...parsed?.params?.[syncWithLocationKey],
+                            open: true,
+                            ...(syncingId && id && { id }),
+                        },
+                    },
+                    options: { keepQuery: true },
+                    type: "replace",
+                });
+            } else if (syncWithLocationKey && !open) {
+                go({
+                    query: {
+                        [syncWithLocationKey]: undefined,
+                    },
+                    options: { keepQuery: true },
+                    type: "replace",
+                });
+            }
+        }
+    }, [id, open, syncWithLocationKey, syncingId]);
+
+    const translate = useTranslate();
+
+    const { warnWhen, setWarnWhen } = useWarnAboutChange();
+
+    const { mutationMode: mutationModeContext } = useMutationMode();
+    const mutationMode = mutationModeProp ?? mutationModeContext;
+
+    const {
+        isLoading: isLoadingMutation,
+        isSuccess: isSuccessMutation,
+        reset: resetMutation,
+    } = mutationResult ?? {};
+
+    useEffect(() => {
+        if (open && mutationMode === "pessimistic") {
+            if (isSuccessMutation && !isLoadingMutation) {
+                setOpen(false);
+                resetMutation?.();
+            }
+        }
+    }, [isSuccessMutation, isLoadingMutation]);
+
+    const saveButtonProps = {
+        disabled: formLoading,
+        onClick: () => {
+            form?.submit();
+            if (!(mutationMode === "pessimistic")) {
+                setOpen(false);
+            }
+        },
+        loading: formLoading,
+    };
+
+    const deleteButtonProps = {
+        recordItemId: id,
+        onSuccess: () => {
+            setId?.(undefined);
+            setOpen(false);
+        },
+    };
+
+    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;
+            }
+        }
+
+        setOpen(false);
+        setId?.(undefined);
+    }, [warnWhen]);
+
+    const handleShow = useCallback((id?: BaseKey) => {
+        setId?.(id);
+
+        setOpen(true);
+    }, []);
+
+    return {
+        ...useFormProps,
+        show: handleShow,
+        close: handleClose,
+        formProps: {
+            form,
+            ...useFormProps.formProps,
+            onValuesChange: formProps?.onValuesChange,
+            onKeyUp: formProps?.onKeyUp,
+            onFinish: formProps.onFinish,
+        },
+        drawerProps: {
+            width: "500px",
+            onClose: handleClose,
+            open,
+            forceRender: true,
+        },
+        saveButtonProps,
+        deleteButtonProps,
+        formLoading,
+    };
+};

package/src/hooks/form/useForm.ts

@@ -0,0 +1,168 @@
+import React from "react";
+import { FormInstance, FormProps, Form } from "antd";
+import { useForm as useFormSF } from "sunflower-antd";
+import { ButtonProps } from "antd";
+
+import {
+    HttpError,
+    BaseRecord,
+    useForm as useFormCore,
+    UseFormReturnType as UseFormReturnTypeCore,
+    useWarnAboutChange,
+    UseFormProps as UseFormPropsCore,
+    CreateResponse,
+    UpdateResponse,
+    pickNotDeprecated,
+} from "@refinedev/core";
+
+export type UseFormProps<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+> = UseFormPropsCore<TData, TError, TVariables> & {
+    submitOnEnter?: boolean;
+    /**
+     * Shows notification when unsaved changes exist
+     */
+    warnWhenUnsavedChanges?: boolean;
+};
+
+export type UseFormReturnType<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+> = UseFormReturnTypeCore<TData, TError, TVariables> & {
+    form: FormInstance<TVariables>;
+    formProps: FormProps<TVariables>;
+    saveButtonProps: ButtonProps & {
+        onClick: () => void;
+    };
+    onFinish: (
+        values?: TVariables,
+    ) => Promise<CreateResponse<TData> | UpdateResponse<TData> | void>;
+};
+
+/**
+ * `useForm` is used to manage forms. It uses Ant Design {@link https://ant.design/components/form/ Form} data scope management under the hood and returns the required props for managing the form actions.
+ *
+ * @see {@link https://refine.dev/docs/api-references/hooks/form/useForm} for more details.
+ *
+ * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/api-references/interfaceReferences#baserecord `BaseRecord`}
+ * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/api-references/interfaceReferences#httperror `HttpError`}
+ * @typeParam TVariables - Values for params. default `{}`
+ *
+ *
+ */
+export const useForm = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+>({
+    action,
+    resource,
+    onMutationSuccess: onMutationSuccessProp,
+    onMutationError,
+    submitOnEnter = false,
+    warnWhenUnsavedChanges: warnWhenUnsavedChangesProp,
+    redirect,
+    successNotification,
+    errorNotification,
+    meta,
+    metaData,
+    liveMode,
+    liveParams,
+    mutationMode,
+    dataProviderName,
+    onLiveEvent,
+    invalidates,
+    undoableTimeout,
+    queryOptions,
+    createMutationOptions,
+    updateMutationOptions,
+    id: idFromProps,
+}: UseFormProps<TData, TError, TVariables> = {}): UseFormReturnType<
+    TData,
+    TError,
+    TVariables
+> => {
+    const [formAnt] = Form.useForm();
+    const formSF = useFormSF<TData, TVariables>({
+        form: formAnt,
+    });
+    const { form } = formSF;
+
+    const useFormCoreResult = useFormCore<TData, TError, TVariables>({
+        onMutationSuccess: onMutationSuccessProp
+            ? onMutationSuccessProp
+            : undefined,
+        onMutationError,
+        redirect,
+        action,
+        resource,
+        successNotification,
+        errorNotification,
+        meta: pickNotDeprecated(meta, metaData),
+        metaData: pickNotDeprecated(meta, metaData),
+        liveMode,
+        liveParams,
+        mutationMode,
+        dataProviderName,
+        onLiveEvent,
+        invalidates,
+        undoableTimeout,
+        queryOptions,
+        createMutationOptions,
+        updateMutationOptions,
+        id: idFromProps,
+    });
+
+    const { formLoading, onFinish, queryResult, id } = useFormCoreResult;
+
+    const {
+        warnWhenUnsavedChanges: warnWhenUnsavedChangesRefine,
+        setWarnWhen,
+    } = useWarnAboutChange();
+    const warnWhenUnsavedChanges =
+        warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;
+
+    React.useEffect(() => {
+        form.resetFields();
+    }, [queryResult?.data?.data, id]);
+
+    const onKeyUp = (event: React.KeyboardEvent<HTMLFormElement>) => {
+        if (submitOnEnter && event.key === "Enter") {
+            form.submit();
+        }
+    };
+
+    const onValuesChange = (changeValues: object) => {
+        if (changeValues && warnWhenUnsavedChanges) {
+            setWarnWhen(true);
+        }
+        return changeValues;
+    };
+
+    const saveButtonProps = {
+        disabled: formLoading,
+        onClick: () => {
+            form.submit();
+        },
+    };
+
+    return {
+        form: formSF.form,
+        formProps: {
+            ...formSF.formProps,
+            onFinish: (values: TVariables) =>
+                onFinish(values).catch((error) => error),
+            onKeyUp,
+            onValuesChange,
+            initialValues: queryResult?.data?.data,
+        },
+        saveButtonProps,
+        ...useFormCoreResult,
+        onFinish: async (values?: TVariables) => {
+            return await onFinish(values ?? formSF.form.getFieldsValue(true));
+        },
+    };
+};

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

@@ -0,0 +1,5 @@
+export {
+    useModalForm,
+    UseModalFormProps,
+    UseModalFormReturnType,
+} from "./useModalForm";

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

@@ -0,0 +1,286 @@
+import { useCallback, useEffect } from "react";
+import { FormInstance, FormProps, ModalProps } from "antd";
+import {
+    useModalForm as useModalFormSF,
+    UseModalFormConfig as UseModalFormConfigSF,
+} from "sunflower-antd";
+
+import {
+    useMutationMode,
+    useTranslate,
+    useWarnAboutChange,
+    HttpError,
+    UseFormProps as UseFormPropsCore,
+    BaseRecord,
+    LiveModeProps,
+    BaseKey,
+    userFriendlyResourceName,
+    useResource,
+    FormWithSyncWithLocationParams,
+    useParsed,
+    useGo,
+} from "@refinedev/core";
+import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
+import React from "react";
+
+export type useModalFormFromSFReturnType<TData, TVariables> = {
+    open: boolean;
+    form: FormInstance<TVariables>;
+    show: (id?: BaseKey) => void;
+    close: () => void;
+    modalProps: ModalProps;
+    formProps: FormProps<TVariables>;
+    formLoading: boolean;
+    defaultFormValuesLoading: boolean;
+    formValues: {};
+    initialValues: {};
+    formResult: undefined;
+    submit: (values?: TVariables) => Promise<TData>;
+    /** @deprecated Please use `open` instead. */
+    visible: boolean;
+};
+
+type useModalFormConfig = {
+    action: "show" | "edit" | "create" | "clone";
+};
+
+export type UseModalFormReturnType<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+> = Omit<
+    UseFormReturnType<TData, TError, TVariables>,
+    "saveButtonProps" | "deleteButtonProps"
+> &
+    useModalFormFromSFReturnType<TData, TVariables>;
+
+export type UseModalFormProps<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+> = UseFormPropsCore<TData, TError, TVariables> &
+    UseFormProps<TData, TError, TVariables> &
+    UseModalFormConfigSF &
+    useModalFormConfig &
+    LiveModeProps &
+    FormWithSyncWithLocationParams;
+/**
+ * `useModalForm` hook allows you to manage a form within a modal. It returns Ant Design {@link https://ant.design/components/form/ Form} and {@link https://ant.design/components/modal/ Modal} components props.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/form/useModalForm} for more details.
+ *
+ * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/api-references/interfaceReferences#baserecord `BaseRecord`}
+ * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/api-references/interfaceReferences#httperror `HttpError`}
+ * @typeParam TVariables - Values for params. default `{}`
+ *
+ *
+ */
+export const useModalForm = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+>({
+    mutationMode: mutationModeProp,
+    syncWithLocation,
+    ...rest
+}: UseModalFormProps<TData, TError, TVariables>): UseModalFormReturnType<
+    TData,
+    TError,
+    TVariables
+> => {
+    const initiallySynced = React.useRef(false);
+
+    const useFormProps = useForm<TData, TError, TVariables>({
+        ...rest,
+        mutationMode: mutationModeProp,
+    });
+
+    const { form, formProps, id, setId, formLoading, mutationResult } =
+        useFormProps;
+
+    const { resource, action: actionFromParams } = useResource(rest.resource);
+
+    const parsed = useParsed();
+    const go = useGo();
+
+    const action = rest.action ?? 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 translate = useTranslate();
+
+    const { warnWhen, setWarnWhen } = useWarnAboutChange();
+
+    const sunflowerUseModal = useModalFormSF<TData, TVariables>({
+        ...rest,
+        form: form,
+    });
+
+    const {
+        visible,
+        close,
+        show,
+        form: modalForm,
+        formProps: modalFormProps,
+        modalProps,
+    } = sunflowerUseModal;
+
+    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 { 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,
+    };
+
+    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);
+        sunflowerUseModal.close();
+    }, [warnWhen]);
+
+    const handleShow = useCallback((id?: BaseKey) => {
+        setId?.(id);
+
+        sunflowerUseModal.show();
+    }, []);
+
+    return {
+        ...useFormProps,
+        ...sunflowerUseModal,
+        show: handleShow,
+        close: handleClose,
+        open: visible,
+        formProps: {
+            ...modalFormProps,
+            ...useFormProps.formProps,
+            onValuesChange: formProps?.onValuesChange,
+            onKeyUp: formProps?.onKeyUp,
+            onFinish: formProps.onFinish,
+        },
+        modalProps: {
+            ...modalProps,
+            width: "1000px",
+            okButtonProps: saveButtonPropsSF,
+            title: translate(
+                `${resource?.name}.titles.${rest.action}`,
+                `${userFriendlyResourceName(
+                    `${rest.action} ${
+                        resource?.meta?.label ??
+                        resource?.options?.label ??
+                        resource?.label ??
+                        resource?.name
+                    }`,
+                    "singular",
+                )}`,
+            ),
+            okText: translate("buttons.save", "Save"),
+            cancelText: translate("buttons.cancel", "Cancel"),
+            onCancel: handleClose,
+            forceRender: true,
+        },
+        formLoading,
+    };
+};

package/src/hooks/form/useStepsForm/index.ts

@@ -0,0 +1,5 @@
+export {
+    useStepsForm,
+    UseStepsFormProps,
+    UseStepsFormReturnType,
+} from "./useStepsForm";