@refinedev/antd 5.0.0

package/src/components/table/components/filterDropdown/index.tsx

@@ -0,0 +1,112 @@
+import React, { ReactNode, useState } from "react";
+import { Button, Space } from "antd";
+import type { FilterDropdownProps as AntdFilterDropdownProps } from "antd/lib/table/interface";
+import dayjs from "dayjs";
+import { FilterOutlined } from "@ant-design/icons";
+import { useTranslate } from "@refinedev/core";
+
+export type FilterDropdownProps = AntdFilterDropdownProps & {
+    mapValue?: (selectedKeys: React.Key[]) => any;
+    children: ReactNode;
+};
+
+/**
+ * `<FilterDropdown>` is a helper component for {@link https://ant.design/components/table/#components-table-demo-custom-filter-panel filter dropdowns in Ant Design `<Table>` components.}
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/filter-dropdown} for more details.
+ */
+export const FilterDropdown: React.FC<FilterDropdownProps> = (props) => {
+    const {
+        setSelectedKeys,
+        confirm,
+        clearFilters,
+        mapValue,
+        selectedKeys,
+        children,
+    } = props;
+
+    const [value, setValue] = useState<any[] | undefined>(selectedKeys);
+    const translate = useTranslate();
+
+    const clearFilter = () => {
+        if (clearFilters) {
+            setValue([]);
+            clearFilters();
+        }
+    };
+
+    const onFilter = () => {
+        const _mappedValue = mappedValue(value);
+
+        let keys;
+        if (typeof _mappedValue === "number") {
+            keys = `${_mappedValue}`;
+        } else if (dayjs.isDayjs(_mappedValue)) {
+            keys = [_mappedValue.toISOString()];
+        } else {
+            keys = _mappedValue;
+        }
+
+        setSelectedKeys(keys);
+
+        confirm?.();
+    };
+
+    const mappedValue = (value: any) => (mapValue ? mapValue(value) : value);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onChange = (e: any) => {
+        if (typeof e === "object") {
+            if (Array.isArray(e)) {
+                const _mappedValue = mappedValue(e);
+
+                setValue(_mappedValue);
+                return setSelectedKeys(_mappedValue);
+            }
+
+            const changeEvent =
+                !e || !e.target || dayjs.isDayjs(e)
+                    ? { target: { value: e } }
+                    : e;
+
+            const { target }: React.ChangeEvent<HTMLInputElement> = changeEvent;
+            const _mappedValue = mappedValue(target.value);
+            setValue(_mappedValue);
+            return;
+        }
+
+        const _mappedValue = mappedValue(e);
+
+        setValue(_mappedValue);
+    };
+
+    const childrenWithProps = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                onChange,
+                value: mappedValue(value),
+            });
+        }
+        return child;
+    });
+    return (
+        <div
+            style={{
+                padding: 10,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-end",
+            }}
+        >
+            <div style={{ marginBottom: 15 }}>{childrenWithProps}</div>
+            <Space>
+                <Button type="primary" size="small" onClick={() => onFilter()}>
+                    <FilterOutlined /> {translate("buttons.filter", "Filter")}
+                </Button>
+                <Button danger size="small" onClick={() => clearFilter()}>
+                    {translate("buttons.clear", "Clear")}
+                </Button>
+            </Space>
+        </div>
+    );
+};

package/src/components/table/components/index.ts

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

package/src/components/table/index.ts

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

package/src/components/undoableNotification/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Button, notification, Progress } from "antd";
+import { OpenNotificationParams } from "@refinedev/core";
+import { UndoOutlined } from "@ant-design/icons";
+
+export type UndoableNotificationProps = {
+    notificationKey: OpenNotificationParams["key"];
+    message: OpenNotificationParams["message"];
+    cancelMutation: OpenNotificationParams["cancelMutation"];
+    undoableTimeout: OpenNotificationParams["undoableTimeout"];
+};
+
+export const UndoableNotification: React.FC<UndoableNotificationProps> = ({
+    notificationKey,
+    message,
+    cancelMutation,
+    undoableTimeout,
+}) => (
+    <div
+        style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginTop: "-7px",
+        }}
+    >
+        <Progress
+            type="circle"
+            percent={(undoableTimeout ?? 0) * 20}
+            format={(time) => time && time / 20}
+            width={50}
+            strokeColor="#1890ff"
+            status="normal"
+        />
+        <span style={{ marginLeft: 8, width: "100%" }}>{message}</span>
+        <Button
+            style={{ flexShrink: 0 }}
+            onClick={() => {
+                cancelMutation?.();
+                notification.destroy(notificationKey ?? "");
+            }}
+            disabled={undoableTimeout === 0}
+            icon={<UndoOutlined />}
+        ></Button>
+    </div>
+);

