-
Notifications
You must be signed in to change notification settings - Fork 1
/
Node.tsx
111 lines (105 loc) · 2.69 KB
/
Node.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { memo } from 'react'
import {
MdChevronRight as ClosedWithChildrenIcon,
MdExpandMore as OpenWithChildrenIcon,
} from 'react-icons/md'
import { HiMiniMinusSmall as NoChildrenIcon } from 'react-icons/hi2'
import { Button } from '@fluentui/react-components'
import { Link, useSearchParams } from 'react-router-dom'
import { css } from '../../css'
const buttonStyle = {
borderRadius: 20,
border: 'none',
backgroundColor: 'transparent',
color: 'rgb(51, 51, 51) !important',
}
const siblingStyle = {
marginLeft: 5,
}
const svgStyle = {
color: 'rgb(51, 51, 51)',
}
const labelSpanStyle = { cursor: 'default', userSelect: 'none' }
interface Props {
isInActiveNodeArray: boolean
isActive: boolean
isOpen: boolean
level: number
node: { label: string }
childrenCount: number
to: string
onClickButton: () => void
sibling?: React.ReactNode
}
export const Node = memo(
({
isInActiveNodeArray,
isActive,
isOpen,
level,
node,
childrenCount,
to,
onClickButton,
sibling,
}: Props) => {
const [searchParams] = useSearchParams()
return (
<div
style={{
display: 'flex',
alignItems: 'center',
fontWeight: isInActiveNodeArray ? 'bold' : 'normal',
...(isActive && { color: 'red' }),
marginLeft: level * 20 - 15,
justifyContent: 'flex-start',
userSelect: 'none',
}}
>
<Button
aria-label="toggle"
size="small"
icon={
!childrenCount ? (
<NoChildrenIcon style={svgStyle} />
) : isOpen ? (
<OpenWithChildrenIcon style={svgStyle} />
) : (
<ClosedWithChildrenIcon style={svgStyle} />
)
}
onClick={onClickButton}
disabled={!childrenCount}
style={{
...buttonStyle,
...(!childrenCount && { cursor: 'default' }),
}}
/>
{isActive ? (
<span style={labelSpanStyle}>{node.label}</span>
) : (
<Link
style={css({
fontSize: '1em',
lineHeight: '1.5em',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
textDecoration: 'none',
color: 'rgb(51, 51, 51)',
on: ($) => [
$('&:hover', {
fontWeight: 'bold',
}),
],
})}
to={{ pathname: to, search: searchParams.toString() }}
>
{node.label}
</Link>
)}
{!!sibling && <div style={siblingStyle}>{sibling}</div>}
</div>
)
},
)