feat(platform): add skipRenderLink to breadcrumb

DevCloudFE · Feb 17, 2023 · 7506017 · 7506017
1 parent 01236aa
commit 7506017
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/packages/platform/src/app/components/route-header/RouteHeaderBreadcrumb.tsx b/packages/platform/src/app/components/route-header/RouteHeaderBreadcrumb.tsx
@@ -1,14 +1,17 @@
 import type { DBreadcrumbItem } from '@react-devui/ui/components/breadcrumb';
 
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import { DBreadcrumb } from '@react-devui/ui';
 import { getClassName } from '@react-devui/utils';
 
+type BreadcrumbItem = DBreadcrumbItem<string> & { skipRenderLink?: boolean };
+
 export interface AppRouteHeaderBreadcrumbProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-  aList: DBreadcrumbItem<string>[];
-  aHome?: DBreadcrumbItem<string>;
+  aList: BreadcrumbItem[];
+  aHome?: BreadcrumbItem;
   aSeparator?: React.ReactNode;
 }
 
@@ -23,7 +26,7 @@ export function AppRouteHeaderBreadcrumb(props: AppRouteHeaderBreadcrumbProps):
 
   const { t } = useTranslation();
 
-  const home: DBreadcrumbItem<string> = aHome ?? {
+  const home: BreadcrumbItem = aHome ?? {
     id: '/',
     title: t('Home', { ns: 'title' }),
     link: true,
@@ -34,13 +37,18 @@ export function AppRouteHeaderBreadcrumb(props: AppRouteHeaderBreadcrumbProps):
       <DBreadcrumb
         dList={[home].concat(aList).map((item) => ({
           ...item,
-          title: item.link ? (
-            <Link className="app-route-header__breadcrumb-link" to={item.id}>
-              {item.title}
-            </Link>
-          ) : (
-            item.title
-          ),
+          title:
+            item.link && !item.skipRenderLink ? (
+              <Link className="app-route-header__breadcrumb-link" to={item.id}>
+                {item.title}
+              </Link>
+            ) : React.isValidElement(item.title) ? (
+              React.cloneElement<React.HTMLAttributes<HTMLElement>>(item.title as any, {
+                className: getClassName(item.title.props.className, 'app-route-header__breadcrumb-item'),
+              })
+            ) : (
+              <div className="app-route-header__breadcrumb-item">{item.title}</div>
+            ),
         }))}
         dSeparator={aSeparator}
       />

diff --git a/packages/platform/src/styles/components/route-header.scss b/packages/platform/src/styles/components/route-header.scss
@@ -10,11 +10,16 @@
   }
 
   @include e(breadcrumb-link) {
+    padding: 0 6px;
     font: inherit;
     color: inherit;
     text-decoration: none;
   }
 
+  @include e(breadcrumb-item) {
+    padding: 0 6px;
+  }
+
   @include e(header) {
     display: flex;
     flex-wrap: wrap;