feat(layout): support remove default title (#4013)

* feat(layout): support remove default title * SettingDrawer do not has title
ant-design · Nov 12, 2021 · e0ffad0 · e0ffad0
1 parent 5eff600
commit e0ffad0
Show file tree

Hide file tree

Showing 10 changed files with 8 additions and 122 deletions.
diff --git a/packages/layout/src/BasicLayout.tsx b/packages/layout/src/BasicLayout.tsx
@@ -510,7 +510,6 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   }, [location.pathname, location.pathname?.search]);
 
   const [hasFooterToolbar, setHasFooterToolbar] = useState(false);
-
   useDocumentTitle(pageTitleInfo, props.title || false);
 
   return (

diff --git a/packages/layout/src/components/SettingDrawer/index.tsx b/packages/layout/src/components/SettingDrawer/index.tsx
@@ -434,6 +434,7 @@ const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
       }
     }
     preStateRef.current = nextState;
+    delete nextState.title;
     setSettingState(nextState);
   };
 

diff --git a/packages/layout/src/components/SiderMenu/SiderMenu.tsx b/packages/layout/src/components/SiderMenu/SiderMenu.tsx
@@ -33,7 +33,7 @@ export const defaultRenderLogoAndTitle = (
     return null;
   }
   const logoDom = defaultRenderLogo(logo);
