\n {\n return data.label;\n }}\n onClick={(e, data) => {\n //todo\n }}\n >\n \n
\n );\n }\n}\n\nexport default OrgTreeDemo;",o="import React, { Component } from 'react';\n\nimport OrgTree from 'react-org-tree';\n\nclass OrgTreeDemo extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: {\n id: 0,\n label: 'XXX\u80a1\u4efd\u6709\u9650\u516c\u53f8',\n children: [{\n id: 1,\n label: '\u6280\u672f\u90e8',\n children: [{\n id: 4,\n label: '\u540e\u7aef\u5de5\u7a0b\u5e08'\n }, {\n id: 5,\n label: '\u524d\u7aef\u5de5\u7a0b\u5e08'\n }, {\n id: 6,\n label: '\u8fd0\u7ef4\u5de5\u7a0b\u5e08'\n }]\n }, {\n id: 2,\n label: '\u4eba\u4e8b\u90e8'\n }, {\n id: 3,\n label: '\u9500\u552e\u90e8'\n }]\n },\n horizontal: false,\n collapsable: true,\n expandAll: false,\n labelClassName: 'bg-white'\n };\n }\n\n componentDidMount() {\n }\n\n componentWillUnmount() {\n }\n\n render() {\n const { data, horizontal, collapsable, expandAll, labelClassName } = this.state;\n \n return (\n \n {\n return data.label;\n }}\n onClick={(e, data) => {\n //todo\n }}\n >\n \n
\n );\n }\n}\n\nexport default OrgTreeDemo;",a="import React, { Component } from 'react';\n\nimport OrgTree from 'react-org-tree';\n\nclass OrgTreeDemo extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: {\n id: 0,\n label: 'XXX\u80a1\u4efd\u6709\u9650\u516c\u53f8',\n children: [{\n id: 1,\n label: '\u6280\u672f\u90e8',\n children: [{\n id: 4,\n label: '\u540e\u7aef\u5de5\u7a0b\u5e08'\n }, {\n id: 5,\n label: '\u524d\u7aef\u5de5\u7a0b\u5e08'\n }, {\n id: 6,\n label: '\u8fd0\u7ef4\u5de5\u7a0b\u5e08'\n }]\n }, {\n id: 2,\n label: '\u4eba\u4e8b\u90e8'\n }, {\n id: 3,\n label: '\u9500\u552e\u90e8'\n }]\n },\n horizontal: false,\n collapsable: true,\n expandAll: true,\n labelClassName: 'bg-white'\n };\n }\n\n componentDidMount() {\n }\n\n componentWillUnmount() {\n }\n\n render() {\n const { data, horizontal, collapsable, expandAll, labelClassName } = this.state;\n \n return (\n \n {\n return data.label;\n }}\n onClick={(e, data) => {\n //todo\n }}\n >\n \n
\n );\n }\n}\n\nexport default OrgTreeDemo;",i="import React, { Component } from 'react';\n\nimport OrgTree from 'react-org-tree';\n\nclass OrgTreeDemo extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: {\n id: 0,\n label: 'XXX\u80a1\u4efd\u6709\u9650\u516c\u53f8',\n children: [{\n id: 1,\n label: '\u6280\u672f\u90e8',\n children: [{\n id: 4,\n label: '\u540e\u7aef\u5de5\u7a0b\u5e08'\n }, {\n id: 5,\n label: '\u524d\u7aef\u5de5\u7a0b\u5e08'\n }, {\n id: 6,\n label: '\u8fd0\u7ef4\u5de5\u7a0b\u5e08'\n }]\n }, {\n id: 2,\n label: '\u4eba\u4e8b\u90e8'\n }, {\n id: 3,\n label: '\u9500\u552e\u90e8'\n }]\n },\n horizontal: true,\n collapsable: true,\n expandAll: true,\n labelClassName: 'bg-white'\n };\n }\n\n componentDidMount() {\n }\n\n componentWillUnmount() {\n }\n\n render() {\n const { data, horizontal, collapsable, expandAll, labelClassName } = this.state;\n \n return (\n \n {\n return data.label;\n }}\n onClick={(e, data) => {\n //todo\n }}\n >\n \n
\n );\n }\n}\n\nexport default OrgTreeDemo;",u="import React, { Component } from 'react';\n\nimport OrgTree from 'react-org-tree';\n\nclass OrgTreeDemo extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: {\n id: 0,\n label: 'XXX\u80a1\u4efd\u6709\u9650\u516c\u53f8',\n children: [{\n id: 1,\n label: '\u6280\u672f\u90e8',\n children: [{\n id: 4,\n label: '\u540e\u7aef\u5de5\u7a0b\u5e08'\n }, {\n id: 5,\n label: '\u524d\u7aef\u5de5\u7a0b\u5e08'\n }, {\n id: 6,\n label: '\u8fd0\u7ef4\u5de5\u7a0b\u5e08'\n }]\n }, {\n id: 2,\n label: '\u4eba\u4e8b\u90e8'\n }, {\n id: 3,\n label: '\u9500\u552e\u90e8'\n }]\n },\n horizontal: false,\n collapsable: true,\n expandAll: true,\n labelClassName: 'bg-white'\n };\n }\n\n componentDidMount() {\n }\n\n componentWillUnmount() {\n }\n\n render() {\n const { data, horizontal, collapsable, expandAll, labelClassName } = this.state;\n \n return (\n \n {\n return data.label;\n }}\n onClick={(e, data) => {\n //todo\n }}\n >\n \n
\n );\n }\n}\n\nexport default OrgTreeDemo;";t["default"]={"docs-basic":{component:n("qlGV").default,previewerProps:{sources:{_:{jsx:r}},dependencies:{react:{version:"16.14.0"},"react-org-tree":{version:"0.2.7"}},identifier:"docs-basic"}},"docs-expand":{component:n("mJRJ").default,previewerProps:{sources:{_:{jsx:o}},dependencies:{react:{version:"16.14.0"},"react-org-tree":{version:"0.2.7"}},identifier:"docs-expand"}},"docs-expandall":{component:n("szpr").default,previewerProps:{sources:{_:{jsx:a}},dependencies:{react:{version:"16.14.0"},"react-org-tree":{version:"0.2.7"}},identifier:"docs-expandall"}},"docs-horizontal":{component:n("UGN1").default,previewerProps:{sources:{_:{jsx:i}},dependencies:{react:{version:"16.14.0"},"react-org-tree":{version:"0.2.7"}},identifier:"docs-horizontal"}},"docs-vertical":{component:n("77Yw").default,previewerProps:{sources:{_:{jsx:u}},dependencies:{react:{version:"16.14.0"},"react-org-tree":{version:"0.2.7"}},identifier:"docs-vertical"}}}},Rw1i:function(e,t,n){"use strict";var r=n("MMxC"),o=n("Zcjx"),a=n("b6st"),i=n("MVys"),u=n("29mP"),l=n("/dTS"),c=n("U8/t"),s=n("NMFW"),f=!!a&&i((function(){a.prototype["finally"].call({then:function(){}},(function(){}))}));r({target:"Promise",proto:!0,real:!0,forced:f},{finally:function(e){var t=l(this,u("Promise")),n="function"==typeof e;return this.then(n?function(n){return c(t,e()).then((function(){return n}))}:e,n?function(n){return c(t,e()).then((function(){throw n}))}:e)}}),o||"function"!=typeof a||a.prototype["finally"]||s(a.prototype,"finally",u("Promise").prototype["finally"])},S5nV:function(e,t,n){var r=n("MMxC");r({target:"Math",stat:!0},{RAD_PER_DEG:180/Math.PI})},SGZ1:function(e,t,n){var r=n("I65O");r("search")},Sf9Y:function(e,t,n){"use strict";var r=n("MMxC"),o=n("m0kY"),a=n("Ze4s"),i="Invalid number representation",u="Invalid radix",l=/^[\da-z]+$/;r({target:"Number",stat:!0},{fromString:function(e,t){var n,r,c=1;if("string"!=typeof e)throw TypeError(i);if(!e.length)throw SyntaxError(i);if("-"==e.charAt(0)&&(c=-1,e=e.slice(1),!e.length))throw SyntaxError(i);if(n=void 0===t?10:o(t),n<2||n>36)throw RangeError(u);if(!l.test(e)||(r=a(e,n)).toString(n)!==e)throw SyntaxError(i);return c*r}})},Sn4z:function(e,t,n){var r=n("cTDu"),o=n("oa35"),a=n("9SZg"),i=n("bF+Q"),u=n("7BAe"),l=n("FVwB").aTypedArrayConstructor;e.exports=function(e){var t,n,c,s,f,d,p=r(e),h=arguments.length,v=h>1?arguments[1]:void 0,m=void 0!==v,g=a(p);if(void 0!=g&&!i(g)){f=g.call(p),d=f.next,p=[];while(!(s=d.call(f)).done)p.push(s.value)}for(m&&h>2&&(v=u(v,arguments[2],2)),n=o(p.length),c=new(l(this))(n),t=0;n>t;t++)c[t]=m?v(p[t],t):p[t];return c}},SprQ:function(e,t,n){var r=n("MVys");e.exports=!r((function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype}))},Srjj:function(e,t,n){var r=n("jtLI"),o=n("0qr0"),a=n("/3zY").indexOf,i=n("6ixQ");e.exports=function(e,t){var n,u=o(e),l=0,c=[];for(n in u)!r(i,n)&&r(u,n)&&c.push(n);while(t.length>l)r(u,n=t[l++])&&(~a(c,n)||c.push(n));return c}},TIsu:function(e,t,n){},TMUv:function(e,t,n){var r=n("ukPv"),o=n("lz10");e.exports=function(e,t){try{o(r,e,t)}catch(n){r[e]=t}return t}},TOwV:function(e,t,n){"use strict";e.exports=n("qT12")},TSYQ:function(e,t,n){var r,o;(function(){"use strict";var n={}.hasOwnProperty;function a(){for(var e=[],t=0;tPowered by [artdong](https://github.com/artdong) +--- -> A simple organization tree component based on react - -> If you are using vue, see [vue-org-tree](https://github.com/hukaibaihu/vue-org-tree) +# react-org-tree -### Installation +### 📦 Installation ``` # use npm @@ -22,7 +27,7 @@ npm i react-org-tree # use yarn yarn add react-org-tree ``` -### Usage +### 🔨 Usage ``` js import OrgTree from 'react-org-tree'; @@ -64,27 +69,9 @@ const data = { > ``` -## API - -参数(prop) | 说明(descripton) | 类型(type) | 默认值(default) ------------|-----------------------------------------|:----------------------:|:---------------------------------------------------------: - data | 树结构数据 | `Object` | {} - horizontal | 是否横向 | `Boolean` | `false` - collapsable | 是否可折叠 | `Boolean` | `false` - expandAll | 是否展开全部 | `Boolean` | `false` - labelWidth | 树节点宽度 | `Number` | `auto` - labelClassName | 树节点样式 | `String` | `white` - onClick | 点击事件 | Function(e:Event, data) - -## Example - -https://artdong.github.io/react-org-tree/demo - -## License - -react-org-tree is released under the MIT license. +See details：[Getting Started](/guide) -#### 请作者喝一杯咖啡 +### Support
+ 
diff --git a/docs/README.zh.md b/docs/README.zh.md
new file mode 100644
index 0000000..78c6baa
--- /dev/null
+++ b/docs/README.zh.md
@@ -0,0 +1,79 @@
+---
+title: react-org-tree
+hero:
+ title: react-org-tree
+ desc: 一个基于react的组织树组件
+ actions:
+ - text: 快速开始 →
+ link: /guide
+features:
+ - title: 语言
+ desc: 基于最流行的react框架.
+ - title: 功能
+ desc: 可以横向、纵向展示，支持展开、折叠，自定义颜色，自定义大小等.
+ - title: 生产可用
+ desc: 已经发布到npm上，可使用npm或者yarn安装.
+footer: MIT Licensed | Copyright © 2020-present
Powered by [artdong](https://github.com/artdong)
+---
+
+# react-org-tree
+
+### 📦 安装
+
+```
+# use npm
+npm i react-org-tree
+
+# use yarn
+yarn add react-org-tree
+```
+### 🔨 示例
+
+``` js
+import OrgTree from 'react-org-tree';
+
+const horizontal = false; // true：横向 false：纵向
+const collapsable = true; // true：可折叠 false：不可折叠
+const expandAll = true; // true: 全部展开 false：全部折叠
+
+const data = {
+ id: 0,
+ label: 'XXX股份有限公司',
+ children: [{
+ id: 1,
+ label: '技术部',
+ children: [{
+ id: 4,
+ label: '后端工程师'
+ }, {
+ id: 5,
+ label: '前端工程师'
+ }, {
+ id: 6,
+ label: '运维工程师'
+ }]
+ }, {
+ id: 2,
+ label: '人事部'
+ }, {
+ id: 3,
+ label: '销售部'
+ }]
+}
+
+
+
+
+
+See more examples：[more](/demo)
+
+### API
+
+参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
+-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
+ data | 树结构数据 | `Object` | {}
+ horizontal | 是否横向 | `Boolean` | `false`
+ collapsable | 是否可折叠 | `Boolean` | `false`
+ expandAll | 是否展开全部 | `Boolean` | `false`
+ labelWidth | 树节点宽度 | `Number` | `auto`
+ labelClassName | 树节点样式 | `String` | `white`
+ onClick | 点击事件 | Function(e:Event, data)
diff --git a/docs/guide/README.zh.md b/docs/guide/README.zh.md
new file mode 100644
index 0000000..62a3a06
--- /dev/null
+++ b/docs/guide/README.zh.md
@@ -0,0 +1,36 @@
+---
+nav:
+ title: 指南
+ order: 0
+toc: menu
+---
+
+# 快速上手
+
+### 安装
+
+```
+# use npm
+npm i react-org-tree
+
+# use yarn
+yarn add react-org-tree
+```
+
+### 第一个例子
+
+
+
+更多在线例子：[查看](/demo)
+
+### API
+
+参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
+-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
+ data | 树结构数据 | `Object` | {}
+ horizontal | 是否横向 | `Boolean` | `false`
+ collapsable | 是否可折叠 | `Boolean` | `false`
+ expandAll | 是否展开全部 | `Boolean` | `false`
+ labelWidth | 树节点宽度 | `Number` | `auto`
+ labelClassName | 树节点样式 | `String` | `white`
+ onClick | 点击事件 | Function(e:Event, data)
diff --git a/docs/index.md b/docs/index.md
deleted file mode 100644
index 8699ee5..0000000
--- a/docs/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: react-org-tree
----
-
-
\ No newline at end of file
diff --git a/package.json b/package.json
index 415548e..f62f095 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-org-tree",
- "version": "0.2.7",
+ "version": "0.2.8",
"description": "a simple organization tree component based on react",
"main": "dist/bundle.js",
"files": [
@@ -11,7 +11,7 @@
"docs:start": "dumi dev",
"docs:build": "dumi build",
"predeploy": "dumi build",
- "deploy": "gh-pages -d .doc",
+ "deploy": "gh-pages -d docs-dist",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
@@ -22,8 +22,7 @@
"bugs": {
"url": "https://github.com/artdong/react-org-tree/issues"
},
- "private": true,
- "homepage": "https://github.com/artdong/react-org-tree",
+ "homepage": "https://artdong.github.io/react-org-tree",
"keywords": [
"react",
"org",