feat: Allow breadcrumb component in PageHeader (#30019)

* Allow breadcrumb component in PageHeader * Allow breadcrumb component in PageHeader * Allow breadcrumb component in PageHeader * Rename variable rename var from _breadcrumbRender to breadcrumbRenderDomFromProps
ant-design · Apr 10, 2021 · 941ba1f · 941ba1f
1 parent ebd60df
commit 941ba1f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/components/page-header/__tests__/index.test.js b/components/page-header/__tests__/index.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import PageHeader from '..';
+import Breadcrumb from '../../breadcrumb';
 import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -50,6 +51,20 @@ describe('PageHeader', () => {
     expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
   });
 
+  it('pageHeader should have breadcrumb (component)', () => {
+    const routes = [
+      {
+        path: 'index',
+        breadcrumbName: 'First-level Menu',
+      },
+    ];
+    const wrapper = mount(
+      <PageHeader title="Page Title" breadcrumb={<Breadcrumb routes={routes} />} />,
+    );
+    expect(wrapper.find('.ant-breadcrumb')).toHaveLength(1);
+    expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
+  });
+
   it('pageHeader support breadcrumbRender', () => {
     const wrapper = mount(
       <PageHeader title="Page Title" breadcrumbRender={() => <div id="test">test</div>} />,

diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
@@ -16,7 +16,7 @@ export interface PageHeaderProps {
   title?: React.ReactNode;
   subTitle?: React.ReactNode;
   style?: React.CSSProperties;
-  breadcrumb?: BreadcrumbProps;
+  breadcrumb?: BreadcrumbProps | React.ReactElement<typeof Breadcrumb>;
   breadcrumbRender?: (props: PageHeaderProps, defaultDom: React.ReactNode) => React.ReactNode;
   tags?: React.ReactElement<TagType> | React.ReactElement<TagType>[];
   footer?: React.ReactNode;
@@ -156,10 +156,13 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
 
         const defaultBreadcrumbDom = getDefaultBreadcrumbDom();
 
+        const isBreadcrumbComponent = breadcrumb && 'props' in breadcrumb;
         //  support breadcrumbRender function
-        const breadcrumbDom =
+        const breadcrumbRenderDomFromProps =
           breadcrumbRender?.(props, defaultBreadcrumbDom) || defaultBreadcrumbDom;
 
+        const breadcrumbDom = isBreadcrumbComponent ? breadcrumb : breadcrumbRenderDomFromProps;
+
         const className = classNames(prefixCls, customizeClassName, {
           'has-breadcrumb': !!breadcrumbDom,
           'has-footer': !!footer,