add icon style and top

components/notification/demo/onclose.md

@@ -1,6 +1,6 @@
 # 回调函数
 
-- order: 2
+- order: 3
 
 点击关闭按钮时触发回调函数。
 

components/notification/demo/top.md

@@ -0,0 +1,24 @@
+# 距离顶部距离
+
+- order: 1
+
+自定义通知框距离顶部的距离， **只在初始化时设置有效** ，默认距离顶部`24px`。
+
+---
+
+````jsx
+var notification = require('antd/lib/notification');
+
+var openNotification = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案",
+    top: 100
+  };
+  notification.open(args);
+};
+
+React.render(
+  <button className='ant-btn ant-btn-primary' onClick={openNotification}>距离顶部100px</button>
+, document.getElementById('components-notification-demo-top'));
+````

components/notification/demo/with-btn-onclose.md

@@ -1,6 +1,6 @@
 # 自定义关闭按钮同时触发回调函数
 
-- order: 4
+- order: 5
 
 关闭自定义的关闭按钮时触发回调函数，同时还可以在默认关闭按钮上添加另一个回调函数。
 

components/notification/demo/with-btn.md

@@ -1,6 +1,6 @@
 # 自定义关闭按钮
 
-- order: 3
+- order: 4
 
 自定义关闭按钮的样式和文字。
 

components/notification/demo/with-icon.md

@@ -1,6 +1,6 @@
 # 带有Icon的通知提醒框
 
-- order: 1
+- order: 2
 
 通知提醒框左侧有Icon图标。
 
@@ -9,16 +9,47 @@
 ````jsx
 var notification = require('antd/lib/notification');
 
-var openNotification = function() {
+var openNotificationSuccess = function() {
   var args = {
     message: "这是标题",
     description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: true
+    icon: "success"
   }; 
   notification.open(args);
 };
 
-React.render(
+var openNotificationInfo = function() {
-  <button className="ant-btn ant-btn-primary" onClick={openNotification}>带有Icon的通知提醒框</button>
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    icon: "info"
+  }; 
+  notification.open(args);
+};
+
+var openNotificationWarn = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    icon: "warn"
+  }; 
+  notification.open(args);
+};
+
+var openNotificationError = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    icon: "error"
+  }; 
+  notification.open(args);
+};
+
+React.render(<div>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationSuccess}>Success</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationInfo}>Info</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationWarn}>Warn</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationError}>Error</button>
+  </div>
 , document.getElementById('components-notification-demo-with-icon'));
 ````

components/notification/index.jsx

@@ -1,11 +1,11 @@
 import Notification from 'rc-notification';
 
-function getNotificationInstance() {
+function getNotificationInstance(top) {
   if (!Notification.notification) {
     Notification.notification = Notification.newInstance({
       prefixCls: 'ant-notification',
       style: {
-        top: 0,
+        top: isNaN(top) ? 24 : top,
         right: 0
       }
     });
@@ -14,12 +14,31 @@ function getNotificationInstance() {
 }
 
 function notice(args) {
-  getNotificationInstance();
+  getNotificationInstance(args.top);
   if (args.icon) {
-    let prefixCls = 'ant-notification-notice-content-icon-';
+    let prefixCls = ' ant-notification-notice-content-icon-';
+
+    let iconClass = 'anticon anticon-';
+    switch (args.icon) {
+      case 'success':
+        iconClass += 'check-circle-o';
+        break;
+      case 'info':
+        iconClass += 'info-circle-o';
+        break;
+      case 'error':
+        iconClass += 'exclamation-circle-o';
+        break;
+      case 'warn':
+        iconClass += 'question-circle-o';
+        break;
+      default:
+        iconClass += 'info-circle';
+    }
+
     Notification.notification.notice({
       content: <div>
-        <i className={'anticon anticon-question-circle-o ' + prefixCls + 'icon'}></i>
+        <i className={iconClass + prefixCls + 'icon-' + args.icon + prefixCls + 'icon'}></i>
         <p className={prefixCls + 'message'}>{args.message}</p>
         <p className={prefixCls + 'description'}>{args.description}</p>
       </div>,
@@ -29,20 +48,19 @@ function notice(args) {
       style: {}
     });
   } else {
+    let prefixCls = 'ant-notification-notice-content-';
     if (!args.btn) {
-      let prefixCls = 'ant-notification-notice-content-';
       Notification.notification.notice({
         content: <div>
-            <p className={prefixCls + 'message'}>{args.message}</p>
+          <p className={prefixCls + 'message'}>{args.message}</p>
-            <p className={prefixCls + 'description'}>{args.description}</p>
+          <p className={prefixCls + 'description'}>{args.description}</p>
-          </div>,
+        </div>,
         duration: null,
         closable: true,
         onClose: args.onClose,
         style: {}
       });
     } else {
-      let prefixCls = 'ant-notification-notice-content-';
       Notification.notification.notice({
         content: <div>
           <p className={prefixCls + 'message'}>{args.message}</p>

components/notification/index.md

@@ -17,7 +17,7 @@
 |----------- |---------------------------------------------    | ----------- |--------|
 | message    | 通知提醒标题，必选                                 | String      | 无     |
 | description | 通知提醒内容，必选                                | String      | 无     |
-| icon       | 通知提醒框的左侧有Icon                             | Boolean     | false  |
+| icon       | 通知提醒框的左侧Icon，默认没有，有四种选择`success`、`info`、`warn`、`error` | String | 无     |
 | btn        | 自定义关闭按钮                                    | String      | 无     |
+| top        | 通知提醒框距离顶部的距离，只在初始化时设置有效，默认`24`           | Number      | 24     |
 | onClose    | 点击默认关闭按钮时触发的回调函数                     | Function    | 无     |
-| customClose | 点击自定义按钮时触发的回调函数                      | Function    | 无     |

style/components/notification.less

@@ -2,16 +2,15 @@
 
 @notificationPrefixCls: ~"@{css-prefix}notification";
 
-@notificationPosition: 24px;
 @noticeWidth: 335px;
 @noticePadding: 16px;
-@noticeMarginTop: 10px;
+@noticeMarginBottom: 10px;
 
 .@{notificationPrefixCls} {
   position: fixed;
   z-index: 1000;
   width: @noticeWidth;
-  margin: (@notificationPosition - @noticeMarginTop) @notificationPosition 0 0;
+  margin-right: 24px;
 
   &-notice {
     padding: @noticePadding;
@@ -20,7 +19,7 @@
     background: @body-background;
     line-height: 1.5;
     position: relative;
-    margin-top: @noticeMarginTop;
+    margin-bottom: @noticeMarginBottom;
     overflow: hidden;
 
     &-content {
@@ -54,7 +53,19 @@
         top: 50%;
         margin-top: -26px;
         font-size: 35px;
-        color: @primary-color;
+
+        &-success{
+          color: @success-color;
+        }
+        &-info{
+          color: @primary-color;
+        }
+        &-warn{
+          color: @warning-color;
+        }
+        &-error{
+          color: @error-color;
+        }
       }
     }
 
@@ -92,7 +103,7 @@
 
   &-fade-leave {
     opacity: 1;
-    margin-top: @noticeMarginTop;
+    margin-bottom: @noticeMarginBottom;
     padding-top: @noticePadding;
     padding-bottom: @noticePadding;
     max-height: 150px;
@@ -102,7 +113,7 @@
   &-fade-leave&-fade-leave-active {
     opacity: 0;
     max-height: 0;
-    margin-top: 0;
+    margin-bottom: 0;
     padding-top: 0;
     padding-bottom: 0;
   }