@refinedev/antd 5.37.4 → 6.0.0

package/src/components/layout/sider/index.tsx

@@ -1,26 +1,26 @@
 import React, { useState } from "react";
 import { Layout, Menu, Grid, ConfigProvider, Drawer, Button } from "antd";
 import {
-    DashboardOutlined,
-    LogoutOutlined,
-    UnorderedListOutlined,
-    BarsOutlined,
+  DashboardOutlined,
+  LogoutOutlined,
+  UnorderedListOutlined,
+  BarsOutlined,
 } from "@ant-design/icons";
 import {
-    useTranslate,
-    useLogout,
-    useTitle,
-    CanAccess,
-    ITreeMenu,
-    useIsExistAuthentication,
-    useRouterContext,
-    useMenu,
-    useRefineContext,
-    useLink,
-    useRouterType,
-    useActiveAuthProvider,
-    pickNotDeprecated,
-    useWarnAboutChange,
+  useTranslate,
+  useLogout,
+  useTitle,
+  CanAccess,
+  ITreeMenu,
+  useIsExistAuthentication,
+  useRouterContext,
+  useMenu,
+  useRefineContext,
+  useLink,
+  useRouterType,
+  useActiveAuthProvider,
+  pickNotDeprecated,
+  useWarnAboutChange,
 } from "@refinedev/core";
 
 import { Title as DefaultTitle } from "@components";
