Merge branch '0.8.0' of github.com:ant-design/ant-design into 0.8.0

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(
@@ -22,4 +21,4 @@ React.render(
     <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
   </div>,
 document.getElementById('components-notification-demo-basic'));
-````
\ No newline at end of file
+````

components/notification/demo/top.md → components/notification/demo/duration.md

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

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(
@@ -32,4 +31,4 @@ React.render(
     <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

@@ -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/tabs/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-默认选中第二项。
+默认选中第一项。
 
 ---
 
@@ -15,10 +15,10 @@ function callback(key) {
 }
 
 React.render(
-  <Tabs defaultActiveKey="2" onChange={callback}>
-    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
-    <TabPane tab="tab 2" key="2">选项卡二</TabPane>
-    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
+  <Tabs defaultActiveKey="1" onChange={callback}>
+    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+    <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
   </Tabs>
 , document.getElementById('components-tabs-demo-basic'));
 ````

components/tabs/demo/disabled.md

@@ -14,9 +14,9 @@ function callback(key) {}
 
 React.render(
   <Tabs defaultActiveKey="1" onChange={callback}>
-    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
-    <TabPane tab="tab 2" disabled={true} key="2">选项卡二</TabPane>
-    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
+    <TabPane tab="选项卡一" key="1">选项卡一</TabPane>
+    <TabPane tab="选项卡二" disabled={true} key="2">选项卡二</TabPane>
+    <TabPane tab="选项卡三" key="3">选项卡三</TabPane>
   </Tabs>
 , document.getElementById('components-tabs-demo-disabled'));
 ````

components/tabs/demo/icon.md

@@ -10,19 +10,17 @@
 var Tabs = antd.Tabs;
 var TabPane = Tabs.TabPane;
 
-function callback(key) {}
-
 var tabContent = [
-  <span><i className="anticon anticon-apple"></i>tab 1</span>,
-  <span><i className="anticon anticon-android"></i>tab 2</span>,
-  <span><i className="anticon anticon-lock"></i>tab 3</span>,
+  <span><i className="anticon anticon-apple"></i>选项卡一</span>,
+  <span><i className="anticon anticon-android"></i>选项卡二</span>,
+  <span><i className="anticon anticon-lock"></i>选项卡三</span>,
 ];
 
 React.render(
-  <Tabs defaultActiveKey="2" onChange={callback}>
+  <Tabs defaultActiveKey="2">
     <TabPane tab={tabContent[0]} key="1">选项卡一</TabPane>
-    <TabPane tab={tabContent[1]} key="2">选项卡一</TabPane>
-    <TabPane tab={tabContent[2]} key="3">选项卡一</TabPane>
+    <TabPane tab={tabContent[1]} key="2">选项卡二</TabPane>
+    <TabPane tab={tabContent[2]} key="3">选项卡三</TabPane>
   </Tabs>
 , document.getElementById('components-tabs-demo-icon'));
 ````

components/tabs/demo/size.md

@@ -12,9 +12,9 @@ var TabPane = Tabs.TabPane;
 
 React.render(
   <Tabs defaultActiveKey="2" size="mini">
-    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
-    <TabPane tab="tab 2" key="2">选项卡二</TabPane>
-    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
+    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+    <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
   </Tabs>
 , document.getElementById('components-tabs-demo-size'));
 ````

components/tabs/demo/slide.md

@@ -14,15 +14,15 @@ function callback(key) {}
 
 React.render(
   <Tabs defaultActiveKey="1" onChange={callback}>
-    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
-    <TabPane tab="tab 2" key="2">选项卡二</TabPane>
-    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
-    <TabPane tab="tab 4" key="4">选项卡四</TabPane>
-    <TabPane tab="tab 5" key="5">选项卡五</TabPane>
-    <TabPane tab="tab 6" key="6">选项卡六</TabPane>
-    <TabPane tab="tab 7" key="7">选项卡七</TabPane>
-    <TabPane tab="tab 8" key="8">选项卡八</TabPane>
-    <TabPane tab="tab 9" key="9">选项卡九</TabPane>
+    <TabPane tab="选项一" key="1">选项卡一</TabPane>
+    <TabPane tab="选项二" key="2">选项卡二</TabPane>
+    <TabPane tab="选项三" key="3">选项卡三</TabPane>
+    <TabPane tab="选项四" key="4">选项卡四</TabPane>
+    <TabPane tab="选项五" key="5">选项卡五</TabPane>
+    <TabPane tab="选项六" key="6">选项卡六</TabPane>
+    <TabPane tab="选项七" key="7">选项卡七</TabPane>
+    <TabPane tab="选项八" key="8">选项卡八</TabPane>
+    <TabPane tab="选项九" key="9">选项卡九</TabPane>
   </Tabs>
 , document.getElementById('components-tabs-demo-slide'));
 ````

components/tree/index.md

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

package.json

@@ -40,7 +40,7 @@
     "rc-calendar": "~3.12.3",
     "rc-checkbox": "~1.0.6",
     "rc-collapse": "~1.2.3",
-    "rc-dialog": "~4.4.0",
+    "rc-dialog": "~4.5.0",
     "rc-dropdown": "~1.1.1",
     "rc-form-validation": "~2.4.7",
     "rc-input-number": "~2.0.1",
@@ -49,13 +49,13 @@
     "rc-pagination": "~1.1.0",
     "rc-progress": "~1.0.0",
     "rc-radio": "~2.0.0",
-    "rc-select": "~4.4.0",
+    "rc-select": "~4.5.1",
     "rc-slider": "~1.3.1",
     "rc-steps": "~1.1.4",
     "rc-switch": "~1.2.0",
     "rc-table": "~3.1.0",
-    "rc-tabs": "~5.2.0",
-    "rc-tooltip": "~2.4.0",
+    "rc-tabs": "~5.3.2",
+    "rc-tooltip": "~2.5.0",
     "rc-tree": "~0.10.0",
     "rc-util": "~2.0.3",
     "react-slick": "~0.6.4"

style/components/tabs.less

@@ -34,15 +34,18 @@
     width: 100%;
     position: relative;
     white-space: nowrap;
-    padding-right: 32px;
-    border-bottom: 1px solid #f3f3f3;
+    border-bottom: 1px solid #e9e9e9;
     margin-bottom: 15px;
     .clearfix;
   }
 
+  &-nav-container-scrolling {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
   &-tab-prev, &-tab-next {
     user-select: none;
-    -webkit-user-select: none;
     z-index: 2;
     margin-right: -2px;
     margin-top: 1px;
@@ -79,6 +82,12 @@
     }
   }
 
+  &-tab-btn-disabled {
+    cursor: default;
+    color: #ccc;
+    pointer-events: none;
+  }
+
   &-tab-next {
     right: 2px;
 
@@ -89,7 +98,6 @@
 
   &-tab-prev {
     left: 0;
-    background: #fff;
     transform: rotate(180deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
     &-icon:before {