From fdd9ef7d182b6487259c1699b38915644f2b3276 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Tue, 24 Nov 2015 11:01:36 +0800
Subject: [PATCH] feat: Modal should support internationalization

---
 components/modal/confirm.jsx    | 17 ++++---
 components/modal/demo/locale.md | 87 +++++++++++++++++++++++++++++++++
 components/modal/index.jsx      |  6 ++-
 components/modal/index.md       |  4 ++
 4 files changed, 105 insertions(+), 9 deletions(-)
 create mode 100644 components/modal/demo/locale.md

diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx
index 62004b8b13..a376cff447 100644
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.jsx
@@ -72,19 +72,22 @@ export default function (props) {
     <span className="ant-confirm-title">{props.title}</span>
     <div className="ant-confirm-content">{props.content}</div>
   </div>;
-  let footer = <div className="ant-confirm-btns">
-    <Button type="ghost" size="large" onClick={onCancel}>取 消</Button>
-    <Button type="primary" size="large" onClick={onOk}>确 定</Button>
-  </div>;
 
+  let footer = null;
   if (props.okCancel) {
     footer = <div className="ant-confirm-btns">
-      <Button type="ghost" size="large" onClick={onCancel}>取 消</Button>
-      <Button type="primary" size="large" onClick={onOk}>确 定</Button>
+      <Button type="ghost" size="large" onClick={onCancel}>
+        {props.cancelText || '取消'}
+      </Button>
+      <Button type="primary" size="large" onClick={onOk}>
+        {props.okText || '确定'}
+      </Button>
     </div>;
   } else {
     footer = <div className="ant-confirm-btns">
-      <Button type="primary" size="large" onClick={onOk}>知道了</Button>
+      <Button type="primary" size="large" onClick={onOk}>
+        {props.okText || '知道了'}
+      </Button>
     </div>;
   }
 
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
new file mode 100644
index 0000000000..ba3c619137
--- /dev/null
+++ b/components/modal/demo/locale.md
@@ -0,0 +1,87 @@
+# 国际化
+
+- order: 6
+
+设置 `okText` 与 `cancelText` 以自定义按钮文字。
+
+---
+
+````jsx
+import { Modal, Button } from 'antd';
+
+const LocalizedModal = React.createClass({
+  getInitialState() {
+    return { visible: false };
+  },
+  showModal() {
+    this.setState({
+      visible: true
+    });
+  },
+  handleOk() {
+    this.setState({
+      visible: false
+    });
+  },
+  handleCancel() {
+    this.setState({
+      visible: false
+    });
+  },
+  render() {
+    return <div>
+      <Button type="primary" onClick={this.showModal}>Show Modal</Button>
+      <Modal title="Modal" visible={this.state.visible}
+             onOk={this.handleOk} onCancel={this.handleCancel}
+             okText="OK" cancelText="Cancel">
+        <p>Bla bla ...</p>
+        <p>Bla bla ...</p>
+        <p>Bla bla ...</p>
+      </Modal>
+    </div>;
+  }
+});
+
+function confirm() {
+  Modal.confirm({
+    title: 'Confirm',
+    content: 'Bla bla ...',
+    okText: 'OK',
+    cancelText: 'Cancel'
+  });
+}
+
+function info() {
+  Modal.info({
+    title: 'Info',
+    content: 'Bla bla ...',
+    okText: 'OK'
+  });
+}
+
+function success() {
+  Modal.success({
+    title: 'Success',
+    content: 'Bla bla ...',
+    okText: 'OK'
+  });
+}
+
+function error() {
+  Modal.error({
+    title: 'Error',
+    content: 'Bla bla ...',
+    okText: 'OK'
+  });
+}
+
+ReactDOM.render(<div>
+  <LocalizedModal />
+  <br />
+  <Button onClick={confirm}>confirm</Button>
+  <Button onClick={info}>Info</Button>
+  <Button onClick={success}>Success</Button>
+  <Button onClick={error}>Error</Button>
+</div>, document.getElementById('components-modal-demo-locale'));
+````
+
diff --git a/components/modal/index.jsx b/components/modal/index.jsx
index e9cfcc68c4..9166a13e9a 100644
--- a/components/modal/index.jsx
+++ b/components/modal/index.jsx
@@ -15,6 +15,8 @@ let AntModal = React.createClass({
       prefixCls: 'ant-modal',
       onOk: noop,
       onCancel: noop,
+      okText: '确定',
+      cancelText: '取消',
       width: 520,
       transitionName: 'zoom',
       maskAnimation: 'fade',
@@ -56,14 +58,14 @@ let AntModal = React.createClass({
         type="ghost"
         size="large"
         onClick={this.handleCancel}>
-        取消
+        {props.cancelText}
       </Button>,
       <Button key="confirm"
         type="primary"
         size="large"
         loading={props.confirmLoading}
         onClick={this.handleOk}>
-        确定
+        {props.okText}
       </Button>
     ];
     let footer = props.footer || defaultFooter;
diff --git a/components/modal/index.md b/components/modal/index.md
index e491444b6b..ce3a403a34 100644
--- a/components/modal/index.md
+++ b/components/modal/index.md
@@ -27,6 +27,8 @@
 | onCancel   | 点击遮罩层或右上角叉或取消按钮的回调  | function  | 无           |
 | width      | 宽度           | String or Number | 520           |
 | footer     | 底部内容       | React.Element    | 确定取消按钮 |
+| okText     | 确认按钮文字    | String           | 确定       |
+| cancelText | 取消按钮文字    | String           | 取消       |
 
 
 ### Modal.xxx()
@@ -47,6 +49,8 @@
 | onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭       | function         | 无           |
 | width      | 宽度           | String or Number | 416           |
 | iconClassName | 图标 Icon 类型 | String | question-circle |
+| okText     | 确认按钮文字    | String           | 确定       |
+| cancelText | 取消按钮文字    | String           | 取消       |
 
 <style>
 .code-box-demo .ant-btn {