- Switch Theme
+ {intl.formatMessage(
+ {
+ id: 'Switch Theme',
+ defaultMessage: '你好，旅行者',
+ })}
{
- const catalog = await import(
- /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
- `@lingui/loader!../locales/${language}/messages.json`
- )
-
- this.setState(state => ({
- catalogs: {
- ...state.catalogs,
- [language]: catalog,
- },
- }))
+ // false means no refresh
+ setLocale(language, false)
}
render() {
diff --git a/src/pages/index.js b/src/pages/index.js
index b34ad05..e06ea69 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,12 +1,12 @@
import React, { PureComponent } from 'react'
-import { Redirect } from 'umi'
-import { withI18n } from '@lingui/react'
+import { Redirect, useIntl } from 'umi'
-@withI18n()
class Index extends PureComponent {
render() {
- const { i18n } = this.props
- return
+ return
}
}
diff --git a/src/pages/login/index.js b/src/pages/login/index.js
index 74c9c53..fbdd8a3 100644
--- a/src/pages/login/index.js
+++ b/src/pages/login/index.js
@@ -6,14 +6,13 @@ import { GlobalFooter } from 'ant-design-pro'
import { Form } from '@ant-design/compatible'
import '@ant-design/compatible/assets/index.css'
import { GithubOutlined } from '@ant-design/icons'
-import { Trans, withI18n } from '@lingui/react'
+
import { setLocale } from 'utils'
import config from 'utils/config'
import styles from './index.less'
const FormItem = Form.Item
-@withI18n()
@connect(({ loading }) => ({ loading }))
@Form.create()
class Login extends PureComponent {
@@ -95,15 +94,15 @@ class Login extends PureComponent {
onClick={this.handleOk}
loading={loading.effects.login}
>
- Sign in
+ {Intl.formatMessage({id: 'Sign in'})}
- Username
+ {Intl.formatMessage({id: 'Username'})}
：guest
- Password
+ {Intl.formatMessage({id: 'Password'})}
：guest
diff --git a/src/pages/post/components/List.js b/src/pages/post/components/List.js
index 43bfeae..685683b 100644
--- a/src/pages/post/components/List.js
+++ b/src/pages/post/components/List.js
@@ -1,10 +1,8 @@
import React, { PureComponent } from 'react'
import { Table, Avatar } from 'antd'
-import { withI18n } from '@lingui/react'
import { Ellipsis } from 'ant-design-pro'
import styles from './List.less'
-@withI18n()
class List extends PureComponent {
render() {
const { i18n, ...tableProps } = this.props
diff --git a/src/pages/post/index.js b/src/pages/post/index.js
index f51152d..10dfbdb 100644
--- a/src/pages/post/index.js
+++ b/src/pages/post/index.js
@@ -4,7 +4,6 @@ import { connect } from 'dva'
import { Tabs } from 'antd'
import { router } from 'utils'
import { stringify } from 'qs'
-import { withI18n } from '@lingui/react'
import { Page } from 'components'
import List from './components/List'
@@ -15,7 +14,6 @@ const EnumPostStatus = {
PUBLISHED: 2,
}
-@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
class Post extends PureComponent {
handleTabClick = key => {
diff --git a/src/pages/request/index.js b/src/pages/request/index.js
index 6024b20..3d8e9b6 100644
--- a/src/pages/request/index.js
+++ b/src/pages/request/index.js
@@ -6,7 +6,6 @@ import classnames from 'classnames'
import { Form } from '@ant-design/compatible'
import '@ant-design/compatible/assets/index.css'
import { CloseOutlined } from '@ant-design/icons'
-import { Trans } from '@lingui/react'
import api from '@/services/api'
import { Page } from 'components'
diff --git a/src/pages/user/components/Filter.js b/src/pages/user/components/Filter.js
index 021863a..0a5b87c 100644
--- a/src/pages/user/components/Filter.js
+++ b/src/pages/user/components/Filter.js
@@ -7,7 +7,6 @@ import { FilterItem } from 'components'
import { Form } from '@ant-design/compatible'
import '@ant-design/compatible/assets/index.css'
-import { Trans, withI18n } from '@lingui/react'
import { Button, Row, Col, DatePicker, Input, Cascader } from 'antd'
import city from 'utils/city'
@@ -27,7 +26,6 @@ const TwoColProps = {
xl: 96,
}
-@withI18n()
@Form.create()
class Filter extends Component {
handleFields = fields => {
diff --git a/src/pages/user/components/List.js b/src/pages/user/components/List.js
index ff73f0f..5a32b8e 100644
--- a/src/pages/user/components/List.js
+++ b/src/pages/user/components/List.js
@@ -2,22 +2,23 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Table, Modal, Avatar } from 'antd'
import { DropOption } from 'components'
-import { Trans, withI18n } from '@lingui/react'
-import { Link } from 'umi'
+import { Link, useIntl } from 'umi'
import styles from './List.less'
const { confirm } = Modal
-@withI18n()
class List extends PureComponent {
handleMenuClick = (record, e) => {
- const { onDeleteItem, onEditItem, i18n } = this.props
+ const { onDeleteItem, onEditItem } = this.props
if (e.key === '1') {
onEditItem(record)
} else if (e.key === '2') {
confirm({
- title: i18n.t`Are you sure delete this record?`,
+ title: intl.formatMessage(
+ {
+ id: 'Are you sure delete this record?',
+ }),
onOk() {
onDeleteItem(record.id)
},
@@ -26,11 +27,11 @@ class List extends PureComponent {
}
render() {
- const { onDeleteItem, onEditItem, i18n, ...tableProps } = this.props
-
+ const { onDeleteItem, onEditItem, ...tableProps } = this.props
+ const intl = useIntl()
const columns = [
{
- title: Avatar,
+ title: intl.formatMessage({id: 'Avatar'}),
dataIndex: 'avatar',
key: 'avatar',
width: 72,
@@ -38,49 +39,49 @@ class List extends PureComponent {
render: text => ,
},
{
- title: Name,
+ title: intl.formatMessage({id: 'Name'}),
dataIndex: 'name',
key: 'name',
render: (text, record) => {text},
},
{
- title: NickName,
+ title: intl.formatMessage({id: 'NickName'}),
dataIndex: 'nickName',
key: 'nickName',
},
{
- title: Age,
+ title: intl.formatMessage({id: 'Age'}),
dataIndex: 'age',
key: 'age',
},
{
- title: Gender,
+ title: intl.formatMessage({id: 'Gender'}),
dataIndex: 'isMale',
key: 'isMale',
render: text => {text ? 'Male' : 'Female'},
},
{
- title: Phone,
+ title: intl.formatMessage({id: 'Phone'}),
dataIndex: 'phone',
key: 'phone',
},
{
- title: Email,
+ title: intl.formatMessage({id: 'Email'}),
dataIndex: 'email',
key: 'email',
},
{
- title: Address,
+ title: intl.formatMessage({id: 'Address'}),
dataIndex: 'address',
key: 'address',
},
{
- title: CreateTime,
+ title: intl.formatMessage({id: 'CreateTime'}),
dataIndex: 'createTime',
key: 'createTime',
},
{
- title: Operation,
+ title: intl.formatMessage({id: 'Operation'}),
key: 'operation',
fixed: 'right',
render: (text, record) => {
@@ -88,8 +89,14 @@ class List extends PureComponent {
this.handleMenuClick(record, e)}
menuOptions={[
- { key: '1', name: i18n.t`Update` },
- { key: '2', name: i18n.t`Delete` },
+ { key: '1', name: intl.formatMessage(
+ {
+ id: 'Update',
+ }) },
+ { key: '2', name: intl.formatMessage(
+ {
+ id: 'Delete',
+ }) },
]}
/>
)
@@ -102,7 +109,7 @@ class List extends PureComponent {
{...tableProps}
pagination={{
...tableProps.pagination,
- showTotal: total => i18n.t`Total ${total} Items`,
+ showTotal: total => intl.formatMessage({name: 'Total '},{id: 'Avatar'}, { name: 'Items'}),
}}
className={styles.table}
bordered
diff --git a/src/pages/user/components/Modal.js b/src/pages/user/components/Modal.js
index efadc89..746cfc8 100644
--- a/src/pages/user/components/Modal.js
+++ b/src/pages/user/components/Modal.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
import { Input, InputNumber, Radio, Modal, Cascader } from 'antd'
import { Form } from '@ant-design/compatible'
import '@ant-design/compatible/assets/index.css'
-import { Trans, withI18n } from '@lingui/react'
+import { useIntl } from 'umi';
+
import city from 'utils/city'
const FormItem = Form.Item
@@ -16,7 +17,7 @@ const formItemLayout = {
span: 14,
},
}
-@withI18n()
+
@Form.create()
class UserModal extends PureComponent {
handleOk = () => {
@@ -37,7 +38,7 @@ class UserModal extends PureComponent {
}
render() {
- const { item = {}, onOk, form, i18n, ...modalProps } = this.props
+ const { item = {}, onOk, form, ...modalProps } = this.props
const { getFieldDecorator } = form
return (
@@ -53,7 +54,10 @@ class UserModal extends PureComponent {
],
})()}
-
+
{getFieldDecorator('nickName', {
initialValue: item.nickName,
rules: [
@@ -75,10 +79,18 @@ class UserModal extends PureComponent {
})(
- Male
+ {intl.formatMessage(
+ {
+ id: 'Male',
+ defaultMessage: '你好，旅行者',
+ })}
- Female
+ {intl.formatMessage(
+ {
+ id: 'Female',
+ defaultMessage: '你好，旅行者',
+ })}
)}
diff --git a/src/pages/user/index.js b/src/pages/user/index.js
index 003f7f5..c0d6a0e 100644
--- a/src/pages/user/index.js
+++ b/src/pages/user/index.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
import { router } from 'utils'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm } from 'antd'
-import { withI18n } from '@lingui/react'
import { Page } from 'components'
import { stringify } from 'qs'
import List from './components/List'
diff --git a/src/utils/index.js b/src/utils/index.js
index 4311ac8..c61eea1 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,8 +1,5 @@
-import { cloneDeep, isString, flow, curry } from 'lodash'
-import { history } from 'umi'
-import pathToRegexp from 'path-to-regexp'
-import { i18n } from './config'
-import moment from 'moment'
+import { cloneDeep } from 'lodash'
+const { pathToRegexp } = require("path-to-regexp")
import 'moment/locale/zh-cn'
export classnames from 'classnames'
@@ -10,11 +7,6 @@ export config from './config'
export request from './request'
export { Color } from './theme'
-// export const { defaultLanguage } = i18n
-// export const languages = i18n.languages.map(item => item.key)
-export const languages = i18n ? i18n.languages.map(item => item.key) : []
-export const defaultLanguage = i18n ? i18n.defaultLanguage : ''
-
/**
* Query objects that specify keys and values in an array where all values are objects.
* @param {array} array An array where all values are objects, like [{key:1},{key:2}].
@@ -63,97 +55,6 @@ export function arrayToTree(
return result
}
-// export const langFromPath = curry(
-// /**
-// * Query language from pathname.
-// * @param {array} languages Specify which languages are currently available.
-// * @param {string} defaultLanguage Specify the default language.
-// * @param {string} pathname Pathname to be queried.
-// * @return {string} Return the queryed language.
-// */
-// (languages, defaultLanguage, pathname) => {
-// for (const item of languages) {
-// if (pathname.startsWith(`/${item}/`)) {
-// return item
-// }
-// }
-// return defaultLanguage
-// }
-// )(languages)(defaultLanguage)
-
-export const langFromPath = pathname => {
- for (const item of languages) {
- if (pathname.startsWith(`/${item}/`)) {
- return item
- }
- }
- return defaultLanguage
-}
-
-export const deLangPrefix = curry(
- /**
- * Remove the language prefix in pathname.
- * @param {array} languages Specify which languages are currently available.
- * @param {string} pathname Remove the language prefix in the pathname.
- * @return {string} Return the pathname after removing the language prefix.
- */
- (languages, pathname) => {
- if (!pathname) {
- return
- }
- for (const item of languages) {
- if (pathname.startsWith(`/${item}/`)) {
- return pathname.replace(`/${item}/`, '/')
- }
- }
-
- return pathname
- }
-)(languages)
-
-/**
- * Add the language prefix in pathname.
- * @param {string} pathname Add the language prefix in the pathname.
- * @return {string} Return the pathname after adding the language prefix.
- */
-export function addLangPrefix(pathname) {
- if (!i18n) {
- return pathname
- }
-
- const prefix = langFromPath(window.location.pathname)
- return `/${prefix}${deLangPrefix(pathname)}`
-}
-
-const routerAddLangPrefix = params => {
- if (!i18n) {
- return params
- }
- if (isString(params)) {
- params = addLangPrefix(params)
- } else {
- params.pathname = addLangPrefix(params.pathname)
- }
- return params
-}
-
-/**
- * Adjust the router to automatically add the current language prefix before the pathname in push and replace.
- */
-const myRouter = { ...history }
-
-myRouter.push = flow(
- routerAddLangPrefix,
- history.push
-)
-
-myRouter.replace = flow(
- routerAddLangPrefix,
- myRouter.replace
-)
-
-export const router = myRouter
-
/**
* Whether the path matches the regexp if the language prefix is ignored, https://github.com/pillarjs/path-to-regexp.
* @param {string|regexp|array} regexp Specify a string, array of strings, or a regular expression.
@@ -258,17 +159,3 @@ export function queryLayout(layouts, pathname) {
return result
}
-
-export function getLocale() {
- return langFromPath(window.location.pathname)
-}
-
-export function setLocale(language) {
- if (getLocale() !== language) {
- moment.locale(language === 'zh' ? 'zh-cn' : language)
- history.push({
- pathname: `/${language}${deLangPrefix(window.location.pathname)}`,
- search: window.location.search,
- })
- }
-}
diff --git a/src/utils/index.test.js b/src/utils/index.test.js
index e72a0bb..f18bbe8 100644
--- a/src/utils/index.test.js
+++ b/src/utils/index.test.js
@@ -1,5 +1,5 @@
import { pathMatchRegexp } from './index'
-import pathToRegexp from 'path-to-regexp'
+const { pathToRegexp } = require("path-to-regexp")
describe('test pathMatchRegexp', () => {
it('get right', () => {
diff --git a/src/utils/request.js b/src/utils/request.js
index cc28a3f..3c272f4 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,6 +1,6 @@
import axios from 'axios'
import { cloneDeep, isEmpty } from 'lodash'
-import pathToRegexp from 'path-to-regexp'
+const { pathToRegexp } = require("path-to-regexp")
import { message } from 'antd'
import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
import qs from 'qs'