init

Author: dongxingbin

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react"]
+}

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# dist
+/dist
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+package.lock.json
+examples/demo/.idea/workspace.xml

README.md

@@ -1,2 +1,47 @@
 # react-org-tree
-org tree component of react
+
+> A simple organization tree chart based on react
+
+### Installation
+
+```
+# use npm
+npm i react-org-tree
+
+# use yarn
+yarn add react-org-tree
+```
+### Usage
+
+``` js
+import OrgTree from 'react-org-tree';
+
+const horizontal = false;
+const data = {
+    id: 0,
+    label: 'XXX股份有限公司',
+    children: [{
+        id: 1,
+        label: '技术部',
+        children: [{
+            id: 3,
+            label: '后端'
+        }, {
+            id: 4,
+            label: '前端'
+        }]
+    }, {
+        id: 2,
+        label: '人事部'
+    }]
+}
+
+<OrgTree
+    data={data}
+    horizontal={horizontal}
+>
+```
+
+
+
+

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-org-tree",
+  "version": "0.0.1",
+  "description": "org tree component of react",
+  "main": "dist/bundle.js",
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "keywords": [
+    "react",
+    "tree",
+    "org-tree",
+    "react-org-tree",
+    "react-org-chart"
+  ],
+  "author": "artdong",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "classnames": "^2.2.6",
+    "css-loader": "^2.0.1",
+    "node-sass": "^4.11.0",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^3.10.0",
+    "webpack-node-externals": "^1.6.0"
+  },
+  "dependencies": {}
+}

src/index.js

@@ -0,0 +1,3 @@
+import OrgTree from './org_tree.jsx';
+
+export default OrgTree

src/org_tree.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+// 判断是否叶子节点
+const isLeaf = (data, prop) => {
+    const node = prop.node;
+    return !(Array.isArray(data[node.children]) && data[node.children].length > 0);
+};
+  
+// 创建 node 节点
+export const renderNode = (data, prop) => {
+    const node = prop.node;
+    const cls = ['org-tree-node'];
+    const childNodes = [];
+  
+    if (isLeaf(data, prop)) {
+        cls.push('is-leaf');
+    }
+  
+    childNodes.push(renderLabel(data, prop));
+  
+    if (data[node.expand]) {
+        childNodes.push(renderChildren(data.children, prop));
+    }
+  
+    return React.createElement('div', {
+        key: data.id,
+        className: cls.join(' ')
+    }, childNodes);
+};
+  
+// 创建 label 节点
+export const renderLabel = (data, prop) => {
+    const node = prop.node;
+    const label = data[node.label];
+    const renderContent = prop.renderContent;
+  
+    const childNodes = [];
+    if (typeof renderContent === 'function') {
+        let vnode = renderContent(data);
+  
+        vnode && childNodes.push(vnode);
+    } else {
+        childNodes.push(label);
+    }
+  
+    const cls = ['org-tree-node-label-inner'];
+  
+    return React.createElement('div', {
+        className: 'org-tree-node-label',
+    }, [React.createElement('div', {
+        className: cls.join(' ')
+    }, childNodes)]);
+};
+  
+// 创建 node 子节点
+export const renderChildren = (list, prop) => {
+    if (Array.isArray(list) && list.length) {
+        const children = list.map(item => {
+            return renderNode(item, prop);
+        });
+  
+        return React.createElement('div', {
+            className: 'org-tree-node-children'
+        }, children);
+    }
+    return '';
+};
+  
+export const render = (props) => {
+    return renderNode(props.data, props);
+};
+  
+export default render;
+  

src/org_tree.jsx

@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import TreeNode from './org_tree.js';
+
+//组件
+class OrgTree extends Component {
+    constructor(props) {
+        super(props);
+        this.collapse = this.collapse.bind(this);
+        this.toggleExpand = this.toggleExpand.bind(this);
+    }
+
+    componentDidMount() {
+        const { data } = this.props;
+        this.toggleExpand(data, true);
+    }
+
+    componentWillUnmount() {
+    }
+
+    collapse(list) {
+        let _this = this;
+        list.forEach(function(child) {
+            if (child.expand) {
+                child.expand = false;
+            }
+            child.children && _this.collapse(child.children);
+        });
+    }
+
+    toggleExpand(data, val) {
+        let _this = this;
+        if (Array.isArray(data)) {
+            data.forEach(function(item) {
+                item.expand = val;
+                if (item.children) {
+                    _this.toggleExpand(item.children, val);
+                }
+            });
+        } else {
+            data.expand = val;
+            if (data.children) {
+                _this.toggleExpand(data.children, val);
+            }
+        }
+        this.forceUpdate();
+    }
+
+    render() {
+        const { data, node, horizontal, renderContent } = this.props;
+        return <div className="org-tree-container">
+            <div className={classnames('org-tree', {
+                'horizontal': horizontal
+            })}>
+                <TreeNode 
+                    data={data}
+                    node={node}
+                    renderContent={renderContent}
+                />
+            </div>
+        </div>;
+    }
+}
+
+OrgTree.propTypes = {
+    data: PropTypes.object,
+    node: PropTypes.object,
+    horizontal: PropTypes.bool,
+    renderContent: PropTypes.func
+};
+
+OrgTree.defaultProps = {
+    node: {
+        label: 'label',
+        expand: 'expand',
+        children: 'children'
+    },
+    renderContent: function(data) {
+        return data.label;
+    }
+};
+
+export default OrgTree;