Merge remote-tracking branch 'upstream/0.8.0' into notification

components/carousel/index.jsx

@@ -2,23 +2,21 @@ import Carousel from 'react-slick';
 import React from 'react';
 import assign from 'object-assign';
 
-var AntCarousel = React.createClass({
-
+const AntCarousel = React.createClass({
   getDefaultProps() {
     return {
       dots: true,
       arrows: false
     };
   },
-
   render() {
-    var props = assign({}, this.props);
+    let props = assign({}, this.props);
 
     if (props.effect === 'fade') {
       props.fade = true;
     }
 
-    var className = 'ant-carousel';
+    let className = 'ant-carousel';
     if (props.vertical) {
       className = className + ' ant-carousel-vertical';
     }

components/menu/demo/horizontal.md

@@ -30,12 +30,15 @@ var App = React.createClass({
     <Menu.Item key="app">
       <i className="anticon anticon-large"></i>导航二
     </Menu.Item>
-    <SubMenu title={<span><i className="anticon anticon-setting"></i>导航三（子菜单）</span>}>
+    <SubMenu title={<span><i className="anticon anticon-setting"></i>导航 - 子菜单</span>}>
       <Menu.Item key="setting:1">选项1</Menu.Item>
       <Menu.Item key="setting:2">选项2</Menu.Item>
       <Menu.Item key="setting:3">选项3</Menu.Item>
       <Menu.Item key="setting:4">选项4</Menu.Item>
     </SubMenu>
+    <Menu.Item key="alipay">
+      <a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>
+    </Menu.Item>
   </Menu>
   }
 });

components/modal/demo/basic.md

@@ -26,19 +26,12 @@ var Test = React.createClass({
       visible: false
     });
   },
-  handleCancel() {
-    console.log('点击了取消');
-    this.setState({
-      visible: false
-    });
-  },
   render() {
     return <div>
       <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
       <Modal title="第一个 Modal"
         visible={this.state.visible}
-        onOk={this.handleOk}
-        onCancel={this.handleCancel}>
+        onOk={this.handleOk}>
         <p>对话框的内容</p>
         <p>对话框的内容</p>
         <p>对话框的内容</p>

components/modal/demo/custom.md

@@ -34,9 +34,6 @@ var Test = React.createClass({
   },
   handleCancel() {
     console.log('点击了取消');
-    this.setState({
-      visible: false
-    });
   },
   render() {
     return <div>

components/modal/index.jsx

@@ -6,14 +6,12 @@ function noop() {
 export default React.createClass({
   getInitialState() {
     return {
-      visible: false,
       confirmLoading: false
     };
   },
 
   handleCancel() {
-    var d = this.refs.d;
-    d.requestClose();
+    this.refs.d.requestClose();
   },
 
   getDefaultProps() {
@@ -54,6 +52,6 @@ export default React.createClass({
         确 定 {loadingIcon}
       </button>
     ];
-    return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d" />;
+    return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} maskAnimation="fade" width="500" footer={footer} {...props} ref="d" />;
   }
 });

components/radio/demo/radiogroup.md

@@ -23,7 +23,7 @@ var App = React.createClass({
     });
   },
   render() {
-    return<div>
+    return <div>
       <RadioGroup onChange={this.onChange} value={this.state.value}>
         <Radio value="a">A</Radio>
         <Radio value="b">B</Radio>
@@ -31,7 +31,7 @@ var App = React.createClass({
         <Radio value="d">D</Radio>
       </RadioGroup>
       <div style={{marginTop: 20}}>你选中的: {this.state.value}</div>
-    </div>
+    </div>;
   }
 });
 React.render(<App />, document.getElementById('components-radio-demo-radiogroup'));

components/radio/index.md

@@ -32,3 +32,4 @@
 |----------------|----------------------------------|-------------------|--------|--------|
 | onChange       | 选项变化时的回调函数             | Function(e:Event) | 无     | 无     |
 | value          | 用于设置当前选中的值             | String            | 无     | 无     |
+| defaultValue   | 默认选中的值                     | String            | 无     | 无     |

components/tree/demo/basic.md

@@ -10,23 +10,17 @@
 var Tree = antd.Tree;
 var TreeNode = Tree.TreeNode;
 React.render(
-  <Tree className="myCls" checkable={true}>
-        <TreeNode title="parent 1" expanded={false}>
+  <Tree className="myCls" defaultExpandAll={true}>
+    <TreeNode title="parent 1">
+      <TreeNode>leaf </TreeNode>
+      <TreeNode title="parent 1-1">
+        <TreeNode title="parent 2-1">
           <TreeNode>leaf </TreeNode>
-          <TreeNode title="parent 1-1">
-            <TreeNode title="parent 2-1">
-              <TreeNode>leaf </TreeNode>
-              <TreeNode>leaf </TreeNode>
-            </TreeNode>
-            <TreeNode>leaf </TreeNode>
-            <TreeNode>leaf </TreeNode>
-          </TreeNode>
         </TreeNode>
         <TreeNode>leaf </TreeNode>
-        <TreeNode>
-          <TreeNode>leaf </TreeNode>
-        </TreeNode>
-      </Tree>
+      </TreeNode>
+    </TreeNode>
+    <TreeNode>leaf </TreeNode>
+  </Tree>
 , document.getElementById('components-tree-demo-basic'));
 ````
-

components/tree/demo/checkbox.md

@@ -0,0 +1,32 @@
+# 基本
+
+- order: 1
+
+提供复选框操作功能。
+
+---
+
+````jsx
+var Tree = antd.Tree;
+var TreeNode = Tree.TreeNode;
+function handleCheck(checked, c, checkedKeys) {
+  console.log('checked: ', checked, c );
+}
+React.render(
+  <Tree defaultExpandAll={true} checkable={<span className="ant-tree-checkbox-inner"></span>} onCheck={handleCheck}>
+    <TreeNode title="parent 1">
+      <TreeNode>leaf </TreeNode>
+      <TreeNode title="parent 1-1">
+        <TreeNode title="parent 2-1">
+          <TreeNode>leaf </TreeNode>
+          <TreeNode>leaf </TreeNode>
+        </TreeNode>
+        <TreeNode>leaf </TreeNode>
+        <TreeNode>leaf </TreeNode>
+      </TreeNode>
+    </TreeNode>
+    <TreeNode>leaf </TreeNode>
+    <TreeNode>leaf </TreeNode>
+  </Tree>
+, document.getElementById('components-tree-demo-checkbox'));
+````

components/tree/index.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import Tree from 'rc-tree';
-
-var AntTree = React.createClass({
+var TreeNode = Tree.TreeNode;
+var antDTree = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-tree'
+    };
+  },
   render() {
-    return <Tree {...this.props} >
+    return <Tree {...this.props} showIcon={false}>
       {this.props.children}
     </Tree>;
   }
 });
-
-AntTree.TreeNode = Tree.TreeNode;
-export default AntTree;
+antDTree.TreeNode = TreeNode;
+module.exports = antDTree;

components/tree/index.md

@@ -1,13 +1,31 @@
 # Tree
 
 - category: Components
-- chinese: 树
-- disabled: true
+- chinese: 树形控件
 
 ---
 
-树形控件。
-
 ## 何时使用
 
 文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
+
+## API
+
+### Tree props
+
+| 参数       | 说明                                      | 类型       | 默认值 |
+|-----------|------------------------------------------|------------|--------|
+|checkable | 是否支持选中 | bool/React Node     | false    |
+|defaultExpandAll | 设置展开所有树节点 | bool | false |
+|defaultExpandedKeys | 展开指定的树节点 | String[] | false |
+|defaultCheckedKeys | 默认选中的树节点 | String[] | [] |
+|onCheck | 点击树节点触发 | function(e:{checked:bool,node,checkedKeys}) | - |
+|showIcon | 是否设置节点图标 | bool | true |
+
+### TreeNode props
+
+| 参数       | 说明                                      | 类型       | 默认值 |
+|-----------|------------------------------------------|------------|--------|
+|disabled | 禁掉响应 | bool | false |
+|title | 标题 | String | '---' |
+|key | 被树的selectedKeys或defaultSelectedKeys所用 | String | 内部计算出的节点位置 |

index.js

@@ -10,7 +10,7 @@ window.matchMedia = window.matchMedia || function() {
   };
 };
 
-var antd = {
+const antd = {
   Affix: require('./components/affix'),
   Datepicker: require('./components/datepicker'),
   Tooltip: require('./components/tooltip'),

package.json

@@ -57,7 +57,7 @@
     "rc-table": "~3.1.0",
     "rc-tabs": "~5.3.2",
     "rc-tooltip": "~2.5.0",
-    "rc-tree": "~0.10.0",
+    "rc-tree": "~0.14.x",
     "rc-upload": "~1.3.0",
     "rc-util": "~2.0.3",
     "react-slick": "~0.6.4"

style/components/checkbox.less

@@ -1,4 +1,6 @@
-@checkboxWrapPrefixCls: ant-checkbox;
+.checkboxFn();
+.checkboxFn(@checkboxPrefixCls: ant-checkbox) {
+@checkboxWrapPrefixCls: @checkboxPrefixCls;
 @checkboxInnerPrefixCls: ~"@{checkboxWrapPrefixCls}-inner";
 
 /* 一般状态 */
@@ -59,6 +61,22 @@
   }
 }
 
+/* 半选状态 */
+.@{checkboxWrapPrefixCls}-indeterminate {
+  .@{checkboxInnerPrefixCls} {
+    border-color: @primary-color;
+    background-color: @primary-color;
+    &:after {
+      content: ' ';
+      transform: scale(1);
+      position: absolute;
+      left: 2px;
+      top: 5px;
+      width: 8px;
+      height: 1px;
+    }
+  }
+}
 /* 选中状态 */
 .@{checkboxWrapPrefixCls}-checked {
 
@@ -133,3 +151,5 @@
 .@{checkboxWrapPrefixCls} + span {
   margin-left: 8px;
 }
+
+}

style/components/menu.less

@@ -156,9 +156,23 @@
 
     & > .@{menuPrefixCls}-item,
     & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
-      padding: 15px 20px;
+      padding: 0 20px;
+      line-height: 50px;
       position: relative;
       top: 1px;
+      > a {
+        display: block;
+        &:before, &:after {
+          position: absolute;
+          background-color: rgba(255,255,255,0.001);
+          width: 20px;
+          height: 50px;
+          content: '';
+        }
+        &:before {
+          left: 0;
+        }
+      }
     }
 
     & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {

style/components/tree.less

@@ -1,73 +1,103 @@
-@treePrefixCls: rc-tree;
-
+@treePrefixCls: ant-tree;
+.checkboxFn(@checkboxPrefixCls: ant-tree-checkbox);
+@import "../mixins/iconfont";
+@openIcon: '\e60f';
+.switcher_icon() {
+  position: relative;
+  &:after {
+    .iconfont-size-under-12px(6px);
+    content: @openIcon;
+    display: inline-block;
+    font-family: 'anticon';
+    font-weight: bold;
+    position: absolute;
+    top: 10px;
+    right: 4px;
+    color: #666;
+    transition: transform .3s ease;
+  }
+}
 .@{treePrefixCls} {
-  margin:0; padding:5px;
-
+  margin: 0;
+  padding: 5px;
+  font-size: 12px;
   li {
     padding: 0;
     margin: 0;
     list-style: none;
-    line-height: 14px;
     white-space: nowrap;
     outline: 0;
-
-    ul{ margin:0; padding:0 0 0 18px}
-    ul.line{
-      //background:url(./img/line_conn.gif) 0 0 repeat-y;
-      background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y;
+    ul {
+      margin: 0;
+      padding: 0 0 0 18px;
+      &.@{treePrefixCls}-line {
+        background: url("https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif") 0 0 repeat-y;
+      }
     }
     a {
-      padding:1px 3px 0 0; margin:0;
-      cursor:pointer; height:17px;
-      background-color: transparent;
-      text-decoration:none;
-      vertical-align:top; display: inline-block
+      display: inline-block;
+      padding: 1px 3px 0 0;
+      margin: 0;
+      cursor: pointer;
+      height: 20px;
+      text-decoration: none;
+      vertical-align: top;
+      color: #666;
     }
-    span {line-height:16px; margin-right:2px}
-    span.button {
-      line-height:0; margin:0; width:16px; height:16px;
-      display: inline-block; vertical-align:middle;
-      border:0 none; cursor: pointer;outline:none;
-      background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
-      //background-image:url("./img/zTreeStandard.png");
-      background-image:url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png");
+    span {
+      &.@{treePrefixCls}-switcher,
+      &.@{treePrefixCls}-iconEle {
+        line-height: 0;
+        margin: 0;
+        width: 16px;
+        height: 17px;
+        display: inline-block;
+        vertical-align: middle;
+        border: 0 none;
+        cursor: pointer;
+        outline: none;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-attachment: scroll;
+        // background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png");
+      }
+      &.@{treePrefixCls}-switcher {
+        &-disabled {
+          background: #fff;
+          position: relative;
+          &:after {
+            content: '-';
+            position: absolute;
+            top: 8px;
+            left: 6px;
+            color: gray;
+          }
+        }
+        background-position: 0 20px;
+        &.@{treePrefixCls}-roots_open,
+        &.@{treePrefixCls}-center_open,
+        &.@{treePrefixCls}-bottom_open,
+        &.@{treePrefixCls}-noline_open {
+          .switcher_icon();
+        }
+        &.@{treePrefixCls}-roots_close,
+        &.@{treePrefixCls}-center_close,
+        &.@{treePrefixCls}-bottom_close,
+        &.@{treePrefixCls}-noline_close {
+          .switcher_icon();
+          &:after {
+            .ie-rotate(3);
+            transform: rotate(270deg) scale(0.5);
+          }
+        }
+      }
     }
-    span.button.roots_open {  background-position: -92px 0;  }
-    span.button.roots_close{background-position:-74px 0}
-    span.button.center_open{background-position:-92px -18px}
-    span.button.center_close{background-position:-74px -18px}
-    span.button.bottom_open{background-position:-92px -36px}
-    span.button.bottom_close{background-position:-74px -36px}
-
-    span.button.center_docu{background-position:-56px -18px}
-    span.button.bottom_docu{background-position:-56px -36px}
-
-    span.button.chk {
-      width: 13px;  height: 13px;
-      margin: 0 3px 0 0;
-      cursor: auto;
-    }
-    span.button.chk.checkbox_false_full {background-position:0 0}
-    span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
-    span.button.chk.checkbox_false_part {background-position:0 -28px}
-    span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
-    span.button.chk.checkbox_false_disable {background-position:0 -56px}
-    span.button.chk.checkbox_true_full {background-position:-14px 0}
-    span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
-    span.button.chk.checkbox_true_part {background-position:-14px -28px}
-    span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
-    span.button.chk.checkbox_true_disable {background-position:-14px -56px}
   }
-
-  &-selected{
-    background-color:#FFE6B0;
-    border:1px #FFB951 solid; opacity:0.8;
-  }
-
-  &-treenode-switcher {
-    display: inline-block;
-    width: 18px;
-    height: 18px;
+  &-treenode-disabled {
+    >span,
+    >a {
+      color: gray;
+    }
   }
   &-icon__open {
     margin-right: 2px;
@@ -79,10 +109,4 @@
     background-position: -110px 0;
     vertical-align: top;
   }
-  &-switcher__open {
-    //background-position: -92px 0;
-  }
-  &-switcher__close {
-    //background-position: -74px 0;
-  }
 }