@refinedev/antd 5.0.0

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

@@ -0,0 +1,267 @@
+import React, { Children, createElement, Fragment } from "react";
+import { Grid, FormProps, Form, TablePaginationConfig, TableProps } from "antd";
+import { useForm as useFormSF } from "sunflower-antd";
+
+import { SorterResult } from "antd/lib/table/interface";
+
+import {
+    useLiveMode,
+    BaseRecord,
+    CrudFilters,
+    SuccessErrorNotification,
+    HttpError,
+    LiveModeProps,
+    useTable as useTableCore,
+    useTableProps as useTablePropsCore,
+    useTableReturnType as useTableCoreReturnType,
+    pickNotDeprecated,
+} from "@refinedev/core";
+
+import {
+    mapAntdSorterToCrudSorting,
+    mapAntdFilterToCrudFilter,
+} from "@definitions/table";
+import { PaginationLink } from "./paginationLink";
+
+export type useTableProps<
+    TData,
+    TError,
+    TSearchVariables = unknown,
+> = useTablePropsCore<TData, TError> &
+    SuccessErrorNotification &
+    LiveModeProps & {
+        onSearch?: (
+            data: TSearchVariables,
+        ) => CrudFilters | Promise<CrudFilters>;
+    };
+
+export type useTableReturnType<
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TSearchVariables = unknown,
+> = useTableCoreReturnType<TData, TError> & {
+    searchFormProps: FormProps<TSearchVariables>;
+    tableProps: TableProps<TData>;
+};
+
+/**
+ * By using useTable, you are able to get properties that are compatible with
+ * Ant Design {@link https://ant.design/components/table/ `<Table>`} component.
+ * All features such as sorting, filtering and pagination comes as out of box.
+ *
+ * @see {@link https://refine.dev/docs/api-references/hooks/table/useTable} for more details.
+ */
+
+export const useTable = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+    TSearchVariables = unknown,
+>({
+    onSearch,
+    initialCurrent,
+    initialPageSize,
+    hasPagination = true,
+    pagination,
+    initialSorter,
+    permanentSorter,
+    initialFilter,
+    permanentFilter,
+    defaultSetFilterBehavior,
+    filters: filtersFromProp,
+    sorters: sortersFromProp,
+    syncWithLocation,
+    resource,
+    successNotification,
+    errorNotification,
+    queryOptions,
+    liveMode: liveModeFromProp,
+    onLiveEvent,
+    liveParams,
+    meta,
+    metaData,
+    dataProviderName,
+}: useTableProps<TData, TError, TSearchVariables> = {}): useTableReturnType<
+    TData,
+    TError,
+    TSearchVariables
+> => {
+    const {
+        tableQueryResult,
+        current,
+        setCurrent,
+        pageSize,
+        setPageSize,
+        filters,
+        setFilters,
+        sorters,
+        setSorters,
+        sorter,
+        setSorter,
+        createLinkForSyncWithLocation,
+        pageCount,
+    } = useTableCore<TData, TError>({
+        permanentSorter,
+        permanentFilter,
+        initialCurrent,
+        initialPageSize,
+        pagination,
+        hasPagination,
+        filters: filtersFromProp,
+        sorters: sortersFromProp,
+        initialSorter,
+        initialFilter,
+        syncWithLocation,
+        resource,
+        defaultSetFilterBehavior,
+        successNotification,
+        errorNotification,
+        queryOptions,
+        liveMode: liveModeFromProp,
+        onLiveEvent,
+        liveParams,
+        meta: pickNotDeprecated(meta, metaData),
+        metaData: pickNotDeprecated(meta, metaData),
+        dataProviderName,
+    });
+    const breakpoint = Grid.useBreakpoint();
+    const [form] = Form.useForm<TSearchVariables>();
+    const formSF = useFormSF<any, TSearchVariables>({
+        form: form,
+    });
+    const liveMode = useLiveMode(liveModeFromProp);
+
+    const hasPaginationString = hasPagination === false ? "off" : "server";
+    const isPaginationEnabled =
+        (pagination?.mode ?? hasPaginationString) !== "off";
+
+    const preferredInitialFilters = pickNotDeprecated(
+        filtersFromProp?.initial,
+        initialFilter,
+    );
+
+    const { data, isFetched, isLoading } = tableQueryResult;
+
+    const onChange = (
+        paginationState: TablePaginationConfig,
+        tableFilters: Record<
+            string,
+            (string | number | boolean) | (string | number | boolean)[] | null
+        >,
+        sorter: SorterResult<any> | SorterResult<any>[],
+    ) => {
+        if (tableFilters && Object.keys(tableFilters).length > 0) {
+            // Map Antd:Filter -> refine:CrudFilter
+            const crudFilters = mapAntdFilterToCrudFilter(
+                tableFilters,
+                filters,
+                preferredInitialFilters,
+            );
+            setFilters(crudFilters);
+        }
+
+        if (sorter && Object.keys(sorter).length > 0) {
+            // Map Antd:Sorter -> refine:CrudSorting
+            const crudSorting = mapAntdSorterToCrudSorting(sorter);
+            setSorters(crudSorting);
+        }
+
+        if (isPaginationEnabled) {
+            setCurrent?.(paginationState.current || 1);
+            setPageSize?.(paginationState.pageSize || 10);
+        }
+    };
+
+    const onFinish = async (value: TSearchVariables) => {
+        if (onSearch) {
+            const searchFilters = await onSearch(value);
+            setFilters(searchFilters);
+
+            if (isPaginationEnabled) {
+                setCurrent?.(1);
+            }
+        }
+    };
+
+    const antdPagination = (): false | TablePaginationConfig => {
+        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,
+                position: !breakpoint.sm ? ["bottomCenter"] : ["bottomRight"],
+                total: data?.total,
+            };
+        }
+
+        return false;
+    };
+
+    return {
+        searchFormProps: {
+            ...formSF.formProps,
+            onFinish,
+        },
+        tableProps: {
+            dataSource: data?.data,
+            loading: liveMode === "auto" ? isLoading : !isFetched,
+            onChange,
+            pagination: antdPagination(),
+            scroll: { x: true },
+        },
+        tableQueryResult,
+        sorters,
+        sorter,
+        filters,
+        setSorters,
+        setSorter,
+        setFilters,
+        current,
+        setCurrent,
+        pageSize,
+        setPageSize,
+        pageCount,
+        createLinkForSyncWithLocation,
+    };
+};

