@refinedev/antd 5.37.4 → 5.37.6

package/src/components/buttons/delete/index.tsx

@@ -1,22 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button, Popconfirm } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
+import { useDeleteButton } from "@refinedev/core";
 import {
-    useDelete,
-    useTranslate,
-    useMutationMode,
-    useCan,
-    useResource,
-    pickNotDeprecated,
-    useWarnAboutChange,
-    AccessControlContext,
-} from "@refinedev/core";
-import {
-    RefineButtonClassNames,
-    RefineButtonTestIds,
+  RefineButtonClassNames,
+  RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
-import { DeleteButtonProps } from "../types";
+import type { DeleteButtonProps } from "../types";
 
 /**
  * `<DeleteButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} and {@link https://ant.design/components/button/ `<Popconfirm>`} components.
@@ -25,126 +16,75 @@ import { DeleteButtonProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/delete-button} for more details.
  */
 export const DeleteButton: React.FC<DeleteButtonProps> = ({
-    resource: resourceNameFromProps,
-    resourceNameOrRouteName: propResourceNameOrRouteName,
-    recordItemId,
+  resource: resourceNameFromProps,
+  resourceNameOrRouteName: propResourceNameOrRouteName,
+  recordItemId,
+  onSuccess,
+  mutationMode: mutationModeProp,
+  children,
+  successNotification,
+  errorNotification,
+  hideText = false,
+  accessControl,
+  metaData,
+  meta,
+  dataProviderName,
+  confirmTitle,
+  confirmOkText,
+  confirmCancelText,
+  invalidates,
+  ...rest
+}) => {
+  const {
+    title,
+    label,
+    hidden,
+    disabled,
+    loading,
+    confirmTitle: defaultConfirmTitle,
+    confirmOkLabel: defaultConfirmOkLabel,
+    cancelLabel: defaultCancelLabel,
+    onConfirm,
+  } = useDeleteButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+    id: recordItemId,
+    dataProviderName,
+    invalidates,
+    meta,
     onSuccess,
     mutationMode: mutationModeProp,
-    children,
-    successNotification,
     errorNotification,
-    hideText = false,
+    successNotification,
     accessControl,
-    metaData,
-    meta,
-    dataProviderName,
-    confirmTitle,
-    confirmOkText,
-    confirmCancelText,
-    invalidates,
-    ...rest
-}) => {
-    const accessControlContext = useContext(AccessControlContext);
-
-    const accessControlEnabled =
-        accessControl?.enabled ??
-        accessControlContext.options.buttons.enableAccessControl;
-
-    const hideIfUnauthorized =
-        accessControl?.hideIfUnauthorized ??
-        accessControlContext.options.buttons.hideIfUnauthorized;
-
-    const translate = useTranslate();
-
-    const { id, resource, identifier } = useResource(
-        resourceNameFromProps ?? propResourceNameOrRouteName,
-    );
-
-    const { mutationMode: mutationModeContext } = useMutationMode();
-
-    const mutationMode = mutationModeProp ?? mutationModeContext;
-
-    const { mutate, isLoading, variables } = useDelete();
-
-    const { data } = useCan({
-        resource: resource?.name,
-        action: "delete",
-        params: { id: recordItemId ?? id, resource },
-        queryOptions: {
-            enabled: accessControlEnabled,
-        },
-    });
-
-    const disabledTitle = () => {
-        if (data?.can) return "";
-        else if (data?.reason) return data.reason;
-        else
-            return translate(
-                "buttons.notAccessTitle",
-                "You don't have permission to access",
-            );
-    };
-
-    const { setWarnWhen } = useWarnAboutChange();
+  });
 
-    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-        return null;
-    }
+  if (hidden) return null;
 
