From b4858a6adf3f3ecf8dcf275c91b5c9051e3206a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Sun, 26 Aug 2018 21:16:36 +0800
Subject: [PATCH] fix #1945 and use Skeleton replace card

---
 package.json                       |  2 +-
 src/components/PageHeader/index.js | 56 ++++++++++++++++--------------
 src/global.less                    |  5 +++
 src/layouts/BasicLayout.js         |  5 +++
 4 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 3c01e941..601d5723 100755
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.9.0",
-    "antd": "^3.8.2",
+    "antd": "^3.9.0-beta.0",
     "bizcharts": "^3.1.10",
     "bizcharts-plugin-slider": "^2.0.3",
     "classnames": "^2.2.6",
diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
index a4b1777b..ef0a563c 100644
--- a/src/components/PageHeader/index.js
+++ b/src/components/PageHeader/index.js
@@ -1,6 +1,6 @@
 import React, { PureComponent, createElement } from 'react';
 import pathToRegexp from 'path-to-regexp';
-import { Breadcrumb, Tabs, Card } from 'antd';
+import { Breadcrumb, Tabs, Skeleton } from 'antd';
 import classNames from 'classnames';
 import styles from './index.less';
 import { urlToList } from '../_utils/pathTools';
@@ -200,34 +200,36 @@ export default class PageHeader extends PureComponent {
       activeKeyProps.activeKey = tabActiveKey;
     }
     return (
-      <Card className={clsString} bodyStyle={{ padding: 0 }} loading={loading}>
-        {breadcrumb}
-        <div className={styles.detail}>
-          {logo && <div className={styles.logo}>{logo}</div>}
-          <div className={styles.main}>
-            <div className={styles.row}>
-              {title && <h1 className={styles.title}>{title}</h1>}
-              {action && <div className={styles.action}>{action}</div>}
-            </div>
-            <div className={styles.row}>
-              {content && <div className={styles.content}>{content}</div>}
-              {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
+      <div className={clsString}>
+        <Skeleton loading={loading}>
+          {breadcrumb}
+          <div className={styles.detail}>
+            {logo && <div className={styles.logo}>{logo}</div>}
+            <div className={styles.main}>
+              <div className={styles.row}>
+                {title && <h1 className={styles.title}>{title}</h1>}
+                {action && <div className={styles.action}>{action}</div>}
+              </div>
+              <div className={styles.row}>
+                {content && <div className={styles.content}>{content}</div>}
+                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
+              </div>
             </div>
           </div>
-        </div>
-        {tabList && tabList.length ? (
-          <Tabs
-            className={styles.tabs}
-            {...activeKeyProps}
-            onChange={this.onChange}
-            tabBarExtraContent={tabBarExtraContent}
-          >
-            {tabList.map(item => (
-              <TabPane tab={item.tab} key={item.key} />
-            ))}
-          </Tabs>
-        ) : null}
-      </Card>
+          {tabList && tabList.length ? (
+            <Tabs
+              className={styles.tabs}
+              {...activeKeyProps}
+              onChange={this.onChange}
+              tabBarExtraContent={tabBarExtraContent}
+            >
+              {tabList.map(item => (
+                <TabPane tab={item.tab} key={item.key} />
+              ))}
+            </Tabs>
+          ) : null}
+        </Skeleton>
+      </div>
     );
   }
 }
diff --git a/src/global.less b/src/global.less
index 00892866..69b08c73 100644
--- a/src/global.less
+++ b/src/global.less
@@ -27,6 +27,11 @@ body {
   margin: 40px 0 !important;
 }
 
+ul,
+ol {
+  list-style: none;
+}
+
 :global {
   body .ant-drawer .ant-drawer-content {
     opacity: 1;
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 4f2b9a00..14299d2c 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -71,6 +71,7 @@ class BasicLayout extends React.PureComponent {
     super(props);
     const { menuData } = this.props;
     this.getPageTitle = memoizeOne(this.getPageTitle);
+    // Because there are many places to be. So put it here
     this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
   }
   getContext() {
@@ -80,6 +81,10 @@ class BasicLayout extends React.PureComponent {
       breadcrumbNameMap: this.breadcrumbNameMap,
     };
   }
+  componentDidUpdate() {
+    const { menuData } = this.props;
+    this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
+  }
   getPageTitle = pathname => {
     let currRouterData = null;
     // match params path
-- 
GitLab