summaryrefslogtreecommitdiff
path: root/components/TagPanel.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
committerThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
commitee8539a9351374a719c9026f85d85e7b4ea6e8f5 (patch)
treef9220fd304bd3669523df39ddaa0992919ccc4a6 /components/TagPanel.tsx
parent075d3831ffae63f128bcaabf9fc5e70ade41ad33 (diff)
chore: move tweaks to separate subfolder
Diffstat (limited to 'components/TagPanel.tsx')
-rw-r--r--components/TagPanel.tsx59
1 files changed, 0 insertions, 59 deletions
diff --git a/components/TagPanel.tsx b/components/TagPanel.tsx
deleted file mode 100644
index 545102b..0000000
--- a/components/TagPanel.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-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}
- />
- )
-}