feat: Breadcrumb support breadcrumbRender (#28999)

* feat: Breadcrumb support breadcrumbRender

* add version info

components/page-header/__tests__/index.test.js

@@ -50,6 +50,14 @@ describe('PageHeader', () => {
     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>} />,
+    );
+    expect(wrapper.find('#test')).toHaveLength(1);
+    expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
+  });
+
   it('pageHeader do not has title', () => {
     const routes = [
       {

components/page-header/index.en-US.md

@@ -20,6 +20,7 @@ PageHeader can be used to highlight the page topic, display important informatio
 | avatar | Avatar next to the title bar | [AvatarProps](/components/avatar/) | - |  |
 | backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | <ArrowLeft /> |  |
 | breadcrumb | Breadcrumb configuration | [Breadcrumb](/components/breadcrumb/) | - |  |
+| breadcrumbRender | Customize the content of the breadcrumb area | `(props, originBreadcrumb)=> ReactNode` | - | 4.11.0 |
 | extra | Operating area, at the end of the line of the title line | ReactNode | - |  |
 | footer | PageHeader's footer, generally used to render TabBar | ReactNode | - |  |
 | ghost | PageHeader type, will change background color | boolean | true |  |

components/page-header/index.tsx

@@ -17,6 +17,7 @@ export interface PageHeaderProps {
   subTitle?: React.ReactNode;
   style?: React.CSSProperties;
   breadcrumb?: BreadcrumbProps;
+  breadcrumbRender?: (props: PageHeaderProps, defaultDom: React.ReactNode) => React.ReactNode;
   tags?: React.ReactElement<TagType> | React.ReactElement<TagType>[];
   footer?: React.ReactNode;
   extra?: React.ReactNode;
@@ -72,7 +73,7 @@ const renderTitle = (
   const { title, avatar, subTitle, tags, extra, onBack } = props;
   const headingPrefixCls = `${prefixCls}-heading`;
   const hasHeading = title || subTitle || tags || extra;
-  // 如果 什么都没有，直接返回一个 null
+  // If there is nothing, return a null
   if (!hasHeading) {
     return null;
   }
@@ -134,6 +135,7 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
           footer,
           children,
           breadcrumb,
+          breadcrumbRender,
           className: customizeClassName,
         } = props;
         let ghost: undefined | boolean = true;
@@ -146,7 +148,20 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
         }
 
         const prefixCls = getPrefixCls('page-header', customizePrefixCls);
-        const breadcrumbDom = breadcrumb && breadcrumb.routes ? renderBreadcrumb(breadcrumb) : null;
+
+        const getDefaultBreadcrumbDom = () => {
+          if ((breadcrumb as BreadcrumbProps)?.routes) {
+            return renderBreadcrumb(breadcrumb as BreadcrumbProps);
+          }
+          return null;
+        };
+
+        const defaultBreadcrumbDom = getDefaultBreadcrumbDom();
+
+        //  support breadcrumbRender function
+        const breadcrumbDom =
+          breadcrumbRender?.(props, defaultBreadcrumbDom) || defaultBreadcrumbDom;
+
         const className = classNames(prefixCls, customizeClassName, {
           'has-breadcrumb': breadcrumbDom,
           'has-footer': footer,

components/page-header/index.zh-CN.md

@@ -20,6 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
 | avatar | 标题栏旁的头像 | [AvatarProps](/components/avatar/) | - |  |
 | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean | <ArrowLeft /> |  |
 | breadcrumb | 面包屑的配置 | [Breadcrumb](/components/breadcrumb/) | - |  |
+| breadcrumbRender | 自定义面包屑区域的内容 | `(props, originBreadcrumb) => ReactNode` | - | 4.11.0 |
 | extra | 操作区，位于 title 行的行尾 | ReactNode | - |  |
 | footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - |  |
 | ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true |  |