improve message component

components/message/demo/costomTime.md

@@ -2,20 +2,18 @@
 
 - order: 4
 
-全局提示 - 操作成功提示,并自定义时长10s，默认时长2.5s
+全局提示 - 操作成功提示,并自定义时长`10s`，默认时长`2.5s`。
 
 ---
 
 ````jsx
 
 var message = antd.message;
-var success = function(){
+var success = function() {
   message.success('这是一条成功的提示,并将于10秒后消失',10);
-}
-
-React.render(
-  <button className="ant-btn ant-btn-primary" onClick={success} >（自定义时长）显示成功提示</button>, document.getElementById('components-message-demo-costomtime')
-);
+};
 
+React.render(<button className="ant-btn ant-btn-primary" onClick={success}>自定义时长提示</button>
+, document.getElementById('components-message-demo-duration'));
 ````
 

components/message/demo/error.md

@@ -2,19 +2,17 @@
 
 - order: 1
 
-全局提示 - 操作失败
+全局提示 - 操作失败反馈。
 
 ---
 
 ````jsx
 
 var message = antd.message;
-var error = function(){
+var error = function() {
   message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
-}
+};
 
-React.render(
-  <button className="ant-btn ant-btn-primary" onClick={error} >显示失败提示</button>, document.getElementById('components-message-demo-error')
-);
-
-````
+React.render(<button className="ant-btn ant-btn-primary" onClick={error}>显示失败提示</button>
+, document.getElementById('components-message-demo-error'));
+````

components/message/demo/info.md

@@ -2,19 +2,17 @@
 
 - order: 2
 
-全局提示 - 提醒
+全局提示 - 提醒反馈。
 
 ---
 
 ````jsx
 
 var message = antd.message;
-var info = function(){
+var info = function() {
   message.info('这是一条普通的提醒');
-}
+};
 
-React.render(
-  <button className="ant-btn ant-btn-primary" onClick={info} >显示普通提醒</button>, document.getElementById('components-message-demo-info')
-);
-
-````
+React.render(<button className="ant-btn ant-btn-primary" onClick={info}>显示普通提醒</button>
+, document.getElementById('components-message-demo-info'));
+````

components/message/demo/success.md

@@ -2,20 +2,17 @@
 
 - order: 0
 
-全局提示 - 操作成功提示
+全局提示 - 操作成功提示。
 
 ---
 
 ````jsx
-
 var message = antd.message;
-var success = function(){
+var success = function() {
   message.success('这是一条成功的提示');
-}
-
-React.render(
-  <button className="ant-btn ant-btn-primary" onClick={success} >显示成功提示</button>, document.getElementById('components-message-demo-success')
-);
+};
 
+React.render(<button className="ant-btn ant-btn-primary" onClick={success}>显示成功提示</button>
+, document.getElementById('components-message-demo-success'));
 ````
 

components/message/index.jsx

@@ -3,27 +3,22 @@
 //import React from 'react';
 import Notification from 'rc-notification';
 
-var message;
+var defaultDuration = 2.5;
 
 var getMessageInstance = function(){
-  message = Notification.newInstance({
+  return Notification.newInstance({
     prefixCls: 'ant-message',
     transitionName: 'move-up',
     style: {
       top: '16px'
     }
   });
-  return message;
 };
 
-
-module.exports = {
-
+export default {
   info: function(m, t) {
-    if (!message) {
-      message = getMessageInstance();
-    }
-    t = t || 2.5;
+    var message = getMessageInstance();
+    t = t || defaultDuration;
     message.notice({
       key: 'simpleMessage',
       duration: t,
@@ -37,11 +32,8 @@ module.exports = {
     });
   },
   success: function(m, t) {
-
-    if (!message) {
-      message = getMessageInstance();
-    }
-    t = t || 2.5;
+    var message = getMessageInstance();
+    t = t || defaultDuration;
     message.notice({
       key: 'simpleMessage1',
       transitionName: 'move-up',
@@ -56,11 +48,8 @@ module.exports = {
     });
   },
   error: function(m, t) {
-
-    if (!message) {
-      message = getMessageInstance();
-    }
-    t = t || 2.5;
+    var message = getMessageInstance();
+    t = t || defaultDuration;
     message.notice({
       key: 'simpleMessage2',
       transitionName: 'move-up',

components/message/index.md

@@ -2,7 +2,6 @@
 
 - category: Components
 - chinese: 全局提示
-
 - order: 4
 
 ---
@@ -13,3 +12,16 @@
 
 - 可提供成功、警告和错误等反馈信息。
 - 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
+
+## API
+
+- `message.success(content, duration)`
+- `message.error(content, duration)`
+- `message.info(content, duration)`
+
+组件提供了三个静态方法，参数如下：
+
+| 参数       | 说明           | 类型                       | 默认值       |
+|------------|----------------|----------------------------|--------------|
+| content    | 提示内容       | React.Element or String    | 无           |
+| duration   | 自动关闭的延时 | number                     | 2.5          |

style/components/message.less

@@ -7,45 +7,40 @@
   width: 100%;
 
   &-notice {
-    
     width: auto;
     vertical-align: middle;
     position: absolute;
   }
 
-  &-notice-content{
+  &-notice-content {
     position: relative;
     right: 50%;
     padding: 8px 16px;
-    border-radius: 6px;
-    border: 1px solid #e9e9e9;;
-    box-shadow: 0 0 4px #d9d9d9;
+    border-radius: @border-radius-base;
+    border: 1px solid #e9e9e9;
+    box-shadow: 0 0 4px rgba(0,0,0,0.16);
     background: #fff;
     display: block;
   }
 
-  &-custom-content{
-      height: 12px;
-      position: relative;
-      top: -8px;
+  &-custom-content {
   }
 
   &-success {
-    color: #87d068;
+    color: @success-color;
   }
 
   &-error {
-    color: #ff6600;
+    color: @error-color;
   }
 
   &-info {
-    color: #2db7f5;
+    color: @primary-color;
   }
 
-  .anticon{
-    width: 16px;
-    height: 16px;
-    font-size: 16px;
+  .anticon {
     margin-right: 8px;
+    position: relative;
+    top: -1px;
   }
 }