-  const titleDom = <h1>{title}</h1>;
+  const titleDom = <h1>{title ?? 'Ant Design Pro'}</h1>;
 
   if (renderFunction) {
     // when collapsed, no render title

diff --git a/packages/layout/src/components/TopNavHeader/index.less b/packages/layout/src/components/TopNavHeader/index.less
@@ -46,7 +46,8 @@
     height: 100%;
     overflow: hidden;
 
-    img {
+    img,
+    a > svg {
       display: inline-block;
       height: 32px;
       vertical-align: middle;

diff --git a/packages/layout/src/defaultSettings.ts b/packages/layout/src/defaultSettings.ts
@@ -45,7 +45,7 @@ export type PureSettings = {
    *
    * @name Layout 的 title，也会显示在浏览器标签上
    */
-  title: string | false;
+  title?: string | false;
   /**
    * Your custom iconfont Symbol script Url eg：//at.alicdn.com/t/font_1039637_btcrd5co4w.js
    * 注意：如果需要图标多色，Iconfont 图标项目里要进行批量去色处理 Usage: https://github.com/ant-design/ant-design-pro/pull/3517
@@ -72,7 +72,6 @@ const defaultSettings: ProSettings = {
   fixedHeader: false,
   fixSiderbar: false,
   headerHeight: 48,
-  title: 'Ant Design Pro',
   iconfontUrl: '',
   primaryColor: 'daybreak',
   splitMenus: false,

diff --git a/packages/layout/src/getPageTitle.ts b/packages/layout/src/getPageTitle.ts
@@ -63,7 +63,7 @@ const getPageTitleInfo = (
     breadcrumb,
     breadcrumbMap,
     formatMessage,
-    title = 'Ant Design Pro',
+    title,
     menu = {
       locale: false,
     },

diff --git a/tests/layout/__snapshots__/demo.test.ts.snap b/tests/layout/__snapshots__/demo.test.ts.snap
@@ -3958,20 +3958,6 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/AlwaysDefaultOpen
               <div
                 class="ant-page-header"
               >
-                <div
-                  class="ant-page-header-heading"
-                >
-                  <div
-                    class="ant-page-header-heading-left"
-                  >
-                    <span
-                      class="ant-page-header-heading-title"
-                      title="Ant Design Pro"
-                    >
-                      Ant Design Pro
-                    </span>
-                  </div>
-                </div>
                 <div
                   class="ant-page-header-content"
                 >
@@ -5058,20 +5044,6 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/DefaultOpenAllMen
               <div
                 class="ant-page-header"
               >
-                <div
-                  class="ant-page-header-heading"
-                >
-                  <div
-                    class="ant-page-header-heading-left"
-                  >
-                    <span
-                      class="ant-page-header-heading-title"
-                      title="Ant Design Pro"
-                    >
-                      Ant Design Pro
-                    </span>
-                  </div>
-                </div>
                 <div
                   class="ant-page-header-content"
                 >
@@ -5478,20 +5450,6 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/IconFont.tsx corr
               <div
                 class="ant-page-header"
               >
-                <div
-                  class="ant-page-header-heading"
-                >
-                  <div
-                    class="ant-page-header-heading-left"
-                  >
-                    <span
-                      class="ant-page-header-heading-title"
-                      title="Ant Design Pro"
-                    >
-                      Ant Design Pro
-                    </span>
-                  </div>
-                </div>
                 <div
                   class="ant-page-header-content"
                 >
@@ -6042,20 +6000,6 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/MenuGroup.tsx cor
               <div
                 class="ant-page-header"
               >
-                <div
-                  class="ant-page-header-heading"
-                >
-                  <div
-                    class="ant-page-header-heading-left"
-                  >
-                    <span
-                      class="ant-page-header-heading-title"
-                      title="Ant Design Pro"
-                    >
-                      Ant Design Pro
-                    </span>
-                  </div>
-                </div>
                 <div
                   class="ant-page-header-content"
                 >
@@ -6640,20 +6584,6 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/MultipleMenuOnePa
                     </span>
                   </span>
                 </div>
-                <div
-                  class="ant-page-header-heading"
-                >
-                  <div
-                    class="ant-page-header-heading-left"
-                  >
-                    <span
-                      class="ant-page-header-heading-title"
-                      title="Ant Design Pro"
-                    >
-                      Ant Design Pro
-                    </span>
-                  </div>
-                </div>
                 <div
                   class="ant-page-header-content"
                 >
@@ -13586,20 +13516,6 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/dynamicMenu.tsx c
             <div
               class="ant-page-header"
             >
-              <div
-                class="ant-page-header-heading"
-              >
-                <div
-                  class="ant-page-header-heading-left"
-                >
-                  <span
-                    class="ant-page-header-heading-title"
-                    title="Ant Design Pro"
-                  >
-                    Ant Design Pro
-                  </span>
-                </div>
-              </div>
               <div
                 class="ant-page-header-content"
               >

diff --git a/tests/layout/__snapshots__/pageContainer.test.tsx.snap b/tests/layout/__snapshots__/pageContainer.test.tsx.snap
@@ -488,22 +488,7 @@ exports[`PageContainer 🐲 FooterToolbar should know width 1`] = `
           >
             <div
               class="ant-page-header"
-            >
-              <div
-                class="ant-page-header-heading"
-              >
-                <div
-                  class="ant-page-header-heading-left"
-                >
-                  <span
-                    class="ant-page-header-heading-title"
-                    title="Ant Design Pro"
-                  >
-                    Ant Design Pro
-                  </span>
-                </div>
-              </div>
-            </div>
+            />
           </div>
           <div
             class="ant-pro-grid-content"
@@ -1172,20 +1157,6 @@ exports[`PageContainer 🐲 pro-layout support breadcrumbProps 1`] = `
                   </span>
                 </span>
               </div>
-              <div
-                class="ant-page-header-heading"
-              >
-                <div
-                  class="ant-page-header-heading-left"
-                >
-                  <span
-                    class="ant-page-header-heading-title"
-                    title="Ant Design Pro"
-                  >
-                    Ant Design Pro
-                  </span>
-                </div>
-              </div>
             </div>
           </div>
         </div>

diff --git a/tests/layout/getPageTitle.test.tsx b/tests/layout/getPageTitle.test.tsx
@@ -136,7 +136,7 @@ describe('getPageTitle', () => {
       ...pageProps,
       title: undefined,
     });
-    expect(title).toBe('one - Ant Design Pro');
+    expect(title).toBe('one');
   });
 
   it('🗒️ breadcrumb is null ', () => {

diff --git a/tests/layout/settingDrawer.test.tsx b/tests/layout/settingDrawer.test.tsx
@@ -94,7 +94,6 @@ describe('settingDrawer.test', () => {
       fixedHeader: true,
       fixSiderbar: false,
       headerHeight: 48,
-      title: 'Ant Design Pro',
       iconfontUrl: '',
       primaryColor: 'daybreak',
       splitMenus: false,
-Original file line number
+Diff line change
@@ Expand Up @@
           }
         }
         preStateRef.current = nextState;
+        delete nextState.title;
         setSettingState(nextState);
       };
@@ Expand Down @@