PageHeaderWrapper: fixed width, logo and home (#4187)

* PageHeaderWrapper with fixed width when contentWidth === 'Fixed' and an
new prop fluid that indicate PageHeaderWrapper to be fluid independent of
contentWidth

* PageHeaderWrapper: logo side by side with title

* PageHeaderWrapper: home={null} working again

* fix title-view-extra position

src/components/PageHeaderWrapper/index.js

@@ -38,7 +38,9 @@ const renderFooter = ({ tabList, tabActiveKey, onTabChange, tabBarExtraContent }
 const PageHeaderWrapper = ({
   children,
   contentWidth,
+  fluid,
   wrapperClassName,
+  home,
   top,
   title,
   content,
@@ -53,42 +55,54 @@ const PageHeaderWrapper = ({
       <MenuContext.Consumer>
         {value => {
           return (
-            <PageHeader
-              wide={contentWidth === 'Fixed'}
-              title={
-                <Title
-                  level={4}
-                  style={{
-                    marginBottom: 0,
-                  }}
+            <div className={styles.wrapper}>
+              <div
+                className={classNames({
+                  [styles.wide]: !fluid && contentWidth === 'Fixed',
+                })}
+              >
+                <PageHeader
+                  title={
+                    <>
+                      {logo && <span className={styles.logo}>{logo}</span>}
+                      <Title
+                        level={4}
+                        style={{
+                          marginBottom: 0,
+                          display: 'inline-block',
+                        }}
+                      >
+                        {title}
+                      </Title>
+                    </>
+                  }
+                  key="pageheader"
+                  {...restProps}
+                  breadcrumb={
+                    !hiddenBreadcrumb &&
+                    conversionBreadcrumbList({
+                      ...value,
+                      ...restProps,
+                      ...(home !== null && {
+                        home: <FormattedMessage id="menu.home" defaultMessage="Home" />,
+                      }),
+                    })
+                  }
+                  className={styles.pageHeader}
+                  linkElement={Link}
+                  footer={renderFooter(restProps)}
                 >
-                  {title}
-                </Title>
-              }
-              key="pageheader"
-              {...restProps}
-              breadcrumb={
-                !hiddenBreadcrumb &&
-                conversionBreadcrumbList({
-                  ...value,
-                  ...restProps,
-                  home: <FormattedMessage id="menu.home" defaultMessage="Home" />,
-                })
-              }
-              className={styles.pageHeader}
-              linkElement={Link}
-              footer={renderFooter(restProps)}
-            >
-              <div className={styles.detail}>
-                {logo && <div className={styles.logo}>{logo}</div>}
-                <div className={styles.main}>
-                  <div className={styles.row}>
-                    {content && <div className={styles.content}>{content}</div>}
-                    {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
+                  <div className={styles.detail}>
+                    <div className={styles.main}>
+                      <div className={styles.row}>
+                        {content && <div className={styles.content}>{content}</div>}
+                        {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
+                      </div>
+                    </div>
                   </div>
-                </div>
+                </PageHeader>
               </div>
-            </PageHeader>
+            </div>
           );
         }}
       </MenuContext.Consumer>

src/components/PageHeaderWrapper/index.less

@@ -5,11 +5,20 @@
 }
 
 .main {
-  :global {
-    .ant-page-header {
-      padding: 16px 32px 0;
-      background: #fff;
-      border-bottom: 1px solid #e8e8e8;
+  .wrapper {
+    padding: 16px 24px 0;
+    background: #fff;
+    border-bottom: 1px solid #e8e8e8;
+
+    :global {
+      .ant-page-header {
+        padding: 0;
+      }
+
+      .ant-page-header-title-view-extra {
+        top: 0;
+        right: 0;
+      }
     }
   }
 
@@ -27,9 +36,10 @@
   }
 
   .logo {
-    flex: 0 1 auto;
+    display: inline-block;
+    margin-top: -1px;
     margin-right: 16px;
-    padding-top: 1px;
+    vertical-align: middle;
     > img {
       display: block;
       width: 28px;
@@ -66,7 +76,6 @@
     margin-bottom: 16px;
   }
 
-  .logo,
   .content,
   .extraContent {
     margin-bottom: 16px;