From 1e5271491e33a583af22a8693f6a57446ec6d9d4 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 7 Sep 2015 12:27:09 +0800
Subject: [PATCH] Add loading message

---
 components/message/demo/loading.md  | 20 +++++++++++++++++
 components/message/index.jsx        | 34 ++++++++++++++++++++---------
 components/message/index.md         |  1 +
 style/components/dialog/Dialog.less |  1 +
 style/components/message.less       |  2 +-
 5 files changed, 47 insertions(+), 11 deletions(-)
 create mode 100644 components/message/demo/loading.md

diff --git a/components/message/demo/loading.md b/components/message/demo/loading.md
new file mode 100644
index 0000000000..c1c80f45be
--- /dev/null
+++ b/components/message/demo/loading.md
@@ -0,0 +1,20 @@
+# 加载中
+
+- order: 4
+
+进行全局 loading，异步自行移除。
+
+---
+
+````jsx
+var message = antd.message;
+
+var success = function() {
+  var hide = message.loading('正在执行中...', 0);
+  // 异步手动移除
+  setTimeout(hide, 2500);
+};
+
+React.render(<button className="ant-btn" onClick={success}>显示加载中...</button>
+, document.getElementById('components-message-demo-loading'));
+````
diff --git a/components/message/index.jsx b/components/message/index.jsx
index 56b6a89518..ea06eff76b 100644
--- a/components/message/index.jsx
+++ b/components/message/index.jsx
@@ -4,6 +4,7 @@ import Notification from 'rc-notification';
 let defaultDuration = 1.5;
 let top;
 let messageInstance;
+let key = 1;
 
 function getMessageInstance() {
   messageInstance = messageInstance || Notification.newInstance({
@@ -16,31 +17,44 @@ function getMessageInstance() {
   return messageInstance;
 }
 
-function notice(content, duration = defaultDuration, type) {
+function notice(content, duration = defaultDuration, type, onClose) {
   let iconClass = ({
     'info': 'anticon-info-circle ant-message-info',
     'success': 'anticon-check-circle ant-message-success',
-    'error': 'anticon-exclamation-circle ant-message-error'
+    'error': 'anticon-exclamation-circle ant-message-error',
+    'loading': 'anticon-loading ant-message-loading'
   })[type];
-  getMessageInstance().notice({
+  let instance = getMessageInstance();
+  instance.notice({
+    key: key,
     duration: duration,
     style: {},
     content: <div className="ant-message-custom-content">
       <i className={'anticon ' + iconClass}></i>
       <span>{content}</span>
-    </div>
+    </div>,
+    onClose: onClose
   });
+  return (function() {
+    let target = key++;
+    return function() {
+      instance.removeNotice(target);
+    };
+  })();
 }
 
 export default {
-  info(content, duration) {
-    notice(content, duration, 'info');
+  info(content, duration, onClose) {
+    return notice(content, duration, 'info', onClose);
   },
-  success(content, duration) {
-    notice(content, duration, 'success');
+  success(content, duration, onClose) {
+    return notice(content, duration, 'success', onClose);
   },
-  error(content, duration) {
-    notice(content, duration, 'error');
+  error(content, duration, onClose) {
+    return notice(content, duration, 'error', onClose);
+  },
+  loading(content, duration, onClose) {
+    return notice(content, duration, 'loading', onClose);
   },
   config(options) {
     if (options.top) {
diff --git a/components/message/index.md b/components/message/index.md
index 2300ce8d07..e79a0e3ff5 100644
--- a/components/message/index.md
+++ b/components/message/index.md
@@ -18,6 +18,7 @@
 - `message.success(content, duration)`
 - `message.error(content, duration)`
 - `message.info(content, duration)`
+- `message.loading(content, duration)`
 
 组件提供了三个静态方法，参数如下：
 
diff --git a/style/components/dialog/Dialog.less b/style/components/dialog/Dialog.less
index 65cca3d27b..efea9ba6bb 100644
--- a/style/components/dialog/Dialog.less
+++ b/style/components/dialog/Dialog.less
@@ -4,6 +4,7 @@
   left: -9999px;
   top: -9999px;
   z-index: 1000;
+  min-height: 240px;
 
   &-wrap * {
     box-sizing: border-box;
diff --git a/style/components/message.less b/style/components/message.less
index 4113b0ae42..9fd6bcf27f 100644
--- a/style/components/message.less
+++ b/style/components/message.less
@@ -36,7 +36,7 @@
     color: @error-color;
   }
 
-  &-info {
+  &-info, &-loading  {
     color: @primary-color;
   }