diff options
author | Thomas F. K. Jorna <[email protected]> | 2022-01-03 17:21:18 +0100 |
---|---|---|
committer | GitHub <[email protected]> | 2022-01-03 17:21:18 +0100 |
commit | dad03e3be5b0a7c1159e0207cce11540ca830359 (patch) | |
tree | 4ae4e0a40c578e12b6d4f11a3f785c8190865f8b /components/Tweaks/TagPanel.tsx | |
parent | 9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff) |
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/TagPanel.tsx')
-rw-r--r-- | components/Tweaks/TagPanel.tsx | 70 |
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} - /> - ) -} |