diff options
Diffstat (limited to 'components/Sidebar/TagBar.tsx')
-rw-r--r-- | components/Sidebar/TagBar.tsx | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/components/Sidebar/TagBar.tsx b/components/Sidebar/TagBar.tsx new file mode 100644 index 0000000..0fe0a18 --- /dev/null +++ b/components/Sidebar/TagBar.tsx @@ -0,0 +1,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> + ) +} |