@twp0217/react-org-chart
Version:
```typescript import React from 'react'; import OrgChart, { NodeDataType } from '@twp0217/react-org-chart';
108 lines (92 loc) • 2.38 kB
text/less
@node-color: #1890ff;
@line-width: 1px;
@line-color: @node-color;
@expand-icon-size: 16px;
.orgChartContainer {
display: inline-block;
:global {
table {
border-collapse: separate;
border-spacing: 0;
line-height: 1.5715;
tr {
&.hidden {
display: none ;
}
&.lines {
position: relative;
.expand-icon {
display: inline-block;
width: @expand-icon-size;
height: @expand-icon-size;
border-radius: 50%;
background-color: @line-color;
position: absolute;
left: 50%;
bottom: 0;
margin-left: -@expand-icon-size / 2;
margin-bottom: -@expand-icon-size / 2;
z-index: 99;
cursor: pointer;
&-expanded,
&-collapsed {
&::before {
content: '';
width: 8px;
height: 2px;
background-color: #fff;
position: absolute;
top: 7px;
left: 4px;
}
}
&-collapsed {
&::after {
content: '';
width: 2px;
height: 8px;
background-color: #fff;
position: absolute;
top: 4px;
left: 7px;
}
}
&:hover {
background-color: darken(@line-color, 5%);
}
}
td {
height: 20px;
.vertical-line {
width: @line-width;
height: 100%;
background-color: @line-color;
display: inline-block;
}
&.left {
border-right: @line-width solid @line-color;
}
&.right {
border-left: @line-width solid transparent;
}
&.top {
border-top: @line-width solid @line-color;
}
}
}
}
td {
text-align: center;
padding: 0;
vertical-align: top;
.node {
display: inline-block;
border: 1px solid @node-color;
padding: 0.5rem;
margin: 0 5px;
cursor: pointer;
}
}
}
}
}