@refinedev/antd 6.0.0 → 6.0.1

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

@@ -1,22 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { PlusSquareOutlined } from "@ant-design/icons";
-import {
-  useCan,
-  useNavigation,
-  useTranslate,
-  useResource,
-  useRouterContext,
-  useRouterType,
-  useLink,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useCloneButton } from "@refinedev/core";
 import {
   RefineButtonTestIds,
   RefineButtonClassNames,
 } from "@refinedev/ui-types";
 
-import { CloneButtonProps } from "../types";
+import type { CloneButtonProps } from "../types";
 
 /**
  * `<CloneButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button> component`}.
@@ -26,7 +17,6 @@ import { CloneButtonProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/clone-button} for more details.
  */
 export const CloneButton: React.FC<CloneButtonProps> = ({
-  resourceNameOrRouteName: propResourceNameOrRouteName,
   resource: resourceNameFromProps,
   recordItemId,
   hideText = false,
@@ -36,63 +26,24 @@ export const CloneButton: React.FC<CloneButtonProps> = ({
   onClick,
   ...rest
 }) => {
-  const accessControlContext = useContext(AccessControlContext);
-
-  const accessControlEnabled =
-    accessControl?.enabled ??
-    accessControlContext.options.buttons.enableAccessControl;
-
-  const hideIfUnauthorized =
-    accessControl?.hideIfUnauthorized ??
-    accessControlContext.options.buttons.hideIfUnauthorized;
-
-  const { cloneUrl: generateCloneUrl } = useNavigation();
-  const routerType = useRouterType();
-  const Link = useLink();
-  const { Link: LegacyLink } = useRouterContext();
-
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
-  const translate = useTranslate();
-
-  const { id, resource } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const { data } = useCan({
-    resource: resource?.name,
-    action: "create",
-    params: { id: recordItemId ?? id, resource },
-    queryOptions: {
-      enabled: accessControlEnabled,
-    },
+  const { to, LinkComponent, label, disabled, hidden, title } = useCloneButton({
+    id: recordItemId,
+    resource: resourceNameFromProps,
+    accessControl,
+    meta,
   });
 
-  const createButtonDisabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
-
-  const cloneUrl =
-    resource && (recordItemId || id)
-      ? generateCloneUrl(resource, recordItemId! ?? id!, meta)
-      : "";
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
 
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (isHidden) return null;
 
   return (
-    <ActiveLink
-      to={cloneUrl}
+    <LinkComponent
+      to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (data?.can === false) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -104,14 +55,14 @@ export const CloneButton: React.FC<CloneButtonProps> = ({
     >
       <Button
         icon={<PlusSquareOutlined />}
-        disabled={data?.can === false}
-        title={createButtonDisabledTitle()}
+        disabled={isDisabled}
+        title={title}
         data-testid={RefineButtonTestIds.CloneButton}
         className={RefineButtonClassNames.CloneButton}
         {...rest}
       >
-        {!hideText && (children ?? translate("buttons.clone", "Clone"))}
+        {!hideText && (children ?? label)}
       </Button>
-    </ActiveLink>
+    </LinkComponent>
   );
 };

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

@@ -1,22 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { PlusSquareOutlined } from "@ant-design/icons";
-import {
-  useNavigation,
-  useTranslate,
-  useCan,
-  useResource,
-  useRouterContext,
-  useRouterType,
-  useLink,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useCreateButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
-import { CreateButtonProps } from "../types";
+import type { CreateButtonProps } from "../types";
 
 /**
  * <CreateButton> uses Ant Design's {@link https://ant.design/components/button/ `<Button> component`}.
@@ -27,7 +18,6 @@ import { CreateButtonProps } from "../types";
  */
 export const CreateButton: React.FC<CreateButtonProps> = ({
   resource: resourceNameFromProps,
-  resourceNameOrRouteName: propResourceNameOrRouteName,
   hideText = false,
   accessControl,
   meta,
@@ -35,62 +25,25 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
   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 { createUrl: generateCreateUrl } = useNavigation();
-
-  const { resource } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const { data } = useCan({
-    resource: resource?.name,
-    action: "create",
-    queryOptions: {
-      enabled: accessControlEnabled,
-    },
-    params: {
-      resource,
+  const { hidden, disabled, label, title, LinkComponent, to } = useCreateButton(
+    {
+      resource: resourceNameFromProps,
+      meta,
+      accessControl,
     },
-  });
-
-  const createButtonDisabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
+  );
 
-  const createUrl = resource ? generateCreateUrl(resource, meta) : "";
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
 
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (isHidden) return null;
 
   return (
-    <ActiveLink
-      to={createUrl}
+    <LinkComponent
+      to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (data?.can === false) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -102,15 +55,15 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
     >
       <Button
         icon={<PlusSquareOutlined />}
-        disabled={data?.can === false}
-        title={createButtonDisabledTitle()}
+        disabled={isDisabled}
+        title={title}
         data-testid={RefineButtonTestIds.CreateButton}
         className={RefineButtonClassNames.CreateButton}
         type="primary"
         {...rest}
       >
-        {!hideText && (children ?? translate("buttons.create", "Create"))}
+        {!hideText && (children ?? label)}
       </Button>
-    </ActiveLink>
+    </LinkComponent>
   );
 };

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 {
-  useDelete,
-  useTranslate,
-  useMutationMode,
-  useCan,
-  useResource,
-  pickNotDeprecated,
-  useWarnAboutChange,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useDeleteButton } from "@refinedev/core";
 import {
   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.
@@ -26,7 +17,6 @@ import { DeleteButtonProps } from "../types";
  */
 export const DeleteButton: React.FC<DeleteButtonProps> = ({
   resource: resourceNameFromProps,
-  resourceNameOrRouteName: propResourceNameOrRouteName,
   recordItemId,
   onSuccess,
   mutationMode: mutationModeProp,
@@ -35,7 +25,6 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
   errorNotification,
   hideText = false,
   accessControl,
-  metaData,
   meta,
   dataProviderName,
   confirmTitle,
@@ -44,101 +33,56 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
   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 {
+    title,
+    label,
+    hidden,
+    disabled,
+    loading,
+    confirmTitle: defaultConfirmTitle,
+    confirmOkLabel: defaultConfirmOkLabel,
+    cancelLabel: defaultCancelLabel,
+    onConfirm,
+  } = useDeleteButton({
+    resource: resourceNameFromProps,
+    id: recordItemId,
+    dataProviderName,
+    invalidates,
+    meta,
+    onSuccess,
+    mutationMode: mutationModeProp,
+    errorNotification,
+    successNotification,
+    accessControl,
   });
 
-  const disabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
-
-  const { setWarnWhen } = useWarnAboutChange();
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
 
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (isHidden) return null;
 
   return (
     <Popconfirm
       key="delete"
-      okText={confirmOkText ?? translate("buttons.delete", "Delete")}
-      cancelText={confirmCancelText ?? translate("buttons.cancel", "Cancel")}
+      okText={confirmOkText ?? defaultConfirmOkLabel}
+      cancelText={confirmCancelText ?? defaultCancelLabel}
       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?.(value);
-              },
-            },
-          );
-        }
-      }}
-      disabled={
-        typeof rest?.disabled !== "undefined"
-          ? rest.disabled
-          : data?.can === false
-      }
+      title={confirmTitle ?? defaultConfirmTitle}
+      okButtonProps={{ disabled: loading }}
+      onConfirm={onConfirm}
+      disabled={isDisabled}
     >
       <Button
         danger
-        loading={(recordItemId ?? id) === variables?.id && isLoading}
+        loading={loading}
         icon={<DeleteOutlined />}
-        title={disabledTitle()}
-        disabled={data?.can === false}
+        title={title}
+        disabled={isDisabled}
         data-testid={RefineButtonTestIds.DeleteButton}
         className={RefineButtonClassNames.DeleteButton}
         {...rest}
       >
-        {!hideText && (children ?? translate("buttons.delete", "Delete"))}
+        {!hideText && (children ?? label)}
       </Button>
     </Popconfirm>
   );

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

@@ -1,22 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { EditOutlined } from "@ant-design/icons";
-import {
-  useCan,
-  useNavigation,
-  useTranslate,
-  useResource,
-  useRouterContext,
-  useRouterType,
-  useLink,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useEditButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
-import { EditButtonProps } from "../types";
+import type { EditButtonProps } from "../types";
 
 /**
  * `<EditButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component.
@@ -27,7 +18,6 @@ import { EditButtonProps } from "../types";
  */
 export const EditButton: React.FC<EditButtonProps> = ({
   resource: resourceNameFromProps,
-  resourceNameOrRouteName: propResourceNameOrRouteName,
   recordItemId,
   hideText = false,
   accessControl,
@@ -36,64 +26,24 @@ export const EditButton: React.FC<EditButtonProps> = ({
   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 { to, label, title, hidden, disabled, LinkComponent } = useEditButton({
+    resource: resourceNameFromProps,
+    id: recordItemId,
+    meta,
+    accessControl,
   });
 
-  const createButtonDisabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
-
-  const editUrl =
-    resource && (recordItemId ?? id)
-      ? generateEditUrl(resource, recordItemId! ?? id!, meta)
-      : "";
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
 
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (isHidden) return null;
 
   return (
-    <ActiveLink
-      to={editUrl}
+    <LinkComponent
+      to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (data?.can === false) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -105,14 +55,14 @@ export const EditButton: React.FC<EditButtonProps> = ({
     >
       <Button
         icon={<EditOutlined />}
-        disabled={data?.can === false}
-        title={createButtonDisabledTitle()}
+        disabled={isDisabled}
+        title={title}
         data-testid={RefineButtonTestIds.EditButton}
         className={RefineButtonClassNames.EditButton}
         {...rest}
       >
-        {!hideText && (children ?? translate("buttons.edit", "Edit"))}
+        {!hideText && (children ?? label)}
       </Button>
-    </ActiveLink>
+    </LinkComponent>
   );
 };

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

@@ -1,13 +1,13 @@
 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,
 } from "@refinedev/ui-types";
 
-import { ExportButtonProps } from "../types";
+import type { ExportButtonProps } from "../types";
 
 /**
  * `<ExportButton>` is an Ant Design {@link https://ant.design/components/button/ `<Button>`} with a default export icon and a default text with "Export".
@@ -20,7 +20,7 @@ export const ExportButton: React.FC<ExportButtonProps> = ({
   children,
   ...rest
 }) => {
-  const translate = useTranslate();
+  const { label } = useExportButton();
 
   return (
     <Button
@@ -30,7 +30,7 @@ export const ExportButton: React.FC<ExportButtonProps> = ({
       className={RefineButtonClassNames.ExportButton}
       {...rest}
     >
-      {!hideText && (children ?? translate("buttons.export", "Export"))}
+      {!hideText && (children ?? label)}
     </Button>
   );
 };

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

@@ -1,13 +1,13 @@
 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,
 } from "@refinedev/ui-types";
 
-import { ImportButtonProps } from "../types";
+import type { ImportButtonProps } from "../types";
 
 /**
  * `<ImportButton>` is compatible with the {@link https://refine.dev/docs/api-reference/antd/hooks/import/useImport `useImport`} hook and is meant to be used as it's upload button.
@@ -21,8 +21,10 @@ export const ImportButton: React.FC<ImportButtonProps> = ({
   buttonProps,
   hideText = false,
   children,
+  loading,
+  ...rest
 }) => {
-  const translate = useTranslate();
+  const { label } = useImportButton();
 
   return (
     <Upload {...uploadProps}>
@@ -30,9 +32,11 @@ export const ImportButton: React.FC<ImportButtonProps> = ({
         icon={<ImportOutlined />}
         data-testid={RefineButtonTestIds.ImportButton}
         className={RefineButtonClassNames.ImportButton}
+        loading={loading}
         {...buttonProps}
+        {...rest}
       >
-        {!hideText && (children ?? translate("buttons.import", "Import"))}
+        {!hideText && (children ?? label)}
       </Button>
     </Upload>
   );