diff options
| -rw-r--r-- | components/tweaks.tsx | 319 |
1 files changed, 11 insertions, 308 deletions
diff --git a/components/tweaks.tsx b/components/tweaks.tsx index f03339b..2cb5b5d 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -57,6 +57,8 @@ import { colorList, } from './config' +import FilterPanel from './FilterPanel' + import { ThemeContext } from '../util/themecontext' import { usePersistantState } from '../util/persistant-state' @@ -194,138 +196,15 @@ export const Tweaks = (props: TweakProps) => { <Heading size="sm">Filter</Heading> </AccordionButton> <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - paddingLeft={7} - color="gray.800" - > - <Flex alignItems="center" justifyContent="space-between"> - <Text>Link children to...</Text> - <Menu isLazy placement="right"> - <MenuButton - as={Button} - rightIcon={<ChevronDownIcon />} - colorScheme="" - color="black" - > - {(() => { - switch (filter.parent) { - case 'parent': - return <Text>File</Text> - case 'heading': - return <Text>Heading</Text> - default: - return <Text>Nothing</Text> - } - })()} - </MenuButton> - <Portal> - {' '} - <MenuList bgColor="gray.200" zIndex="popover"> - <MenuItem - onClick={() => - setFilter((curr: typeof initialFilter) => ({ ...curr, parent: '' })) - } - > - Nothing - </MenuItem> - <MenuItem - onClick={() => - setFilter((curr: typeof initialFilter) => ({ - ...curr, - parent: 'parent', - })) - } - > - Parent file node - </MenuItem> - <MenuItem - onClick={() => - setFilter((curr: typeof initialFilter) => ({ - ...curr, - parent: 'heading', - })) - } - > - Next highest heading node - </MenuItem> - </MenuList> - </Portal> - </Menu> - </Flex> - <Flex justifyContent="space-between"> - <Text>Orphans</Text> - <Switch - onChange={() => { - setFilter((curr: typeof initialFilter) => { - return { ...curr, orphans: !curr.orphans } - }) - }} - isChecked={filter.orphans} - ></Switch> - </Flex> - <Flex justifyContent="space-between"> - <Text>Citations without note files</Text> - <Switch - onChange={() => { - setFilter({ ...filter, filelessCites: !filter.filelessCites }) - }} - isChecked={filter.filelessCites} - ></Switch> - </Flex> - <Flex justifyContent="space-between"> - <Text>Non-existant nodes</Text> - <Switch - onChange={() => { - setTagColors({ ...tagColors, bad: 'white' }) - setFilter({ ...filter, bad: !filter.bad }) - }} - isChecked={filter.bad} - ></Switch> - </Flex> - </VStack> - <Accordion padding={0} allowToggle allowMultiple paddingLeft={3}> - <AccordionItem> - <AccordionButton> - Tag filters - <AccordionIcon /> - </AccordionButton> - <AccordionPanel pr={0} mr={0}> - <TagPanel - highlightColor={highlightColor} - filter={filter} - setFilter={setFilter} - tags={tags} - mode="blacklist" - /> - <TagPanel - highlightColor={highlightColor} - filter={filter} - setFilter={setFilter} - tags={tags} - mode="whitelist" - /> - </AccordionPanel> - </AccordionItem> - <AccordionItem> - <AccordionButton> - Tag Colors - <AccordionIcon /> - </AccordionButton> - <AccordionPanel pr={0} mr={0}> - <TagColorPanel - tags={tags} - colorList={colorList} - tagColors={tagColors} - setTagColors={setTagColors} - highlightColor={highlightColor} - /> - </AccordionPanel> - </AccordionItem> - </Accordion> + <FilterPanel + filter={filter} + setFilter={setFilter} + tagColors={tagColors} + setTagColors={setTagColors} + highlightColor={highlightColor} + colorList={colorList} + tags={tags} + /> </AccordionPanel> </AccordionItem> <AccordionItem> @@ -1540,179 +1419,3 @@ export const ColorMenu = (props: ColorMenuProps) => { </Flex> ) } - -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} - /> - ) -} - -export interface TagColorPanelProps { - tags: string[] - highlightColor: string - colorList: string[] - tagColors: TagColors - setTagColors: any -} -export const TagColorPanel = (props: TagColorPanelProps) => { - const { colorList, tagColors, setTagColors, highlightColor, tags } = props - const tagArray = tags.map((tag) => { - return { value: tag, label: tag } - }) - - const [selectedItems, setSelectedItems] = useState<typeof tagArray>( - Object.keys(tagColors).map((tag) => { - return { value: tag, label: tag } - }), - ) - - return ( - <Box> - <CUIAutoComplete - items={tagArray} - label="Add tag to filter" - placeholder=" " - disableCreateItem={true} - selectedItems={selectedItems} - onSelectedItemsChange={(changes) => { - if (changes.selectedItems) { - setSelectedItems(Array.from(new Set(changes.selectedItems))) - setTagColors( - Object.fromEntries( - Array.from(new Set(changes.selectedItems)).map((item) => { - return [item.label, tagColors[item.label] ?? 'gray.600'] - }), - ), - ) - } - }} - listItemStyleProps={{ overflow: 'hidden' }} - highlightItemBg="gray.400" - toggleButtonStyleProps={{ variant: 'outline' }} - inputStyleProps={{ - focusBorderColor: highlightColor, - color: 'gray.800', - borderColor: 'gray.600', - }} - tagStyleProps={{ - display: 'none', - rounded: 'full', - bg: highlightColor, - height: 8, - paddingLeft: 4, - fontWeight: 'bold', - }} - hideToggleButton - itemRenderer={(selected) => selected.label} - /> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - color="gray.800" - > - {Object.keys(tagColors).map((tag) => { - return ( - <Flex key={tag} alignItems="center" justifyContent="space-between" width="100%" pl={2}> - <Box width="100%"> - <Text fontWeight="bold">{tag}</Text> - </Box> - <Menu isLazy placement="right"> - <MenuButton as={Button} colorScheme="" color="black"> - {<Box bgColor={tagColors[tag]} borderRadius="sm" height={6} width={6}></Box>} - </MenuButton> - <Portal> - {' '} - <MenuList minW={10} zIndex="popover" bgColor="gray.200"> - {colorList.map((color: string) => ( - <MenuItem - key={color} - onClick={() => - setTagColors({ - ...tagColors, - [tag]: color, - }) - } - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box> - </MenuItem> - ))} - </MenuList> - </Portal> - </Menu> - <IconButton - aria-label="Delete tag color" - variant="ghost" - icon={<DeleteIcon />} - onClick={() => { - setTagColors( - Object.fromEntries( - Array.from(new Set(selectedItems)).map((item) => { - return [item.label, tagColors[item.label] ?? 'gray.600'] - }), - ), - ) - setSelectedItems(selectedItems.filter((item) => item.value !== tag)) - }} - /> - </Flex> - ) - })} - </VStack> - </Box> - ) -} |