@refinedev/antd 5.0.0

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

@@ -0,0 +1,91 @@
+import {
+    useStepsForm as useStepsFormSF,
+    UseStepsFormConfig,
+} from "sunflower-antd";
+import { FormInstance, FormProps } from "antd";
+
+import {
+    HttpError,
+    UseFormProps as UseFormPropsCore,
+    BaseRecord,
+} from "@refinedev/core";
+
+import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
+
+export type UseStepsFormFromSFReturnType<TData, TVariables> = {
+    current: number;
+    gotoStep: (step: number) => void;
+    stepsProps: {
+        current: number;
+        onChange: (currentStep: number) => void;
+    };
+    formProps: FormProps<TVariables>;
+    formLoading: boolean;
+    defaultFormValuesLoading: boolean;
+    formValues: {};
+    initialValues: {};
+    formResult: undefined;
+    form: FormInstance<TVariables>;
+    submit: (values?: TVariables) => Promise<TData>;
+};
+
+export type UseStepsFormReturnType<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+> = UseFormReturnType<TData, TError, TVariables> &
+    UseStepsFormFromSFReturnType<TData, TVariables>;
+
+export type UseStepsFormProps<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+> = UseFormPropsCore<TData, TError, TVariables> &
+    UseFormProps<TData, TError, TVariables> &
+    UseStepsFormConfig;
+
+/**
+ * `useStepsForm` hook allows you to split your form under an Ant Design based {@link https://ant.design/components/steps/ Steps} component and provides you with a few useful functionalities that will help you manage your form.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/form/useStepsForm} 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 useStepsForm = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+>(
+    props: UseStepsFormProps<TData, TError, TVariables> = {},
+): UseStepsFormReturnType<TData, TError, TVariables> => {
+    const useFormProps = useForm<TData, TError, TVariables>({ ...props });
+    const { form, formProps } = useFormProps;
+
+    const stepsPropsSunflower = useStepsFormSF<TData, TVariables>({
+        isBackValidate: false,
+        form: form,
+        submit: (values: any) => {
+            formProps?.onFinish?.(values);
+        },
+        ...props,
+    });
+
+    return {
+        ...useFormProps,
+        ...stepsPropsSunflower,
+        formProps: {
+            ...stepsPropsSunflower.formProps,
+            ...useFormProps.formProps,
+            onValuesChange: formProps?.onValuesChange,
+            onKeyUp: formProps?.onKeyUp,
+        },
+        saveButtonProps: {
+            ...useFormProps.saveButtonProps,
+            onClick: () => stepsPropsSunflower.submit(),
+        },
+    };
+};

package/src/hooks/import/index.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { ButtonProps, notification, UploadProps, Progress } from "antd";
+import {
+    useTranslate,
+    useResource,
+    BaseRecord,
+    HttpError,
+    useImport as useImportCore,
+    UseImportReturnType,
+    ImportOptions,
+    pickNotDeprecated,
+} from "@refinedev/core";
+
+/**
+ * `useImport` hook allows you to handle your csv import logic easily.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/import/useImport} for more details.
+ *
+ * @typeParam TItem - Interface of parsed csv data
+ * @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 mutation function
+ *
+ */
+export const useImport = <
+    TItem = any,
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = any,
+>({
+    resource: resourceFromProp,
+    resourceName,
+    mapData = (item) => item as unknown as TVariables,
+    paparseOptions,
+    batchSize = Number.MAX_SAFE_INTEGER,
+    onFinish,
+    meta,
+    metaData,
+    dataProviderName,
+    onProgress: onProgressFromProp,
+}: ImportOptions<TItem, TVariables, TData> = {}): Omit<
+    UseImportReturnType<TData, TVariables, TError>,
+    "handleChange" | "inputProps"
+> & {
+    uploadProps: UploadProps;
+    buttonProps: ButtonProps;
+} => {
+    const t = useTranslate();
+
+    const { resource } = useResource(resourceFromProp ?? resourceName);
+
+    const { mutationResult, isLoading, handleChange } = useImportCore<
+        TItem,
+        TData,
+        TError,
+        TVariables
+    >({
+        resource: resource?.identifier ?? resource?.name,
+        mapData,
+        paparseOptions,
+        batchSize,
+        meta: pickNotDeprecated(meta, metaData),
+        metaData: pickNotDeprecated(meta, metaData),
+        dataProviderName,
+        onFinish,
+        onProgress:
+            onProgressFromProp ??
+            (({ totalAmount, processedAmount }) => {
+                if (totalAmount > 0 && processedAmount > 0) {
+                    const description = (
+                        <div
+                            style={{
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                marginTop: "-7px",
+                            }}
+                        >
+                            <Progress
+                                type="circle"
+                                percent={Math.floor(
+                                    (processedAmount / totalAmount) * 100,
+                                )}
+                                width={50}
+                                strokeColor="#1890ff"
+                                status="normal"
+                            />
+                            <span style={{ marginLeft: 8, width: "100%" }}>
+                                {t(
+                                    "notifications.importProgress",
+                                    {
+                                        processed: processedAmount,
+                                        total: totalAmount,
+                                    },
+                                    `Importing: ${processedAmount}/${totalAmount}`,
+                                )}
+                            </span>
+                        </div>
+                    );
+
+                    notification.open({
+                        description,
+                        message: null,
+                        key: `${resource}-import`,
+                        duration: 0,
+                    });
+
+                    if (processedAmount >= totalAmount) {
+                    }
+
+                    if (processedAmount === totalAmount) {
+                        setTimeout(() => {
+                            notification.destroy(`${resource}-import`);
+                        }, 4500);
+                    }
+                }
+            }),
+    });
+
+    return {
+        uploadProps: {
+            onChange: handleChange,
+            beforeUpload: () => false,
+            showUploadList: false,
+            accept: ".csv",
+        },
+        buttonProps: {
+            type: "default",
+            loading: isLoading,
+        },
+        mutationResult,
+        isLoading,
+    };
+};

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from "./form";
+export * from "./table";
+export * from "./fields";
+export * from "./import";
+export * from "./list";
+export * from "./useFileUploadState";
+export * from "./modal";

