-
Notifications
You must be signed in to change notification settings - Fork 0
/
GitNode.tsx
47 lines (42 loc) · 1.41 KB
/
GitNode.tsx
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
39
40
41
42
43
44
45
46
47
import React, { useState } from 'react';
import { Handle, NodeProps, Position } from 'react-flow-renderer';
import { ColorSet } from '../containers/colors';
import { OutlinedCard } from './GitGraphTag';
const customNodeStyles = (color: ColorSet, border: string, opacity?: string) => ({
borderRadius: '50%',
borderStyle: border,
borderWidth: 'thin',
opacity: opacity,
background: color.primary,
color: color.secondary,
padding: 5,
});
type GitNodeProps = NodeProps & {
data: {
text: string,
tooltip: string,
color: ColorSet,
border: string,
opacity?: string,
branch?: string
}
}
export const GitNode: React.FunctionComponent<GitNodeProps> = props => {
const [isHovering, setIsHovering] = useState(false);
return (
<>
{ props.data.branch ? <OutlinedCard content={props.data.branch} placement='right' /> : null}
{ isHovering ? <OutlinedCard content={props.id} placement='bottom' /> : null}
<div style={customNodeStyles(props.data.color, props.data.border, props.data.opacity)}
onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}
>
<Handle type='target' position={Position.Top} style={{ visibility: 'hidden' }} />
<div>{props.data.text}</div>
<Handle type='source' position={Position.Bottom} style={{ visibility: 'hidden' }} />
</div>
</>
)
}
export const nodeTypes = {
gitNode: GitNode
}