diff --git a/mock/users.js b/mock/users.js index e168aa1..2aad06c 100755 --- a/mock/users.js +++ b/mock/users.js @@ -18,6 +18,7 @@ if (!global.tableListData) { current: 1 } }); + tableListData = data; global.tableListData = tableListData; } else { diff --git a/package.json b/package.json index fb07021..2e269de 100755 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "eslint-plugin-react": "^5.2.2", "glob": "^7.1.1", "mockjs": "^1.0.1-beta3", + "react-intl": "^2.1.5", "redbox-react": "^1.3.3" }, "scripts": { diff --git a/src/components/Users/UserList.jsx b/src/components/Users/UserList.jsx index 3f8a68f..b14d29d 100755 --- a/src/components/Users/UserList.jsx +++ b/src/components/Users/UserList.jsx @@ -8,27 +8,27 @@ function UserList({ onEditItem, }) { const columns = [{ - title: '姓名', + title: 'name', dataIndex: 'name', key: 'name', render: (text) => {text}, }, { - title: '年龄', + title: 'age', dataIndex: 'age', key: 'age', }, { - title: '住址', + title: 'address', dataIndex: 'address', key: 'address', }, { - title: '操作', + title: 'operation', key: 'operation', render: (text, record) => (

- onEditItem(record)}>编辑 + onEditItem(record)}>edit   - onDeleteItem(record.id)}> - 删除 + onDeleteItem(record.id)}> + delete

), diff --git a/src/components/Users/UserModal.jsx b/src/components/Users/UserModal.jsx index 9541c85..96dff02 100755 --- a/src/components/Users/UserModal.jsx +++ b/src/components/Users/UserModal.jsx @@ -34,17 +34,17 @@ const UserModal = ({ function checkNumber(rule, value, callback) { if (!value) { - callback(new Error('年龄未填写')); + callback(new Error('Age must be provided.')); } if (!/^[\d]{1,2}$/.test(value)) { - callback(new Error('年龄不合法')); + callback(new Error('Age must be a number.')); } else { callback(); } } const modalOpts = { - title: '修改用户', + title: 'User Edit', visible, onOk: handleOk, onCancel, @@ -54,21 +54,21 @@ const UserModal = ({
{getFieldDecorator('name', { initialValue: item.name, rules: [ - { required: true, message: '名称未填写' }, + { required: true, message: 'Name must be provided.' }, ], })( )} @@ -82,14 +82,14 @@ const UserModal = ({ )} {getFieldDecorator('address', { initialValue: item.address, rules: [ - { required: true, message: '不能为空' }, + { required: true, message: 'Address must be provided.' }, ], })( diff --git a/src/components/Users/UserSearch.jsx b/src/components/Users/UserSearch.jsx index d6c3104..6b3c2b7 100755 --- a/src/components/Users/UserSearch.jsx +++ b/src/components/Users/UserSearch.jsx @@ -31,8 +31,8 @@ const UserSearch = ({ initialValue: field || 'name', })( )} @@ -45,11 +45,11 @@ const UserSearch = ({ )} - +
- +
); diff --git a/src/index.js b/src/index.js index d66234e..85612e5 100755 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,28 @@ import './index.html'; import './global.less'; import dva from 'dva'; +import ReactDOM from 'react-dom'; import createLoading from 'dva-loading'; -import {browserHistory} from 'dva/router'; +import { browserHistory } from 'dva/router'; + +import { IntlProvider, addLocaleData } from 'react-intl'; +import { LocaleProvider } from 'antd'; +import antdEn from 'antd/lib/locale-provider/en_US'; +import appLocaleData from 'react-intl/locale-data/en'; +import enMessages from './locales/en'; + +window.appLocale = { + messages: { + ...enMessages, + }, + antd: antdEn, + locale: 'en-US', + data: appLocaleData, +}; + +const appLocale = window.appLocale; + +addLocaleData(appLocale.data); // 1. Initialize // const app = dva(); @@ -23,4 +43,13 @@ app.model(require('./models/users')); app.router(require('./router')); // 5. Start -app.start('#root'); +const App = app.start('#root'); + +ReactDOM.render( + + + + + , + document.getElementById('root') +); \ No newline at end of file diff --git a/src/locales/en.js b/src/locales/en.js new file mode 100644 index 0000000..b03c26c --- /dev/null +++ b/src/locales/en.js @@ -0,0 +1,6 @@ +export default { + "App.datePicker.title": "Date selection", + "InjectExample.alert": " Alert", + "InjectExample.button": "alert", + "InjectExample.description": "Description" +} \ No newline at end of file diff --git a/src/routes/HomePage.jsx b/src/routes/HomePage.jsx index 3931281..dd5011a 100755 --- a/src/routes/HomePage.jsx +++ b/src/routes/HomePage.jsx @@ -3,18 +3,17 @@ import { Link } from 'dva/router'; import styles from './HomePage.less'; function HomePage() { - return ( -
-

Hello Antd.

-
-
    -
  • You can go to /users
  • -
-
- ); + return ( +
+

Hello Antd.

+
+
    +
  • You can go to /users
  • +
+
+ ); } -HomePage.propTypes = { -}; +HomePage.propTypes = {}; export default HomePage; diff --git a/src/routes/Users.jsx b/src/routes/Users.jsx index a886907..8a08bfc 100755 --- a/src/routes/Users.jsx +++ b/src/routes/Users.jsx @@ -77,9 +77,9 @@ function Users({ location, dispatch, users }) { }, }; - // 解决 Form.create initialValue 的问题 - // 每次创建一个全新的组件, 而不做diff - // 如果你使用了redux, 请移步 http://react-component.github.io/form/examples/redux.html + // Use Form.create initialValue + // Every time you create a new component, rather than diff + // If you are using Redux, see http://react-component.github.io/form/examples/redux.html const UserModalGen = () => ; diff --git a/webpack.config.js b/webpack.config.js index 421dc07..5e28dfc 100755 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,39 +3,45 @@ const path = require('path'); const glob = require('glob'); module.exports = function (webpackConfig, env) { - - webpackConfig.babel.babelrc = false; - webpackConfig.babel.plugins.push('transform-runtime'); - webpackConfig.babel.plugins.push(['import', { - libraryName: 'antd', - style: true, // true means less is used, otherwise 'css' can be used. - }]); - // HMR for development. - if (env === 'development') { - webpackConfig.babel.plugins.push('dva-hmr'); - } + webpackConfig.babel.babelrc = false; + webpackConfig.babel.plugins.push('transform-runtime'); + webpackConfig.babel.plugins.push([ + 'import', + { + libraryName: 'antd', + style: true, // true means less is used, otherwise 'css' can be used. + }, + 'react-intl', { + messagesDir: './src/locales/i18n-messages', + } + ]); - // CSS Modules Support. - // Parse all less files as css module. - webpackConfig.module.loaders.forEach(function(loader, index) { - if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) { - loader.include = /node_modules/; - loader.test = /\.less$/; + // HMR for development. + if (env === 'development') { + webpackConfig.babel.plugins.push('dva-hmr'); } - if (loader.test.toString() === '/\\.module\\.less$/') { - loader.exclude = /node_modules/; - loader.test = /\.less$/; - } - if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.css$') > -1) { - loader.include = /node_modules/; - loader.test = /\.css$/; - } - if (loader.test.toString() === '/\\.module\\.css$/') { - loader.exclude = /node_modules/; - loader.test = /\.css$/; - } - }); - return webpackConfig; + // CSS Modules Support. + // Parse all less files as css module. + webpackConfig.module.loaders.forEach(function (loader, index) { + if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) { + loader.include = /node_modules/; + loader.test = /\.less$/; + } + if (loader.test.toString() === '/\\.module\\.less$/') { + loader.exclude = /node_modules/; + loader.test = /\.less$/; + } + if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.css$') > -1) { + loader.include = /node_modules/; + loader.test = /\.css$/; + } + if (loader.test.toString() === '/\\.module\\.css$/') { + loader.exclude = /node_modules/; + loader.test = /\.css$/; + } + }); + + return webpackConfig; };