Amadeus/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin.git synced 2024-04-21 12:32:14 +00:00
Code Issues Releases Wiki Activity

upgrade lingui: 3.x

Browse Source
This commit is contained in:
Baorong Li
2021-03-17 16:50:49 +08:00
parent 9e4e0efbab
commit d92f121cf4
16 changed files with 116 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.umirc.js
+4 -1
View File
@@ -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: {
docs/i18n.md
+1 -1
View File
@@ -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 `<Trans>?message</Trans>`, `` 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 `<Trans>?message</Trans>`, `` 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
package.json
+22 -12
View File
@@ -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": {
src/components/Layout/Bread.js
+3 -4
View File
@@ -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`,
},
]
src/components/Layout/Header.js
+4 -5
View File
@@ -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(
src/components/Layout/Sider.js
+4 -5
View File
@@ -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`}
/>
</div>
)}
src/layouts/index.js
+19 -16
View File
@@ -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 (
<ConfigProvider locale={languages[language]}>
<I18nProvider language={language} catalogs={catalogs}>
<ConfigProvider locale={language}>
<I18nProvider i18n={i18n}>
<BaseLayout>{children}</BaseLayout>
</I18nProvider>
</ConfigProvider>
src/pages/index.js
+2 -4
View File
@@ -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 <Redirect to={i18n.t`/dashboard`} />
return <Redirect to={t`/dashboard`} />
}
}
src/pages/login/index.js
+5 -5
View File
@@ -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 {
<FormItem name="username"
rules={[{ required: true }]} hasFeedback>
<Input
placeholder={i18n.t`Username`}
placeholder={t`Username`}
/>
</FormItem>
<FormItem name="password"
rules={[{ required: true }]} hasFeedback>
<Input
type="password"
placeholder={i18n.t`Password`}
placeholder={t`Password`}
/>
</FormItem>
<Row>
src/pages/post/components/List.js
+12 -13
View File
@@ -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 => <Avatar shape="square" src={text} />,
},
{
title: i18n.t`Title`,
title: t`Title`,
dataIndex: 'title',
render: text => (
<Ellipsis tooltip length={30}>
@@ -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 }}
src/pages/post/index.js
+4 -5
View File
@@ -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}
>
<TabPane
tab={i18n.t`Publised`}
tab={t`Publised`}
key={String(EnumPostStatus.PUBLISHED)}
>
<List {...this.listProps} />
</TabPane>
<TabPane
tab={i18n.t`Unpublished`}
tab={t`Unpublished`}
key={String(EnumPostStatus.UNPUBLISH)}
>
<List {...this.listProps} />
src/pages/request/index.js
+1 -1
View File
@@ -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'
src/pages/user/components/Filter.js
+6 -6
View File
@@ -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 {
<Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
<Form.Item name="name">
<Search
placeholder={i18n.t`Search Name`}
placeholder={t`Search Name`}
onSearch={this.handleSubmit}
/>
</Form.Item>
@@ -99,7 +99,7 @@ class Filter extends Component {
<Cascader
style={{ width: '100%' }}
options={city}
placeholder={i18n.t`Please pick an address`}
placeholder={t`Please pick an address`}
/>
</Form.Item>
</Col>
@@ -110,7 +110,7 @@ class Filter extends Component {
sm={{ span: 12 }}
id="createTimeRangePicker"
>
<FilterItem label={i18n.t`CreateTime`}>
<FilterItem label={t`CreateTime`}>
<Form.Item name="createTime">
<RangePicker
style={{ width: '100%' }}
src/pages/user/components/List.js
+12 -9
View File
@@ -2,22 +2,22 @@ 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 { t } from "@lingui/macro"
import { Trans } from "@lingui/macro"
import { Link } 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: 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: <Trans>Avatar</Trans>,
dataIndex: 'avatar',
key: 'avatar',
width: 72,
width: '7%',
fixed: 'left',
render: text => <Avatar style={{ marginLeft: 8 }} src={text} />,
},
@@ -51,12 +51,14 @@ class List extends PureComponent {
{
title: <Trans>Age</Trans>,
dataIndex: 'age',
width: '6%',
key: 'age',
},
{
title: <Trans>Gender</Trans>,
dataIndex: 'isMale',
key: 'isMale',
width: '7%',
render: text => <span>{text ? 'Male' : 'Female'}</span>,
},
{
@@ -83,13 +85,14 @@ class List extends PureComponent {
title: <Trans>Operation</Trans>,
key: 'operation',
fixed: 'right',
width: '8%',
render: (text, record) => {
return (
<DropOption
onMenuClick={e => 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
src/pages/user/components/Modal.js
+13 -12
View File
@@ -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 (
<Modal {...modalProps} onOk={this.handleOk}>
<Form ref={this.formRef} name="control-ref" initialValues={{ ...item, address: item.address && item.address.split(' ') }} layout="horizontal">
<FormItem name='name' rules={[{ required: true }]}
label={i18n.t`Name`} hasFeedback {...formItemLayout}>
label={t`Name`} hasFeedback {...formItemLayout}>
<Input />
</FormItem>
<FormItem name='nickName' rules={[{ required: true }]}
label={i18n.t`NickName`} hasFeedback {...formItemLayout}>
label={t`NickName`} hasFeedback {...formItemLayout}>
<Input />
</FormItem>
<FormItem name='isMale' rules={[{ required: true }]}
label={i18n.t`Gender`} hasFeedback {...formItemLayout}>
label={t`Gender`} hasFeedback {...formItemLayout}>
<Radio.Group>
<Radio value>
<Trans>Male</Trans>
@@ -60,23 +61,23 @@ class UserModal extends PureComponent {
</Radio>
</Radio.Group>
</FormItem>
<FormItem name='age' label={i18n.t`Age`} hasFeedback {...formItemLayout}>
<FormItem name='age' label={t`Age`} hasFeedback {...formItemLayout}>
<InputNumber min={18} max={100} />
</FormItem>
<FormItem name='phone' rules={[{ required: true, pattern: /^1[34578]\d{9}$/, message: i18n.t`The input is not valid phone!`, }]}
label={i18n.t`Phone`} hasFeedback {...formItemLayout}>
<FormItem name='phone' rules={[{ required: true, pattern: /^1[34578]\d{9}$/, message: t`The input is not valid phone!`, }]}
label={t`Phone`} hasFeedback {...formItemLayout}>
<Input />
</FormItem>
<FormItem name='email' rules={[{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: i18n.t`The input is not valid E-mail!`, }]}
label={i18n.t`Email`} hasFeedback {...formItemLayout}>
<FormItem name='email' rules={[{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: t`The input is not valid E-mail!`, }]}
label={t`Email`} hasFeedback {...formItemLayout}>
<Input />
</FormItem>
<FormItem name='address' rules={[{ required: true, }]}
label={i18n.t`Address`} hasFeedback {...formItemLayout}>
label={t`Address`} hasFeedback {...formItemLayout}>
<Cascader
style={{ width: '100%' }}
options={city}
placeholder={i18n.t`Pick an address`}
placeholder={t`Pick an address`}
/>
</FormItem>
</Form>
src/pages/user/index.js
+4 -7
View File
@@ -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,
},