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> ) }