package/src/definitions/index.ts

@@ -0,0 +1,2 @@
+export * from "./table";
+export * from "./upload";

package/src/definitions/table/index.ts

@@ -0,0 +1,113 @@
+import {
+    CrudFilters,
+    CrudOperators,
+    CrudSorting,
+    CrudFilter,
+    getDefaultFilter as getDefaultFilterCore,
+    getDefaultSortOrder as getDefaultSortOrderCore,
+    ConditionalFilter,
+    LogicalFilter,
+} from "@refinedev/core";
+import { SortOrder, SorterResult } from "antd/lib/table/interface";
+
+export const getDefaultSortOrder = (
+    columnName: string,
+    sorter?: CrudSorting,
+): SortOrder | undefined => {
+    const sort = getDefaultSortOrderCore(columnName, sorter);
+
+    if (sort) {
+        return `${sort}end`;
+    }
+
+    return undefined;
+};
+
+/**
+ * @deprecated getDefaultFilter moved to `@refinedev/core`. Use from `@refinedev/core`
+ */
+export const getDefaultFilter = (
+    columnName: string,
+    filters?: CrudFilters,
+    operatorType: CrudOperators = "eq",
+): CrudFilter["value"] | undefined => {
+    return getDefaultFilterCore(columnName, filters, operatorType);
+};
+
+export const mapAntdSorterToCrudSorting = (
+    sorter: SorterResult<any> | SorterResult<any>[],
+): CrudSorting => {
+    const crudSorting: CrudSorting = [];
+    if (Array.isArray(sorter)) {
+        sorter
+            .sort((a, b) => {
+                return ((a.column?.sorter as { multiple?: number }).multiple ??
+                    0) <
+                    ((b.column?.sorter as { multiple?: number }).multiple ?? 0)
+                    ? -1
+                    : 0;
+            })
+            .map((item) => {
+                if (item.field && item.order) {
+                    const field = Array.isArray(item.field)
+                        ? item.field.join(".")
+                        : `${item.field}`;
+
+                    crudSorting.push({
+                        field: `${item.columnKey ?? field}`,
+                        order: item.order.replace("end", "") as "asc" | "desc",
+                    });
+                }
+            });
+    } else {
+        if (sorter.field && sorter.order) {
+            const field = Array.isArray(sorter.field)
+                ? sorter.field.join(".")
+                : `${sorter.field}`;
+
+            crudSorting.push({
+                field: `${sorter.columnKey ?? field}`,
+                order: sorter.order.replace("end", "") as "asc" | "desc",
+            });
+        }
+    }
+
+    return crudSorting;
+};
+
+export const mapAntdFilterToCrudFilter = (
+    tableFilters: Record<
+        string,
+        (string | number | boolean) | (string | number | boolean)[] | null
+    >,
+    prevFilters: CrudFilters,
+    initialFilters?: CrudFilters,
+): CrudFilters => {
+    const crudFilters: CrudFilters = [];
+    const mapInitialFilter: Record<string, CrudFilter> = (
+        initialFilters ?? []
+    ).reduce((acc, item) => {
+        const field =
+            (item as ConditionalFilter).key || (item as LogicalFilter).field;
+        return { ...acc, [field]: item };
+    }, {});
+
+    Object.keys(tableFilters).map((field) => {
+        const value = tableFilters[field];
+        const operator =
+            prevFilters
+                .filter((i) => i.operator !== "or")
+                .find((p: any) => p.field === field)?.operator ||
+            mapInitialFilter[field]?.operator;
+
+        if (operator !== "or" && operator !== "and") {
+            crudFilters.push({
+                field,
+                operator: operator ?? (Array.isArray(value) ? "in" : "eq"),
+                value,
+            });
+        }
+    });
+
+    return crudFilters;
+};