-    return (
-        <Popconfirm
-            key="delete"
-            okText={confirmOkText ?? translate("buttons.delete", "Delete")}
-            cancelText={
-                confirmCancelText ?? translate("buttons.cancel", "Cancel")
-            }
-            okType="danger"
-            title={
-                confirmTitle ?? translate("buttons.confirm", "Are you sure?")
-            }
-            okButtonProps={{ disabled: isLoading }}
-            onConfirm={(): void => {
-                if ((recordItemId ?? id) && identifier) {
-                    setWarnWhen(false);
-                    mutate(
-                        {
-                            id: recordItemId ?? id ?? "",
-                            resource: identifier,
-                            mutationMode,
-                            successNotification,
-                            errorNotification,
-                            meta: pickNotDeprecated(meta, metaData),
-                            metaData: pickNotDeprecated(meta, metaData),
-                            dataProviderName,
-                            invalidates,
-                        },
-                        {
-                            onSuccess: (value) => {
-                                onSuccess && onSuccess(value);
-                            },
-                        },
-                    );
-                }
-            }}
-            disabled={
-                typeof rest?.disabled !== "undefined"
-                    ? rest.disabled
-                    : data?.can === false
-            }
-        >
-            <Button
-                danger
-                loading={(recordItemId ?? id) === variables?.id && isLoading}
-                icon={<DeleteOutlined />}
-                title={disabledTitle()}
-                disabled={data?.can === false}
-                data-testid={RefineButtonTestIds.DeleteButton}
-                className={RefineButtonClassNames.DeleteButton}
-                {...rest}
-            >
-                {!hideText &&
-                    (children ?? translate("buttons.delete", "Delete"))}
-            </Button>
-        </Popconfirm>
-    );
+  return (
+    <Popconfirm
+      key="delete"
+      okText={confirmOkText ?? defaultConfirmOkLabel}
+      cancelText={confirmCancelText ?? defaultCancelLabel}
+      okType="danger"
+      title={confirmTitle ?? defaultConfirmTitle}
+      okButtonProps={{ disabled: loading }}
+      onConfirm={onConfirm}
+      disabled={
+        typeof rest?.disabled !== "undefined" ? rest.disabled : disabled
+      }
+    >
+      <Button
+        danger
+        loading={loading}
+        icon={<DeleteOutlined />}
+        title={title}
+        disabled={disabled}
+        data-testid={RefineButtonTestIds.DeleteButton}
+        className={RefineButtonClassNames.DeleteButton}
+        {...rest}
+      >
+        {!hideText && (children ?? label)}
+      </Button>
+    </Popconfirm>
+  );
 };

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

@@ -1,19 +1,10 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { EditOutlined } from "@ant-design/icons";
+import { useEditButton } from "@refinedev/core";
 import {
-    useCan,
-    useNavigation,
-    useTranslate,
-    useResource,
-    useRouterContext,
-    useRouterType,
-    useLink,
-    AccessControlContext,
-} from "@refinedev/core";
-import {
-    RefineButtonClassNames,
-    RefineButtonTestIds,
+  RefineButtonClassNames,
+  RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
 import { EditButtonProps } from "../types";
@@ -26,93 +17,50 @@ import { EditButtonProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/edit-button} for more details.
  */
 export const EditButton: React.FC<EditButtonProps> = ({
-    resource: resourceNameFromProps,
-    resourceNameOrRouteName: propResourceNameOrRouteName,
-    recordItemId,
-    hideText = false,
-    accessControl,
-    meta,
-    children,
-    onClick,
-    ...rest
+  resource: resourceNameFromProps,
+  resourceNameOrRouteName: propResourceNameOrRouteName,
+  recordItemId,
+  hideText = false,
+  accessControl,
+  meta,
+  children,
+  onClick,
+  ...rest
 }) => {
-    const accessControlContext = useContext(AccessControlContext);
-
-    const accessControlEnabled =
-        accessControl?.enabled ??
-        accessControlContext.options.buttons.enableAccessControl;
-
-    const hideIfUnauthorized =
-        accessControl?.hideIfUnauthorized ??
-        accessControlContext.options.buttons.hideIfUnauthorized;
-
-    const translate = useTranslate();
-
-    const routerType = useRouterType();
-    const Link = useLink();
-    const { Link: LegacyLink } = useRouterContext();
-
-    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
-    const { editUrl: generateEditUrl } = useNavigation();
-
-    const { id, resource } = useResource(
-        resourceNameFromProps ?? propResourceNameOrRouteName,
-    );
-
-    const { data } = useCan({
-        resource: resource?.name,
-        action: "edit",
-        params: { id: recordItemId ?? id, resource },
-        queryOptions: {
-            enabled: accessControlEnabled,
-        },
-    });
-
-    const createButtonDisabledTitle = () => {
-        if (data?.can) return "";
-        else if (data?.reason) return data.reason;
-        else
-            return translate(
-                "buttons.notAccessTitle",
-                "You don't have permission to access",
-            );
-    };
-
-    const editUrl =
-        resource && (recordItemId ?? id)
-            ? generateEditUrl(resource, recordItemId! ?? id!, meta)
-            : "";
+  const { to, label, title, hidden, disabled, LinkComponent } = useEditButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+    id: recordItemId,
+    meta,
+    accessControl,
+  });
 
