feat(Tree): Add new component Tree.

src/index.js

@@ -21,6 +21,7 @@ export { default as Tabs } from './tabs/';
 export { default as Paging } from './paging/';
 export { default as Progress } from './progress/';
 export { default as Tooltip } from './tooltip/'
+export { default as Tree } from './tree/'
 export { TimePicker } from './date-picker/';
 export { default as TimeSelect } from './time-select/';
 export { default as Switch } from './switch/';

src/rate/__test__/Rate.test.js

@@ -9,7 +9,6 @@ describe('<Rate>', () => {
   };
   var wrapper = mount(<Rate
     onHoverChange={(e, value) => {
-      console.log("value:", value)
       warpperState.hoverValue = value
     }}
     onChange={(e, value) => {

src/tree/Tree.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Component, PropTypes } from '../utils/';
+import TreeNode from './TreeNode';
+
+export default class Tree extends Component {
+  render() {
+    const { prefixCls, className, ...resetProps } = this.props;
+    const cls = this.classNames(className, `${prefixCls}`)
+    return (
+      <div className={cls}>
+        <TreeNode level={1} {...resetProps} />
+      </div>
+    );
+  }
+}
+
+
+Tree.defaultProps = {
+  prefixCls: 'w-tree',
+}
+Tree.propTypes = {
+  prefixCls: PropTypes.string,
+}

src/tree/TreeNode.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Component, PropTypes } from '../utils/';
+import Icon from '../icon';
+
+export default class TreeNode extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showTree: props.defaultExpandAll,
+      // 默认关闭的Item
+      closedItem: props.defaultExpandAll ? [] : [...props.data],
+    }
+  }
+  // 获取关闭节点的数据
+  getCloseItemIndex(item, closedItem) {
+    let idx = -1;
+    for (let i = 0; i < closedItem.length; i++) {
+      if (item.key === closedItem[i].key) {
+        idx = i;
+      }
+    }
+    return idx;
+  }
+  onShowTree(item, e) {
+    const { onExpand, option } = this.props;
+    if (!item[option.children]) return;
+    let { closedItem } = this.state;
+    let idx = this.getCloseItemIndex(item, closedItem)
+    if (idx > -1) {
+      closedItem.splice(idx, 1)
+    } else {
+      closedItem.push(item)
+    }
+    this.setState({
+      closedItem
+    }, () => {
+      onExpand(item.key, idx > -1, item, this)
+    })
+  }
+  render() {
+    const { prefixCls, data, showTree, level, option } = this.props;
+    const { closedItem } = this.state;
+    let ulCls = level > 1 ? `${prefixCls}-${showTree ? "open" : "close"}` : null;
+    return (
+      <ul className={this.classNames(`${prefixCls}-item`, ulCls)}>
+        {
+          data.map((item, idx) => {
+            let childs = item[option.children];
+            let isChild = childs && childs.length > 0;
+            const props = Object.assign({}, this.props, { parent: this });
+            let index = this.getCloseItemIndex(item, closedItem)
+            if (index > -1) {
+              props.showTree = false;
+            } else {
+              props.showTree = true;
+            }
+            props.level = level + 1;
+            return (
+              <li key={idx}>
+                <div className={`${prefixCls}-title`}>
+                  <Icon onClick={this.onShowTree.bind(this, item)} className={this.classNames(`${prefixCls}-icon`, {
+                    "no-child": !isChild,
+                    "is-close": isChild && index > -1,
+                  })} type="caret-down"></Icon>
+                  <span className={`${prefixCls}-inner`}>{item[option.label]}</span>
+                </div>
+                {isChild && <TreeNode {...props} data={childs} />}
+              </li>
+            )
+          })
+        }
+      </ul>
+    )
+  }
+}
+
+
+TreeNode.defaultProps = {
+  prefixCls: 'w-tree',
+  data: [],
+  option: {
+    children: "children",
+    label: "label",
+  },
+  // 是否默认展开所有节点
+  defaultExpandAll: false,
+  onExpand() { }
+}
+TreeNode.propTypes = {
+  prefixCls: PropTypes.string,
+  onExpand: PropTypes.func,
+  data: PropTypes.array,
+  defaultExpandAll: PropTypes.bool,
+  option: PropTypes.shape({
+    children: PropTypes.string,
+    label: PropTypes.string,
+  }),
+}

src/tree/index.js

@@ -0,0 +1,3 @@
+import Tree from './Tree';
+import "./style/index.less";
+export default Tree;

src/tree/style/index.less

@@ -0,0 +1,32 @@
+@w-tree:~"w-tree";
+
+.@{w-tree}{
+  padding: 0;
+  font-size: 12px;
+  li{
+    margin: 0;
+    list-style: none;
+  }
+  ul ul{
+    padding: 0 0 0 18px;
+  }
+  &-icon{
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    &.is-close::before{
+      transform: rotate(-90deg) scale(.59);
+    }
+    &::before{
+      transition: transform .3s;
+      transform: rotate(0deg) scale(.59);
+    }
+    &.no-child::before{
+      content: '';
+    }
+  }
+  &-close{
+    display: none;
+  }
+}