From 7bf031699aa643d67cfa30ec64214326f6052efe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=96=8C?= <892728595@qq.com>
Date: Wed, 6 Sep 2017 20:36:14 +0800
Subject: [PATCH] add LoadingComponent

---
 package.json                      |  3 +--
 src/components/Loader/Loader.js   |  8 ++++++--
 src/components/Loader/Loader.less |  6 +++++-
 src/router.js                     |  7 ++++++-
 src/routes/app.js                 | 16 ++++++++--------
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index bf076d8..03d1b02 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,7 @@
     "react-dom": "^15.6.1",
     "react-draft-wysiwyg": "^1.10.0",
     "react-helmet": "^5.1.3",
-    "recharts": "^0.22.4",
-    "roadhog": "^1.2.1"
+    "recharts": "^0.22.4"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",
diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
index fe24a19..2d2943f 100644
--- a/src/components/Loader/Loader.js
+++ b/src/components/Loader/Loader.js
@@ -3,8 +3,11 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import styles from './Loader.less'
 
-const Loader = ({ spinning }) => {
-  return (<div className={classNames(styles.loader, { [styles.hidden]: !spinning })}>
+const Loader = ({ spinning, fullScreen }) => {
+  return (<div className={classNames(styles.loader, {
+    [styles.hidden]: !spinning,
+    [styles.loader_fullScreen]: fullScreen,
+  })}>
     <div className={styles.warpper}>
       <div className={styles.inner} />
       <div className={styles.text} >LOADING</div>
@@ -15,6 +18,7 @@ const Loader = ({ spinning }) => {
 
 Loader.propTypes = {
   spinning: PropTypes.bool,
+  fullScreen: PropTypes.bool,
 }
 
 export default Loader
diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less
index ba3685a..723402d 100644
--- a/src/components/Loader/Loader.less
+++ b/src/components/Loader/Loader.less
@@ -1,8 +1,12 @@
+.loader_fullScreen {
+  position: fixed !important;
+}
+
 .loader {
   display: block;
   background-color: #fff;
   width: 100%;
-  position: fixed;
+  position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
diff --git a/src/router.js b/src/router.js
index 0813662..4aef55a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Router, Switch, Route, Redirect, routerRedux } from 'dva/router'
 import dynamic from 'dva/dynamic'
 import App from 'routes/app'
+import { Loader } from 'components'
 
 const { ConnectedRouter } = routerRedux
 
@@ -72,7 +73,11 @@ const Routers = function ({ history, app }) {
           <Route exact path='/' render={() => (<Redirect to='/dashboard' />)} />
           {
             routes.map(({ path, ...dynamics }, key) => (
-              <Route key={key} exact path={path} component={dynamic({ app, ...dynamics })} />
+              <Route key={key} exact path={path} component={dynamic({
+                app,
+                LoadingComponent: ({ productId }) => (<Loader spinning />),
+                ...dynamics
+              })} />
             ))
           }
           <Route component={error} />
diff --git a/src/routes/app.js b/src/routes/app.js
index 3ec5dbb..5569caa 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -41,16 +41,16 @@ const App = ({ children, dispatch, app, loading, location }) => {
     isNavbar,
     menuPopoverVisible,
     navOpenKeys,
-    switchMenuPopover () {
+    switchMenuPopover() {
       dispatch({ type: 'app/switchMenuPopver' })
     },
-    logout () {
+    logout() {
       dispatch({ type: 'app/logout' })
     },
-    switchSider () {
+    switchSider() {
       dispatch({ type: 'app/switchSider' })
     },
-    changeOpenKeys (openKeys) {
+    changeOpenKeys(openKeys) {
       dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
     },
   }
@@ -61,10 +61,10 @@ const App = ({ children, dispatch, app, loading, location }) => {
     siderFold,
     darkTheme,
     navOpenKeys,
-    changeTheme () {
+    changeTheme() {
       dispatch({ type: 'app/switchTheme' })
     },
-    changeOpenKeys (openKeys) {
+    changeOpenKeys(openKeys) {
       window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
       dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
     },
@@ -76,13 +76,13 @@ const App = ({ children, dispatch, app, loading, location }) => {
   }
   if (openPages && openPages.includes(pathname)) {
     return (<div>
-      <Loader spinning={loading.effects['app/query']} />
+      <Loader fullScreen spinning={loading.effects['app/query']} />
       {children}
     </div>)
   }
   return (
     <div>
-      <Loader spinning={loading.effects['app/query']} />
+      <Loader fullScreen spinning={loading.effects['app/query']} />
       <Helmet>
         <title>ANTD ADMIN</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />