notification

components/notification/demo/basic.md

@@ -19,10 +19,10 @@ if(!Notification.notification){
   });
 }
 
-function openNotification() {
+var openNotification = function() {
   var args = {
-    title: '这是标题',
-    message: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案'
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案"
   }; 
   Notification.show(args);
 }
@@ -30,5 +30,6 @@ function openNotification() {
 React.render(
   <div>
     <button className='ant-btn ant-btn-primary' onClick={openNotification}>基本</button>
-  </div>, document.getElementById('components-notification-demo-basic'));
+  </div>,
+document.getElementById('components-notification-demo-basic'));
 ````
\ No newline at end of file

components/notification/demo/onclose.md

+# 回调函数
+
+- order: 2
+
+点击关闭按钮时触发回调函数。
+
+---
+
+````jsx
+var Notification = require('antd/lib/notification');
+
+if(!Notification.notification){
+  Notification.notification = Notification.newInstance({
+    prefixCls: 'ant-notification',
+    style: {
+      top: 0,
+      right: 0
+    }
+  });
+}
+
+var close = function() {
+  console.log("我被默认的关闭按钮关闭了！");
+}
+
+var openNotification = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    defaultClose: close
+  }; 
+  Notification.show(args);
+}
+
+React.render(
+  <div>
+    <button className='ant-btn ant-btn-primary' onClick={openNotification}>关闭按钮触发回调函数</button>
+  </div>,
+document.getElementById('components-notification-demo-onclose'));
+````
\ No newline at end of file

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

+# 自定义关闭按钮同时触发回调函数
+
+- order: 4
+
+关闭自定义的关闭按钮时触发回调函数，同时还可以在默认关闭按钮上添加另一个回调函数。
+
+---
+
+````jsx
+var Notification = require('antd/lib/notification');
+
+if(!Notification.notification){
+  Notification.notification = Notification.newInstance({
+    prefixCls: 'ant-notification',
+    style: {
+      top: 0,
+      right: 0
+    }
+  });
+}
+
+var customClose = function() {
+  console.log("我被自定义的关闭按钮关闭了！");
+}
+
+var close = function() {
+  console.log("我被默认的关闭按钮关闭了！");
+}
+
+var btn = <button className="ant-btn ant-btn-primary ant-btn-sm">自定义关闭按钮并触发回调函数</button>;
+
+var openNotification = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    btn: btn,
+    customClose: customClose,
+    defaultClose: close
+  }; 
+  Notification.show(args);
+}
+
+React.render(
+  <div>
+    <button className="ant-btn ant-btn-primary" onClick={openNotification}>关闭自定义的按钮触发回调函数</button>
+  </div>,
+document.getElementById('components-notification-demo-with-btn-onclose'));
+````
\ No newline at end of file

components/notification/demo/with-btn.md

-# 关闭触发回调函数
+# 自定义关闭按钮
 
-- order: 2
+- order: 3
 
-点击关闭按钮触发回调函数。
+自定义关闭按钮的样式和文字。
 
 ---
 
@@ -19,22 +19,20 @@ if(!Notification.notification){
   });
 }
 
-function callback() {
-  alert('我要关闭了！');
-}
+var btn = <button className="ant-btn ant-btn-primary ant-btn-sm">自定义关闭按钮</button>;
 
-function openNotification() {
+var openNotification = function() {
   var args = {
-    title: '这是标题',
-    message: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
-    btn: true,
-    callback: callback
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    btn: btn
   }; 
   Notification.show(args);
 }
 
 React.render(
   <div>
-    <button className='ant-btn ant-btn-primary' onClick={openNotification}>关闭按钮触发回调函数</button>
-  </div>, document.getElementById('components-notification-demo-with-btn'));
+    <button className="ant-btn ant-btn-primary" onClick={openNotification}>自定义关闭按钮</button>
+  </div>,
+document.getElementById('components-notification-demo-with-btn'));
 ````
\ No newline at end of file

components/notification/demo/with-icon.md

@@ -19,10 +19,10 @@ if(!Notification.notification){
   });
 }
 
-function openNotification() {
+var openNotification = function() {
   var args = {
-    title: '这是标题',
-    message: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
     icon: true
   }; 
   Notification.show(args);
@@ -30,6 +30,7 @@ function openNotification() {
 
 React.render(
   <div>
-    <button className='ant-btn ant-btn-primary' onClick={openNotification}>带有Icon的通知提醒框</button>
-  </div>, document.getElementById('components-notification-demo-with-icon'));
+    <button className="ant-btn ant-btn-primary" onClick={openNotification}>带有Icon的通知提醒框</button>
+  </div>,
+document.getElementById('components-notification-demo-with-icon'));
 ````
\ No newline at end of file

components/notification/index.jsx

 import Notification from 'rc-notification';
 
-function close(key, callback) {
+function close(key, customCallback) {
   Notification.notification.removeNotice(key);
-  if (callback) {
-    callback();
+  if (customCallback) {
+    customCallback();
   }
 }
 
@@ -13,12 +13,12 @@ Notification.show = function (args) {
     Notification.notification.notice({
       content: <div>
         <i className={'anticon anticon-question-circle-o ' + prefixCls + 'icon'}></i>
-        <p className={prefixCls + 'title'}>{args.title}</p>
         <p className={prefixCls + 'message'}>{args.message}</p>
+        <p className={prefixCls + 'description'}>{args.description}</p>
       </div>,
       duration: null,
       closable: true,
-      onClose: args.callback,
+      onClose: args.defaultClose,
       style: {}
     });
   } else {
@@ -26,12 +26,12 @@ Notification.show = function (args) {
       let prefixCls = 'ant-notification-notice-content-';
       Notification.notification.notice({
         content: <div>
-          <p className={prefixCls + 'title'}>{args.title}</p>
           <p className={prefixCls + 'message'}>{args.message}</p>
+          <p className={prefixCls + 'description'}>{args.description}</p>
         </div>,
         duration: null,
         closable: true,
-        onClose: args.callback,
+        onClose: args.defaultClose,
         style: {}
       });
     } else {
@@ -39,14 +39,15 @@ Notification.show = function (args) {
       let key = 'manual' + new Date().getTime();
       Notification.notification.notice({
         content: <div>
-          <p className={prefixCls + 'title'}>{args.title}</p>
           <p className={prefixCls + 'message'}>{args.message}</p>
-          <button onClick={close.bind(null, key, args.callback)} className={'ant-btn ant-btn-primary ant-btn-sm ' + prefixCls + 'btn'}>立即操作
-          </button>
+          <p className={prefixCls + 'description'}>{args.description}</p>
+          <span onClick={close.bind(null, key, args.customClose)} className={prefixCls + 'btn'}>
+            {args.btn}
+          </span>
         </div>,
         duration: null,
         closable: true,
-        onClose: args.callback,
+        onClose: args.defaultClose,
         key: key,
         style: {}
       });

components/notification/index.md

@@ -15,8 +15,9 @@
 
 | 参数        | 说明                                            | 类型         | 默认值 |
 |----------- |---------------------------------------------    | ----------- |--------|
-| title      | 通知提醒内容，必选                                 | String      | 无     |
-| message    | 通知提醒内容，必选                                 | String      | 无     |
-| callback   | 关闭时触发的回调函数                               | Function     | 无    |
-| icon       | 框的左侧有Icon                                   | Boolean      | false |
-| btn        | 自定义关闭按钮                                    | Boolean      | false |
+| message    | 通知提醒标题，必选                                 | String      | 无     |
+| description | 通知提醒内容，必选                                | String      | 无     |
+| icon       | 框的左侧有Icon                                    | Boolean     | false  |
+| btn        | 自定义关闭按钮的文字                                | String      | 无     |
+| defaultClose  | 默认关闭按钮关闭时触发的回调函数                   | Function    | 无     |
+| customClose   | 自定义关闭按钮关闭时触发的回调函数                 | Function    | 无     |

style/components/notification.less

@@ -23,32 +23,32 @@
     margin-top: @noticeMarginTop;
     overflow: hidden;
 
-    &-content{
-      &-title{
+    &-content {
+      &-message {
         font-size: 14px;
         color: @text-color;
         margin-bottom: 4px;
       }
-      &-message{
+      &-description {
         font-size: @font-size-base;
         color: @legend-color;
       }
     }
 
-    &-content-icon{
+    &-content-icon {
       position: relative;
-      &-title{
+      &-message {
         font-size: 14px;
         color: @text-color;
         margin-left: 51px;
         margin-bottom: 4px;
       }
-      &-message{
+      &-description {
         margin-left: 51px;
         font-size: @font-size-base;
         color: @legend-color;
       }
-      &-icon{
+      &-icon {
         position: absolute;
         left: 16px;
         top: 50%;
@@ -58,7 +58,7 @@
       }
     }
 
-    &-close-x:after{
+    &-close-x:after {
       content: "\e61e";
       font-family: "anticon";
       cursor: pointer;
@@ -72,9 +72,8 @@
       color: #999;
       outline: none;
     }
-
-
-    &-content-btn{
+    
+    &-content-btn {
       float: right;
       margin-top: 16px;
     }
@@ -96,7 +95,7 @@
     margin-top: @noticeMarginTop;
     padding-top: @noticePadding;
     padding-bottom: @noticePadding;
-    max-height: 100px;
+    max-height: 150px;
     transition: all .3s ease-in-out;
   }