From 5bf31a42f13029f03e1a64181428eb3b5aa1a395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Fri, 29 Jun 2018 17:30:03 +0800
Subject: [PATCH] add change lang button

---
 .webpackrc.js                               | 47 +++++++++++++++++++++
 src/components/GlobalHeader/RightContent.js | 17 +++++++-
 src/locale/en-US.js                         |  1 +
 src/locale/zh-CN.js                         |  1 +
 src/pages/Dashboard/Analysis.js             |  2 +
 src/router.js                               |  7 ++-
 6 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100755 .webpackrc.js

diff --git a/.webpackrc.js b/.webpackrc.js
new file mode 100755
index 00000000..1e02e9fd
--- /dev/null
+++ b/.webpackrc.js
@@ -0,0 +1,47 @@
+const path = require('path');
+
+export default {
+  entry: 'src/index.js',
+  extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
+  env: {
+    development: {
+      extraBabelPlugins: ['dva-hmr'],
+    },
+  },
+  externals: {
+    '@antv/data-set': 'DataSet',
+    bizcharts: 'BizCharts',
+    rollbar: 'rollbar',
+  },
+  alias: {
+    components: path.resolve(__dirname, 'src/components/'),
+  },
+  ignoreMomentLocale: true,
+  theme: './src/theme.js',
+  html: {
+    template: './src/index.ejs',
+  },
+  publicPath: '/',
+  hash: true,
+  lessLoaderOptions: {
+    javascriptEnabled: true,
+  },
+  disableDynamicImport: true,
+  cssLoaderOptions: {
+    modules: true,
+    getLocalIdent: (context, localIdentName, localName) => {
+      if (
+        context.resourcePath.includes('node_modules') ||
+        context.resourcePath.includes('ant.design.pro.less')
+      ) {
+        return localName;
+      }
+      const antdProPath = context.resourcePath.match(/src(.*)/)[1].replace('.less', '');
+      const arr = antdProPath
+        .split('/')
+        .map(a => a.replace(/([A-Z])/g, '-$1'))
+        .map(a => a.toLowerCase());
+      return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
+    },
+  },
+};
diff --git a/src/components/GlobalHeader/RightContent.js b/src/components/GlobalHeader/RightContent.js
index 596bd3ea..1c74d47f 100644
--- a/src/components/GlobalHeader/RightContent.js
+++ b/src/components/GlobalHeader/RightContent.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip } from 'antd';
+import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip, Button } from 'antd';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import NoticeIcon from '../NoticeIcon';
@@ -40,6 +40,16 @@ export default class GlobalHeaderRight extends PureComponent {
     return groupBy(newNotices, 'type');
   }
 
+  changLang = () => {
+    const locale = localStorage.getItem('locale');
+    if (!locale || locale === 'zh-CN') {
+      localStorage.setItem('locale', 'en-US');
+    } else {
+      localStorage.setItem('locale', 'zh-CN');
+    }
+    location.reload();
+  };
+
   render() {
     const {
       currentUser,
@@ -141,8 +151,11 @@ export default class GlobalHeaderRight extends PureComponent {
             </span>
           </Dropdown>
         ) : (
-          <Spin size="small" style={{ marginLeft: 8 }} />
+          <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
         )}
+        <Button size="small" onClick={this.changLang}>
+          <FormattedMessage id="navbar.lang" />
+        </Button>
       </div>
     );
   }
diff --git a/src/locale/en-US.js b/src/locale/en-US.js
index 3a22caf6..e5d9971d 100644
--- a/src/locale/en-US.js
+++ b/src/locale/en-US.js
@@ -7,6 +7,7 @@ export default {
   data: appLocaleData,
   antd: antdEn,
   messages: {
+    'navbar.lang': 'English',
     'menu.home': 'Home',
     'menu.dashboard': 'Dashboard',
     'menu.dashboard.analysis': 'Analysis',
diff --git a/src/locale/zh-CN.js b/src/locale/zh-CN.js
index fcbbfaec..852d2542 100644
--- a/src/locale/zh-CN.js
+++ b/src/locale/zh-CN.js
@@ -7,6 +7,7 @@ export default {
   data: appLocaleData,
   antd: antdZh,
   messages: {
+    'navbar.lang': '中文',
     'menu.home': '首页',
     'menu.dashboard': 'Dashboard',
     'menu.dashboard.analysis': '分析页',
diff --git a/src/pages/Dashboard/Analysis.js b/src/pages/Dashboard/Analysis.js
index 6e065692..5c36b333 100644
--- a/src/pages/Dashboard/Analysis.js
+++ b/src/pages/Dashboard/Analysis.js
@@ -322,6 +322,7 @@ class Analysis extends Component {
           <Col {...topColResponsiveProps}>
             <ChartCard
               bordered={false}
+              loading={loading}
               title={<FormattedMessage id="app.analysis.visits" defaultMessage="visits" />}
               action={
                 <Tooltip
@@ -349,6 +350,7 @@ class Analysis extends Component {
           <Col {...topColResponsiveProps}>
             <ChartCard
               bordered={false}
+              loading={loading}
               title={<FormattedMessage id="app.analysis.payments" defaultMessage="Payments" />}
               action={
                 <Tooltip
diff --git a/src/router.js b/src/router.js
index 29896c04..b11e50db 100644
--- a/src/router.js
+++ b/src/router.js
@@ -18,11 +18,10 @@ dynamic.setDefaultLoadingComponent(() => {
 });
 
 function getLang() {
-  if (window) {
-    return 'en-US';
+  if (window.localStorage && localStorage.getItem('locale')) {
+    return localStorage.getItem('locale');
   }
-  return (window.localStorage && localStorage.getItem('locale')) ||
-    (navigator.language || navigator.browserLanguage).toLowerCase() === 'en-us'
+  return (navigator.language || navigator.browserLanguage).toLowerCase() === 'en-us'
     ? 'en-US'
     : 'zh-CN';
 }
-- 
GitLab