@refinedev/antd 5.47.0 → 6.0.1

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

@@ -1,358 +0,0 @@
-import React, { useContext } from "react";
-import {
-  Layout,
-  Menu,
-  Grid,
-  Drawer,
-  Button,
-  theme,
-  ConfigProvider,
-} from "antd";
-import {
-  DashboardOutlined,
-  LogoutOutlined,
-  UnorderedListOutlined,
-  BarsOutlined,
-  LeftOutlined,
-  RightOutlined,
-} from "@ant-design/icons";
-import {
-  useTranslate,
-  useLogout,
-  useTitle,
-  CanAccess,
-  type ITreeMenu,
-  useIsExistAuthentication,
-  useRouterContext,
-  useMenu,
-  useRefineContext,
-  useLink,
-  useRouterType,
-  useActiveAuthProvider,
-  pickNotDeprecated,
-  useWarnAboutChange,
-} from "@refinedev/core";
-
-import { drawerButtonStyles } from "./styles";
-import type { RefineThemedLayoutV2SiderProps } from "../types";
-import { ThemedTitleV2 } from "@components";
-import { useThemedLayoutContext } from "@hooks";
-
-export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
-  Title: TitleFromProps,
-  render,
-  meta,
-  fixed,
-  activeItemDisabled = false,
-  siderItemsAreCollapsed = true,
-}) => {
-  const { token } = theme.useToken();
-  const {
-    siderCollapsed,
-    setSiderCollapsed,
-    mobileSiderOpen,
-    setMobileSiderOpen,
-  } = useThemedLayoutContext();
-
-  const isExistAuthentication = useIsExistAuthentication();
-  const direction = useContext(ConfigProvider.ConfigContext)?.direction;
-  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 ?? ThemedTitleV2;
-
-  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}
-            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
-      );
-
-      const linkStyle: React.CSSProperties =
-        activeItemDisabled && isSelected ? { pointerEvents: "none" } : {};
-
-      return (
-        <CanAccess
-          key={item.key}
-          resource={name}
-          action="list"
-          params={{
-            resource: item,
-          }}
-        >
-          <Menu.Item
-            key={item.key}
-            icon={icon ?? (isRoute && <UnorderedListOutlined />)}
-            style={linkStyle}
-          >
-            <Link to={route ?? ""} style={linkStyle}>
-              {label}
-            </Link>
-            {!siderCollapsed && isSelected && (
-              <div className="ant-menu-tree-arrow" />
-            )}
-          </Menu.Item>
-        </CanAccess>
-      );
-    });
-  };
-
-  const handleLogout = () => {
-    if (warnWhen) {
-      const confirm = window.confirm(
-        translate(
-          "warnWhenUnsavedChanges",
-          "Are you sure you want to leave? You have unsaved changes.",
-        ),
-      );
-
-      if (confirm) {
-        setWarnWhen(false);
-        mutateLogout();
-      }
-    } else {
-      mutateLogout();
-    }
-  };
-
-  const logout = isExistAuthentication && (
-    <Menu.Item
-      key="logout"
-      onClick={() => handleLogout()}
-      icon={<LogoutOutlined />}
-    >
-      {translate("buttons.logout", "Logout")}
-    </Menu.Item>
-  );
-
-  const dashboard = hasDashboard ? (
-    <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
-      <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
-      {!siderCollapsed && selectedKey === "/" && (
-        <div className="ant-menu-tree-arrow" />
-      )}
-    </Menu.Item>
-  ) : null;
-
-  const defaultExpandMenuItems = (() => {
-    if (siderItemsAreCollapsed) return [];
-
-    return menuItems.map(({ key }) => key);
-  })();
-
-  const items = renderTreeView(menuItems, selectedKey);
-
-  const renderSider = () => {
-    if (render) {
-      return render({
-        dashboard,
-        items,
-        logout,
-        collapsed: siderCollapsed,
-      });
-    }
-    return (
-      <>
-        {dashboard}
-        {items}
-        {logout}
-      </>
-    );
-  };
-
-  const renderMenu = () => {
-    return (
-      <Menu
-        selectedKeys={selectedKey ? [selectedKey] : []}
-        defaultOpenKeys={[...defaultOpenKeys, ...defaultExpandMenuItems]}
-        mode="inline"
-        style={{
-          paddingTop: "8px",
-          border: "none",
-          overflow: "auto",
-          height: "calc(100% - 72px)",
-        }}
-        onClick={() => {
-          setMobileSiderOpen(false);
-        }}
-      >
-        {renderSider()}
-      </Menu>
-    );
-  };
-
-  const renderDrawerSider = () => {
-    return (
-      <>
-        <Drawer
-          open={mobileSiderOpen}
-          onClose={() => setMobileSiderOpen(false)}
-          placement={direction === "rtl" ? "right" : "left"}
-          closable={false}
-          width={200}
-          bodyStyle={{
-            padding: 0,
-          }}
-          maskClosable={true}
-        >
-          <Layout>
-            <Layout.Sider
-              style={{
-                height: "100vh",
-                backgroundColor: token.colorBgContainer,
-                borderRight: `1px solid ${token.colorBgElevated}`,
-              }}
-            >
-              <div
-                style={{
-                  width: "200px",
-                  padding: "0 16px",
-                  display: "flex",
-                  justifyContent: "flex-start",
-                  alignItems: "center",
-                  height: "64px",
-                  backgroundColor: token.colorBgElevated,
-                }}
-              >
-                <RenderToTitle collapsed={false} />
-              </div>
-              {renderMenu()}
-            </Layout.Sider>
-          </Layout>
-        </Drawer>
-        <Button
-          style={drawerButtonStyles}
-          size="large"
-          onClick={() => setMobileSiderOpen(true)}
-          icon={<BarsOutlined />}
-        />
-      </>
-    );
-  };
-
-  if (isMobile) {
-    return renderDrawerSider();
-  }
-
-  const siderStyles: React.CSSProperties = {
-    backgroundColor: token.colorBgContainer,
-    borderRight: `1px solid ${token.colorBgElevated}`,
-  };
-
-  if (fixed) {
-    siderStyles.position = "fixed";
-    siderStyles.top = 0;
-    siderStyles.height = "100vh";
-    siderStyles.zIndex = 999;
-  }
-  const renderClosingIcons = () => {
-    const iconProps = { style: { color: token.colorPrimary } };
-    const OpenIcon = direction === "rtl" ? RightOutlined : LeftOutlined;
-    const CollapsedIcon = direction === "rtl" ? LeftOutlined : RightOutlined;
-    const IconComponent = siderCollapsed ? CollapsedIcon : OpenIcon;
-
-    return <IconComponent {...iconProps} />;
-  };
-
-  return (
-    <>
-      {fixed && (
-        <div
-          style={{
-            width: siderCollapsed ? "80px" : "200px",
-            transition: "all 0.2s",
-          }}
-        />
-      )}
-      <Layout.Sider
-        style={siderStyles}
-        collapsible
-        collapsed={siderCollapsed}
-        onCollapse={(collapsed, type) => {
-          if (type === "clickTrigger") {
-            setSiderCollapsed(collapsed);
-          }
-        }}
-        collapsedWidth={80}
-        breakpoint="lg"
-        trigger={
-          <Button
-            type="text"
-            style={{
-              borderRadius: 0,
-              height: "100%",
-              width: "100%",
-              backgroundColor: token.colorBgElevated,
-            }}
-          >
-            {renderClosingIcons()}
-          </Button>
-        }
-      >
-        <div
-          style={{
-            width: siderCollapsed ? "80px" : "200px",
-            padding: siderCollapsed ? "0" : "0 16px",
-            display: "flex",
-            justifyContent: siderCollapsed ? "center" : "flex-start",
-            alignItems: "center",
-            height: "64px",
-            backgroundColor: token.colorBgElevated,
-            fontSize: "14px",
-          }}
-        >
-          <RenderToTitle collapsed={siderCollapsed} />
-        </div>
-        {renderMenu()}
-      </Layout.Sider>
-    </>
-  );
-};

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

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

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