-    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-        return null;
-    }
+  if (hidden) return null;
 
-    return (
-        <ActiveLink
-            to={editUrl}
-            replace={false}
-            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-                if (data?.can === false) {
-                    e.preventDefault();
-                    return;
-                }
-                if (onClick) {
-                    e.preventDefault();
-                    onClick(e);
-                }
-            }}
-        >
-            <Button
-                icon={<EditOutlined />}
-                disabled={data?.can === false}
-                title={createButtonDisabledTitle()}
-                data-testid={RefineButtonTestIds.EditButton}
-                className={RefineButtonClassNames.EditButton}
-                {...rest}
-            >
-                {!hideText && (children ?? translate("buttons.edit", "Edit"))}
-            </Button>
-        </ActiveLink>
-    );
+  return (
+    <LinkComponent
+      to={to}
+      replace={false}
+      onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        if (onClick) {
+          e.preventDefault();
+          onClick(e);
+        }
+      }}
+    >
+      <Button
+        icon={<EditOutlined />}
+        disabled={disabled}
+        title={title}
+        data-testid={RefineButtonTestIds.EditButton}
+        className={RefineButtonClassNames.EditButton}
+        {...rest}
+      >
+        {!hideText && (children ?? label)}
+      </Button>
+    </LinkComponent>
+  );
 };

package/src/components/buttons/export/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Button } from "antd";
 import { ExportOutlined } from "@ant-design/icons";
-import { useTranslate } from "@refinedev/core";
+import { useExportButton } from "@refinedev/core";
 import {
-    RefineButtonClassNames,
-    RefineButtonTestIds,
+  RefineButtonClassNames,
+  RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
 import { ExportButtonProps } from "../types";
@@ -16,21 +16,21 @@ import { ExportButtonProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/export-button} for more details.
  */
 export const ExportButton: React.FC<ExportButtonProps> = ({
-    hideText = false,
-    children,
-    ...rest
+  hideText = false,
+  children,
+  ...rest
 }) => {
-    const translate = useTranslate();
+  const { label } = useExportButton();
 
-    return (
-        <Button
-            type="default"
-            icon={<ExportOutlined />}
-            data-testid={RefineButtonTestIds.ExportButton}
-            className={RefineButtonClassNames.ExportButton}
-            {...rest}
-        >
-            {!hideText && (children ?? translate("buttons.export", "Export"))}
-        </Button>
-    );
+  return (
+    <Button
+      type="default"
+      icon={<ExportOutlined />}
+      data-testid={RefineButtonTestIds.ExportButton}
+      className={RefineButtonClassNames.ExportButton}
+      {...rest}
+    >
+      {!hideText && (children ?? label)}
+    </Button>
+  );
 };

package/src/components/buttons/import/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Button, Upload } from "antd";
 import { ImportOutlined } from "@ant-design/icons";