package/src/hooks/list/index.ts

@@ -0,0 +1 @@
+export * from "./useSimpleList";

package/src/hooks/list/useSimpleList/index.ts

@@ -0,0 +1 @@
+export { useSimpleList } from "./useSimpleList";

package/src/hooks/list/useSimpleList/useSimpleList.ts

@@ -0,0 +1,229 @@
+import { Children, createElement, Fragment } from "react";
+import { ListProps, FormProps, Form, Grid } from "antd";
+
+import {
+    BaseRecord,
+    CrudFilters,
+    SuccessErrorNotification,
+    HttpError,
+    LiveModeProps,
+    useTable as useTableCore,
+    useTableProps as useTablePropsCore,
+    useTableReturnType,
+    pickNotDeprecated,
+} from "@refinedev/core";
+import { useLiveMode } from "@refinedev/core";
+import { PaginationLink } from "@hooks/table/useTable/paginationLink";
+import { PaginationConfig } from "antd/lib/pagination";
+
+export type useSimpleListProps<TData, TError, TSearchVariables> =
+    useTablePropsCore<TData, TError> & {
+        onSearch?: (
+            data: TSearchVariables,
+        ) => CrudFilters | Promise<CrudFilters>;
+    } & SuccessErrorNotification &
+        LiveModeProps;
+
+export type useSimpleListReturnType<
+    TData extends BaseRecord = BaseRecord,
+    TSearchVariables = unknown,
+> = Omit<useTableReturnType<TData>, "tableQueryResult"> & {
+    listProps: ListProps<TData>;
+    queryResult: useTableReturnType["tableQueryResult"];
+    searchFormProps: FormProps<TSearchVariables>;
+};
+
+/**
+ * By using `useSimpleList` you get props for your records from API in accordance with Ant Design {@link https://ant.design/components/list/ `<List>`} component.
+ * All features such as pagination, sorting come out of the box.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/list/useSimpleList} 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 TSearchVariables - Antd form values
+ *
+ */
+
+export const useSimpleList = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TSearchVariables = unknown,
+>({
+    resource,
+    initialCurrent,
+    initialPageSize,
+    pagination,
+    hasPagination = true,
+    initialSorter,
+    permanentSorter,
+    initialFilter,
+    permanentFilter,
+    defaultSetFilterBehavior,
+    filters: filtersFromProp,
+    sorters: sortersFromProp,
+    onSearch,
+    queryOptions,
+    syncWithLocation,
+    successNotification,
+    errorNotification,
+    liveMode: liveModeFromProp,
+    onLiveEvent,
+    liveParams,
+    meta,
+    metaData,
+    dataProviderName,
+}: useSimpleListProps<
+    TData,
+    TError,
+    TSearchVariables
+> = {}): useSimpleListReturnType<TData, TSearchVariables> => {
+    const {
+        sorters,
+        sorter,
+        filters,
+        current,
+        pageSize,
+        pageCount,
+        setFilters,
+        setCurrent,
+        setPageSize,
+        setSorter,
+        setSorters,
+        createLinkForSyncWithLocation,
+        tableQueryResult: queryResult,
+    } = useTableCore({
+        resource,
+        initialSorter,
+        permanentSorter,
+        initialFilter,
+        permanentFilter,
+        filters: filtersFromProp,
+        sorters: sortersFromProp,
+        defaultSetFilterBehavior,
+        initialCurrent,
+        initialPageSize,
+        queryOptions,
+        successNotification,
+        errorNotification,
+        liveMode: liveModeFromProp,
+        onLiveEvent,
+        liveParams,
+        meta: pickNotDeprecated(meta, metaData),
+        metaData: pickNotDeprecated(meta, metaData),
+        syncWithLocation,
+        dataProviderName,
+        pagination,
+        hasPagination,
+    });
+
+    const hasPaginationString = hasPagination === false ? "off" : "server";
+    const isPaginationEnabled =
+        (pagination?.mode ?? hasPaginationString) !== "off";
+
+    const breakpoint = Grid.useBreakpoint();
+
+    const liveMode = useLiveMode(liveModeFromProp);
+
+    const [form] = Form.useForm<TSearchVariables>();
+
+    const { data, isFetched, isLoading } = queryResult;
+
+    const onChange = (page: number, pageSize?: number): void => {
+        if (isPaginationEnabled) {
+            setCurrent(page);
+            setPageSize(pageSize || 10);
+        }
+    };
+
+    const onFinish = async (values: TSearchVariables) => {
+        if (onSearch) {
+            const searchFilters = await onSearch(values);
+            if (isPaginationEnabled) {
+                setCurrent?.(1);
+            }
+            return setFilters(searchFilters);
+        }
+    };
+
+    const antdPagination = (): false | PaginationConfig => {
+        if (isPaginationEnabled) {
+            return {
+                itemRender: (page, type, element) => {
+                    const link = createLinkForSyncWithLocation({
+                        pagination: {
+                            pageSize,
+                            current: page,
+                        },
+                        sorters,
+                        filters,
+                    });
+
+                    if (type === "page") {
+                        return createElement(PaginationLink, {
+                            to: link,
+                            element: `${page}`,
+                        });
+                    }
+                    if (type === "next" || type === "prev") {
+                        return createElement(PaginationLink, {
+                            to: link,
+                            element: element,
+                        });
+                    }
+
+                    if (type === "jump-next" || type === "jump-prev") {
+                        const elementChildren = (element as React.ReactElement)
+                            ?.props?.children;
+
+                        return createElement(PaginationLink, {
+                            to: link,
+                            element:
+                                Children.count(elementChildren) > 1
+                                    ? createElement(
+                                          Fragment,
+                                          {},
+                                          elementChildren,
+                                      )
+                                    : elementChildren,
+                        });
+                    }
+
+                    return element;
+                },
+                pageSize,
+                current,
+                simple: !breakpoint.sm,
+                total: data?.total,
+                onChange,
+            };
+        }
+
+        return false;
+    };
+
+    return {
+        searchFormProps: {
+            form,
+            onFinish,
+        },
+        listProps: {
+            dataSource: data?.data,
+            loading: liveMode === "auto" ? isLoading : !isFetched,
+            pagination: antdPagination(),
+        },
+        queryResult,
+        filters,
+        setFilters,
+        sorter,
+        setSorter,
+        sorters,
+        setSorters,
+        current,
+        setCurrent,
+        pageSize,
+        setPageSize,
+        pageCount,
+        createLinkForSyncWithLocation,
+    };
+};

