Merge pull request #117 from ant-design/fix-notification

Fix notification

components/notification/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-最简单的用法。
+最简单的用法，五秒后自动关闭。
 
 ---
 
@@ -10,11 +10,10 @@
 var notification = require('antd/lib/notification');
 
 var openNotification = function() {
-  var args = {
+  notification.open({
     message: "这是标题",
     description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案"
-  };
-  notification.open(args);
+  });
 };
 
 React.render(

components/notification/demo/duration.md

@@ -0,0 +1,24 @@
+# 不自动消失
+
+- order: 6
+
+将 duration 配置为 null 即可。
+
+---
+
+````jsx
+var notification = require('antd/lib/notification');
+
+var openNotification = function() {
+  notification.open({
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案",
+    duration: null
+  });
+};
+
+React.render(
+  <button className="ant-btn ant-btn-primary" onClick={openNotification}>显示通知，不自动消失</button>
+, document.getElementById('components-notification-demo-duration'));
+````
+

components/notification/demo/top.md

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

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

@@ -21,19 +21,18 @@ var close = function() {
 var onClose = function() {
   // 默认按钮关闭时的业务处理
   console.log("我被默认的关闭按钮关闭了！");
-}
+};
 
 var btn = <button onClick={close} className="ant-btn ant-btn-primary ant-btn-sm">自定义关闭按钮并触发回调函数</button>;
 
 var openNotification = function() {
-  var args = {
+  notification.open({
     message: "这是标题",
     description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
     btn: btn,
     key: key,
     onClose: onClose
-  }; 
-  notification.open(args);
+  });
 };
 
 React.render(

components/notification/demo/with-btn.md

@@ -18,13 +18,12 @@ var close = function() {
 var btn = <button onClick={close} className="ant-btn ant-btn-primary ant-btn-sm">自定义关闭按钮</button>;
 
 var openNotification = function() {
-  var args = {
+  notification.open({
     message: "这是标题",
     description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
     btn: btn,
     key: key
-  };
-  notification.open(args);
+  });
 };
 
 React.render(

components/notification/demo/with-icon.md

@@ -2,7 +2,7 @@
 
 - order: 2
 
-通知提醒框左侧有Icon图标。
+通知提醒框左侧有图标。
 
 ---
 
@@ -11,11 +11,10 @@ var notification = require('antd/lib/notification');
 
 var openNotificationWithIcon = function(type) {
   return function(){
-    var args = {
+    notification[type]({
       message: "这是标题",
       description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案"
-    };
-    notification[type](args);
+    });
   };
 };
 

components/notification/index.jsx

@@ -3,21 +3,27 @@ import assign from 'object-assign';
 import React from 'react';
 
 let top = 24;
-
-var notificationInstance;
+let notificationInstance;
 
 function getNotificationInstance() {
   notificationInstance = notificationInstance || Notification.newInstance({
-      prefixCls: 'ant-notification',
-      style: {
-        top: top,
-        right: 0
-      }
-    });
+    prefixCls: 'ant-notification',
+    style: {
+      top: top,
+      right: 0
+    }
+  });
   return notificationInstance;
 }
 
 function notice(args) {
+  let duration;
+  if (args.duration === undefined) {
+    duration = 5;
+  } else {
+    duration = args.duration;
+  }
+
   if (args.icon) {
     let prefixCls = ' ant-notification-notice-content-icon-';
     let iconClass = 'anticon anticon-';
@@ -41,12 +47,10 @@ function notice(args) {
     getNotificationInstance().notice({
       content: <div>
         <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>,
-      duration: null,
+      duration: duration,
       closable: true,
       onClose: args.onClose,
       style: {}
@@ -57,10 +61,9 @@ function notice(args) {
       getNotificationInstance().notice({
         content: <div>
           <p className={prefixCls + 'message'}>{args.message}</p>
-
           <p className={prefixCls + 'description'}>{args.description}</p>
         </div>,
-        duration: null,
+        duration: duration,
         closable: true,
         onClose: args.onClose,
         style: {}
@@ -69,13 +72,12 @@ function notice(args) {
       getNotificationInstance().notice({
         content: <div>
           <p className={prefixCls + 'message'}>{args.message}</p>
-
           <p className={prefixCls + 'description'}>{args.description}</p>
           <span className={prefixCls + 'btn'}>
             {args.btn}
           </span>
         </div>,
-        duration: null,
+        duration: duration,
         closable: true,
         onClose: args.onClose,
         key: args.key,
@@ -99,7 +101,7 @@ var api = {
   }
 };
 
-['success', 'info', 'warn', 'error'].forEach((type)=> {
+['success', 'info', 'warn', 'error'].forEach((type) => {
   api[type] = (args) => {
     var newArgs = assign({}, args, {
       icon: type

components/notification/index.md

@@ -33,8 +33,9 @@ config 参数如下：
 | btn        | 自定义关闭按钮                                    | React.Element      | 无     |
 | key        | 当前通知唯一标志                               | String      | 无     |
 | onClose    | 点击默认关闭按钮时触发的回调函数                     | Function    | 无     |
+| duration   | 默认五秒后自动关闭，配置为 null 则不自动关闭         | Number    | 5     |
 
-还提供了一个全局配置方法：
+还提供了一个全局配置方法，需要在调用前提前配置，一次有效。
 
 - `notification.config(options)`
 

components/tree/index.md

@@ -9,4 +9,4 @@
 
 ## 何时使用
 
-文件夹、组织架构、生物分类、国家地区等等，人间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
+文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。