package/src/hooks/useFileUploadState/index.ts

@@ -0,0 +1,34 @@
+import { useCallback, useMemo, useState } from "react";
+import { UploadChangeParam } from "antd/lib/upload";
+
+export type UseFileUploadStateType = () => {
+    isLoading: boolean;
+    onChange: (info: UploadChangeParam) => void;
+};
+
+export const useFileUploadState: UseFileUploadStateType = () => {
+    const [isLoading, setIsloading] = useState(false);
+
+    const onChange = useCallback((info: UploadChangeParam) => {
+        const fileListLoadings = mapStatusToLoading(info.fileList);
+
+        if (fileListLoadings.includes(true)) {
+            setIsloading(true);
+        } else {
+            setIsloading(false);
+        }
+    }, []);
+
+    return useMemo(() => ({ isLoading, onChange }), [isLoading]);
+};
+
+const mapStatusToLoading = (files: UploadChangeParam["fileList"]) => {
+    return files.map((file) => {
+        switch (file.status) {
+            case "uploading":
+                return true;
+            default:
+                return false;
+        }
+    });
+};

package/src/index.tsx

@@ -0,0 +1,11 @@
+export * from "./hooks";
+export * from "./providers";
+export * from "./components";
+
+export {
+    getDefaultSortOrder,
+    getDefaultFilter,
+    mapAntdSorterToCrudSorting,
+    mapAntdFilterToCrudFilter,
+} from "./definitions/table";
+export { getValueFromEvent } from "./definitions/upload";

package/src/interfaces/field.ts

@@ -0,0 +1,3 @@
+export type FieldProps<T> = {
+    value: T;
+};

package/src/interfaces/index.ts

@@ -0,0 +1,23 @@
+import { IResourceItem } from "@refinedev/core";
+
+export type BaseRecord = {
+    id?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+};
+export interface Option {
+    label: string;
+    value: string;
+}
+
+export type ITreeMenu = IMenuItem & {
+    children: ITreeMenu[];
+};
+
+export type IMenuItem = IResourceItem & {
+    key: string;
+    route: string;
+};
+
+export * from "./field";
+export * from "./upload";

package/src/interfaces/upload.ts

@@ -0,0 +1,9 @@
+export interface UploadedFile {
+    uid: string;
+    name: string;
+    url: string;
+    type: string;
+    size: number;
+    percent: number;
+    status: "error" | "success" | "done" | "uploading" | "removed";
+}