package/src/hooks/modal/index.ts

@@ -0,0 +1 @@
+export * from "./useModal";

package/src/hooks/modal/useModal/index.tsx

@@ -0,0 +1,43 @@
+import { ModalProps } from "antd";
+import {
+    useModal as useCoreModal,
+    useModalReturnType as useCoreModelReturnType,
+} from "@refinedev/core";
+
+export type useModalReturnType = {
+    modalProps: ModalProps;
+} & Omit<useCoreModelReturnType, "visible">;
+
+export type useModalProps = {
+    /**
+     * Default props for Ant Design {@link https://ant.design/components/modal/ `<Modal>`} component.
+     */
+    modalProps?: ModalProps;
+};
+
+/**
+ * By using `useModal` you get props for your records from API in accordance with Ant Design {@link https://ant.design/components/modal/ `<Modal>`} component.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/ui/useModal} for more details.
+ */
+export const useModal = ({
+    modalProps = {},
+}: useModalProps = {}): useModalReturnType => {
+    const { show, close, visible } = useCoreModal({
+        defaultVisible: modalProps.open,
+    });
+
+    return {
+        modalProps: {
+            ...modalProps,
+            onCancel: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                modalProps.onCancel?.(e);
+                close();
+            },
+            open: visible,
+            visible,
+        },
+        show,
+        close,
+    };
+};