@@ -1,71 +0,0 @@
-import React from "react";
-import {
-  useRouterContext,
-  useRouterType,
-  useLink,
-  useRefineOptions,
-} from "@refinedev/core";
-import { Typography, theme, Space } from "antd";
-import type { RefineLayoutThemedTitleProps } from "../types";
-
-export const ThemedTitleV2: React.FC<RefineLayoutThemedTitleProps> = ({
-  collapsed,
-  icon: iconFromProps,
-  text: textFromProps,
-  wrapperStyles,
-}) => {
-  const {
-    title: { icon: defaultIcon, text: defaultText } = {},
-  } = useRefineOptions();
-  const icon =
-    typeof iconFromProps === "undefined" ? defaultIcon : iconFromProps;
-  const text =
-    typeof textFromProps === "undefined" ? defaultText : textFromProps;
-  const { token } = theme.useToken();
-  const routerType = useRouterType();
-  const Link = useLink();
-  const { Link: LegacyLink } = useRouterContext();
-
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
-  return (
-    <ActiveLink
-      to="/"
-      style={{
-        display: "inline-block",
-        textDecoration: "none",
-      }}
-    >
-      <Space
-        style={{
-          display: "flex",
-          alignItems: "center",
-          fontSize: "inherit",
-          ...wrapperStyles,
-        }}
-      >
-        <div
-          style={{
-            height: "24px",
-            width: "24px",
-            color: token.colorPrimary,
-          }}
-        >
-          {icon}
-        </div>
-
-        {!collapsed && (
-          <Typography.Title
-            style={{
-              fontSize: "inherit",
-              marginBottom: 0,
-              fontWeight: 700,
-            }}
-          >
-            {text}
-          </Typography.Title>
-        )}
-      </Space>
-    </ActiveLink>
-  );
-};

package/src/components/themedLayoutV2/types.ts

@@ -1,17 +0,0 @@
-import type {
-  RefineThemedLayoutV2SiderProps as BaseRefineThemedLayoutV2SiderProps,
-  RefineThemedLayoutV2HeaderProps,
-  RefineThemedLayoutV2Props,
-  RefineLayoutThemedTitleProps,
-} from "@refinedev/ui-types";
-
-type RefineThemedLayoutV2SiderProps = BaseRefineThemedLayoutV2SiderProps & {
-  fixed?: boolean;
-};
-
-export type {
-  RefineLayoutThemedTitleProps,
-  RefineThemedLayoutV2SiderProps,
-  RefineThemedLayoutV2HeaderProps,
-  RefineThemedLayoutV2Props,
-};

package/src/hooks/list/index.ts

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