Skip to content

Commit

Permalink
feat: custom node
Browse files Browse the repository at this point in the history
  • Loading branch information
@artdong
artdong committed Oct 7, 2023
1 parent 86dcd4a commit 7953646
Show file tree
Hide file tree
Showing 16 changed files with 354 additions and 10 deletions.
4 changes: 2 additions & 2 deletions .umirc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ export default defineConfig({
],
navs: {
en: [
{ title: 'Demo', path: '/demo' },
null,
{ title: 'GitHub', path: 'https://github.com/artdong/react-org-tree' },
],
zh: [
{ title: '示例', path: '/demo' },
null,
{ title: 'GitHub', path: 'https://github.com/artdong/react-org-tree' },
],
},
Expand Down
21 changes: 20 additions & 1 deletion docs/demo/basic.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,22 @@
---
title: basic
order: 0
nav:
title: Demo
---

## basic

<code src="../examples/basic.jsx">
<code src="../examples/basic.jsx">

## 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)
20 changes: 20 additions & 0 deletions docs/demo/basic.zh.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: 基础
order: 0
nav:
title: 示例
---

<code src="../examples/basic.jsx">

## 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)
22 changes: 22 additions & 0 deletions docs/demo/custom.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
title: custom
order: 5
nav:
title: Demo
---

## custom

<code src="../examples/custom.jsx">

## 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)
20 changes: 20 additions & 0 deletions docs/demo/custom.zh.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: 自定义
order: 5
nav:
title: 示例
---

<code src="../examples/custom.jsx">

## 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)
21 changes: 20 additions & 1 deletion docs/demo/expand.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,22 @@
---
title: expand
order: 1
nav:
title: Demo
---

## expand

<code src="../examples/expand.jsx">
<code src="../examples/expand.jsx">

## 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)
20 changes: 20 additions & 0 deletions docs/demo/expand.zh.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: 展开
order: 1
nav:
title: 示例
---

<code src="../examples/expand.jsx">

## 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)
21 changes: 20 additions & 1 deletion docs/demo/expandAll.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,22 @@
---
title: expandAll
order: 2
nav:
title: Demo
---

## expandAll

<code src="../examples/expandAll.jsx">
<code src="../examples/expandAll.jsx">

## 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)
20 changes: 20 additions & 0 deletions docs/demo/expandAll.zh.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: 展开全部
order: 2
nav:
title: 示例
---

<code src="../examples/expandAll.jsx">

## 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)
21 changes: 19 additions & 2 deletions docs/demo/horizontal.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,20 @@
## horizontal
---
title: horizontal
order: 3
nav:
title: Demo
---

<code src="../examples/horizontal.jsx">
<code src="../examples/horizontal.jsx">

## 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)
20 changes: 20 additions & 0 deletions docs/demo/horizontal.zh.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: 横向
order: 3
nav:
title: 示例
---

<code src="../examples/horizontal.jsx">

## 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)
20 changes: 18 additions & 2 deletions docs/demo/vertical.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
## vertical
---
title: vertical
order: 4
nav:
title: Demo
---
<code src="../examples/vertical.jsx">

<code src="../examples/vertical.jsx">
## 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)
20 changes: 20 additions & 0 deletions docs/demo/vertical.zh.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: 竖向
order: 4
nav:
title: 示例
---

<code src="../examples/vertical.jsx">

## 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)
70 changes: 70 additions & 0 deletions docs/examples/custom.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React, { Component } from 'react';

import OrgTree from 'react-org-tree';

class OrgTreeDemo extends Component {
constructor(props) {
super(props);
this.state = {
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: '销售部'
}]
},
horizontal: false,
collapsable: true,
expandAll: true,
labelClassName: 'org-tree-node-label-inner-blue'
};
}

componentDidMount() {
}

componentWillUnmount() {
}

render() {
const { data, horizontal, collapsable, expandAll, labelClassName } = this.state;

return (
<div className="m-t-lg text-center">
<OrgTree
data={data}
horizontal={horizontal}
collapsable={collapsable}
labelClassName={labelClassName}
expandAll={expandAll}
renderContent={(data) => {
return data.label;
}}
onClick={(e, data) => {
//todo
}}
>
</OrgTree>
</div>
);
}
}

export default OrgTreeDemo;
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
{
"name": "react-org-tree",
"version": "1.0.0",
"version": "1.0.1",
"description": "a simple organization tree component based on react",
"main": "dist/bundle.js",
"files": [
"dist",
"lib"
],
"scripts": {
"dev": "dumi dev",
"start": "dumi dev",
"docs:start": "dumi dev",
"docs:build": "dumi build",
"predeploy": "dumi build",
Expand Down
Loading

0 comments on commit 7953646

Please sign in to comment.