package/src/hooks/table/index.ts

@@ -0,0 +1,2 @@
+export * from "./useTable";
+export * from "./useEditableTable";

package/src/hooks/table/useEditableTable/index.ts

@@ -0,0 +1 @@
+export { useEditableTable } from "./useEditableTable";

package/src/hooks/table/useEditableTable/useEditableTable.ts

@@ -0,0 +1,87 @@
+import { useTable } from "@hooks";
+import { BaseKey, BaseRecord, HttpError, UseFormProps } from "@refinedev/core";
+import { ButtonProps } from "antd";
+
+import { useTableProps, useTableReturnType } from "../useTable";
+import { UseFormReturnType, useForm } from "../../form/useForm";
+
+export type useEditableTableReturnType<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+    TSearchVariables = unknown,
+> = useTableReturnType<TData, TError, TSearchVariables> &
+    UseFormReturnType<TData, TError, TVariables> & {
+        saveButtonProps: ButtonProps & {
+            onClick: () => void;
+        };
+        cancelButtonProps: ButtonProps & {
+            onClick: () => void;
+        };
+        editButtonProps: (id: BaseKey) => ButtonProps & {
+            onClick: () => void;
+        };
+        isEditing: (id: BaseKey) => boolean;
+    };
+
+type useEditableTableProps<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+    TSearchVariables = unknown,
+> = useTableProps<TData, TError, TSearchVariables> &
+    UseFormProps<TData, TError, TVariables>;
+
+/**
+ * `useEditeableTable` allows you to implement edit feature on the table with ease,
+ * on top of all the features that {@link https://refine.dev/docs/api-references/hooks/table/useTable `useTable`} provides.
+ * `useEditableTable` return properties that can be used on Ant Design's {@link https://ant.design/components/table/ `<Table>`}
+ * and {@link https://ant.design/components/form/ `<Form>`} components.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/table/useEditableTable} for more details.
+ */
+export const useEditableTable = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TVariables = {},
+    TSearchVariables = unknown,
+>(
+    props: useEditableTableProps<
+        TData,
+        TError,
+        TVariables,
+        TSearchVariables
+    > = {},
+): useEditableTableReturnType<TData, TError, TVariables, TSearchVariables> => {
+    const table = useTable<TData, TError, TSearchVariables>({ ...props });
+    const edit = useForm<TData, TError, TVariables>({
+        ...props,
+        action: "edit",
+        redirect: false,
+    });
+
+    const { id: editId, setId, saveButtonProps } = edit;
+
+    const cancelButtonProps = {
+        onClick: () => {
+            setId(undefined);
+        },
+    };
+
+    const editButtonProps = (id: BaseKey) => {
+        return {
+            onClick: () => setId(id),
+        };
+    };
+
+    const isEditing = (id: BaseKey) => id === editId;
+
+    return {
+        ...table,
+        ...edit,
+        saveButtonProps,
+        cancelButtonProps,
+        editButtonProps,
+        isEditing,
+    };
+};

package/src/hooks/table/useTable/index.ts

@@ -0,0 +1 @@
+export { useTable, useTableProps, useTableReturnType } from "./useTable";

package/src/hooks/table/useTable/paginationLink.tsx

@@ -0,0 +1,27 @@
+import { useLink, useRouterContext, useRouterType } from "@refinedev/core";
+import React, { ReactNode } from "react";
+
+interface PaginationLinkProps {
+    to: string;
+    element: ReactNode;
+}
+
+export const PaginationLink = ({ to, element }: PaginationLinkProps) => {
+    const { Link: LegacyLink } = useRouterContext();
+    const routerType = useRouterType();
+    const Link = useLink();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    return (
+        <ActiveLink
+            to={to}
+            replace={false}
+            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+                e.preventDefault();
+            }}
+        >
+            {element}
+        </ActiveLink>
+    );
+};