From 5c2087311ffca3a8bd0256efc8eb818090100b89 Mon Sep 17 00:00:00 2001
From: Gray Choi <gray.choi.1988@gmail.com>
Date: Thu, 11 Aug 2016 12:41:06 +0900
Subject: [PATCH] docs: translate modal (#2634)

---
 components/modal/demo/async.md                | 21 ++++--
 components/modal/demo/basic.md                | 22 +++++--
 components/modal/demo/confirm-promise.md      | 17 +++--
 components/modal/demo/confirm.md              | 18 +++--
 components/modal/demo/footer.md               | 30 ++++++---
 components/modal/demo/info.md                 | 36 ++++++----
 components/modal/demo/locale.md               | 10 ++-
 components/modal/demo/manual.md               | 16 +++--
 components/modal/demo/position.md             | 33 ++++++----
 components/modal/index.en-US.md               | 66 +++++++++++++++++++
 components/modal/{index.md => index.zh-CN.md} |  0
 11 files changed, 206 insertions(+), 63 deletions(-)
 create mode 100644 components/modal/index.en-US.md
 rename components/modal/{index.md => index.zh-CN.md} (100%)

diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
index 40324990f9..8532b1f18a 100644
--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@@ -1,17 +1,26 @@
 ---
 order: 1
-title: 异步关闭
+title: 
+  zh-CN: 异步关闭
+  en-US: Asynchronously close
 ---
 
+## zh-CN
+
 点击确定后异步关闭对话框，例如提交表单。
 
+## en-US
+
+Asynchronously close a modal dialog when a user clicked OK button, for example,
+you can use this pattern when you submit a form.
+
 ````jsx
 import { Modal, Button } from 'antd';
 
 const Test = React.createClass({
   getInitialState() {
     return {
-      ModalText: '对话框的内容',
+      ModalText: 'Content of the modal dialog',
       visible: false,
     };
   },
@@ -22,7 +31,7 @@ const Test = React.createClass({
   },
   handleOk() {
     this.setState({
-      ModalText: '对话框将在两秒后关闭',
+      ModalText: 'The modal dialog will be closed after two seconds',
       confirmLoading: true,
     });
     setTimeout(() => {
@@ -33,7 +42,7 @@ const Test = React.createClass({
     }, 2000);
   },
   handleCancel() {
-    console.log('点击了取消');
+    console.log('Clicked cancel button');
     this.setState({
       visible: false,
     });
@@ -41,8 +50,8 @@ const Test = React.createClass({
   render() {
     return (
       <div>
-        <Button type="primary" onClick={this.showModal}>显示对话框</Button>
-        <Modal title="对话框标题"
+        <Button type="primary" onClick={this.showModal}>Open a modal dialog</Button>
+        <Modal title="Title of the modal dialog"
           visible={this.state.visible}
           onOk={this.handleOk}
           confirmLoading={this.state.confirmLoading}
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index 99f4c97055..d0d29316aa 100644
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -1,10 +1,18 @@
 ---
 order: 0
-title: 基本
+title: 
+  zh-CN: 基本
+  en-US: Basic
 ---
 
+## en-US
+
 第一个对话框。
 
+## zh-CN
+
+Basic modal dialog.
+
 ````jsx
 import { Modal, Button } from 'antd';
 
@@ -18,7 +26,7 @@ const App = React.createClass({
     });
   },
   handleOk() {
-    console.log('点击了确定');
+    console.log('Clicked OK');
     this.setState({
       visible: false,
     });
@@ -32,13 +40,13 @@ const App = React.createClass({
   render() {
     return (
       <div>
-        <Button type="primary" onClick={this.showModal}>显示对话框</Button>
-        <Modal title="第一个 Modal" visible={this.state.visible}
+        <Button type="primary" onClick={this.showModal}>Open a modal dialog</Button>
+        <Modal title="Basic Modal" visible={this.state.visible}
           onOk={this.handleOk} onCancel={this.handleCancel}
         >
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
+          <p>some contents...</p>
+          <p>some contents...</p>
+          <p>some contents...</p>
         </Modal>
       </div>
     );
diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md
index d0433877ca..e5265cd1ce 100644
--- a/components/modal/demo/confirm-promise.md
+++ b/components/modal/demo/confirm-promise.md
@@ -1,18 +1,27 @@
 ---
 order: 5
-title: 确认对话框
+title: 
+  zh-CN: 确认对话框
+  en-US: Confirmation modal dialog
 ---
 
+## zh-CN
+
 使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭
 
+## en-US
+
+To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to
+delay closing the dialog.
+
 ````jsx
 import { Modal, Button } from 'antd';
 const confirm = Modal.confirm;
 
 function showConfirm() {
   confirm({
-    title: '您是否确认要删除这项内容',
-    content: '点确认 1 秒后关闭',
+    title: 'Are you sure you want to delete this item ?',
+    content: 'When clicked the OK button, this dialog will be closed after 1 second',
     onOk() {
       return new Promise((resolve) => {
         setTimeout(resolve, 1000);
@@ -24,7 +33,7 @@ function showConfirm() {
 
 ReactDOM.render(
   <Button onClick={showConfirm}>
-    确认对话框
+    Confirmation modal dialog
   </Button>
 , mountNode);
 ````
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
index 610cd4859e..c79434a3a1 100644
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -1,20 +1,28 @@
 ---
 order: 3
-title: 确认对话框
+title: 
+  zh-CN: 确认对话框
+  en-US: Confirmation modal dialog
 ---
 
+## zh-CN
+
 使用 `confirm()` 可以快捷地弹出确认框。
 
+## en-US
+
+To use `confirm()` to popup a confirmation modal dialog.
+
 ````jsx
 import { Modal, Button } from 'antd';
 const confirm = Modal.confirm;
 
 function showConfirm() {
   confirm({
-    title: '您是否确认要删除这项内容',
-    content: '一些解释',
+    title: 'Are you sure you want to delete these items ?',
+    content: 'some descriptions',
     onOk() {
-      console.log('确定');
+      console.log('OK');
     },
     onCancel() {},
   });
@@ -22,7 +30,7 @@ function showConfirm() {
 
 ReactDOM.render(
   <Button onClick={showConfirm}>
-    确认对话框
+    confirmation modal dialog
   </Button>
 , mountNode);
 ````
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index dbfaa0f56c..6f2800e39a 100644
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@@ -1,10 +1,20 @@
 ---
 order: 2
-title: 自定义页脚
+title: 
+  zh-CN: 自定义页脚
+  en-US: Customized footer
 ---
 
+## zh-CN
+
 更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。
 
+## en-US
+
+A more complex example, as illustrated in this example, we define a customized footer button bar,
+the dialog will change to loading state after clicking submit button , when the loading is over,
+the modal dialog will be closed.
+
 ````jsx
 import { Modal, Button } from 'antd';
 
@@ -33,23 +43,23 @@ const Test = React.createClass({
     return (
       <div>
         <Button type="primary" onClick={this.showModal}>
-          显示对话框
+          Open modal dialog
         </Button>
         <Modal ref="modal"
           visible={this.state.visible}
-          title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
+          title="Title" onOk={this.handleOk} onCancel={this.handleCancel}
           footer={[
-            <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
+            <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>Return</Button>,
             <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
-              提 交
+              Submit
             </Button>,
           ]}
         >
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
         </Modal>
       </div>
     );
diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
index 7065ce83df..ffa9f1e361 100644
--- a/components/modal/demo/info.md
+++ b/components/modal/demo/info.md
@@ -1,20 +1,28 @@
 ---
 order: 5
-title: 信息提示
+title: 
+  zh-CN: 信息提示
+  en-US: Infomation modal dialog
 ---
 
+## zh-CN
+
 各种类型的信息提示，只提供一个按钮用于关闭。
 
+## en-US
+
+In the various types of informaion modal dialog, only one button to close dialog is provided.
+
 ````jsx
 import { Modal, Button } from 'antd';
 
 function info() {
   Modal.info({
-    title: '这是一条通知信息',
+    title: 'This is a notification message',
     content: (
       <div>
-        <p>一些附加信息一些附加信息一些附加信息</p>
-        <p>一些附加信息一些附加信息一些附加信息</p>
+        <p>some messages...some messages...</p>
+        <p>some messages...some messages...</p>
       </div>
     ),
     onOk() {},
@@ -23,29 +31,29 @@ function info() {
 
 function success() {
   Modal.success({
-    title: '这是一条通知信息',
-    content: '一些附加信息一些附加信息一些附加信息',
+    title: 'This is a success message',
+    content: 'some messages...some messages...',
   });
 }
 
 function error() {
   Modal.error({
-    title: '这是一条通知信息',
-    content: '一些附加信息一些附加信息一些附加信息',
+    title: 'This is an error message',
+    content: 'some messages...some messages...',
   });
 }
 
 function warning() {
   Modal.warning({
-    title: '这是一条警告信息',
-    content: '一些附加信息一些附加信息一些附加信息',
+    title: 'This is a warning messge',
+    content: 'some messages...some messages...',
   });
 }
 
 ReactDOM.render(<div>
-  <Button onClick={info}>信息提示</Button>
-  <Button onClick={success}>成功提示</Button>
-  <Button onClick={error}>失败提示</Button>
-  <Button onClick={warning}>警告提示</Button>
+  <Button onClick={info}>Info</Button>
+  <Button onClick={success}>Success</Button>
+  <Button onClick={error}>Error</Button>
+  <Button onClick={warning}>Warning</Button>
 </div>, mountNode);
 ````
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
index 36800582cb..2c4b5ae4d9 100644
--- a/components/modal/demo/locale.md
+++ b/components/modal/demo/locale.md
@@ -1,10 +1,18 @@
 ---
 order: 6
-title: 国际化
+title: 
+  zh-CN: 国际化
+  en-US: Internationalization
 ---
 
+## zh-CN
+
 设置 `okText` 与 `cancelText` 以自定义按钮文字。
 
+## en-US
+
+To customize the text of the buttons, you need to set `okText` and `cancelText` props.
+
 ````jsx
 import { Modal, Button } from 'antd';
 
diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md
index db8521a33d..3d680d3b7c 100644
--- a/components/modal/demo/manual.md
+++ b/components/modal/demo/manual.md
@@ -1,23 +1,31 @@
 ---
 order: 7
-title: 手动移除
+title: 
+  zh-CN: 手动移除
+  en-US: Manual to destroy
 ---
 
+## zh-CN
+
 手动关闭modal。
 
+## en-US
+
+Manually destroying a modal.
+
 ````jsx
 import { Modal, Button } from 'antd';
 
 function success() {
   const modal = Modal.success({
-    title: '这是一条通知信息',
-    content: '一秒后自动移除',
+    title: 'This is a notification message',
+    content: 'This modal will be destroyed after 1 second',
   });
   setTimeout(() => modal.destroy(), 1000);
 }
 
 
 ReactDOM.render(<div>
-  <Button onClick={success}>成功提示</Button>
+  <Button onClick={success}>Success</Button>
 </div>, mountNode);
 ````
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
index b3387757c3..8420d46327 100644
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@@ -1,10 +1,19 @@
 ---
 order: 7
-title: 自定义位置
+title: 
+  zh-CN: 自定义位置
+  en-US: To customize the position of modal
 ---
 
+## zh-CN
+
 `1.0` 之后，Modal 的 `align` 属性被移除，您可以直接使用 `style.top` 或配合其他样式来设置对话框位置。
 
+## en-US
+
+After release `1.0`,  Modal's `align` prop was removed. You can use `style.top` or other styles to
+set position of modal dialog.
+
 ````jsx
 import { Modal, Button } from 'antd';
 
@@ -24,29 +33,29 @@ const App = React.createClass({
   render() {
     return (
       <div>
-        <Button type="primary" onClick={() => this.setModal1Visible(true)}>显示距离顶部 20px 的对话框</Button>
+        <Button type="primary" onClick={() => this.setModal1Visible(true)}>Display a modal dialog at 20px to Top</Button>
         <Modal
-          title="距离顶部 20px 的对话框"
+          title="20px to Top"
           style={{ top: 20 }}
           visible={this.state.modal1Visible}
           onOk={() => this.setModal1Visible(false)}
           onCancel={() => this.setModal1Visible(false)}
         >
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
+          <p>some contents...</p>
+          <p>some contents...</p>
+          <p>some contents...</p>
         </Modal>
-        <Button type="primary" onClick={() => this.setModal2Visible(true)}>显示垂直居中的对话框</Button>
+        <Button type="primary" onClick={() => this.setModal2Visible(true)}>Vertically centered modal dialog</Button>
         <Modal
-          title="垂直居中的对话框"
+          title="Vertically centered modal dialog"
           wrapClassName="vertical-center-modal"
           visible={this.state.modal2Visible}
           onOk={() => this.setModal2Visible(false)}
           onCancel={() => this.setModal2Visible(false)}
         >
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
-          <p>对话框的内容</p>
+          <p>some contents...</p>
+          <p>some contents...</p>
+          <p>some contents...</p>
         </Modal>
       </div>
     );
@@ -57,7 +66,7 @@ ReactDOM.render(<App />, mountNode);
 ````
 
 ````css
-/* 使用 css 技巧来动态设置的对话框位置 */
+/* use css to set position of modal */
 .vertical-center-modal {
   display: flex;
   align-items: center;
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
new file mode 100644
index 0000000000..8b802b454a
--- /dev/null
+++ b/components/modal/index.en-US.md
@@ -0,0 +1,66 @@
+---
+type: Views
+category: Components
+english: Modal
+---
+
+Modal dialogs.
+
+## When to use
+
+When requiring users to interact with application, but without jumping to a new page to interrupt
+the user's workflow, you can use `Modal` to create a new floating layer over the currtent page for user 
+getting feedback or information purposes.
+Additionaly, if you need show a simple confirmation dialog, you can use `ant.Modal.confirm()`, 
+and so on.
+
+
+
+## API
+
+
+| Property       | Description           | Type             | Default       |
+|------------|----------------|------------------|--------------|
+| visible    | Determine whether a modal dialog is visible or not | Boolean | no |
+| confirmLoading | Determine whether to apply loading visual effect for OK button or not  | Boolean    | no           |
+| title      | The modal dialog's title          | React.Element    | no           |
+| closable   | Determine whether a close (x) button is visible on top right of the modal dialog or not | Boolean    | true        |
+| onOk       | Specify a function that will be called when a user clicked OK button | function | no |
+| onCancel   | Specify a function that will be called when a user clicked mask, close button on top right or cancel button | function(e)  | no         |
+| width      | Width of a modal dialog           | String or Number | 520           |
+| footer     | Footer content       | React.Element    | OK and cancel button |
+| okText     | Text of the OK button    | String           | OK       |
+| cancelText | Text of the Cancel button    | String           | Cancel       |
+| maskClosable | Determine whether to close the modal dialog when clicked mask of it. | Boolean   | true       |
+| style | Style of floating layer, typically used at least for adjusting the position. | Object   | - |
+| wrapClassName | The class name of the container of the modal dialog | String   | - |
+
+### Modal.xxx()
+
+There are five ways to display the information based on the content's nature:
+
+- `Modal.info`
+- `Modal.success`
+- `Modal.error`
+- `Modal.warning`
+- `Modal.confirm`
+
+The item listd above are all functions, expecting a settings object as parameter.
+The propeties of the object are follows:
+
+| Property   | Description    | Type             | Default       |
+|------------|----------------|------------------|---------------|
+| title      | Title           | React.Element or String    | no           |
+| content    | Content           | React.Element or String    | no          |
+| onOk       | Specify a function that will be called when a user clicked OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed    | function         | no           |
+| onCancel   | Specify a function that will be called when a user clicked Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed       | function         | no           |
+| width      | Width of dialog           | String or Number | 416           |
+| iconType   | Type of Icon component    | String | question-circle |
+| okText     | Text of OK button    | String           | OK       |
+| cancelText | Text of cancel button    | String           | Cancel       |
+
+<style>
+.code-box-demo .ant-btn {
+  margin-right: 8px;
+}
+</style>
diff --git a/components/modal/index.md b/components/modal/index.zh-CN.md
similarity index 100%
rename from components/modal/index.md
rename to components/modal/index.zh-CN.md