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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
import React from 'react'
import { Text, Flex, IconButton, ButtonGroup, Tooltip } from '@chakra-ui/react'
import {
BiAlignJustify,
BiAlignLeft,
BiAlignMiddle,
BiAlignRight,
BiFont,
BiRightIndent,
} from 'react-icons/bi'
import { MdOutlineExpand, MdOutlineCompress } from 'react-icons/md'
import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
import { IoIosListBox, IoMdListBox } from 'react-icons/io'
import { NodeObject } from 'force-graph'
export interface ToolbarProps {
setJustification: any
justification: number
setIndent: any
setFont: any
setPreviewNode: any
canUndo: any
canRedo: any
resetPreviewNode: any
previousPreviewNode: any
nextPreviewNode: any
outline: boolean
setOutline: any
collapse: boolean
setCollapse: any
}
export const Toolbar = (props: ToolbarProps) => {
const {
setJustification,
setIndent,
setFont,
justification,
setPreviewNode,
canUndo,
canRedo,
resetPreviewNode,
previousPreviewNode,
nextPreviewNode,
outline,
setOutline,
collapse,
setCollapse,
} = props
return (
<Flex flex="0 1 40px" pb={3} alignItems="center" justifyContent="space-between" pr={1}>
<Flex>
<ButtonGroup isAttached>
<Tooltip label="Go backward">
<IconButton
_focus={{}}
variant="subtle"
icon={<ChevronLeftIcon />}
aria-label="Previous node"
disabled={!canUndo}
onClick={() => previousPreviewNode()}
/>
</Tooltip>
<Tooltip label="Go forward">
<IconButton
_focus={{}}
variant="subtle"
icon={<ChevronRightIcon />}
aria-label="Next node"
disabled={!canRedo}
onClick={() => nextPreviewNode()}
/>
</Tooltip>
</ButtonGroup>
</Flex>
<Flex>
<Tooltip label="Justify content">
<IconButton
variant="subtle"
aria-label="Justify content"
icon={
[
<BiAlignJustify key="justify" />,
<BiAlignLeft key="left" />,
<BiAlignRight key="right" />,
<BiAlignMiddle key="center" />,
][justification]
}
onClick={() => setJustification((curr: number) => (curr + 1) % 4)}
/>
</Tooltip>
<Tooltip label="Toggle outline view">
<IconButton
variant="subtle"
aria-label="Justify content"
icon={outline ? <IoIosListBox /> : <IoMdListBox />}
onClick={() => setOutline((curr: boolean) => !curr)}
/>
</Tooltip>
<Tooltip label="Toggle headers">
<IconButton
variant="subtle"
aria-label="Toggle headers"
icon={collapse ? <MdOutlineExpand /> : <MdOutlineCompress />}
onClick={() => setCollapse((curr: boolean) => !curr)}
/>
</Tooltip>
{/* <Tooltip label="Indent trees">
<IconButton
variant="subtle"
aria-label="Indent Text"
icon={<BiRightIndent />}
onClick={() => {
setIndent((curr: number) => (curr ? 0 : 1))
}}
/>
</Tooltip>
<Tooltip label="Switch betwwen sans and serif">
<IconButton
variant="subtle"
aria-label="Change font"
icon={<BiFont />}
onClick={() => {
setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif'))
}}
/>
</Tooltip> */}
</Flex>
</Flex>
)
}
|
