Tree view: add capability for an "expand/collapse all" toggle
See original GitHub issueDescribe the issue. What is the expected and unexpected behavior?
Currently, the expanded state of a subtree is handled internally in a useState
hook in TreeViewListItem.tsx
. We are trying to add a toggle button to expand/collapse everything in the tree, but we can’t control that state from outside the component.
I propose a new prop allExpanded
that is passed down the tree similarly to defaultAllExpanded
, and if it is defined its value is used instead of the internal expanded state. a null/undefined
value would allow the internal state to work, a true
value would force the entire tree to expand, and a false
value could force the entire tree to collapse. When the user clicks one of the toggles in the tree itself, it could be set to null
again so that the internal state kicks back in.
Maybe instead of an external prop, that allExpanded
behavior could be handled internally at the top level, and a button could be shown to the left of the search bar (or in place of it if search is disabled) if a showExpandAll
boolean is passed. Maybe that would be better, to keep it consistent with the existing internal state.
Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
Observable in the workspace examples.
Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? Enhancement / nice to have.
What is your product and what release version are you targeting?
https://github.com/konveyor/virt-ui (Red Hat Migration Toolkit for Virtualization), no particular release target.
cc @kmcfaul
Issue Analytics
- State:
- Created 3 years ago
- Comments:12 (6 by maintainers)
I think even if we allow the flexibility of adding whatever in the header, we still need a prop for the expand/collapse all state so the consumer can control that via whatever the put in the header.
Makes sense. The scope of this particular issue should probably be limited to the ability to pass that expanded/collapsed state in via props, since that would allow the consumer to add their own expand/collapse control anywhere they need to, including in whatever general purpose toolbar comes later.