From ef5e6603c2702487ddd5d817ff7b258fd03170aa Mon Sep 17 00:00:00 2001
From: chenshuai2144 <qixian.cs@outlook.com>
Date: Sun, 1 Nov 2020 22:47:10 +0800
Subject: [PATCH] fix(pageHeader): if title is null,no render title view

---
 .../page-header/__tests__/index.test.js       | 12 +++++
 components/page-header/index.tsx              | 49 ++++++++++---------
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/components/page-header/__tests__/index.test.js b/components/page-header/__tests__/index.test.js
index 8e444e1ad4..85c1e69477 100644
--- a/components/page-header/__tests__/index.test.js
+++ b/components/page-header/__tests__/index.test.js
@@ -50,6 +50,18 @@ describe('PageHeader', () => {
     expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
   });
 
+  it('pageHeader do not has title', () => {
+    const routes = [
+      {
+        path: 'index',
+        breadcrumbName: 'First-level Menu',
+      },
+    ];
+    const wrapper = mount(<PageHeader breadcrumb={{ routes }}>test</PageHeader>);
+    expect(wrapper.find('.ant-page-header-heading-lef').exists()).toBeFalsy();
+    expect(wrapper.find('.ant-page-header-heading').exists()).toBeFalsy();
+  });
+
   it('pageHeader should no contain back', () => {
     const wrapper = mount(<PageHeader title="Page Title" backIcon={false} />);
     expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index ce207b227e..c2ee101eaf 100644
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@@ -72,31 +72,36 @@ const renderTitle = (prefixCls: string, props: PageHeaderProps, direction: strin
   if (title || subTitle || tags || extra) {
     const backIcon = getBackIcon(props, direction);
     const backIconDom = renderBack(prefixCls, backIcon, onBack);
+    const hasTitle = backIconDom || avatar || title || subTitle || tags || extra;
     return (
-      <div className={headingPrefixCls}>
-        <div className={`${headingPrefixCls}-left`}>
-          {backIconDom}
-          {avatar && <Avatar {...avatar} />}
-          {title && (
-            <span
-              className={`${headingPrefixCls}-title`}
-              title={typeof title === 'string' ? title : undefined}
-            >
-              {title}
-            </span>
-          )}
-          {subTitle && (
-            <span
-              className={`${headingPrefixCls}-sub-title`}
-              title={typeof subTitle === 'string' ? subTitle : undefined}
-            >
-              {subTitle}
-            </span>
+      hasTitle && (
+        <div className={headingPrefixCls}>
+          {hasTitle && (
+            <div className={`${headingPrefixCls}-left`}>
+              {backIconDom}
+              {avatar && <Avatar {...avatar} />}
+              {title && (
+                <span
+                  className={`${headingPrefixCls}-title`}
+                  title={typeof title === 'string' ? title : undefined}
+                >
+                  {title}
+                </span>
+              )}
+              {subTitle && (
+                <span
+                  className={`${headingPrefixCls}-sub-title`}
+                  title={typeof subTitle === 'string' ? subTitle : undefined}
+                >
+                  {subTitle}
+                </span>
+              )}
+              {tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>}
+            </div>
           )}
-          {tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>}
+          {extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>}
         </div>
-        {extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>}
-      </div>
+      )
     );
   }
   return null;