@refinedev/antd 5.37.4 → 5.37.6

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

@@ -1,22 +1,14 @@
 import React from "react";
 import { Button } from "antd";
 import { RedoOutlined } from "@ant-design/icons";
+import { useRefreshButton } from "@refinedev/core";
 import {
-    useTranslate,
-    useResource,
-    useInvalidate,
-    queryKeys,
-    pickDataProvider,
-} from "@refinedev/core";
-import {
-    RefineButtonClassNames,
-    RefineButtonTestIds,
+  RefineButtonClassNames,
+  RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
 import { RefreshButtonProps } from "../types";
 
-import { useQueryClient } from "@tanstack/react-query";
-
 /**
  * `<RefreshButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component
  * to update the data shown on the page via the {@link https://refine.dev/docs/api-reference/core/hooks/invalidate/useInvalidate `useInvalidate`} hook.
@@ -24,53 +16,31 @@ import { useQueryClient } from "@tanstack/react-query";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/refresh-button} for more details.
  */
 export const RefreshButton: React.FC<RefreshButtonProps> = ({
-    resource: resourceNameFromProps,
-    resourceNameOrRouteName: propResourceNameOrRouteName,
-    recordItemId,
-    hideText = false,
-    dataProviderName,
-    children,
-    onClick,
-    meta: _meta,
-    metaData: _metaData,
-    ...rest
+  resource: resourceNameFromProps,
+  resourceNameOrRouteName: propResourceNameOrRouteName,
+  recordItemId,
+  hideText = false,
+  dataProviderName,
+  children,
+  meta: _meta,
+  metaData: _metaData,
+  ...rest
 }) => {
-    const translate = useTranslate();
-
-    const queryClient = useQueryClient();
-    const invalidates = useInvalidate();
-
-    const { resources, identifier, id } = useResource(
-        resourceNameFromProps ?? propResourceNameOrRouteName,
-    );
-
-    const isInvalidating = !!queryClient.isFetching({
-        queryKey: queryKeys(
-            identifier,
-            pickDataProvider(identifier, dataProviderName, resources),
-        ).detail(recordItemId ?? id),
-    });
-
-    const handleInvalidate = () => {
-        invalidates({
-            id: recordItemId ?? id,
-            invalidates: ["detail"],
-            dataProviderName,
-            resource: identifier,
-        });
-    };
-
-    return (
-        <Button
-            onClick={(e) => {
-                onClick ? onClick(e) : handleInvalidate();
-            }}
-            icon={<RedoOutlined spin={isInvalidating} />}
-            data-testid={RefineButtonTestIds.RefreshButton}
-            className={RefineButtonClassNames.RefreshButton}
-            {...rest}
-        >
-            {!hideText && (children ?? translate("buttons.refresh", "Refresh"))}
-        </Button>
-    );
+  const { onClick, label, loading } = useRefreshButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+    id: recordItemId,
+    dataProviderName,
+  });
+
+  return (
+    <Button
+      onClick={onClick}
+      icon={<RedoOutlined spin={loading} />}
+      data-testid={RefineButtonTestIds.RefreshButton}
+      className={RefineButtonClassNames.RefreshButton}
+      {...rest}
+    >
+      {!hideText && (children ?? label)}
+    </Button>
+  );
 };

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

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

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

@@ -1,19 +1,10 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { EyeOutlined } from "@ant-design/icons";
+import { useShowButton } 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 { ShowButtonProps } from "../types";
@@ -26,92 +17,50 @@ import { ShowButtonProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/show-button} for more details.
  */
 export const ShowButton: React.FC<ShowButtonProps> = ({
-    resource: resourceNameFromProps,
-    resourceNameOrRouteName: propResourceNameOrRouteName,
-    recordItemId,
-    hideText = false,
+  resource: resourceNameFromProps,
+  resourceNameOrRouteName: propResourceNameOrRouteName,
+  recordItemId,
+  hideText = false,
+  accessControl,
+  meta,
+  children,
+  onClick,
+  ...rest
+}) => {
+  const { to, label, title, hidden, disabled, LinkComponent } = useShowButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+    id: recordItemId,
     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 { showUrl: generateShowUrl } = 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: "show",
-        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 showUrl =
-        resource && (recordItemId || id)
-            ? generateShowUrl(resource, recordItemId! ?? id!, meta)
-            : "";
+  });
 
-    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-        return null;
-    }
+  if (hidden) return null;
 
-    return (
-        <ActiveLink
-            to={showUrl}
-            replace={false}
-            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-                if (data?.can === false) {
-                    e.preventDefault();
-                    return;
-                }
-                if (onClick) {
-                    e.preventDefault();
-                    onClick(e);
-                }
-            }}
-        >
-            <Button
-                icon={<EyeOutlined />}
-                disabled={data?.can === false}
-                title={createButtonDisabledTitle()}
-                data-testid={RefineButtonTestIds.ShowButton}
-                className={RefineButtonClassNames.ShowButton}
-                {...rest}
-            >
-                {!hideText && (children ?? translate("buttons.show", "Show"))}
-            </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={<EyeOutlined />}
+        disabled={disabled}
+        title={title}
+        data-testid={RefineButtonTestIds.ShowButton}
+        className={RefineButtonClassNames.ShowButton}
+        {...rest}
+      >
+        {!hideText && (children ?? label)}
+      </Button>
+    </LinkComponent>
+  );
 };