@@ -29,251 +29,243 @@ import { drawerButtonStyles } from "./styles";
 import { RefineLayoutSiderProps } from "../types";
 
 export const Sider: React.FC<RefineLayoutSiderProps> = ({
-    Title: TitleFromProps,
-    render,
-    meta,
+  Title: TitleFromProps,
+  render,
+  meta,
 }) => {
-    const [collapsed, setCollapsed] = useState<boolean>(false);
-    const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
-    const isExistAuthentication = useIsExistAuthentication();
-    const routerType = useRouterType();
-    const NewLink = useLink();
-    const { warnWhen, setWarnWhen } = useWarnAboutChange();
-    const { Link: LegacyLink } = useRouterContext();
-    const Link = routerType === "legacy" ? LegacyLink : NewLink;
-    const TitleFromContext = useTitle();
-    const translate = useTranslate();
-    const { menuItems, selectedKey, defaultOpenKeys } = useMenu({ meta });
-    const breakpoint = Grid.useBreakpoint();
-    const { hasDashboard } = useRefineContext();
-    const authProvider = useActiveAuthProvider();
-    const { mutate: mutateLogout } = useLogout({
-        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-    });
-
-    const isMobile =
-        typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
-
-    const RenderToTitle = TitleFromProps ?? TitleFromContext ?? DefaultTitle;
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
+  const isExistAuthentication = useIsExistAuthentication();
+  const routerType = useRouterType();
+  const NewLink = useLink();
+  const { warnWhen, setWarnWhen } = useWarnAboutChange();
+  const { Link: LegacyLink } = useRouterContext();
+  const Link = routerType === "legacy" ? LegacyLink : NewLink;
+  const TitleFromContext = useTitle();
+  const translate = useTranslate();
+  const { menuItems, selectedKey, defaultOpenKeys } = useMenu({ meta });
+  const breakpoint = Grid.useBreakpoint();
+  const { hasDashboard } = useRefineContext();
+  const authProvider = useActiveAuthProvider();
+  const { mutate: mutateLogout } = useLogout({
+    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+  });
 
-    const renderTreeView = (tree: ITreeMenu[], selectedKey?: string) => {
-        return tree.map((item: ITreeMenu) => {
-            const {
-                icon,
-                label,
-                route,
-                key,
-                name,
-                children,
-                parentName,
-                meta,
-                options,
-            } = item;
-
-            if (children.length > 0) {
-                return (
-                    <CanAccess
-                        key={item.key}
-                        resource={name.toLowerCase()}
-                        action="list"
-                        params={{
-                            resource: item,
-                        }}
-                    >
-                        <Menu.SubMenu
-                            key={item.key}
-                            icon={icon ?? <UnorderedListOutlined />}
-                            title={label}
-                        >
-                            {renderTreeView(children, selectedKey)}
-                        </Menu.SubMenu>
-                    </CanAccess>
-                );
-            }
-            const isSelected = key === selectedKey;
-            const isRoute = !(
-                pickNotDeprecated(meta?.parent, options?.parent, parentName) !==
-                    undefined && children.length === 0
-            );
-            return (
-                <CanAccess
-                    key={item.key}
-                    resource={name.toLowerCase()}
-                    action="list"
-                    params={{
-                        resource: item,
-                    }}
-                >
-                    <Menu.Item
-                        key={item.key}
-                        style={{
-                            fontWeight: isSelected ? "bold" : "normal",
-                        }}
-                        icon={icon ?? (isRoute && <UnorderedListOutlined />)}
-                    >
-                        <Link to={route ?? ""}>{label}</Link>
-                        {!collapsed && isSelected && (
-                            <div className="ant-menu-tree-arrow" />
-                        )}
-                    </Menu.Item>
-                </CanAccess>
-            );
-        });
-    };
+  const isMobile =
+    typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
 
-    const handleLogout = () => {
-        if (warnWhen) {
-            const confirm = window.confirm(
-                translate(
-                    "warnWhenUnsavedChanges",
-                    "Are you sure you want to leave? You have unsaved changes.",
-                ),
-            );
+  const RenderToTitle = TitleFromProps ?? TitleFromContext ?? DefaultTitle;
 
-            if (confirm) {
-                setWarnWhen(false);
-                mutateLogout();
-            }
-        } else {
-            mutateLogout();
-        }
-    };
+  const renderTreeView = (tree: ITreeMenu[], selectedKey?: string) => {
+    return tree.map((item: ITreeMenu) => {
+      const {
+        icon,
+        label,
+        route,
+        key,
+        name,
+        children,
+        parentName,
+        meta,
+        options,
+      } = item;
 
-    const logout = isExistAuthentication && (
-        <Menu.Item
-            key="logout"
-            onClick={handleLogout}
-            icon={<LogoutOutlined />}
+      if (children.length > 0) {
+        return (
+          <CanAccess
+            key={item.key}
+            resource={name.toLowerCase()}
+            action="list"
+            params={{
+              resource: item,
+            }}
+          >
+            <Menu.SubMenu
+              key={item.key}
+              icon={icon ?? <UnorderedListOutlined />}
+              title={label}
+            >
+              {renderTreeView(children, selectedKey)}
+            </Menu.SubMenu>
+          </CanAccess>
+        );
+      }
+      const isSelected = key === selectedKey;
+      const isRoute = !(
+        pickNotDeprecated(meta?.parent, options?.parent, parentName) !==
+          undefined && children.length === 0
+      );
+      return (
+        <CanAccess
+          key={item.key}
+          resource={name.toLowerCase()}
+          action="list"
+          params={{
+            resource: item,
+          }}
         >
-            {translate("buttons.logout", "Logout")}
-        </Menu.Item>
-    );
-
-    const dashboard = hasDashboard ? (
-        <Menu.Item
-            key="dashboard"
+          <Menu.Item
+            key={item.key}
             style={{
-                fontWeight: selectedKey === "/" ? "bold" : "normal",
+              fontWeight: isSelected ? "bold" : "normal",
             }}
-            icon={<DashboardOutlined />}
-        >
-            <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
-            {!collapsed && selectedKey === "/" && (
-                <div className="ant-menu-tree-arrow" />
+            icon={icon ?? (isRoute && <UnorderedListOutlined />)}
+          >
+            <Link to={route ?? ""}>{label}</Link>
+            {!collapsed && isSelected && (
+              <div className="ant-menu-tree-arrow" />
             )}
-        </Menu.Item>
-    ) : null;
+          </Menu.Item>
+        </CanAccess>
+      );
+    });
+  };
 
-    const items = renderTreeView(menuItems, selectedKey);
+  const handleLogout = () => {
+    if (warnWhen) {
+      const confirm = window.confirm(
+        translate(
+          "warnWhenUnsavedChanges",
+          "Are you sure you want to leave? You have unsaved changes.",
+        ),
+      );
 
-    const renderSider = () => {
-        if (render) {
-            return render({
-                dashboard,
-                items,
-                logout,
-                collapsed,
-            });
-        }
-        return (
-            <>
-                {dashboard}
-                {items}
-                {logout}
-            </>
-        );
-    };
+      if (confirm) {
+        setWarnWhen(false);
+        mutateLogout();
+      }
+    } else {
+      mutateLogout();
+    }
+  };
 
-    const renderMenu = () => {
-        return (
-            <>
-                <Menu
-                    theme="dark"
-                    selectedKeys={selectedKey ? [selectedKey] : []}
-                    defaultOpenKeys={defaultOpenKeys}
-                    mode="inline"
-                    onClick={() => {
-                        setDrawerOpen(false);
-                        if (!breakpoint.lg) {
-                            setCollapsed(true);
-                        }
-                    }}
-                >
-                    {renderSider()}
-                </Menu>
-            </>
-        );
-    };
+  const logout = isExistAuthentication && (
+    <Menu.Item key="logout" onClick={handleLogout} icon={<LogoutOutlined />}>
+      {translate("buttons.logout", "Logout")}
+    </Menu.Item>
+  );
 
-    const renderDrawerSider = () => {
-        return (
-            <>
-                <Drawer
-                    open={drawerOpen}
-                    onClose={() => setDrawerOpen(false)}
-                    placement="left"
-                    closable={false}
-                    width={200}
-                    bodyStyle={{
-                        padding: 0,
-                    }}
-                    maskClosable={true}
-                >
-                    <Layout>
-                        <Layout.Sider
-                            style={{ height: "100vh", overflow: "hidden" }}
-                        >
-                            <RenderToTitle collapsed={false} />
-                            {renderMenu()}
-                        </Layout.Sider>
-                    </Layout>
-                </Drawer>
-                <Button
-                    style={drawerButtonStyles}
-                    size="large"
-                    onClick={() => setDrawerOpen(true)}
-                    icon={<BarsOutlined />}
-                ></Button>
-            </>
-        );
-    };
+  const dashboard = hasDashboard ? (
+    <Menu.Item
+      key="dashboard"
+      style={{
+        fontWeight: selectedKey === "/" ? "bold" : "normal",
+      }}
+      icon={<DashboardOutlined />}
+    >
+      <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
+      {!collapsed && selectedKey === "/" && (
+        <div className="ant-menu-tree-arrow" />
+      )}
+    </Menu.Item>
+  ) : null;
 
-    const renderContent = () => {
-        if (isMobile) {
-            return renderDrawerSider();
-        }
+  const items = renderTreeView(menuItems, selectedKey);
 
-        return (
-            <Layout.Sider
-                collapsible
-                collapsed={collapsed}
-                onCollapse={(collapsed: boolean): void =>
-                    setCollapsed(collapsed)
-                }
-                collapsedWidth={80}
-                breakpoint="lg"
-            >
-                <RenderToTitle collapsed={collapsed} />
-                {renderMenu()}
-            </Layout.Sider>
-        );
-    };
+  const renderSider = () => {
+    if (render) {
+      return render({
+        dashboard,
+        items,
+        logout,
+        collapsed,
+      });
+    }
+    return (
+      <>
+        {dashboard}
+        {items}
+        {logout}
+      </>
+    );
+  };
 
+  const renderMenu = () => {
     return (
-        <ConfigProvider
-            theme={{
-                components: {
-                    Menu: {
-                        colorItemBg: "transparent",
-                        colorItemText: "#fff",
-                        colorItemTextSelected: "#fff",
-                        colorItemBgSelected: "transparent",
-                        colorItemTextHover: "#fff",
-                    },
-                },
-            }}
+      <>
+        <Menu
+          theme="dark"
+          selectedKeys={selectedKey ? [selectedKey] : []}
+          defaultOpenKeys={defaultOpenKeys}
+          mode="inline"
+          onClick={() => {
+            setDrawerOpen(false);
+            if (!breakpoint.lg) {
+              setCollapsed(true);
+            }
+          }}
         >
-            {renderContent()}
-        </ConfigProvider>
+          {renderSider()}
+        </Menu>
+      </>
     );
+  };
+
+  const renderDrawerSider = () => {
+    return (
+      <>
+        <Drawer
+          open={drawerOpen}
+          onClose={() => setDrawerOpen(false)}
+          placement="left"
+          closable={false}
+          width={200}
+          bodyStyle={{
+            padding: 0,
+          }}
+          maskClosable={true}
+        >
+          <Layout>
+            <Layout.Sider style={{ height: "100vh", overflow: "hidden" }}>
+              <RenderToTitle collapsed={false} />
+              {renderMenu()}
+            </Layout.Sider>
+          </Layout>
+        </Drawer>
+        <Button
+          style={drawerButtonStyles}
+          size="large"
+          onClick={() => setDrawerOpen(true)}
+          icon={<BarsOutlined />}
+        />
+      </>
+    );
+  };
+
+  const renderContent = () => {
+    if (isMobile) {
+      return renderDrawerSider();
+    }
+
+    return (
+      <Layout.Sider
+        collapsible
+        collapsed={collapsed}
+        onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}
+        collapsedWidth={80}
+        breakpoint="lg"
+      >
+        <RenderToTitle collapsed={collapsed} />
+        {renderMenu()}
+      </Layout.Sider>
+    );
+  };
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Menu: {
+            colorItemBg: "transparent",
+            colorItemText: "#fff",
+            colorItemTextSelected: "#fff",
+            colorItemBgSelected: "transparent",
+            colorItemTextHover: "#fff",
+          },
+        },
+      }}
+    >
+      {renderContent()}
+    </ConfigProvider>
+  );
 };

