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
|
import { CUIAutoComplete } from 'chakra-ui-autocomplete'
import React, { useContext, useState } from 'react'
import { ThemeContext } from '../../util/themecontext'
import { initialFilter } from '../config'
export interface OptionPanelProps {
options: string[]
filter: typeof initialFilter
setFilter: any
listName: 'tagsBlacklist' | 'tagsWhitelist' | 'dirsAllowlist' | 'dirsBlocklist'
displayName: string
labelFilter?: string
}
export const OptionPanel = (props: OptionPanelProps) => {
const { filter, listName, labelFilter, displayName, setFilter, options = [] } = props
const { highlightColor } = useContext(ThemeContext)
const optionArray =
options?.map((option) => {
return { value: option, label: labelFilter ? option.replace(labelFilter, '') : option }
}) || []
const [selectedItems, setSelectedItems] = useState<typeof optionArray>(
filter[listName]?.map((option) => {
return {
value: option,
label: labelFilter ? (option as string)?.replace(labelFilter, '') : option,
}
}) || [],
)
return (
<CUIAutoComplete
labelStyleProps={{ fontWeight: 300, fontSize: 14 }}
items={optionArray}
label={`Add tag to ${displayName}`}
placeholder=" "
onCreateItem={(item) => null}
disableCreateItem={true}
selectedItems={selectedItems}
onSelectedItemsChange={(changes) => {
if (changes.selectedItems) {
setSelectedItems(changes.selectedItems)
setFilter({ ...filter, [listName]: changes.selectedItems.map((item) => item.value) })
}
}}
listItemStyleProps={{ overflow: 'hidden' }}
highlightItemBg="gray.400"
toggleButtonStyleProps={{ variant: 'outline' }}
inputStyleProps={{
mt: 2,
height: 8,
focusBorderColor: highlightColor,
color: 'gray.800',
borderColor: 'gray.500',
}}
tagStyleProps={{
justifyContent: 'flex-start',
//variant: 'subtle',
fontSize: 10,
borderColor: highlightColor,
borderWidth: 1,
borderRadius: 'md',
color: highlightColor,
bg: '',
height: 4,
mb: 2,
//paddingLeft: 4,
//fontWeight: 'bold',
}}
hideToggleButton
itemRenderer={(selected) => selected.label}
/>
)
}
|