package/src/components/buttons/types.ts

@@ -1,15 +1,15 @@
 import { ButtonProps, UploadProps } from "antd";
 import {
-    RefineCloneButtonProps,
-    RefineCreateButtonProps,
-    RefineDeleteButtonProps,
-    RefineEditButtonProps,
-    RefineExportButtonProps,
-    RefineImportButtonProps,
-    RefineListButtonProps,
-    RefineRefreshButtonProps,
-    RefineSaveButtonProps,
-    RefineShowButtonProps,
+  RefineCloneButtonProps,
+  RefineCreateButtonProps,
+  RefineDeleteButtonProps,
+  RefineEditButtonProps,
+  RefineExportButtonProps,
+  RefineImportButtonProps,
+  RefineListButtonProps,
+  RefineRefreshButtonProps,
+  RefineSaveButtonProps,
+  RefineShowButtonProps,
 } from "@refinedev/ui-types";
 
 export type ShowButtonProps = RefineShowButtonProps<ButtonProps>;
@@ -25,16 +25,16 @@ export type EditButtonProps = RefineEditButtonProps<ButtonProps>;
 export type ExportButtonProps = RefineExportButtonProps<ButtonProps>;
 
 export type ImportButtonProps = RefineImportButtonProps & {
-    /**
-     * Sets the button type
-     * @type [UploadProps](https://ant.design/components/upload/#API)
-     */
-    uploadProps: UploadProps;
-    /**
-     * Sets props of the button
-     * @type [ButtonProps](https://ant.design/components/button/#API)
-     */
-    buttonProps: ButtonProps;
+  /**
+   * Sets the button type
+   * @type [UploadProps](https://ant.design/components/upload/#API)
+   */
+  uploadProps: UploadProps;
+  /**
+   * Sets props of the button
+   * @type [ButtonProps](https://ant.design/components/button/#API)
+   */
+  buttonProps: ButtonProps;
 };
 
 export type ListButtonProps = RefineListButtonProps<ButtonProps>;

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

@@ -1,20 +1,20 @@
 import React from "react";
 import { Card, Space, Spin } from "antd";
 import {
-    useNavigation,
-    useTranslate,
-    useUserFriendlyName,
-    useRefineContext,
-    useRouterType,
-    useResource,
-    useBack,
+  useNavigation,
+  useTranslate,
+  useUserFriendlyName,
+  useRefineContext,
+  useRouterType,
+  useResource,
+  useBack,
 } from "@refinedev/core";
 
 import {
-    Breadcrumb,
-    SaveButton,
-    PageHeader,
-    SaveButtonProps,
+  Breadcrumb,
+  SaveButton,
+  PageHeader,
+  SaveButtonProps,
 } from "@components";
 import { CreateProps } from "../types";
 