package/src/providers/index.ts

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

package/src/providers/notificationProvider/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { NotificationProvider } from "@refinedev/core";
+import { notification } from "antd";
+
+import { UndoableNotification } from "@components/undoableNotification";
+
+export const notificationProvider: NotificationProvider = {
+    open: ({
+        key,
+        message,
+        description,
+        type,
+        cancelMutation,
+        undoableTimeout,
+    }) => {
+        if (type === "progress") {
+            notification.open({
+                key,
+                description: (
+                    <UndoableNotification
+                        notificationKey={key}
+                        message={message}
+                        cancelMutation={cancelMutation}
+                        undoableTimeout={undoableTimeout}
+                    />
+                ),
+                message: null,
+                duration: 0,
+                closeIcon: <></>,
+            });
+        } else {
+            notification.open({
+                key,
+                description: message,
+                message: description ?? null,
+                type,
+            });
+        }
+    },
+    close: (key) => notification.destroy(key),
+};

package/src/types/index.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: string;
+    export default content;
+}

package/src/types/sunflower.d.ts

@@ -0,0 +1,86 @@
+import { FormInstance, FormProps } from "antd";
+import { UseFormConfig, UseModalFormConfig } from "sunflower-antd";
+export interface UseStepsFormConfig
+    extends Omit<UseFormConfig, "defaultFormValues"> {
+    defaultCurrent?: number;
+    total?: number;
+    isBackValidate?: boolean;
+}
+declare module "sunflower-antd" {
+    export const useStepsForm: <TData, TVariables>(
+        config: UseStepsFormConfig,
+    ) => {
+        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 declare const useForm: <TData, TVariables>(
+        config: UseFormConfig,
+    ) => {
+        form: FormInstance<TVariables>;
+        formProps:
+            | {
+                  form: FormInstance<TVariables>;
+                  onFinish: (formValue: TVariables) => Promise<TData>;
+                  initialValues: {};
+              }
+            | {
+                  onSubmit(e: any): void;
+                  form?: undefined;
+                  onFinish?: undefined;
+                  initialValues?: undefined;
+              };
+        defaultFormValuesLoading: boolean;
+        formValues: {};
+        initialValues: {};
+        formResult: undefined;
+        formLoading: boolean;
+        submit: (values?: TVariables) => Promise<TData>;
+    };
+
+    export declare const useModalForm: <TData, TVariables>(
+        config: Omit<UseModalFormConfig, "defaultFormValues">,
+    ) => {
+        form: FormInstance<TVariables>;
+        open: boolean;
+        show: () => void;
+        close: () => void;
+        modalProps: {
+            onOk: () => void;
+            visible: boolean;
+            onCancel: () => void;
+        };
+        formProps:
+            | {
+                  form: FormInstance<TVariables>;
+                  onFinish: (formValue: TVariables) => Promise<TData>;
+                  initialValues: {};
+              }
+            | {
+                  onSubmit(e: any): void;
+                  form?: undefined;
+                  onFinish?: undefined;
+                  initialValues?: undefined;
+              };
+        formLoading: boolean;
+        defaultFormValuesLoading: boolean;
+        formValues: {};
+        initialValues: {};
+        formResult: undefined;
+        submit: (values?: TVariables) => Promise<TData>;
+        /** @deprecated Please use `open` instead. */
+        visible: boolean;
+    };
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "include": ["src"],
+    "extends": "../../tsconfig.build.json",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "baseUrl": ".",
+        "allowSyntheticDefaultImports": true,
+        "paths": {
+            "@components/*": ["src/components/*"],
+            "@components": ["src/components"],
+            "@containers/*": ["src/containers/*"],
+            "@containers": ["src/containers"],
+            "@pages/*": ["src/pages/*"],
+            "@pages": ["src/pages"],
+            "@contexts/*": ["src/contexts/*"],
+            "@contexts": ["src/contexts"],
+            "@dataProviders/*": ["src/dataProviders/*"],
+            "@dataProviders": ["src/dataProviders"],
+            "@hooks/*": ["src/hooks/*"],
+            "@hooks": ["src/hooks"],
+            "@test/*": ["test/*"],
+            "@test": ["test"],
+            "@definitions/*": ["src/definitions/*"],
+            "@definitions": ["src/definitions"]
+        },
+        "typeRoots": ["./src/types", "../../node_modules/@types"]
+    }
+}