diff --git a/src/adverts/components/filter/filters/FilterDialog.tsx b/src/adverts/components/filter/filters/FilterDialog.tsx index c9992b3..f916db1 100644 --- a/src/adverts/components/filter/filters/FilterDialog.tsx +++ b/src/adverts/components/filter/filters/FilterDialog.tsx @@ -20,6 +20,7 @@ import { TagsContext } from 'tags' import { AuthContext } from 'auth' import { CategoriesFilter } from './CategoriesFilter' import { StringArrayFilter } from './StringArrayFilter' +import { CategoriesFilter2 } from './experimental/CategoriesFilter2' export interface SelectedFilters { categories: string[] @@ -119,10 +120,19 @@ export const FilterDialog: FC<{ onChange={setSizes} /> )} - + { + // disable previous version of category filter + false && ( + + ) + } {model.tags.length > 0 && ( , rejected: () => , resolved: (categories) => ( - + <> + + Kategorier + + + ), }) } diff --git a/src/adverts/components/filter/filters/experimental/TreeSelect.tsx b/src/adverts/components/filter/filters/experimental/TreeSelect.tsx index d8d629c..cb8d434 100644 --- a/src/adverts/components/filter/filters/experimental/TreeSelect.tsx +++ b/src/adverts/components/filter/filters/experimental/TreeSelect.tsx @@ -31,6 +31,7 @@ export function TreeSelect({ value: T selected: boolean pselected: boolean + cselected: boolean expanded: boolean children: Node[] canExpand: boolean @@ -40,21 +41,32 @@ export function TreeSelect({ const selectedSet = new Set(selected) const expandedSet = new Set(expanded) - const buildNode = (item: T, pselected: boolean): Node => ({ - label: getLabel(item), - value: item, - selected: selectedSet.has(getKey(item)), - expanded: expandedSet.has(getKey(item)), - canExpand: - !expandedSet.has(getKey(item)) && getChildren(item).length > 0, - canCollapse: - expandedSet.has(getKey(item)) && getChildren(item).length > 0, - pselected, - children: getChildren(item).map((child) => - buildNode(child, pselected || selectedSet.has(getKey(item))) - ), - }) + // From input items, construct display nodes that can feed ourr recursive rendering + const buildNode = (item: T, pselected: boolean): Node => + ((n: Node) => ({ + ...n, + cselected: n.children.some((c) => c.selected || c.cselected), + }))({ + label: getLabel(item), + value: item, + selected: selectedSet.has(getKey(item)), + pselected, + cselected: false, + expanded: expandedSet.has(getKey(item)), + canExpand: + !expandedSet.has(getKey(item)) && getChildren(item).length > 0, + canCollapse: + expandedSet.has(getKey(item)) && getChildren(item).length > 0, + children: getChildren(item).map((child) => + buildNode(child, pselected || selectedSet.has(getKey(item))) + ), + }) + const flexCells = 16 + // Render a node using some neat flex trix + // - indentation is done by flex={level} + // - buttons and checkboxes have flex={1} + // - content fills out with flex={flexCells - level} const renderNode = (node: Node, level: number) => ( @@ -91,7 +103,9 @@ export function TreeSelect({ onSelected( @@ -104,7 +118,7 @@ export function TreeSelect({ } /> - + {node.label}