upadte tree style

components/tree/demo/basic.md

@@ -9,9 +9,15 @@
 ````jsx
 var Tree = antd.Tree;
 var TreeNode = Tree.TreeNode;
+function handleSelect(selected, c) {
+  console.log('selected: ', selected, c );
+}
+function handleChecked(checked, c) {
+  console.log('checked: ', checked, c );
+}
 React.render(
-  <Tree className="myCls" checkable={true}>
-        <TreeNode title="parent 1" expanded={false}>
+  <Tree className="myCls" onSelect={handleSelect} onChecked={handleChecked}>
+        <TreeNode title="parent 1" expanded={true}>
           <TreeNode>leaf </TreeNode>
           <TreeNode title="parent 1-1">
             <TreeNode title="parent 2-1">
@@ -26,7 +32,7 @@ React.render(
         <TreeNode>
           <TreeNode>leaf </TreeNode>
         </TreeNode>
-      </Tree>
+    </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;
+React.render(
+  <Tree className="myCls" checkable={true}>
+        <TreeNode title="parent 1" expanded={true}>
+          <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>
+, document.getElementById('components-tree-demo-checkbox'));
+````
+

components/tree/index.jsx

@@ -8,7 +8,6 @@ var antDTree = React.createClass({
       prefixCls: 'ant-tree'
     };
   },
-
   render() {
     return <Tree {...this.props} showIcon={false} showLine={false}>
       {this.props.children}

components/tree/index.md

@@ -5,4 +5,13 @@
 
 ---
 
+## 何时使用
 
+简单的树形菜单应用，暂不支持键盘操作。
+
+## API
+
+| 参数      | 说明                                     | 类型       | 默认值 |
+|-----------|------------------------------------------|------------|--------|
+| checkable | whether support checked | bool     | false    |
+| expandAll     | expand all treeNodes    | bool | false     |

package.json

@@ -56,7 +56,7 @@
     "rc-table": "~3.1.0",
     "rc-tabs": "~5.2.0",
     "rc-tooltip": "~2.4.0",
-    "rc-tree": "~0.10.0",
+    "rc-tree": "~0.12.1",
     "rc-util": "~2.0.3",
     "react-slick": "~0.6.4"
   },

style/components/tree.less

@@ -1,4 +1,4 @@
-@treePrefixCls: rc-tree;
+@treePrefixCls: ant-tree;
 
 .@{treePrefixCls} {
   margin:0; padding:5px;
@@ -30,7 +30,7 @@
       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");
+      background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png");
     }
     span.button.roots_open {  background-position: -92px 0;  }
     span.button.roots_close{background-position:-74px 0}
@@ -38,31 +38,33 @@
     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.noline_open{background-position:-92px -72px}
+    span.button.noline_close{background-position:-74px -72px}
 
     span.button.chk {
-      width: 13px;  height: 13px;
-      margin: 0 3px 0 0;
+      width: 15px;  height: 16px;
+      // margin: 0 3px 0 0;
+      margin: 3px 5px 0 3px;
       cursor: auto;
     }
     span.button.chk.checkbox_false_full {background-position:0 0}
+    span.button.chk.checkbox_false_full:hover {background-position:0 -15px}
     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 {background-position:-15px 0}
+    span.button.chk.checkbox_true_full:hover {background-position:-15px -15px}
     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 {background-position:-14px -30px}
     span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
     span.button.chk.checkbox_true_disable {background-position:-14px -56px}
   }
 
-  &-selected{
+  /*&-selected{
     background-color:#FFE6B0;
     border:1px #FFB951 solid; opacity:0.8;
-  }
+  }*/
 
   &-treenode-switcher {
     display: inline-block;
@@ -85,4 +87,4 @@
   &-switcher__close {
     //background-position: -74px 0;
   }
-}
+}