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
|
import React from 'react'
import { initialFilter, TagColors } from '../config'
import { NodeObject } from 'force-graph'
import { OrgRoamNode } from '../../api'
import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
import { Flex, Tag, TagLabel, TagRightIcon } from '@chakra-ui/react'
export interface TagBarProps {
filter: typeof initialFilter
setFilter: any
tagColors: TagColors
setTagColors: any
openContextMenu: any
previewNode: NodeObject
}
export const TagBar = (props: TagBarProps) => {
const { filter, setFilter, tagColors, setTagColors, openContextMenu, previewNode } = props
const node = previewNode as OrgRoamNode
if (!node.tags || node?.tags[0] === null) {
return null
}
return (
<Flex mb={2} flexWrap="wrap">
{node?.tags?.map((tag: string) => {
const bl: string[] = filter.tagsBlacklist ?? []
const wl: string[] = filter.tagsWhitelist ?? []
const blackList: boolean = bl.includes(tag)
const whiteList = wl.includes(tag)
return (
<Tag
tabIndex={0}
mr={2}
mt={2}
onContextMenu={(e) => {
e.preventDefault()
openContextMenu(tag, e)
}}
cursor="pointer"
onClick={() => {
if (blackList) {
setFilter((filter: typeof initialFilter) => ({
...filter,
tagsBlacklist: filter.tagsBlacklist.filter((t) => t !== tag),
tagsWhitelist: [...filter.tagsWhitelist, tag],
}))
return
}
if (whiteList) {
setFilter((filter: typeof initialFilter) => ({
...filter,
tagsWhitelist: filter.tagsWhitelist.filter((t) => t !== tag),
}))
return
}
setFilter((filter: typeof initialFilter) => ({
...filter,
tagsBlacklist: [...filter.tagsBlacklist, tag],
}))
}}
size="sm"
key={tag}
variant="outline"
colorScheme={tagColors[tag]?.replaceAll(/(.*?)\..*/g, '$1') || undefined}
>
<TagLabel>{tag}</TagLabel>
{blackList ? (
<TagRightIcon as={ViewOffIcon} />
) : whiteList ? (
<TagRightIcon as={ViewIcon} />
) : null}
</Tag>
)
})}
</Flex>
)
}
|
