How to use the @lingui/react.withI18n function in @lingui/react
To help you get started, we鈥檝e selected a few @lingui/react examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
zuiidea / antd-admin / src / pages / user / components / List.js View on Github 
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/link'
import styles from './List.less'
const { confirm } = Modal
@withI18n()
class List extends PureComponent {
handleMenuClick = (record, e) => {
const { onDeleteItem, onEditItem, i18n } = this.props
if (e.key === '1') {
onEditItem(record)
} else if (e.key === '2') {
confirm({
title: i18n.t`Are you sure delete this record?`,
onOk() {
onDeleteItem(record.id)
},
})
}
}import { getMediaUrl } from 'utils/helpers'
const { mediaApiUrl } = config
const FormItem = Form.Item
const Option = Select.Option
const formItemLayout = {
labelCol: {
span: 6,
},
wrapperCol: {
span: 14,
},
}
@withI18n()
@Form.create()
class UserModal extends PureComponent {
constructor(props) {
super(props)
let fileList = []
if (props.item.avatar) {
fileList.push({
uid: '-1',
status: 'done',
url: getMediaUrl(props.item.avatar),
})
}
this.state = {import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import NumberCard from './components/NumberCard'
import { connect } from 'dva'
import { Col } from 'antd'
import { withI18n } from '@lingui/react'
import { Page } from 'components'
import './index.less'
@withI18n()
@connect(({ app, dashboard, loading }) => ({ app, dashboard, loading }))
class Dashboard extends PureComponent {
render() {
const { dashboard } = this.props
const { numbers } = dashboard
const numberCards = numbers.map((item, key) => (
))
return (
<div>{numberCards}</div>
)
}import React, { PureComponent } from 'react'
import Redirect from 'umi/redirect'
import { withI18n } from '@lingui/react'
@withI18n()
class Index extends PureComponent {
render() {
const { i18n } = this.props
return
}
}
export default Indeximport React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Table, Modal } from 'antd'
import { Link } from 'dva/router'
import { withI18n, Trans } from '@lingui/react'
import { DropOption } from 'components'
import { getMediaUrl } from 'utils/helpers'
import styles from './List.less'
const { confirm } = Modal
@withI18n()
class List extends PureComponent {
handleMenuClick = (record, e) => {
const { onDeleteItem, onEditItem, i18n } = this.props
if (e.key === '1') {
onEditItem(record)
} else if (e.key === '2') {
confirm({
title: i18n.t`Are you sure delete this record?`,
onOk() {
onDeleteItem(record._id)
},
})
}
}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 { getMediaUrl } from 'utils/helpers'
import styles from './List.less'
const { confirm } = Modal
@withI18n()
class List extends PureComponent {
handleMenuClick = (record, e) => {
const { onDeleteItem, onEditItem, i18n } = this.props
if (e.key === '1') {
onEditItem(record)
} else if (e.key === '2') {
confirm({
title: i18n.t`Are you sure delete this record?`,
onOk() {
onDeleteItem(record._id)
},
})
}
}import md5 from 'md5'
import { find } from 'lodash'
import { getRandomColor } from 'utils'
const { Option } = Select
const FormItem = Form.Item
const formItemLayout = {
labelCol: {
span: 6,
},
wrapperCol: {
span: 14,
},
}
@withI18n()
@Form.create()
class UserModal extends PureComponent {
state = {
roleSelectPermission: [],
}
handleOk = () => {
const { item = {}, onOk, form, modalType } = this.props
const { validateFields, getFieldsValue } = form
validateFields(errors => {
if (errors) {
return
}
const data = {
...getFieldsValue(),
_id: item._id,
controlCode: window.localStorage.getItem('controlCode'),import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Table, Modal } from 'antd'
import { DropOption } from 'components'
import { Trans, withI18n } from '@lingui/react'
import styles from './List.less'
const { confirm } = Modal
@withI18n()
class List extends PureComponent {
handleMenuClick = (record, e) => {
const { onDeleteItem, onEditItem, i18n } = this.props
if (e.key === '1') {
onEditItem(record)
} else if (e.key === '2') {
confirm({
title: i18n.t`Are you sure delete this record?`,
onOk() {
onDeleteItem(record._id)
},
})
}
}import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Table, Modal } from 'antd'
import { DropOption, MediaLink } from 'components'
import { Trans, withI18n } from '@lingui/react'
import styles from './List.less'
const { confirm } = Modal
@withI18n()
class List extends PureComponent {
handleMenuClick = (record, e) => {
const { onDeleteItem, onEditItem, i18n } = this.props
if (e.key === '1') {
onEditItem(record)
} else if (e.key === '2') {
confirm({
title: i18n.t`Are you sure delete this record?`,
onOk() {
onDeleteItem(record._id)
},
})
}
}import React, { PureComponent } from 'react'
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'
import Filter from './components/Filter'
import Modal from './components/Modal'
@withI18n()
@connect(({ user, app, loading }) => ({ user, app, loading }))
class User extends PureComponent {
render() {
const { location, dispatch, user, loading, i18n } = this.props
const { query, pathname } = location
const {
list,
pagination,
currentItem,
modalVisible,
modalType,
selectedRowKeys,
roleSelectList,
} = user
const handleRefresh = newQuery => {
