Skip to content

Commit 877c1f7

Browse files
artdongartdong
committed
doc: dumi构建在线文档
1 parent 6ebe29f commit 877c1f7

File tree

17 files changed

+509
-18
lines changed

17 files changed

+509
-18
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,4 @@ yarn-error.log*
2222

2323
package.lock.json
2424
examples/demo/.idea/workspace.xml
25+
/**/**/.umi

‎README.md‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
# react-org-tree
22

3-
[![npm version][npm-image]][npm-url]
4-
[![mnt-image](https://img.shields.io/maintenance/yes/2021.svg)](../../commits/master)
5-
[![GitHub stars](https://img.shields.io/github/stars/artdong/react-org-tree.svg)](https://github.com/artdong/react-org-tree/stargazers)
6-
[![GitHub forks](https://img.shields.io/github/forks/artdong/react-org-tree.svg)](https://github.com/artdong/react-org-tree/network)
7-
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/artdong/react-org-tree/blob/master/LICENSE)
3+
[![npm version][npm-image]][npm-url] [![mnt-image](https://img.shields.io/maintenance/yes/2021.svg?style=flat-square)](../../commits/master) [![GitHub stars](https://img.shields.io/github/stars/artdong/react-org-tree.svg?style=flat-square)](https://github.com/artdong/react-org-tree/stargazers) [![GitHub forks](https://img.shields.io/github/forks/artdong/react-org-tree.svg?style=flat-square)](https://github.com/artdong/react-org-tree/network) [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/artdong/react-org-tree/blob/master/LICENSE)
4+
5+
[npm-image]: http://img.shields.io/npm/v/react-org-tree.svg?style=flat-square
6+
[npm-url]: http://npmjs.org/package/react-org-tree
7+
[download-image]: https://img.shields.io/npm/dm/react-org-tree.svg?style=flat-square
8+
[download-url]: https://npmjs.org/package/react-org-tree
9+
[bundlephobia-url]: https://bundlephobia.com/result?p=react-org-tree
10+
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/react-org-tree
811

912
> A simple organization tree component based on react
1013
@@ -91,6 +94,13 @@ const data = {
9194
labelClassName | 树节点样式 | `String` | `white`
9295
onClick | 点击事件 | Function(e:Event, data)
9396

97+
## Example
98+
99+
http://localhost:8000/demo/
100+
101+
## License
102+
103+
react-org-tree is released under the MIT license.
94104
#### 欢迎关注微信公众号`全栈弄潮儿` ，获取更多学习资源及技术文章等
95105

96106
* 微信公众号二维码，扫一扫或者搜索"全栈弄潮儿"即可关注
@@ -99,17 +109,9 @@ const data = {
99109
<img src='https://upload-images.jianshu.io/upload_images/3100736-b722d7d753e6eaf9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240' width='280' alt='Build errors'>
100110
</p>
101111

102-
[npm-image]: https://badge.fury.io/js/react-org-tree.svg
103-
[npm-url]: https://npmjs.org/package/react-org-tree
104-
105112
#### 请作者喝一杯咖啡
106113

107114
<p align='center'>
108115
<a href="https://www.buymeacoffee.com/artd" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/arial-violet.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" >
109116
</a>
110-
</p>
111-
112-
113-
114-
115-
117+
</p>

‎docs/README.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# react-org-tree
2+
3+
[![npm version][npm-image]][npm-url] [![mnt-image](https://img.shields.io/maintenance/yes/2021.svg?style=flat-square)](../../commits/master) [![GitHub stars](https://img.shields.io/github/stars/artdong/react-org-tree.svg?style=flat-square)](https://github.com/artdong/react-org-tree/stargazers) [![GitHub forks](https://img.shields.io/github/forks/artdong/react-org-tree.svg?style=flat-square)](https://github.com/artdong/react-org-tree/network) [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/artdong/react-org-tree/blob/master/LICENSE)
4+
5+
[npm-image]: http://img.shields.io/npm/v/react-org-tree.svg?style=flat-square
6+
[npm-url]: http://npmjs.org/package/react-org-tree
7+
[download-image]: https://img.shields.io/npm/dm/react-org-tree.svg?style=flat-square
8+
[download-url]: https://npmjs.org/package/react-org-tree
9+
[bundlephobia-url]: https://bundlephobia.com/result?p=react-org-tree
10+
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/react-org-tree
11+
12+
> A simple organization tree component based on react
13+
14+
> If you are using vue, see [vue-org-tree](https://github.com/hukaibaihu/vue-org-tree)
15+
16+
### Installation
17+
18+
```
19+
# use npm
20+
npm i react-org-tree
21+
22+
# use yarn
23+
yarn add react-org-tree
24+
```
25+
### Usage
26+
27+
``` js
28+
import OrgTree from 'react-org-tree';
29+
30+
const horizontal = false; // true：横向 false：纵向
31+
const collapsable = true; // true：可折叠 false：不可折叠
32+
const expandAll = true; // true: 全部展开 false：全部折叠
33+
34+
const data = {
35+
id: 0,
36+
label: 'XXX股份有限公司',
37+
children: [{
38+
id: 1,
39+
label: '技术部',
40+
children: [{
41+
id: 4,
42+
label: '后端工程师'
43+
}, {
44+
id: 5,
45+
label: '前端工程师'
46+
}, {
47+
id: 6,
48+
label: '运维工程师'
49+
}]
50+
}, {
51+
id: 2,
52+
label: '人事部'
53+
}, {
54+
id: 3,
55+
label: '销售部'
56+
}]
57+
}
58+
59+
<OrgTree
60+
data={data}
61+
horizontal={horizontal}
62+
collapsable={collapsable}
63+
expandAll={expandAll}
64+
>
65+
```
66+
67+
## API
68+
69+
参数(prop) | 说明(descripton) | 类型(type) | 默认值(default)
70+
-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
71+
data | 树结构数据 | `Object` | {}
72+
horizontal | 是否横向 | `Boolean` | `false`
73+
collapsable | 是否可折叠 | `Boolean` | `false`
74+
expandAll | 是否展开全部 | `Boolean` | `false`
75+
labelWidth | 树节点宽度 | `Number` | `auto`
76+
labelClassName | 树节点样式 | `String` | `white`
77+
onClick | 点击事件 | Function(e:Event, data)
78+
79+
## Example
80+
81+
http://localhost:8000/demo/
82+
83+
## License
84+
85+
react-org-tree is released under the MIT license.
86+
87+
#### 请作者喝一杯咖啡
88+
89+
<p align='center'>
90+
<a href="https://www.buymeacoffee.com/artd" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/arial-violet.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" >
91+
</a>
92+
</p>

‎docs/demo/basic.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## basic
2+
3+
<code src="../examples/basic.jsx">

‎docs/demo/expand.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## expand
2+
3+
<code src="../examples/expand.jsx">

‎docs/demo/expandAll.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## expandAll
2+
3+
<code src="../examples/expandAll.jsx">

‎docs/demo/horizontal.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## horizontal
2+
3+
<code src="../examples/horizontal.jsx">

‎docs/demo/vertical.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## vertical
2+
3+
<code src="../examples/vertical.jsx">

‎docs/examples/basic.jsx‎

Lines changed: 70 additions & 0 deletions
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: false,
35+
expandAll: true,
36+
labelClassName: 'bg-white'
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;

‎docs/examples/expand.jsx‎

Lines changed: 70 additions & 0 deletions
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: false,
36+
labelClassName: 'bg-white'
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;

0 commit comments

Comments
 (0)