up tree and checkbox

components/tree/demo/checkbox.md

@@ -13,7 +13,7 @@ function handleCheck(checked, c, checkedKeys) {
   console.log('checked: ', checked, c );
 }
 React.render(
-  <Tree defaultExpandAll={true} checkable={true} onCheck={handleCheck}>
+  <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">

components/tree/index.md

@@ -15,7 +15,7 @@
 
 | 参数       | 说明                                      | 类型       | 默认值 |
 |-----------|------------------------------------------|------------|--------|
-| checkable | 是否支持选中 | bool     | false    |
+|checkable | 是否支持选中 | bool/React Node     | false    |
 |defaultExpandAll | 设置展开所有树节点 | bool | false |
 |defaultExpandedKeys | 展开指定的树节点 | String[] | false |
 |defaultCheckedKeys | 默认选中的树节点 | String[] | [] |

style/components/checkbox.less

@@ -59,6 +59,27 @@
   }
 }
 
+/* 半选状态 */
+.@{checkboxWrapPrefixCls}-indeterminate {
+  .@{checkboxInnerPrefixCls} {
+    border-color: @primary-color;
+    background-color: rgba(215, 216, 217, 1);
+    &:after {
+      transform: rotate(45deg) scale(1);
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      display: table;
+      width: 5px;
+      height: 8px;
+      border: 2px solid #ffffff;
+      border-top: 0;
+      border-left: 0;
+      content: ' ';
+      transition: all .2s @ease-out-back .1s;
+    }
+  }
+}
 /* 选中状态 */
 .@{checkboxWrapPrefixCls}-checked {
 

style/components/tree.less

@@ -1,5 +1,6 @@
 @treePrefixCls: ant-tree;
-
+@import "./checkbox";
+@checkboxWrapPrefixCls: ant-tree-checkbox;
 @import "../mixins/iconfont";
 @openIcon: '\e60f';
 .switcher_icon() {
@@ -16,68 +17,85 @@
     color: #666;
   }
 }
-
 .@{treePrefixCls} {
-  margin:0; padding:5px; font-size: 12px;
+  margin: 0;
+  padding: 5px;
+  font-size: 12px;
   li {
-    padding: 0;  margin: 0;
+    padding: 0;
-    list-style: none;  white-space: nowrap;  outline: 0;
+    margin: 0;
+    list-style: none;
+    white-space: nowrap;
+    outline: 0;
     ul {
-       margin:0; padding:0 0 0 18px;
+      margin: 0;
-       &.@{treePrefixCls}-line{
+      padding: 0 0 0 18px;
-         background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y;
+      &.@{treePrefixCls}-line {
-       }
+        background: url("https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif") 0 0 repeat-y;
+      }
     }
     a {
       display: inline-block;
-      padding:1px 3px 0 0; margin:0;
+      padding: 1px 3px 0 0;
-      cursor:pointer; height:20px;
+      margin: 0;
-      text-decoration:none; vertical-align:top;
+      cursor: pointer;
+      height: 20px;
+      text-decoration: none;
+      vertical-align: top;
       color: #666;
     }
     span {
-      line-height:20px;  margin-right:2px;
+      &.@{treePrefixCls}-switcher,
-      &.@{treePrefixCls}-button {
+      &.@{treePrefixCls}-iconEle {
-        line-height:0; margin:0; width:16px; height:16px;
+        line-height: 0;
-        display: inline-block; vertical-align:middle;
+        margin: 0;
-        border:0 none; cursor: pointer;outline:none;
+        width: 16px;
-        background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
+        height: 16px;
-        background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png");
+        display: inline-block;
-        &.@{treePrefixCls}-switcher {
+        vertical-align: middle;
-          &-disabled {
+        border: 0 none;
-            background: #fff; position: relative;
+        cursor: pointer;
-            &:after{content: '-'; position: absolute; top: 8px; left: 6px; color: gray;}
+        outline: none;
-          }
+        background-color: transparent;
-          background-position: 0 20px;
+        background-repeat: no-repeat;
-          &.@{treePrefixCls}-roots_open,
+        background-attachment: scroll;
-          &.@{treePrefixCls}-center_open,
+        // background-image:url("https://t.alipayobjects.com/images/T1NcthXkFdXXXXXXXX.png");
-          &.@{treePrefixCls}-bottom_open,
+      }
-          &.@{treePrefixCls}-noline_open{ .switcher_icon(); }
+      &.@{treePrefixCls}-switcher {
-          &.@{treePrefixCls}-roots_close,
+        &-disabled {
-          &.@{treePrefixCls}-center_close,
+          background: #fff;
-          &.@{treePrefixCls}-bottom_close,
+          position: relative;
-          &.@{treePrefixCls}-noline_close{
+          &:after {
-            .switcher_icon();
+            content: '-';
-            &:after{
+            position: absolute;
-              .ie-rotate(3);
+            top: 8px;
-              transform: rotate(270deg) scale(0.5);
+            left: 6px;
-            }
+            color: gray;
           }
         }
-        &.@{treePrefixCls}-checkbox {
+        background-position: 0 20px;
-          width: 15px;  height: 15px; margin: 0 3px 0 0;
+        &.@{treePrefixCls}-roots_open,
-          background-position:0 0;
+        &.@{treePrefixCls}-center_open,
-          &-disabled {
+        &.@{treePrefixCls}-bottom_open,
-            background-position: 0 -28px;
+        &.@{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);
           }
-          &.@{treePrefixCls}-checkbox-checked {background-position:-14px 0}
-          &.@{treePrefixCls}-checkbox-indeterminate {background-position:-14px -30px}
         }
       }
     }
   }
   &-treenode-disabled {
-    >span, >a {
+    >span,
+    >a {
       color: gray;
     }
   }