forked from bkrem/react-d3-tree
-
Notifications
You must be signed in to change notification settings - Fork 3
/
MixedNodeElement.js
38 lines (36 loc) · 1.21 KB
/
MixedNodeElement.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React from 'react';
const MixedNodeElement = ({ nodeData = {}, triggerNodeToggle, foreignObjectProps = {} }) => {
return (
<React.Fragment>
<circle r={20}></circle>
<foreignObject {...foreignObjectProps}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
border: '1px solid black',
paddingBottom: '1rem',
backgroundColor: 'rgb(248, 248, 255)', // ghostwhite
}}
>
<h3>{nodeData.name}</h3>
<ul style={{ listStyleType: 'none', padding: 0 }}>
{nodeData.attributes &&
Object.keys(nodeData.attributes).map((labelKey, i) => (
<li key={`${labelKey}-${i}`}>
{labelKey}: {nodeData.attributes[labelKey]}
</li>
))}
</ul>
{nodeData.children && (
<button style={{ textAlign: 'center' }} onClick={triggerNodeToggle}>
{nodeData.__rd3dag.collapsed ? '⬅️ ➡️ Expand' : '➡️ ⬅️ Collapse'}
</button>
)}
</div>
</foreignObject>
</React.Fragment>
);
};
export default MixedNodeElement;