diff --git a/.umirc.js b/.umirc.js
index b270ac2..493b0ca 100644
--- a/.umirc.js
+++ b/.umirc.js
@@ -23,7 +23,6 @@ export default {
dynamicImport: {
loading: 'components/Loader/Loader',
},
- extraBabelPresets: ['@lingui/babel-preset-react'],
extraBabelPlugins: [
[
'import',
@@ -43,6 +42,9 @@ export default {
},
'ant-design-icons',
],
+ [
+ 'macros'
+ ]
],
hash: true,
ignoreMomentLocale: true,
@@ -65,6 +67,7 @@ export default {
theme: lessToJs(
fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
),
+ webpack5: {},
chainWebpack: function (config, { webpack }) {
config.merge({
optimization: {
diff --git a/docs/i18n.md b/docs/i18n.md
index c4e86fc..33bf011 100644
--- a/docs/i18n.md
+++ b/docs/i18n.md
@@ -12,7 +12,7 @@ Take Japanese as an example.
npm run add-locale ja
```
-2. Extract the fields in the code that need to be translated, ie `?message`, `` i18n.t`message `` in the `message` field, run the following command after `src/locales/ja /messages.json` will appear after the extracted field configuration.
+2. Extract the fields in the code that need to be translated, ie `?message`, `` t`message `` in the `message` field, run the following command after `src/locales/ja /messages.json` will appear after the extracted field configuration.
```bash
npm run extract
diff --git a/package.json b/package.json
index 006dd0f..d7b590e 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,11 @@
"description": "An admin dashboard application demo built upon Ant Design and UmiJS",
"dependencies": {
"@ant-design/icons": "^4.2.2",
- "@lingui/react": "^2.8.0",
+ "@lingui/react": "^3.7.0",
"antd": "^4.0.0",
- "axios": "^0.19.0",
+ "axios": "^0.21.0",
"classnames": "^2.2.6",
- "d3-shape": "^1.3.0",
+ "d3-shape": "^2.1.0",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.0",
"draftjs-to-markdown": "^0.6.0",
@@ -38,12 +38,13 @@
"store": "^2.0.0"
},
"devDependencies": {
- "@lingui/babel-preset-react": "^2.9.0",
- "@lingui/cli": "^2.9.0",
- "@lingui/loader": "^2.9.0",
+ "@lingui/cli": "^3.7.0",
+ "@lingui/macro": "^3.7.2",
"@umijs/preset-react": "^1.4.0",
"babel-eslint": "^10.0.1",
"babel-plugin-dev-expression": "^0.2.1",
+ "babel-plugin-import": "^1.13.3",
+ "babel-plugin-macros": "^3.0.1",
"babel-plugin-module-resolver": "^4.0.0",
"cross-env": "^7.0.0",
"eslint": "^7.0.0",
@@ -83,12 +84,21 @@
"lingui": {
"fallbackLocale": "en",
"sourceLocale": "en",
- "localeDir": "src/locales",
- "srcPathDirs": [
- "src/pages",
- "src/layouts",
- "src/components",
- "src/layouts"
+ "locales": [
+ "en",
+ "zh",
+ "pr"
+ ],
+ "catalogs": [
+ {
+ "path": "src/locales/{locale}/messages",
+ "include": [
+ "src/pages",
+ "src/layouts",
+ "src/components",
+ "src/layouts"
+ ]
+ }
],
"format": "minimal",
"extractBabelOptions": {
diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js
index fcfb200..ca86499 100644
--- a/src/components/Layout/Bread.js
+++ b/src/components/Layout/Bread.js
@@ -2,13 +2,12 @@ import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
import { Breadcrumb } from 'antd'
import { Link, withRouter } from 'umi'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
import iconMap from 'utils/iconMap'
const { pathToRegexp } = require('path-to-regexp')
import { queryAncestors } from 'utils'
import styles from './Bread.less'
-@withI18n()
@withRouter
class Bread extends PureComponent {
generateBreadcrumbs = (paths) => {
@@ -36,7 +35,7 @@ class Bread extends PureComponent {
})
}
render() {
- const { routeList, location, i18n } = this.props
+ const { routeList, location } = this.props
// Find a route that matches the pathname.
const currentRoute = routeList.find(
@@ -50,7 +49,7 @@ class Bread extends PureComponent {
routeList[0],
{
id: 404,
- name: i18n.t`Not Found`,
+ name: t`Not Found`,
},
]
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index 4840187..3b37540 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -8,8 +8,8 @@ import {
MenuFoldOutlined,
MenuUnfoldOutlined,
} from '@ant-design/icons'
-import { Trans, withI18n } from '@lingui/react'
-import { setLocale } from 'utils'
+import { Trans } from "@lingui/macro"
+import { getLocale, setLocale } from 'utils'
import moment from 'moment'
import classnames from 'classnames'
import config from 'config'
@@ -17,14 +17,12 @@ import styles from './Header.less'
const { SubMenu } = Menu
-@withI18n()
class Header extends PureComponent {
handleClickMenu = e => {
e.key === 'SignOut' && this.props.onSignOut()
}
render() {
const {
- i18n,
fixed,
avatar,
username,
@@ -56,8 +54,9 @@ class Header extends PureComponent {
if (config.i18n) {
const { languages } = config.i18n
+ const language = getLocale()
const currentLanguage = languages.find(
- item => item.key === i18n._language
+ item => item.key === language
)
rightContent.unshift(
diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js
index 4614abc..575311d 100644
--- a/src/components/Layout/Sider.js
+++ b/src/components/Layout/Sider.js
@@ -1,18 +1,17 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Switch, Layout } from 'antd'
-import { withI18n, Trans } from '@lingui/react'
+import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
import { BulbOutlined } from '@ant-design/icons'
import ScrollBar from '../ScrollBar'
import { config } from 'utils'
import SiderMenu from './Menu'
import styles from './Sider.less'
-@withI18n()
class Sider extends PureComponent {
render() {
const {
- i18n,
menus,
theme,
isMobile,
@@ -67,8 +66,8 @@ class Sider extends PureComponent {
theme === 'dark' ? 'light' : 'dark'
)}
defaultChecked={theme === 'dark'}
- checkedChildren={i18n.t`Dark`}
- unCheckedChildren={i18n.t`Light`}
+ checkedChildren={t`Dark`}
+ unCheckedChildren={t`Light`}
/>
)}
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 20974cd..ffecc73 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -1,15 +1,22 @@
import React, { Component } from 'react'
import { withRouter } from 'umi'
import { ConfigProvider } from 'antd'
+import { i18n } from "@lingui/core"
import { I18nProvider } from '@lingui/react'
import { getLocale } from 'utils'
-const { i18n } = require('../../src/utils/config')
+import { zh, en, pt } from 'make-plural/plurals'
import zh_CN from 'antd/lib/locale-provider/zh_CN'
import en_US from 'antd/lib/locale-provider/en_US'
import pt_BR from 'antd/lib/locale-provider/pt_BR'
import BaseLayout from './BaseLayout'
+const plurals = {
+ zh,
+ en,
+ 'pt-br': pt,
+}
+
const languages = {
zh: zh_CN,
en: en_US,
@@ -20,7 +27,6 @@ const { defaultLanguage } = i18n
@withRouter
class Layout extends Component {
state = {
- catalogs: {},
}
language = defaultLanguage
@@ -34,9 +40,8 @@ class Layout extends Component {
shouldComponentUpdate(nextProps, nextState) {
const language = getLocale()
const preLanguage = this.language
- const { catalogs } = nextState
- if (preLanguage !== language && !catalogs[language]) {
+ if (preLanguage !== language && !languages[language]) {
language && this.loadCatalog(language)
this.language = language
return false
@@ -48,29 +53,27 @@ class Layout extends Component {
loadCatalog = async language => {
const catalog = await import(
- /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
- `@lingui/loader!../locales/${language}/messages.json`
+ `../locales/${language}/messages.json`
)
- this.setState(state => ({
- catalogs: {
- ...state.catalogs,
- [language]: catalog,
- },
- }))
+ i18n.load(language, catalog)
+ i18n.activate(language)
}
render() {
const { children } = this.props
- const { catalogs } = this.state
let language = getLocale()
// If the language pack is not loaded or is loading, use the default language
- if (!catalogs[language]) language = defaultLanguage
+ if (!languages[language]) language = defaultLanguage
+
+ i18n.loadLocaleData(language, { plurals: plurals[language] })
+ i18n.load(language, languages[language])
+ i18n.activate(language)
return (
-
-
+
+
{children}
diff --git a/src/pages/index.js b/src/pages/index.js
index b34ad05..346f576 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,12 +1,10 @@
import React, { PureComponent } from 'react'
import { Redirect } from 'umi'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
-@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 0529c46..f6c5e0b 100644
--- a/src/pages/login/index.js
+++ b/src/pages/login/index.js
@@ -4,7 +4,8 @@ import { connect } from 'umi'
import { Button, Row, Input, Form } from 'antd'
import { GlobalFooter } from 'components'
import { GithubOutlined } from '@ant-design/icons'
-import { Trans, withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
import { setLocale } from 'utils'
import config from 'utils/config'
@@ -12,12 +13,11 @@ import styles from './index.less'
const FormItem = Form.Item
-@withI18n()
@connect(({ loading, dispatch }) => ({ loading, dispatch }))
class Login extends PureComponent {
render() {
- const { dispatch, loading, i18n } = this.props
+ const { dispatch, loading } = this.props
const handleOk = values => {
dispatch({ type: 'login/login', payload: values })
@@ -55,14 +55,14 @@ class Login extends PureComponent {
diff --git a/src/pages/post/components/List.js b/src/pages/post/components/List.js
index ed0f882..cde1d4a 100644
--- a/src/pages/post/components/List.js
+++ b/src/pages/post/components/List.js
@@ -1,21 +1,20 @@
import React, { PureComponent } from 'react'
import { Table, Avatar } from 'antd'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
import { Ellipsis } from 'components'
import styles from './List.less'
-@withI18n()
class List extends PureComponent {
render() {
- const { i18n, ...tableProps } = this.props
+ const { ...tableProps } = this.props
const columns = [
{
- title: i18n.t`Image`,
+ title: t`Image`,
dataIndex: 'image',
render: text => ,
},
{
- title: i18n.t`Title`,
+ title: t`Title`,
dataIndex: 'title',
render: text => (
@@ -24,31 +23,31 @@ class List extends PureComponent {
),
},
{
- title: i18n.t`Author`,
+ title: t`Author`,
dataIndex: 'author',
},
{
- title: i18n.t`Categories`,
+ title: t`Categories`,
dataIndex: 'categories',
},
{
- title: i18n.t`Tags`,
+ title: t`Tags`,
dataIndex: 'tags',
},
{
- title: i18n.t`Visibility`,
+ title: t`Visibility`,
dataIndex: 'visibility',
},
{
- title: i18n.t`Comments`,
+ title: t`Comments`,
dataIndex: 'comments',
},
{
- title: i18n.t`Views`,
+ title: t`Views`,
dataIndex: 'views',
},
{
- title: i18n.t`Publish Date`,
+ title: t`Publish Date`,
dataIndex: 'date',
},
]
@@ -58,7 +57,7 @@ class List extends PureComponent {
{...tableProps}
pagination={{
...tableProps.pagination,
- showTotal: total => i18n.t`Total ${total} Items`,
+ showTotal: total => t`Total ${total} Items`,
}}
bordered
scroll={{ x: 1200 }}
diff --git a/src/pages/post/index.js b/src/pages/post/index.js
index c20db47..cd398f6 100644
--- a/src/pages/post/index.js
+++ b/src/pages/post/index.js
@@ -4,7 +4,7 @@ import { connect } from 'umi'
import { Tabs } from 'antd'
import { history } from 'umi'
import { stringify } from 'qs'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
import { Page } from 'components'
import List from './components/List'
@@ -15,7 +15,6 @@ const EnumPostStatus = {
PUBLISHED: 2,
}
-@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
class Post extends PureComponent {
handleTabClick = key => {
@@ -52,7 +51,7 @@ class Post extends PureComponent {
}
render() {
- const { location, i18n } = this.props
+ const { location } = this.props
const { query } = location
return (
@@ -66,13 +65,13 @@ class Post extends PureComponent {
onTabClick={this.handleTabClick}
>
diff --git a/src/pages/request/index.js b/src/pages/request/index.js
index b440512..4067926 100644
--- a/src/pages/request/index.js
+++ b/src/pages/request/index.js
@@ -4,7 +4,7 @@ import { apiPrefix } from 'utils/config'
import { Row, Col, Select, Form, Input, Button, List, Tag, Checkbox } from 'antd'
import classnames from 'classnames'
import { CloseOutlined } from '@ant-design/icons'
-import { Trans } from '@lingui/react'
+import { Trans } from "@lingui/macro"
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 93d99ff..3443baa 100644
--- a/src/pages/user/components/Filter.js
+++ b/src/pages/user/components/Filter.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { FilterItem } from 'components'
-
-import { Trans } from '@lingui/react'
+import { Trans } from "@lingui/macro"
+import { t } from "@lingui/macro"
import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd'
import city from 'utils/city'
@@ -67,7 +67,7 @@ class Filter extends Component {
}
render() {
- const { onAdd, filter, i18n } = this.props
+ const { onAdd, filter } = this.props
const { name, address } = filter
let initialCreateTime = []
@@ -84,7 +84,7 @@ class Filter extends Component {
@@ -99,7 +99,7 @@ class Filter extends Component {
@@ -110,7 +110,7 @@ class Filter extends Component {
sm={{ span: 12 }}
id="createTimeRangePicker"
>
-
+
{
- 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: t`Are you sure delete this record?`,
onOk() {
onDeleteItem(record.id)
},
@@ -26,14 +26,14 @@ class List extends PureComponent {
}
render() {
- const { onDeleteItem, onEditItem, i18n, ...tableProps } = this.props
+ const { onDeleteItem, onEditItem, ...tableProps } = this.props
const columns = [
{
title: Avatar,
dataIndex: 'avatar',
key: 'avatar',
- width: 72,
+ width: '7%',
fixed: 'left',
render: text => ,
},
@@ -51,12 +51,14 @@ class List extends PureComponent {
{
title: Age,
dataIndex: 'age',
+ width: '6%',
key: 'age',
},
{
title: Gender,
dataIndex: 'isMale',
key: 'isMale',
+ width: '7%',
render: text => {text ? 'Male' : 'Female'},
},
{
@@ -83,13 +85,14 @@ class List extends PureComponent {
title: Operation,
key: 'operation',
fixed: 'right',
+ width: '8%',
render: (text, record) => {
return (
this.handleMenuClick(record, e)}
menuOptions={[
- { key: '1', name: i18n.t`Update` },
- { key: '2', name: i18n.t`Delete` },
+ { key: '1', name: t`Update` },
+ { key: '2', name: t`Delete` },
]}
/>
)
@@ -102,7 +105,7 @@ class List extends PureComponent {
{...tableProps}
pagination={{
...tableProps.pagination,
- showTotal: total => i18n.t`Total ${total} Items`,
+ showTotal: total => t`Total ${total} Items`,
}}
className={styles.table}
bordered
diff --git a/src/pages/user/components/Modal.js b/src/pages/user/components/Modal.js
index 7bec6e3..cae9d7f 100644
--- a/src/pages/user/components/Modal.js
+++ b/src/pages/user/components/Modal.js
@@ -1,8 +1,9 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd'
-import { Trans } from '@lingui/react'
+import { Trans } from "@lingui/macro"
import city from 'utils/city'
+import { t } from "@lingui/macro"
const FormItem = Form.Item
@@ -36,21 +37,21 @@ class UserModal extends PureComponent {
}
render() {
- const { i18n, item = {}, onOk, form, ...modalProps } = this.props
+ const { item = {}, onOk, form, ...modalProps } = this.props
return (
diff --git a/src/pages/user/index.js b/src/pages/user/index.js
index 610c967..d713e99 100644
--- a/src/pages/user/index.js
+++ b/src/pages/user/index.js
@@ -3,14 +3,13 @@ import PropTypes from 'prop-types'
import { history } from 'umi'
import { connect } from 'umi'
import { Row, Col, Button, Popconfirm } from 'antd'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
import { Page } from 'components'
import { stringify } from 'qs'
import List from './components/List'
import Filter from './components/Filter'
import Modal from './components/Modal'
-@withI18n()
@connect(({ user, loading }) => ({ user, loading }))
class User extends PureComponent {
handleRefresh = newQuery => {
@@ -49,18 +48,17 @@ class User extends PureComponent {
}
get modalProps() {
- const { dispatch, user, loading, i18n } = this.props
+ const { dispatch, user, loading } = this.props
const { currentItem, modalVisible, modalType } = user
return {
- i18n,
item: modalType === 'create' ? {} : currentItem,
visible: modalVisible,
destroyOnClose: true,
maskClosable: false,
confirmLoading: loading.effects[`user/${modalType}`],
title: `${
- modalType === 'create' ? i18n.t`Create User` : i18n.t`Update User`
+ modalType === 'create' ? t`Create User` : t`Update User`
}`,
centered: true,
onOk: data => {
@@ -130,11 +128,10 @@ class User extends PureComponent {
}
get filterProps() {
- const { location, dispatch, i18n } = this.props
+ const { location, dispatch } = this.props
const { query } = location
return {
- i18n,
filter: {
...query,
},