package/src/components/layout/sider/styles.ts

@@ -1,9 +1,9 @@
 import { CSSProperties } from "react";
 
 export const drawerButtonStyles: CSSProperties = {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    position: "fixed",
-    top: 64,
-    zIndex: 999,
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  position: "fixed",
+  top: 64,
+  zIndex: 999,
 };

package/src/components/layout/title/index.tsx

@@ -1,48 +1,48 @@
 import React from "react";
 import {
-    TitleProps,
-    useRouterContext,
-    useRouterType,
-    useLink,
+  TitleProps,
+  useRouterContext,
+  useRouterType,
+  useLink,
 } from "@refinedev/core";
 
 export const Title: React.FC<TitleProps> = ({ collapsed }) => {
-    const routerType = useRouterType();
-    const Link = useLink();
-    const { Link: LegacyLink } = useRouterContext();
+  const routerType = useRouterType();
+  const Link = useLink();
+  const { Link: LegacyLink } = useRouterContext();
 
-    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
 
-    return (
-        <ActiveLink to="/">
-            {collapsed ? (
-                <div
-                    style={{
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }}
-                >
-                    <img
-                        src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine-mini.svg"
-                        alt="Refine"
-                        style={{
-                            margin: "0 auto",
-                            padding: "12px 0",
-                            maxHeight: "65.5px",
-                        }}
-                    />
-                </div>
-            ) : (
-                <img
-                    src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
-                    alt="Refine"
-                    style={{
-                        width: "200px",
-                        padding: "12px 24px",
-                    }}
-                />
-            )}
-        </ActiveLink>
-    );
+  return (
+    <ActiveLink to="/">
+      {collapsed ? (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <img
+            src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine-mini.svg"
+            alt="Refine"
+            style={{
+              margin: "0 auto",
+              padding: "12px 0",
+              maxHeight: "65.5px",
+            }}
+          />
+        </div>
+      ) : (
+        <img
+          src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
+          alt="Refine"
+          style={{
+            width: "200px",
+            padding: "12px 24px",
+          }}
+        />
+      )}
+    </ActiveLink>
+  );
 };

package/src/components/layout/types.ts

@@ -1,11 +1,11 @@
 import type {
-    RefineLayoutSiderProps,
-    RefineLayoutHeaderProps,
-    RefineLayoutLayoutProps,
+  RefineLayoutSiderProps,
+  RefineLayoutHeaderProps,
+  RefineLayoutLayoutProps,
 } from "@refinedev/ui-types";
 
 export type {
-    RefineLayoutSiderProps,
-    RefineLayoutHeaderProps,
-    RefineLayoutLayoutProps,
+  RefineLayoutSiderProps,
+  RefineLayoutHeaderProps,
+  RefineLayoutLayoutProps,
 };