package/src/definitions/upload/index.ts

@@ -0,0 +1,29 @@
+import type { UploadFile, UploadChangeParam } from "antd/lib/upload/interface";
+
+export const getValueFromEvent = (event: UploadChangeParam): UploadFile[] => {
+    const { fileList } = event;
+
+    return [...fileList];
+};
+
+export function file2Base64(file: UploadFile): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        const resultHandler = () => {
+            if (reader.result) {
+                reader.removeEventListener("load", resultHandler, false);
+
+                resolve(reader.result as string);
+            }
+        };
+
+        reader.addEventListener("load", resultHandler, false);
+
+        reader.readAsDataURL(file.originFileObj as Blob);
+        reader.onerror = (error) => {
+            reader.removeEventListener("load", resultHandler, false);
+            return reject(error);
+        };
+    });
+}

package/src/hooks/fields/index.ts

@@ -0,0 +1,3 @@
+export * from "./useSelect";
+export * from "./useCheckboxGroup";
+export * from "./useRadioGroup";

package/src/hooks/fields/useCheckboxGroup/index.ts

@@ -0,0 +1,85 @@
+import { QueryObserverResult } from "@tanstack/react-query";
+
+import { CheckboxGroupProps } from "antd/lib/checkbox";
+import {
+    BaseRecord,
+    GetListResponse,
+    HttpError,
+    UseSelectProps,
+    useSelect,
+    BaseKey,
+    pickNotDeprecated,
+} from "@refinedev/core";
+
+export type UseCheckboxGroupReturnType<TData extends BaseRecord = BaseRecord> =
+    {
+        checkboxGroupProps: CheckboxGroupProps;
+        queryResult: QueryObserverResult<GetListResponse<TData>>;
+    };
+
+/**
+ * `useCheckboxGroup` hook allows you to manage an Ant Design {@link https://ant.design/components/checkbox/#components-checkbox-demo-group Checkbox.Group} component when records in a resource needs to be used as checkbox options.
+ *
+ * @see {@link https://refine.dev/docs/ui-framewors/antd/hooks/field/useCheckboxGroup} for more details.
+ *
+ * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/api-references/interfaceReferences#baserecord `BaseRecord`}
+ *
+ */
+
+type UseCheckboxGroupProps<TData, TError> = Omit<
+    UseSelectProps<TData, TError>,
+    "defaultValue"
+> & {
+    /**
+     * Sets the default value
+     */
+    defaultValue?: BaseKey[];
+};
+
+export const useCheckboxGroup = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+>({
+    resource,
+    sort,
+    sorters,
+    filters,
+    optionLabel,
+    optionValue,
+    queryOptions,
+    fetchSize,
+    pagination,
+    liveMode,
+    defaultValue,
+    onLiveEvent,
+    liveParams,
+    meta,
+    metaData,
+    dataProviderName,
+}: UseCheckboxGroupProps<TData, TError>): UseCheckboxGroupReturnType<TData> => {
+    const { queryResult, options } = useSelect({
+        resource,
+        sort,
+        sorters,
+        filters,
+        optionLabel,
+        optionValue,
+        queryOptions,
+        fetchSize,
+        pagination,
+        liveMode,
+        defaultValue,
+        onLiveEvent,
+        liveParams,
+        meta: pickNotDeprecated(meta, metaData),
+        metaData: pickNotDeprecated(meta, metaData),
+        dataProviderName,
+    });
+    return {
+        checkboxGroupProps: {
+            options,
+            defaultValue,
+        },
+        queryResult,
+    };
+};

package/src/hooks/fields/useRadioGroup/index.ts