-import { useTranslate } from "@refinedev/core";
+import { useImportButton } from "@refinedev/core";
 import {
-    RefineButtonClassNames,
-    RefineButtonTestIds,
+  RefineButtonClassNames,
+  RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
 import { ImportButtonProps } from "../types";
@@ -17,24 +17,25 @@ import { ImportButtonProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/import-button} for more details.
  */
 export const ImportButton: React.FC<ImportButtonProps> = ({
-    uploadProps,
-    buttonProps,
-    hideText = false,
-    children,
+  uploadProps,
+  buttonProps,
+  hideText = false,
+  children,
+  loading,
 }) => {
-    const translate = useTranslate();
+  const { label } = useImportButton();
 
-    return (
-        <Upload {...uploadProps}>
-            <Button
-                icon={<ImportOutlined />}
-                data-testid={RefineButtonTestIds.ImportButton}
-                className={RefineButtonClassNames.ImportButton}
-                {...buttonProps}
-            >
-                {!hideText &&
-                    (children ?? translate("buttons.import", "Import"))}
-            </Button>
-        </Upload>
-    );
+  return (
+    <Upload {...uploadProps}>
+      <Button
+        icon={<ImportOutlined />}
+        data-testid={RefineButtonTestIds.ImportButton}
+        className={RefineButtonClassNames.ImportButton}
+        loading={loading}
+        {...buttonProps}
+      >
+        {!hideText && (children ?? label)}
+      </Button>
+    </Upload>
+  );
 };

package/src/components/buttons/list/index.tsx

@@ -1,21 +1,10 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { BarsOutlined } from "@ant-design/icons";
+import { useListButton } from "@refinedev/core";
 import {
-    useCan,
-    useNavigation,
-    useTranslate,
-    useUserFriendlyName,
-    useResource,
-    useRouterContext,
-    useRouterType,
-    useLink,
-    pickNotDeprecated,
-    AccessControlContext,
-} from "@refinedev/core";
-import {
-    RefineButtonClassNames,
-    RefineButtonTestIds,
+  RefineButtonClassNames,
+  RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
 import { ListButtonProps } from "../types";
@@ -28,109 +17,48 @@ import { ListButtonProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/list-button} for more details.
  */
 export const ListButton: React.FC<ListButtonProps> = ({
-    resource: resourceNameFromProps,
-    resourceNameOrRouteName: propResourceNameOrRouteName,
-    hideText = false,
+  resource: resourceNameFromProps,
+  resourceNameOrRouteName: propResourceNameOrRouteName,
+  hideText = false,
+  accessControl,
+  meta,
+  children,
+  onClick,
+  ...rest
+}) => {
+  const { to, label, title, hidden, disabled, LinkComponent } = useListButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
     accessControl,
     meta,
-    children,
-    onClick,
-    ...rest
-}) => {
-    const accessControlContext = useContext(AccessControlContext);
-
-    const accessControlEnabled =
-        accessControl?.enabled ??
-        accessControlContext.options.buttons.enableAccessControl;
-
-    const hideIfUnauthorized =
-        accessControl?.hideIfUnauthorized ??
-        accessControlContext.options.buttons.hideIfUnauthorized;
-
-    const { listUrl: generateListUrl } = useNavigation();
-    const routerType = useRouterType();
-    const Link = useLink();
-    const { Link: LegacyLink } = useRouterContext();
-    const getUserFriendlyName = useUserFriendlyName();
-
-    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
-    const translate = useTranslate();
-
-    const { resource, identifier } = useResource(
-        resourceNameFromProps ?? propResourceNameOrRouteName,
-    );
-
-    const { data } = useCan({
-        resource: resource?.name,
-        action: "list",
-        queryOptions: {
-            enabled: accessControlEnabled,
-        },
-        params: {
-            resource,
-        },
-    });
-
-    const createButtonDisabledTitle = () => {
-        if (data?.can) return "";
-        else if (data?.reason) return data.reason;
-        else
-            return translate(
-                "buttons.notAccessTitle",
-                "You don't have permission to access",
-            );
-    };
-
-    const listUrl = resource ? generateListUrl(resource, meta) : "";
+  });
 
-    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-        return null;
-    }
+  if (hidden) return null;
 
-    return (
-        <ActiveLink
-            to={listUrl}
-            replace={false}
-            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-                if (data?.can === false) {
-                    e.preventDefault();
-                    return;
-                }
-                if (onClick) {
-                    e.preventDefault();
-                    onClick(e);
-                }
-            }}
-        >
-            <Button
-                icon={<BarsOutlined />}
-                disabled={data?.can === false}
-                title={createButtonDisabledTitle()}
-                data-testid={RefineButtonTestIds.ListButton}
-                className={RefineButtonClassNames.ListButton}
-                {...rest}
-            >
-                {!hideText &&
-                    (children ??
-                        translate(
-                            `${
-                                identifier ??
-                                resourceNameFromProps ??
-                                propResourceNameOrRouteName
-                            }.titles.list`,
-                            getUserFriendlyName(
-                                resource?.meta?.label ??
-                                    resource?.label ??
-                                    identifier ??
-                                    pickNotDeprecated(
-                                        resourceNameFromProps,
-                                        propResourceNameOrRouteName,
-                                    ),
-                                "plural",
-                            ),
-                        ))}
-            </Button>
-        </ActiveLink>
-    );
+  return (
+    <LinkComponent
+      to={to}
+      replace={false}
+      onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        if (onClick) {
+          e.preventDefault();
+          onClick(e);
+        }
+      }}
+    >
+      <Button
+        icon={<BarsOutlined />}
+        disabled={disabled}
+        title={title}
+        data-testid={RefineButtonTestIds.ListButton}
+        className={RefineButtonClassNames.ListButton}
+        {...rest}
+      >
+        {!hideText && (children ?? label)}
+      </Button>
+    </LinkComponent>
+  );
 };