summaryrefslogtreecommitdiff
path: root/components/Tweaks/TagPanel.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2022-01-03 17:21:18 +0100
committerGitHub <[email protected]>2022-01-03 17:21:18 +0100
commitdad03e3be5b0a7c1159e0207cce11540ca830359 (patch)
tree4ae4e0a40c578e12b6d4f11a3f785c8190865f8b /components/Tweaks/TagPanel.tsx
parent9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff)
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/TagPanel.tsx')
-rw-r--r--components/Tweaks/TagPanel.tsx70
1 files changed, 0 insertions, 70 deletions
diff --git a/components/Tweaks/TagPanel.tsx b/components/Tweaks/TagPanel.tsx
deleted file mode 100644
index 58f4b7d..0000000
--- a/components/Tweaks/TagPanel.tsx
+++ /dev/null
@@ -1,70 +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 name = mode === 'blacklist' ? 'blocklist' : 'allowlist'
- const [selectedItems, setSelectedItems] = useState<typeof tagArray>(
- filter[currentTags].map((tag) => {
- return { value: tag, label: tag }
- }),
- )
-
- return (
- <CUIAutoComplete
- labelStyleProps={{ fontWeight: 300, fontSize: 14 }}
- items={tagArray}
- label={`Add tag to ${name}`}
- 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={{
- 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}
- />
- )
-}