Skip to content

some features #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

some features #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8f9723d
- 支持节点控制是否展开, 优先级大于 expandAll
Dec 14, 2021
9f2e3d3
异步加载 demo
Dec 14, 2021
ab0795a
缩小按钮 z-index 值
Dec 14, 2021
d29bb46
docs and loading icon border-box
Dec 14, 2021
f5bf39a
docs fix about timeout
Dec 14, 2021
d6621f9
features
Dec 21, 2021
acb81e8
features about keyMap and debugLog
Dec 22, 2021
8a83985
features -> support filter data
Dec 22, 2021
d24490d
optimized styles
Dec 22, 2021
cc798f3
tree line width dynamic
Dec 22, 2021
f68c5ee
fix filter bug about dynamic colSpan
Dec 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 20 additions & 17 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,26 +42,29 @@ export default () => {

### NodeDataType

| 名称 | 类型 | 默认值 | 说明 |
| --------- | ------------------- | ------ | ---------- |
| key | string \| number | - | key |
| label | number | - | label |
| children | NodeDataType[] | - | 子节点集合 |
| className | string | - | 类名 |
| style | React.CSSProperties | - | 样式 |
| 名称 | 类型 | 默认值 | 说明 |
| ------------ | ------------------- | ------ | ------------------ |
| key | string \| number | - | key |
| label | number | - | label |
| expand | boolean | - | 控制展开/收缩 |
| loadChildren | boolean | - | 异步加载子节点数据 |
| children | NodeDataType[] | - | 子节点集合 |
| className | string | - | 类名 |
| style | React.CSSProperties | - | 样式 |

### OrgChartProps

| 名称 | 类型 | 默认值 | 说明 |
| ---------- | --------------------------------------------------------------------- | ------ | --------------------- |
| data | NodeDataType | - | 数据 |
| className | string | - | 类名 |
| style | React.CSSProperties | - | 样式 |
| expandAll | boolean | true | 是否展开所有子节点 |
| expandable | boolean | false | 是否允许子节点展开 |
| renderNode | (node: NodeDataType, originNode: React.ReactNode) => React.ReactNode; | - | 自定义渲染节点 |
| onExpand | (expanded: boolean, node: NodeDataType) => void | - | 展开/收起节点时的回调 |
| onClick | (node: NodeDataType) => void | - | 点击节点时的回调 |
| 名称 | 类型 | 默认值 | 说明 |
| ------------ | --------------------------------------------------------------------- | ------ | --------------------- |
| data | NodeDataType | - | 数据 |
| className | string | - | 类名 |
| style | React.CSSProperties | - | 样式 |
| expandAll | boolean | true | 是否展开所有子节点 |
| expandable | boolean | false | 是否允许子节点展开 |
| renderNode | (node: NodeDataType, originNode: React.ReactNode) => React.ReactNode; | - | 自定义渲染节点 |
| loadChildren | (data: NodeDataType) => Promise<NodeDataType[]>; | - | 异步加载子节点数据 |
| onExpand | (expanded: boolean, node: NodeDataType) => void | - | 展开/收起节点时的回调 |
| onClick | (node: NodeDataType) => void | - | 点击节点时的回调 |

## 支持

Expand Down
7 changes: 7 additions & 0 deletions docs/demo/expandAsync.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
order: 4
---

## expandAsync

<code src="../examples/expandAsync.tsx" />
106 changes: 106 additions & 0 deletions docs/examples/expandAsync.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React from 'react';
import OrgChart, { NodeDataType } from '@twp0217/react-org-chart';

export default () => {
const data: NodeDataType = {
key: 0,
label: '科技有限公司',
expand: true,
children: [
{
key: 1,
label: '研发部',
children: [
{ key: 11, label: '开发-前端' },
{ key: 12, label: '开发-后端' },
{ key: 13, label: 'UI设计' },
{ key: 14, label: '产品经理' },
],
},
{
key: 2,
label: '销售部',
children: [
{ key: 21, label: '销售一部' },
{ key: 22, label: '销售二部' },
],
},
{ key: 3, label: '财务部' },
{ key: 4, label: '人事部', loadChildren: true },
],
};

const [expandAll, setExpandAll] = React.useState<boolean>(false);

return (
<div>
<div>
<button onClick={() => setExpandAll(!expandAll)}>
{expandAll ? '收起' : '展开'}
</button>
</div>
<br />
<div
style={{
textAlign: 'center',
width: '100%',
height: 'auto',
overflowX: 'scroll',
overflowY: 'hidden',
background: 'white',
padding: 20,
}}
>
<OrgChart
expandable
data={data}
expandAll={expandAll}
loadChildren={(_data: NodeDataType) => {
return new Promise((resolve, _reject) => {
setTimeout(() => {
resolve([
{
key: 41,
label: '人事一部',
},
{
key: 42,
label: '人事二部',
},
{
key: 43,
label: '人事三部',
},
{
key: 44,
label: '人事四部',
},
{
key: 45,
label: '人事五部',
},
{
key: 46,
label: '人事六部',
},
{
key: 47,
label: '人事七部',
},
{
key: 48,
label: '人事八部',
},
{
key: 49,
label: '人事九部',
},
]);
}, 3000);
});
}}
/>
</div>
</div>
);
};
89 changes: 70 additions & 19 deletions src/OrgChart.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
@node-color: #1890ff;
@line-width: 1px;
@node-color: #3870e1;
@line-width: 2px;
@line-color: @node-color;
@expand-icon-size: 16px;
@expand-icon-size: 18px;
@expand-icon-background-color: #e8eefb;

.orgChartContainer {
display: inline-block;
Expand All @@ -21,46 +22,64 @@
position: relative;

.expand-icon {
box-sizing: content-box;
display: inline-block;
width: @expand-icon-size;
height: @expand-icon-size;
border-radius: 50%;
background-color: @line-color;
background-color: @expand-icon-background-color;
border: 1px solid @node-color;
position: absolute;
left: 50%;
bottom: 0;
margin-left: -@expand-icon-size / 2;
margin-bottom: -@expand-icon-size / 2;
z-index: 99;
z-index: 9;
cursor: pointer;

&-expanded,
&-collapsed {
&::before {
box-sizing: border-box;
content: '';
width: 8px;
width: 10px;
height: 2px;
background-color: #fff;
background-color: @node-color;
position: absolute;
top: 7px;
left: 4px;
top: (@expand-icon-size - 2px) / 2;
left: (@expand-icon-size - 10px) / 2;
}
}

&-collapsed {
&::after {
box-sizing: border-box;
content: '';
width: 2px;
height: 8px;
background-color: #fff;
height: 10px;
background-color: @node-color;
position: absolute;
top: 4px;
left: 7px;
top: (@expand-icon-size - 10px) / 2;
left: (@expand-icon-size - 2px) / 2;
}
}

&-loading-children {
&::before {
box-sizing: border-box;
content: '';
width: 10px;
height: 10px;
border: 2px solid @node-color;
border-radius: 50%;
position: absolute;
top: (@expand-icon-size - 10px) / 2;
left: (@expand-icon-size - 10px) / 2;
}
}

&:hover {
background-color: darken(@line-color, 5%);
background-color: darken(@expand-icon-background-color, 5%);
}
}

Expand All @@ -72,18 +91,42 @@
height: 100%;
background-color: @line-color;
display: inline-block;
user-select: none;
}

&.left {
.mixLeft( @a ) when (mod(@a,2)>0) {
border-right: @line-width solid @line-color;
}
.mixLeft( @a ) when (od(@a,2)<0) {
border-right: @line-width solid @line-color;
}
.mixLeft( @a ) when (mod(@a,2)=0) {
border-right: @line-width / 2 solid @line-color;
}

&.right {
&.left {
.mixLeft(@line-width);
user-select: none;
}

.mixRight( @a ) when (mod(@a,2)<0) {
border-left: @line-width solid transparent;
}
.mixRight( @a ) when (mod(@a,2)>0) {
border-left: @line-width solid transparent;
}
.mixRight( @a ) when (mod(@a,2)=0) {
border-left: @line-width / 2 solid @line-color;
}

&.right {
.mixRight(@line-width);
user-select: none;
}

&.top {
border-top: @line-width solid @line-color;
user-select: none;
}
}
}
Expand All @@ -96,10 +139,18 @@

.node {
display: inline-block;
border: 1px solid @node-color;
padding: 0.5rem;
margin: 0 5px;
cursor: pointer;

.node-content {
color: black;
text-align: center;
padding: 0.2rem 0.4rem;
border: 1px solid @node-color;
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
cursor: pointer;
white-space: nowrap;
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions src/OrgChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import classNames from 'classnames';
import React from 'react';
import DefaultOrgChart from './components/DefaultOrgChart';
import { OrgChartProps } from './interface';
// @ts-ignore
import styles from './OrgChart.module.less';

const OrgChart = (props: OrgChartProps) => {
Expand Down
Loading