refactor: fix antd deprecated property

d3george · Oct 15, 2024 · 3991bcd · 3991bcd
1 parent e5ced4f
commit 3991bcd
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/src/layouts/_common/bread-crumb.tsx b/src/layouts/_common/bread-crumb.tsx
@@ -1,5 +1,4 @@
-import { Breadcrumb } from 'antd';
-import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { Breadcrumb, type BreadcrumbProps, type GetProp } from 'antd';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMatches, Link } from 'react-router-dom';
@@ -10,13 +9,15 @@ import { menuFilter } from '@/router/utils';
 
 import { AppRouteObject } from '#/router';
 
+type MenuItem = GetProp<BreadcrumbProps, 'items'>[number];
+
 /**
  * 动态面包屑解决方案：https://github.com/MinjieChang/myblog/issues/29
  */
 export default function BreadCrumb() {
   const { t } = useTranslation();
   const matches = useMatches();
-  const [breadCrumbs, setBreadCrumbs] = useState<ItemType[]>([]);
+  const [breadCrumbs, setBreadCrumbs] = useState<MenuItem[]>([]);
 
   const flattenedRoutes = useFlattenedRoutes();
   const permissionRoutes = usePermissionRoutes();
@@ -33,7 +34,7 @@ export default function BreadCrumb() {
       items = items!
         .find((item) => item.meta?.key === key)
         ?.children?.filter((item) => !item.meta?.hideMenu);
-      const result: ItemType = {
+      const result: MenuItem = {
         key,
         title: t(label),
       };

diff --git a/src/pages/management/user/profile/projects-tab.tsx b/src/pages/management/user/profile/projects-tab.tsx
@@ -122,7 +122,7 @@ export default function ProjectsTab() {
                 <ProTag color="warning">{item.deadline.diff(dayjs(), 'day')} days left</ProTag>
               </div>
               <div className="flex w-full ">
-                <Avatar.Group maxCount={4}>
+                <Avatar.Group max={{ count: 4 }}>
                   {item.members.map((memberAvatar, index) => (
                     <Avatar src={memberAvatar} key={index} />
                   ))}

diff --git a/src/pages/management/user/profile/teams-tab.tsx b/src/pages/management/user/profile/teams-tab.tsx
@@ -64,7 +64,7 @@ export default function TeamsTab() {
             </header>
             <main className="my-4 opacity-70">{item.desc}</main>
             <footer className="flex w-full items-center">
-              <Avatar.Group maxCount={4}>
+              <Avatar.Group max={{ count: 4 }}>
                 {item.members.map((memberAvatar, index) => (
                   <Avatar src={memberAvatar} key={index} />
                 ))}

diff --git a/src/pages/sys/others/kanban/kanban-task.tsx b/src/pages/sys/others/kanban/kanban-task.tsx
@@ -65,10 +65,12 @@ function KanbanTask({ index, task }: Props) {
 
                   {assignee?.length && (
                     <Avatar.Group
-                      maxCount={3}
-                      maxStyle={{
-                        color: themeToken.colorPrimary,
-                        backgroundColor: themeToken.colorPrimaryBg,
+                      max={{
+                        count: 3,
+                        style: {
+                          color: themeToken.colorPrimary,
+                          backgroundColor: themeToken.colorPrimaryBg,
+                        },
                       }}
                     >
                       {assignee.map((url) => (

diff --git a/src/router/hooks/use-route-to-menu.tsx b/src/router/hooks/use-route-to-menu.tsx
@@ -6,7 +6,9 @@ import { useSettings } from '@/store/settingStore';
 
 import { ThemeLayout } from '#/enum';
 import { AppRouteObject } from '#/router';
-import type { ItemType } from 'antd/es/menu/interface';
+import type { GetProp, MenuProps } from 'antd';
+
+type MenuItem = GetProp<MenuProps, 'items'>[number];
 
 /**
  *   routes -> menus
@@ -50,7 +52,7 @@ export function useRouteToMenuFn() {
           if (children) {
             menuItem.children = routeToMenuFn(children);
           }
-          return menuItem as ItemType;
+          return menuItem as MenuItem;
         });
     },
     [t, themeLayout],