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
|
import { CUIAutoComplete } from 'chakra-ui-autocomplete'
import React, { useState } from 'react'
import { initialFilter } from '../config'
export interface TagPanelProps {
tags: string[]
filter: typeof initialFilter
setFilter: any
highlightColor: string
mode: string
}
export const TagPanel = (props: TagPanelProps) => {
const { filter, setFilter, tags, highlightColor, mode } = props
const tagArray = tags.map((tag) => {
return { value: tag, label: tag }
})
const currentTags = mode === 'blacklist' ? 'tagsBlacklist' : 'tagsWhitelist'
const [selectedItems, setSelectedItems] = useState<typeof tagArray>(
filter[currentTags].map((tag) => {
return { value: tag, label: tag }
}),
)
return (
<CUIAutoComplete
items={tagArray}
label={'Add tag to ' + mode}
placeholder=" "
onCreateItem={(item) => null}
disableCreateItem={true}
selectedItems={selectedItems}
onSelectedItemsChange={(changes) => {
if (changes.selectedItems) {
setSelectedItems(changes.selectedItems)
setFilter({ ...filter, [currentTags]: changes.selectedItems.map((item) => item.value) })
}
}}
listItemStyleProps={{ overflow: 'hidden' }}
highlightItemBg="gray.400"
toggleButtonStyleProps={{ variant: 'outline' }}
inputStyleProps={{
focusBorderColor: highlightColor,
color: 'gray.800',
borderColor: 'gray.600',
}}
tagStyleProps={{
rounded: 'full',
bg: highlightColor,
height: 8,
paddingLeft: 4,
fontWeight: 'bold',
}}
hideToggleButton
itemRenderer={(selected) => selected.label}
/>
)
}
|
