feat:添加可折叠功能

Author: dongxingbin

src/org_tree.js

@@ -14,11 +14,13 @@ export const renderNode = (data, prop) => {
 
     if (isLeaf(data, prop)) {
         cls.push('is-leaf');
+    } else if (prop.collapsable && !data[node.expand]) {
+        cls.push('collapsed');
     }
 
     childNodes.push(renderLabel(data, prop));
 
-    if (data[node.expand]) {
+    if (!prop.collapsable || data[node.expand]) {
         childNodes.push(renderChildren(data.children, prop));
     }
 
@@ -28,6 +30,23 @@ export const renderNode = (data, prop) => {
     }, childNodes);
 };
 
+// 创建展开折叠按钮
+export const renderBtn = (data, prop ) => {
+    const { onExpand } = prop;
+    const node = prop.node;
+
+    let cls = ['org-tree-node-btn'];
+  
+    if (data[node.expand]) {
+        cls.push('expanded');
+    }
+  
+    return React.createElement('span', {
+        className: cls.join(' '),
+        onClick: (e) => typeof onExpand === 'function' && onExpand(e, data)
+    });
+};
+  
 // 创建 label 节点
 export const renderLabel = (data, prop) => {
     const node = prop.node;
@@ -43,12 +62,16 @@ export const renderLabel = (data, prop) => {
         childNodes.push(label);
     }
 
+    if (prop.collapsable && !isLeaf(data, prop)) {
+        childNodes.push(renderBtn(data, prop));
+    }
+  
     const cls = ['org-tree-node-label-inner'];
 
     return React.createElement('div', {
         className: 'org-tree-node-label',
     }, [React.createElement('div', {
-        className: cls.join(' ')
+        className: cls.join(' '),
     }, childNodes)]);
 };
 

src/org_tree.jsx

@@ -2,24 +2,38 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import TreeNode from './org_tree.js';
+import TreeNode from './org_tree';
 
 //组件
 class OrgTree extends Component {
     constructor(props) {
         super(props);
+        this.handleExpand = this.handleExpand.bind(this);
         this.collapse = this.collapse.bind(this);
         this.toggleExpand = this.toggleExpand.bind(this);
     }
 
     componentDidMount() {
-        const { data } = this.props;
-        this.toggleExpand(data, true);
+        const { expandAll, data } = this.props;
+        if(expandAll) this.toggleExpand(data, true);
     }
 
     componentWillUnmount() {
     }
 
+    handleExpand(e, nodeData) {
+        if ('expand' in nodeData) {
+            nodeData.expand = !nodeData.expand;
+            if (!nodeData.expand && nodeData.children) {
+                this.collapse(nodeData.children);
+            }
+            this.forceUpdate();
+        }else {
+            nodeData.expand = true;
+            this.forceUpdate();
+        }
+    }
+
     collapse(list) {
         let _this = this;
         list.forEach(function(child) {
@@ -49,15 +63,16 @@ class OrgTree extends Component {
     }
 
     render() {
-        const { data, node, horizontal, renderContent } = this.props;
+        const { horizontal, node, data } = this.props;
         return <div className="org-tree-container">
             <div className={classnames('org-tree', {
                 'horizontal': horizontal
             })}>
                 <TreeNode 
                     data={data}
                     node={node}
-                    renderContent={renderContent}
+                    onExpand={(e, nodeData)=> this.handleExpand(e, nodeData)}
+                    {...this.props}
                 />
             </div>
         </div>;
@@ -68,6 +83,8 @@ OrgTree.propTypes = {
     data: PropTypes.object,
     node: PropTypes.object,
     horizontal: PropTypes.bool,
+    collapsable: PropTypes.bool,
+    expandAll: PropTypes.bool,
     renderContent: PropTypes.func
 };
 

src/org_tree.less

@@ -91,7 +91,7 @@
   display: table-cell;
   vertical-align: top;
 
-  &.is-leaf {
+  &.is-leaf, &.collapsed {
     padding-left: 10px;
     padding-right: 10px;
   }
@@ -116,6 +116,19 @@
   }
 
 }
+.collapsable .org-tree-node.collapsed {
+  padding-bottom: 30px;
+
+  .org-tree-node-label:after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 50%;
+    height: 20px;
+    border-right: 1px solid #ddd;
+  }
+}
 .org-tree > .org-tree-node {
   padding-top: 0;
 
@@ -193,6 +206,26 @@
     vertical-align: middle;
   }
 
+  &.collapsable .org-tree-node.collapsed {
+    padding-right: 30px;
+
+    .org-tree-node-label:after {
+      top: 0;
+      left: 100%;
+      width: 20px;
+      height: 50%;
+      border-right: 0;
+      border-bottom: 1px solid #ddd;
+    }
+  }
+
+  .org-tree-node-btn {
+    top: 50%;
+    left: 100%;
+    margin-top: -11px;
+    margin-left: 9px;
+  }
+
   & > .org-tree-node:only-child:before {
     border-bottom: 0;
   }
@@ -223,8 +256,4 @@
 
 .text-center {
   text-align: center;
-}
-
-.org-tree-node-label {
-  white-space: nowrap;
 }