From b10f140f0bf90a589c041d0cf0cdd3908907bdeb Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Thu, 16 Nov 2017 11:16:53 +0800
Subject: [PATCH] feat(Tree): Add new component Tree.

---
 src/index.js                   |  1 +
 src/rate/__test__/Rate.test.js |  1 -
 src/tree/Tree.js               | 23 ++++++++
 src/tree/TreeNode.js           | 98 ++++++++++++++++++++++++++++++++++
 src/tree/index.js              |  3 ++
 src/tree/style/index.less      | 32 +++++++++++
 6 files changed, 157 insertions(+), 1 deletion(-)
 create mode 100644 src/tree/Tree.js
 create mode 100644 src/tree/TreeNode.js
 create mode 100644 src/tree/index.js
 create mode 100644 src/tree/style/index.less

diff --git a/src/index.js b/src/index.js
index 8220675a6e..92c53497c5 100644
--- a/src/index.js
+++ b/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/';
diff --git a/src/rate/__test__/Rate.test.js b/src/rate/__test__/Rate.test.js
index c64dca0174..8d183b77eb 100644
--- a/src/rate/__test__/Rate.test.js
+++ b/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) => {
diff --git a/src/tree/Tree.js b/src/tree/Tree.js
new file mode 100644
index 0000000000..df39b77df7
--- /dev/null
+++ b/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,
+}
diff --git a/src/tree/TreeNode.js b/src/tree/TreeNode.js
new file mode 100644
index 0000000000..54e07d840b
--- /dev/null
+++ b/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,
+  }),
+}
diff --git a/src/tree/index.js b/src/tree/index.js
new file mode 100644
index 0000000000..b909e43784
--- /dev/null
+++ b/src/tree/index.js
@@ -0,0 +1,3 @@
+import Tree from './Tree';
+import "./style/index.less";
+export default Tree;
\ No newline at end of file
diff --git a/src/tree/style/index.less b/src/tree/style/index.less
new file mode 100644
index 0000000000..a5aa5c84cc
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file