Skip to content

Commit 7953646

Browse files
artdongartdong
committed
feat: custom node
1 parent 86dcd4a commit 7953646

16 files changed

+354
-10
lines changed

‎.umirc.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ export default defineConfig({
2020
],
2121
navs: {
2222
en: [
23-
{ title: 'Demo', path: '/demo' },
23+
null,
2424
{ title: 'GitHub', path: 'https://github.com/artdong/react-org-tree' },
2525
],
2626
zh: [
27-
{ title: '示例', path: '/demo' },
27+
null,
2828
{ title: 'GitHub', path: 'https://github.com/artdong/react-org-tree' },
2929
],
3030
},

‎docs/demo/basic.md

+20-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
---
2+
title: basic
3+
order: 0
4+
nav:
5+
title: Demo
6+
---
7+
18
## basic
29

3-
<code src="../examples/basic.jsx">
10+
<code src="../examples/basic.jsx">
11+
12+
## API
13+
14+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
15+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
16+
data | 树结构数据 | `Object` | {}
17+
horizontal | 是否横向 | `Boolean` | `false`
18+
collapsable | 是否可折叠 | `Boolean` | `false`
19+
expandAll | 是否展开全部 | `Boolean` | `false`
20+
labelWidth | 树节点宽度 | `Number` | `auto`
21+
labelClassName | 树节点样式 | `String` | `white`
22+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/basic.zh.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: 基础
3+
order: 0
4+
nav:
5+
title: 示例
6+
---
7+
8+
<code src="../examples/basic.jsx">
9+
10+
## API
11+
12+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
13+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
14+
data | 树结构数据 | `Object` | {}
15+
horizontal | 是否横向 | `Boolean` | `false`
16+
collapsable | 是否可折叠 | `Boolean` | `false`
17+
expandAll | 是否展开全部 | `Boolean` | `false`
18+
labelWidth | 树节点宽度 | `Number` | `auto`
19+
labelClassName | 树节点样式 | `String` | `white`
20+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/custom.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: custom
3+
order: 5
4+
nav:
5+
title: Demo
6+
---
7+
8+
## custom
9+
10+
<code src="../examples/custom.jsx">
11+
12+
## API
13+
14+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
15+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
16+
data | 树结构数据 | `Object` | {}
17+
horizontal | 是否横向 | `Boolean` | `false`
18+
collapsable | 是否可折叠 | `Boolean` | `false`
19+
expandAll | 是否展开全部 | `Boolean` | `false`
20+
labelWidth | 树节点宽度 | `Number` | `auto`
21+
labelClassName | 树节点样式 | `String` | `white`
22+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/custom.zh.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: 自定义
3+
order: 5
4+
nav:
5+
title: 示例
6+
---
7+
8+
<code src="../examples/custom.jsx">
9+
10+
## API
11+
12+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
13+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
14+
data | 树结构数据 | `Object` | {}
15+
horizontal | 是否横向 | `Boolean` | `false`
16+
collapsable | 是否可折叠 | `Boolean` | `false`
17+
expandAll | 是否展开全部 | `Boolean` | `false`
18+
labelWidth | 树节点宽度 | `Number` | `auto`
19+
labelClassName | 树节点样式 | `String` | `white`
20+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/expand.md

+20-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
---
2+
title: expand
3+
order: 1
4+
nav:
5+
title: Demo
6+
---
7+
18
## expand
29

3-
<code src="../examples/expand.jsx">
10+
<code src="../examples/expand.jsx">
11+
12+
## API
13+
14+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
15+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
16+
data | 树结构数据 | `Object` | {}
17+
horizontal | 是否横向 | `Boolean` | `false`
18+
collapsable | 是否可折叠 | `Boolean` | `false`
19+
expandAll | 是否展开全部 | `Boolean` | `false`
20+
labelWidth | 树节点宽度 | `Number` | `auto`
21+
labelClassName | 树节点样式 | `String` | `white`
22+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/expand.zh.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: 展开
3+
order: 1
4+
nav:
5+
title: 示例
6+
---
7+
8+
<code src="../examples/expand.jsx">
9+
10+
## API
11+
12+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
13+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
14+
data | 树结构数据 | `Object` | {}
15+
horizontal | 是否横向 | `Boolean` | `false`
16+
collapsable | 是否可折叠 | `Boolean` | `false`
17+
expandAll | 是否展开全部 | `Boolean` | `false`
18+
labelWidth | 树节点宽度 | `Number` | `auto`
19+
labelClassName | 树节点样式 | `String` | `white`
20+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/expandAll.md

+20-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
---
2+
title: expandAll
3+
order: 2
4+
nav:
5+
title: Demo
6+
---
7+
18
## expandAll
29

3-
<code src="../examples/expandAll.jsx">
10+
<code src="../examples/expandAll.jsx">
11+
12+
## API
13+
14+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
15+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
16+
data | 树结构数据 | `Object` | {}
17+
horizontal | 是否横向 | `Boolean` | `false`
18+
collapsable | 是否可折叠 | `Boolean` | `false`
19+
expandAll | 是否展开全部 | `Boolean` | `false`
20+
labelWidth | 树节点宽度 | `Number` | `auto`
21+
labelClassName | 树节点样式 | `String` | `white`
22+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/expandAll.zh.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: 展开全部
3+
order: 2
4+
nav:
5+
title: 示例
6+
---
7+
8+
<code src="../examples/expandAll.jsx">
9+
10+
## API
11+
12+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
13+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
14+
data | 树结构数据 | `Object` | {}
15+
horizontal | 是否横向 | `Boolean` | `false`
16+
collapsable | 是否可折叠 | `Boolean` | `false`
17+
expandAll | 是否展开全部 | `Boolean` | `false`
18+
labelWidth | 树节点宽度 | `Number` | `auto`
19+
labelClassName | 树节点样式 | `String` | `white`
20+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/horizontal.md

+19-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1-
## horizontal
1+
---
2+
title: horizontal
3+
order: 3
4+
nav:
5+
title: Demo
6+
---
27

3-
<code src="../examples/horizontal.jsx">
8+
<code src="../examples/horizontal.jsx">
9+
10+
## API
11+
12+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
13+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
14+
data | 树结构数据 | `Object` | {}
15+
horizontal | 是否横向 | `Boolean` | `false`
16+
collapsable | 是否可折叠 | `Boolean` | `false`
17+
expandAll | 是否展开全部 | `Boolean` | `false`
18+
labelWidth | 树节点宽度 | `Number` | `auto`
19+
labelClassName | 树节点样式 | `String` | `white`
20+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/horizontal.zh.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: 横向
3+
order: 3
4+
nav:
5+
title: 示例
6+
---
7+
8+
<code src="../examples/horizontal.jsx">
9+
10+
## API
11+
12+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
13+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
14+
data | 树结构数据 | `Object` | {}
15+
horizontal | 是否横向 | `Boolean` | `false`
16+
collapsable | 是否可折叠 | `Boolean` | `false`
17+
expandAll | 是否展开全部 | `Boolean` | `false`
18+
labelWidth | 树节点宽度 | `Number` | `auto`
19+
labelClassName | 树节点样式 | `String` | `white`
20+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/vertical.md

+18-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1-
## vertical
1+
---
2+
title: vertical
3+
order: 4
4+
nav:
5+
title: Demo
6+
---
7+
<code src="../examples/vertical.jsx">
28

3-
<code src="../examples/vertical.jsx">
9+
## API
10+
11+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
12+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
13+
data | 树结构数据 | `Object` | {}
14+
horizontal | 是否横向 | `Boolean` | `false`
15+
collapsable | 是否可折叠 | `Boolean` | `false`
16+
expandAll | 是否展开全部 | `Boolean` | `false`
17+
labelWidth | 树节点宽度 | `Number` | `auto`
18+
labelClassName | 树节点样式 | `String` | `white`
19+
onClick | 点击事件 | Function(e:Event, data)

‎docs/demo/vertical.zh.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: 竖向
3+
order: 4
4+
nav:
5+
title: 示例
6+
---
7+
8+
<code src="../examples/vertical.jsx">
9+
10+
## API
11+
12+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
13+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
14+
data | 树结构数据 | `Object` | {}
15+
horizontal | 是否横向 | `Boolean` | `false`
16+
collapsable | 是否可折叠 | `Boolean` | `false`
17+
expandAll | 是否展开全部 | `Boolean` | `false`
18+
labelWidth | 树节点宽度 | `Number` | `auto`
19+
labelClassName | 树节点样式 | `String` | `white`
20+
onClick | 点击事件 | Function(e:Event, data)

‎docs/examples/custom.jsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { Component } from 'react';
2+
3+
import OrgTree from 'react-org-tree';
4+
5+
class OrgTreeDemo extends Component {
6+
constructor(props) {
7+
super(props);
8+
this.state = {
9+
data: {
10+
id: 0,
11+
label: 'XXX股份有限公司',
12+
children: [{
13+
id: 1,
14+
label: '技术部',
15+
children: [{
16+
id: 4,
17+
label: '后端工程师'
18+
}, {
19+
id: 5,
20+
label: '前端工程师'
21+
}, {
22+
id: 6,
23+
label: '运维工程师'
24+
}]
25+
}, {
26+
id: 2,
27+
label: '人事部'
28+
}, {
29+
id: 3,
30+
label: '销售部'
31+
}]
32+
},
33+
horizontal: false,
34+
collapsable: true,
35+
expandAll: true,
36+
labelClassName: 'org-tree-node-label-inner-blue'
37+
};
38+
}
39+
40+
componentDidMount() {
41+
}
42+
43+
componentWillUnmount() {
44+
}
45+
46+
render() {
47+
const { data, horizontal, collapsable, expandAll, labelClassName } = this.state;
48+
49+
return (
50+
<div className="m-t-lg text-center">
51+
<OrgTree
52+
data={data}
53+
horizontal={horizontal}
54+
collapsable={collapsable}
55+
labelClassName={labelClassName}
56+
expandAll={expandAll}
57+
renderContent={(data) => {
58+
return data.label;
59+
}}
60+
onClick={(e, data) => {
61+
//todo
62+
}}
63+
>
64+
</OrgTree>
65+
</div>
66+
);
67+
}
68+
}
69+
70+
export default OrgTreeDemo;

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
{
22
"name": "react-org-tree",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "a simple organization tree component based on react",
55
"main": "dist/bundle.js",
66
"files": [
77
"dist",
88
"lib"
99
],
1010
"scripts": {
11+
"dev": "dumi dev",
12+
"start": "dumi dev",
1113
"docs:start": "dumi dev",
1214
"docs:build": "dumi build",
1315
"predeploy": "dumi build",

0 commit comments

Comments
 (0)