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
|
import { MinusIcon, AddIcon, ViewOffIcon, ViewIcon } from '@chakra-ui/icons'
import {
Text,
Box,
Button,
Flex,
Menu,
MenuButton,
MenuItem,
MenuList,
Portal,
useDisclosure,
} from '@chakra-ui/react'
import React from 'react'
import { colorList, initialFilter, TagColors } from './config'
import { Collapse } from './Sidebar/Collapse'
import { ColorMenu } from './Tweaks/ColorMenu'
export interface TagMenuProps {
setTagColors: any
tagColors: TagColors
setFilter: any
filter: typeof initialFilter
target: string | null
}
export const TagMenu = (props: TagMenuProps) => {
const { setTagColors, setFilter, filter, tagColors, target } = props
const bl: string[] = filter.tagsBlacklist
const wl: string[] = filter.tagsWhitelist
const blacklist = bl.indexOf(target as string) > -1
const whitelist = wl.indexOf(target as string) > -1
const colors = useDisclosure()
return (
<>
<MenuItem
icon={
<Box
bgColor={tagColors[target as string]}
borderRadius="sm"
height={3}
width={3}
borderColor={tagColors[target as string] || 'gray.600'}
borderWidth={1}
></Box>
}
closeOnSelect={false}
onClick={colors.onToggle}
>
<Text>Change color</Text>
</MenuItem>
<Collapse in={colors.isOpen}>
<Flex ml={2} mt={2} flexWrap="wrap">
{colorList.map((color: string) => (
<Box key={color}>
<Box
tabIndex={0}
cursor="pointer"
onClick={() =>
setTagColors({
...tagColors,
[target as string]: color,
})
}
bgColor={color}
m={1}
borderRadius="sm"
height={3}
width={3}
></Box>
</Box>
))}
</Flex>
</Collapse>
{!whitelist && (
<MenuItem
onClick={() => {
if (!blacklist) {
setFilter((filter: typeof initialFilter) => ({
...filter,
tagsBlacklist: [...filter.tagsBlacklist, target],
}))
return
}
setFilter((filter: typeof initialFilter) => ({
...filter,
tagsBlacklist: filter.tagsBlacklist.filter((t) => t !== target),
}))
}}
icon={blacklist ? <MinusIcon /> : <ViewOffIcon />}
>
{blacklist ? 'Remove from blacklist' : 'Add to blacklist'}
</MenuItem>
)}
{!blacklist && (
<MenuItem
onClick={() => {
if (!whitelist) {
setFilter((filter: typeof initialFilter) => ({
...filter,
tagsWhitelist: [...filter.tagsWhitelist, target],
}))
return
}
setFilter((filter: typeof initialFilter) => ({
...filter,
tagsWhitelist: filter.tagsWhitelist.filter((t) => t !== target),
}))
}}
icon={whitelist ? <MinusIcon /> : <ViewIcon />}
>
{whitelist ? 'Remove from whitelist' : 'Add to whitelist'}
</MenuItem>
)}
</>
)
}
|
