summaryrefslogtreecommitdiff
path: root/components/Tweaks/OptionPanel.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/OptionPanel.tsx
parent9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff)
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/OptionPanel.tsx')
-rw-r--r--components/Tweaks/OptionPanel.tsx74
1 files changed, 74 insertions, 0 deletions
diff --git a/components/Tweaks/OptionPanel.tsx b/components/Tweaks/OptionPanel.tsx
new file mode 100644
index 0000000..870028b
--- /dev/null
+++ b/components/Tweaks/OptionPanel.tsx
@@ -0,0 +1,74 @@
+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}
+ />
+ )
+}