@@ -0,0 +1,85 @@
+import { QueryObserverResult } from "@tanstack/react-query";
+
+import { RadioGroupProps } from "antd/lib/radio";
+import {
+    BaseKey,
+    BaseRecord,
+    GetListResponse,
+    HttpError,
+    pickNotDeprecated,
+    useSelect,
+    UseSelectProps,
+} from "@refinedev/core";
+
+export type UseRadioGroupReturnType<TData extends BaseRecord = BaseRecord> = {
+    radioGroupProps: RadioGroupProps;
+    queryResult: QueryObserverResult<GetListResponse<TData>>;
+};
+
+/**
+ * `useRadioGroup` hook allows you to manage an Ant Design {@link https://ant.design/components/radio/#components-radio-demo-radiogroup-with-name Radio.Group} component when records in a resource needs to be used as radio options.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/field/useRadioGroup} for more details.
+ *
+ * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/core/interfaceReferences#baserecord `BaseRecord`}
+ *
+ */
+
+type UseRadioGroupProps<TData, TError> = Omit<
+    UseSelectProps<TData, TError>,
+    "defaultValue"
+> & {
+    /**
+     * Sets the default value
+     */
+    defaultValue?: BaseKey;
+};
+
+export const useRadioGroup = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+>({
+    resource,
+    sort,
+    sorters,
+    filters,
+    optionLabel,
+    optionValue,
+    queryOptions,
+    fetchSize,
+    pagination,
+    liveMode,
+    defaultValue,
+    onLiveEvent,
+    liveParams,
+    meta,
+    metaData,
+    dataProviderName,
+}: UseRadioGroupProps<TData, TError>): UseRadioGroupReturnType<TData> => {
+    const { queryResult, options } = useSelect({
+        resource,
+        sort,
+        sorters,
+        filters,
+        optionLabel,
+        optionValue,
+        queryOptions,
+        fetchSize,
+        pagination,
+        liveMode,
+        defaultValue,
+        onLiveEvent,
+        liveParams,
+        meta: pickNotDeprecated(meta, metaData),
+        metaData: pickNotDeprecated(meta, metaData),
+        dataProviderName,
+    });
+
+    return {
+        radioGroupProps: {
+            options,
+            defaultValue,
+        },
+        queryResult,
+    };
+};

package/src/hooks/fields/useSelect/index.ts

@@ -0,0 +1,47 @@
+import { SelectProps } from "antd/lib/select";
+import { QueryObserverResult } from "@tanstack/react-query";
+
+import {
+    useSelect as useSelectCore,
+    BaseRecord,
+    GetManyResponse,
+    GetListResponse,
+    HttpError,
+    UseSelectProps,
+} from "@refinedev/core";
+
+export type UseSelectReturnType<TData extends BaseRecord = BaseRecord> = {
+    selectProps: SelectProps<{ value: string; label: string }>;
+    queryResult: QueryObserverResult<GetListResponse<TData>>;
+    defaultValueQueryResult: QueryObserverResult<GetManyResponse<TData>>;
+};
+
+/**
+ * `useSelect` hook allows you to manage an Ant Design {@link https://ant.design/components/select/ Select} component when records in a resource needs to be used as select options.
+ *
+ * @see {@link https://refine.dev/docs/api-references/hooks/field/useSelect} for more details.
+ *
+ * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/api-references/interfaceReferences#baserecord `BaseRecord`}
+ *
+ */
+export const useSelect = <
+    TData extends BaseRecord = BaseRecord,
+    TError extends HttpError = HttpError,
+>(
+    props: UseSelectProps<TData, TError>,
+): UseSelectReturnType<TData> => {
+    const { queryResult, defaultValueQueryResult, onSearch, options } =
+        useSelectCore(props);
+
+    return {
+        selectProps: {
+            options,
+            onSearch,
+            loading: defaultValueQueryResult.isFetching,
+            showSearch: true,
+            filterOption: false,
+        },
+        queryResult,
+        defaultValueQueryResult,
+    };
+};

package/src/hooks/form/index.ts

@@ -0,0 +1,17 @@
+export { useForm, UseFormProps, UseFormReturnType } from "./useForm";
+export {
+    useModalForm,
+    UseModalFormProps,
+    UseModalFormReturnType,
+} from "./useModalForm";
+export {
+    useDrawerForm,
+    UseDrawerFormProps,
+    UseDrawerFormConfig,
+    UseDrawerFormReturnType,
+} from "./useDrawerForm";
+export {
+    useStepsForm,
+    UseStepsFormProps,
+    UseStepsFormReturnType,
+} from "./useStepsForm";

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

@@ -0,0 +1,6 @@
+export {
+    useDrawerForm,
+    UseDrawerFormProps,
+    UseDrawerFormConfig,
+    UseDrawerFormReturnType,
+} from "./useDrawerForm";