i18n try #1

dxps · Dec 22, 2016 · 63c058f · 63c058f
1 parent 4ad2269
commit 63c058f
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 66 deletions.
diff --git 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
@@ -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
@@ -8,27 +8,27 @@ function UserList({
   onEditItem,
   }) {
   const columns = [{
-    title: '姓名',
+    title: 'name',
     dataIndex: 'name',
     key: 'name',
     render: (text) => <a href="#">{text}</a>,
   }, {
-    title: '年龄',
+    title: 'age',
     dataIndex: 'age',
     key: 'age',
   }, {
-    title: '住址',
+    title: 'address',
     dataIndex: 'address',
     key: 'address',
   }, {
-    title: '操作',
+    title: 'operation',
     key: 'operation',
     render: (text, record) => (
       <p>
-        <a onClick={() => onEditItem(record)}>编辑</a>
+        <a onClick={() => onEditItem(record)}>edit</a>
         &nbsp;
-        <Popconfirm title="确定要删除吗？" onConfirm={() => onDeleteItem(record.id)}>
-          <a>删除</a>
+        <Popconfirm title="Are you sure you want to delete？" onConfirm={() => onDeleteItem(record.id)}>
+          <a>delete</a>
         </Popconfirm>
       </p>
     ),

diff --git 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 = ({
     <Modal {...modalOpts}>
       <Form horizontal>
         <FormItem
-          label="姓名："
+          label="Name："
           hasFeedback
           {...formItemLayout}
         >
           {getFieldDecorator('name', {
             initialValue: item.name,
             rules: [
-              { required: true, message: '名称未填写' },
+              { required: true, message: 'Name must be provided.' },
             ],
           })(
             <Input type="text" />
           )}
         </FormItem>
         <FormItem
-          label="年龄："
+          label="Age："
           hasFeedback
           {...formItemLayout}
         >
@@ -82,14 +82,14 @@ const UserModal = ({
           )}
         </FormItem>
         <FormItem
-          label="住址："
+          label="Address："
           hasFeedback
           {...formItemLayout}
         >
           {getFieldDecorator('address', {
             initialValue: item.address,
             rules: [
-              { required: true, message: '不能为空' },
+              { required: true, message: 'Address must be provided.' },
             ],
           })(
             <Input type="address" />

diff --git a/src/components/Users/UserSearch.jsx b/src/components/Users/UserSearch.jsx
@@ -31,8 +31,8 @@ const UserSearch = ({
               initialValue: field || 'name',
             })(
               <Select>
-                <Select.Option value="name">名字</Select.Option>
-                <Select.Option value="address">地址</Select.Option>
+                <Select.Option value="name">name</Select.Option>
+                <Select.Option value="address">address</Select.Option>
               </Select>
             )}
           </Form.Item>
@@ -45,11 +45,11 @@ const UserSearch = ({
               <Input type="text" />
             )}
           </Form.Item>
-          <Button style={{ marginRight: '10px' }} type="primary" htmlType="submit">搜索</Button>
+          <Button style={{ marginRight: '10px' }} type="primary" htmlType="submit">Search</Button>
         </Form>
       </div>
       <div className={styles.create}>
-        <Button type="ghost" onClick={onAdd}>添加</Button>
+        <Button type="ghost" onClick={onAdd}>Add</Button>
       </div>
     </div>
   );

diff --git 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(
+    <LocaleProvider locale={appLocale.antd}>
+        <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
+            <App />
+        </IntlProvider>
+    </LocaleProvider>,
+    document.getElementById('root')
+);
diff --git a/src/locales/en.js 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"
+}
diff --git 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 (
-    <div className={styles.normal}>
-      <h1>Hello Antd.</h1>
-      <hr />
-      <ul className={styles.list}>
-        <li>You can go to <Link to="/users">/users</Link></li>
-      </ul>
-    </div>
-  );
+    return (
+        <div className={styles.normal}>
+            <h1>Hello Antd.</h1>
+            <hr />
+            <ul className={styles.list}>
+                <li>You can go to <Link to="/users">/users</Link></li>
+            </ul>
+        </div>
+    );
 }
 
-HomePage.propTypes = {
-};
+HomePage.propTypes = {};
 
 export default HomePage;
diff --git 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 = () =>
     <UserModal {...userModalProps} />;
 

diff --git 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;
 };