From f6454e71f0a3a5c9b0ba3f2670c6799e11bfa9cb Mon Sep 17 00:00:00 2001 From: zuiidea Date: Mon, 15 Oct 2018 15:08:48 +0800 Subject: [PATCH] Added language switching drop-down menu. --- .umirc.js | 5 ++- public/america.svg | 63 ++++++++++++++++++++++++++ public/china.svg | 23 ++++++++++ src/components/Layout/Header.js | 78 +++++++++++++++++++++++---------- src/layouts/PrimaryLayout.js | 2 +- src/layouts/PrimaryLayout.less | 29 +++++++----- src/pages/login/index.js | 33 ++++++-------- src/utils/config.js | 14 +++++- src/utils/index.js | 17 ++++++- 9 files changed, 209 insertions(+), 55 deletions(-) create mode 100644 public/america.svg create mode 100644 public/china.svg diff --git a/.umirc.js b/.umirc.js index c638f38..2886cd7 100644 --- a/.umirc.js +++ b/.umirc.js @@ -39,7 +39,10 @@ export default { if (item.path) { newRoutes.push( Object.assign({}, item, { - path: `/:lang(${i18n.languages.join('|')})` + item.path, + path: + `/:lang(${i18n.languages + .map(item => item.key) + .join('|')})` + item.path, }) ) } diff --git a/public/america.svg b/public/america.svg new file mode 100644 index 0000000..706cc00 --- /dev/null +++ b/public/america.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/china.svg b/public/china.svg new file mode 100644 index 0000000..709a1fe --- /dev/null +++ b/public/china.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 4c4f105..a4214d2 100644 --- a/src/components/Layout/Header.js +++ b/src/components/Layout/Header.js @@ -1,19 +1,71 @@ import React, { PureComponent, Fragment } from 'react' import PropTypes from 'prop-types' import { Menu, Icon, Layout, Avatar } from 'antd' -import { Trans } from '@lingui/react' +import { Trans, withI18n } from '@lingui/react' +import { setLocale } from 'utils' import classnames from 'classnames' +import config from 'config' import styles from './Header.less' const { SubMenu } = Menu - +@withI18n() class Header extends PureComponent { handleClickMenu = e => { e.key === 'SignOut' && this.props.onSignOut() } render() { - const { username, avatar, collapsed, onCollapseChange } = this.props + const { username, avatar, collapsed, onCollapseChange, i18n } = this.props + const rightContent = [ + + + + Hi, + + {username} + + + } + > + + Sign out + + + , + ] + + if (config.i18n) { + const { languages } = config.i18n + const currentLanguage = languages.find( + item => item.key === i18n._language + ) + + rightContent.unshift( + { + setLocale(data.key) + }} + mode="horizontal" + > + }> + {languages.map(item => ( + + + {item.title} + + ))} + + + ) + } return (
-
- - - - Hi, - - {username} - - - } - > - - Sign out - - - -
+
{rightContent}
 ) } diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index a5f7c5a..9311117 100644 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -123,7 +123,7 @@ class PrimaryLayout extends PureComponent { document.getElementById('primaryLayout')} + target={() => document.querySelector('#primaryLayout>div')} /> , href: 'https://github.com/zuiidea/antd-admin', blankTarget: true, }, - { - key: 'English', - title: ( - router.push(`/en/login${location.search}`)}> - English - - ), - }, - { - key: 'Chinese', - title: ( - router.push(`/zh/login${location.search}`)}> - 中文 - - ), - }, ] + if (config.i18n) { + footerLinks = footerLinks.concat( + config.i18n.languages.map(item => ({ + key: item.key, + title: ( + {item.title} + ), + })) + ) + } + return (
diff --git a/src/utils/config.js b/src/utils/config.js index 7fba313..4a13bba 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -18,7 +18,19 @@ module.exports = { /* I18n configuration, `languages` and `defaultLanguage` are required currently. */ i18n: { - languages: ['en', 'zh'], + /* Countrys flags: https://www.flaticon.com/packs/countrys-flags */ + languages: [ + { + key: 'en', + title: 'English', + flag: '/america.svg', + }, + { + key: 'zh', + title: '中文', + flag: '/china.svg', + }, + ], defaultLanguage: 'en', }, } diff --git a/src/utils/index.js b/src/utils/index.js index 61949eb..097502a 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -8,7 +8,8 @@ export config from './config' export request from './request' export { Color } from './theme' -export const { languages, defaultLanguage } = i18n +export const { defaultLanguage } = i18n +export const languages = i18n.languages.map(item => item.key) /** * Query objects that specify keys and values in an array where all values are objects. @@ -237,3 +238,17 @@ export function queryLayout(layouts, pathname) { return result } + +export function getLocale() { + return langFromPath(window.location.pathname) +} + +export function setLocale(language) { + if (getLocale() !== language) { + umiRouter.push({ + pathname: `/${language}${deLangPrefix(window.location.pathname)}${ + window.location.search + }`, + }) + } +}