Merge pull request #38 from ant-design/message

Message

components/message/demo/costomTime.md

@@ -0,0 +1,21 @@
+# 基本
+
+- order: 4
+
+全局提示 - 操作成功提示,并自定义时长10s，默认时长2.5s
+
+---
+
+````jsx
+
+var message = antd.message;
+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')
+);
+
+````
+

components/message/demo/error.md

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

components/message/demo/info.md

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

components/message/demo/success.md

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

components/message/index.jsx

@@ -0,0 +1,77 @@
+'use strict';
+
+//import React from 'react';
+import Notification from 'rc-notification';
+
+var message;
+
+var getMessageInstance = function(){
+  message = Notification.newInstance({
+    prefixCls: 'ant-message',
+    transitionName: 'move-up',
+    style: {
+      top: '16px'
+    }
+  });
+  return message;
+};
+
+
+module.exports = {
+
+  info: function(m, t) {
+    if (!message) {
+      message = getMessageInstance();
+    }
+    t = t || 2.5;
+    message.notice({
+      key: 'simpleMessage',
+      duration: t,
+      style: {
+        left: '50%'
+      },
+      content: <div className='ant-message-custom-content'>
+                 <i className='anticon anticon-info-circle ant-message-info'></i>
+                 <span>{m}</span>
+               </div>
+    });
+  },
+  success: function(m, t) {
+
+    if (!message) {
+      message = getMessageInstance();
+    }
+    t = t || 2.5;
+    message.notice({
+      key: 'simpleMessage1',
+      transitionName: 'move-up',
+      duration: t,
+      style: {
+        left: '50%'
+      },
+      content: <div className='ant-message-custom-content'>
+                 <i className='anticon anticon-check-circle ant-message-success'></i>
+                 <span>{m}</span>
+               </div>
+    });
+  },
+  error: function(m, t) {
+
+    if (!message) {
+      message = getMessageInstance();
+    }
+    t = t || 2.5;
+    message.notice({
+      key: 'simpleMessage2',
+      transitionName: 'move-up',
+      duration: t,
+      style: {
+        left: '50%'
+      },
+      content: <div className='ant-message-custom-content'>
+                 <i className='anticon anticon-exclamation-circle ant-message-error'></i>
+                 <span>{m}</span>
+               </div>
+    });
+  }
+};

components/message/index.md

@@ -3,6 +3,8 @@
 - category: Components
 - chinese: 全局提示
 
+- order: 4
+
 ---
 
 全局展示操作反馈信息。

index.js

@@ -16,7 +16,8 @@ var antd = {
   Steps: require('./components/steps'),
   InputNumber: require('./components/input-number'),
   Switch: require('./components/switch'),
-  Collapse: require('./components/Collapse')
+  Collapse: require('./components/Collapse'),
+  message: require('./components/message')
 };
 
 module.exports = antd;

package.json

@@ -27,7 +27,8 @@
     "rc-steps": "~1.1.3",
     "rc-switch": "~1.2.0",
     "rc-tabs": "~5.2.0",
-    "rc-tooltip": "~2.4.0"
+    "rc-tooltip": "~2.4.0",
+    "rc-notification": "~1.0.1"
   },
   "devDependencies": {
     "css-animation": "~1.0.3",

style/components/index.less

@@ -17,3 +17,4 @@
 @import "inputNumber";
 @import "typography";
 @import "collapse";
+@import "message";

style/components/message.less

@@ -0,0 +1,51 @@
+@prefixMessageClass: ant-message;
+
+.@{prefixMessageClass} {
+  font-size: 12px;
+  position: fixed;
+  z-index: 1000;
+  width: 100%;
+
+  &-notice {
+    
+    width: auto;
+    vertical-align: middle;
+    position: absolute;
+  }
+
+  &-notice-content{
+    position: relative;
+    right: 50%;
+    padding: 8px 16px;
+    border-radius: 6px;
+    border: 1px solid #e9e9e9;;
+    box-shadow: 0 0 4px #d9d9d9;
+    background: #fff;
+    display: block;
+  }
+
+  &-custom-content{
+      height: 12px;
+      position: relative;
+      top: -8px;
+  }
+
+  &-success {
+    color: #87d068;
+  }
+
+  &-error {
+    color: #ff6600;
+  }
+
+  &-info {
+    color: #2db7f5;
+  }
+
+  .anticon{
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    margin-right: 8px;
+  }
+}