@@ -25,120 +25,120 @@ import { CreateProps } from "../types";
  * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/basic-views/create} for more details.
  */
 export const Create: React.FC<CreateProps> = ({
-    title,
-    saveButtonProps: saveButtonPropsFromProps,
-    children,
-    resource: resourceFromProps,
-    isLoading = false,
-    breadcrumb: breadcrumbFromProps,
-    wrapperProps,
-    headerProps,
-    contentProps,
-    headerButtonProps,
-    headerButtons,
-    footerButtonProps,
-    footerButtons,
-    goBack: goBackFromProps,
+  title,
+  saveButtonProps: saveButtonPropsFromProps,
+  children,
+  resource: resourceFromProps,
+  isLoading = false,
+  breadcrumb: breadcrumbFromProps,
+  wrapperProps,
+  headerProps,
+  contentProps,
+  headerButtonProps,
+  headerButtons,
+  footerButtonProps,
+  footerButtons,
+  goBack: goBackFromProps,
 }) => {
-    const translate = useTranslate();
-    const { options: { breadcrumb: globalBreadcrumb } = {} } =
-        useRefineContext();
+  const translate = useTranslate();
+  const {
+    options: { breadcrumb: globalBreadcrumb } = {},
+  } = useRefineContext();
 
-    const routerType = useRouterType();
-    const back = useBack();
-    const { goBack } = useNavigation();
-    const getUserFriendlyName = useUserFriendlyName();
+  const routerType = useRouterType();
+  const back = useBack();
+  const { goBack } = useNavigation();
+  const getUserFriendlyName = useUserFriendlyName();
 
-    const { resource, action, identifier } = useResource(resourceFromProps);
+  const { resource, action, identifier } = useResource(resourceFromProps);
 
-    const breadcrumb =
-        typeof breadcrumbFromProps === "undefined"
-            ? globalBreadcrumb
-            : breadcrumbFromProps;
+  const breadcrumb =
+    typeof breadcrumbFromProps === "undefined"
+      ? globalBreadcrumb
+      : breadcrumbFromProps;
 
-    const saveButtonProps: SaveButtonProps = {
-        ...(isLoading ? { disabled: true } : {}),
-        ...saveButtonPropsFromProps,
-        htmlType: "submit",
-    };
+  const saveButtonProps: SaveButtonProps = {
+    ...(isLoading ? { disabled: true } : {}),
+    ...saveButtonPropsFromProps,
+    htmlType: "submit",
+  };
 
-    const defaultFooterButtons = (
-        <>
-            <SaveButton {...saveButtonProps} />
-        </>
-    );
+  const defaultFooterButtons = (
+    <>
+      <SaveButton {...saveButtonProps} />
+    </>
+  );
 
-    return (
-        <div {...(wrapperProps ?? {})}>
-            <PageHeader
-                ghost={false}
-                backIcon={goBackFromProps}
-                onBack={
-                    action !== "list" || typeof action !== "undefined"
-                        ? routerType === "legacy"
-                            ? goBack
-                            : back
-                        : undefined
-                }
-                title={
-                    title ??
-                    translate(
-                        `${identifier}.titles.create`,
-                        `Create ${getUserFriendlyName(
-                            resource?.meta?.label ??
-                                resource?.options?.label ??
-                                resource?.label ??
-                                identifier,
-                            "singular",
-                        )}`,
-                    )
-                }
-                breadcrumb={
-                    typeof breadcrumb !== "undefined" ? (
-                        <>{breadcrumb}</> ?? undefined
-                    ) : (
-                        <Breadcrumb />
-                    )
-                }
-                extra={
-                    <Space wrap {...(headerButtonProps ?? {})}>
-                        {headerButtons
-                            ? typeof headerButtons === "function"
-                                ? headerButtons({
-                                      defaultButtons: null,
-                                  })
-                                : headerButtons
-                            : null}
-                    </Space>
-                }
-                {...(headerProps ?? {})}
-            >
-                <Spin spinning={isLoading}>
-                    <Card
-                        bordered={false}
-                        actions={[
-                            <Space
-                                key="action-buttons"
-                                style={{ float: "right", marginRight: 24 }}
-                                {...(footerButtonProps ?? {})}
-                            >
-                                {footerButtons
-                                    ? typeof footerButtons === "function"
-                                        ? footerButtons({
-                                              defaultButtons:
-                                                  defaultFooterButtons,
-                                              saveButtonProps: saveButtonProps,
-                                          })
-                                        : footerButtons
-                                    : defaultFooterButtons}
-                            </Space>,
-                        ]}
-                        {...(contentProps ?? {})}
-                    >
-                        {children}
-                    </Card>
-                </Spin>
-            </PageHeader>
-        </div>
-    );
+  return (
+    <div {...(wrapperProps ?? {})}>
+      <PageHeader
+        ghost={false}
+        backIcon={goBackFromProps}
+        onBack={
+          action !== "list" || typeof action !== "undefined"
+            ? routerType === "legacy"
+              ? goBack
+              : back
+            : undefined
+        }
+        title={
+          title ??
+          translate(
+            `${identifier}.titles.create`,
+            `Create ${getUserFriendlyName(
+              resource?.meta?.label ??
+                resource?.options?.label ??
+                resource?.label ??
+                identifier,
+              "singular",
+            )}`,
+          )
+        }
+        breadcrumb={
+          typeof breadcrumb !== "undefined" ? (
+            <>{breadcrumb}</> ?? undefined
+          ) : (
+            <Breadcrumb />
+          )
+        }
+        extra={
+          <Space wrap {...(headerButtonProps ?? {})}>
+            {headerButtons
+              ? typeof headerButtons === "function"
+                ? headerButtons({
+                    defaultButtons: null,
+                  })
+                : headerButtons
+              : null}
+          </Space>
+        }
+        {...(headerProps ?? {})}
+      >
+        <Spin spinning={isLoading}>
+          <Card
+            bordered={false}
+            actions={[
+              <Space
+                key="action-buttons"
+                style={{ float: "right", marginRight: 24 }}
+                {...(footerButtonProps ?? {})}
+              >
+                {footerButtons
+                  ? typeof footerButtons === "function"
+                    ? footerButtons({
+                        defaultButtons: defaultFooterButtons,
+                        saveButtonProps: saveButtonProps,
+                      })
+                    : footerButtons
+                  : defaultFooterButtons}
+              </Space>,
+            ]}
+            {...(contentProps ?? {})}
+          >
+            {children}
+          </Card>
+        </Spin>
+      </PageHeader>
+    </div>
+  );
 };