Comments (3)
Apologies if you don't find exactly what you're looking for. It's difficult to infer the specifics of the feature you're trying to create, and some creative problem solving on your part might be necessary. I am not a maintainer of this library, I am just a community member trying to help people solve issues with a library.
In order to "show/hide" the elements with this library you need to recompute the tree and set isOpen
to true
or false
, respectively, for each node. It seems that you want to show/hide all leaf elements (i.e. all elements not at "depth" zero). Assuming you have multiple root nodes you can create a function to recompute the tree setting the root nodes to open and the nodes of their subtrees to not open. If you wanted to provide business logic to figure out of a leaf should be open or not you would need to add properties to the node's public data and then use that to determine if the node should be open or not (see Option B or C).
I will do my best to create an example:
import {
NodeData,
NodePublicState,
OpennessStateUpdateRules,
} from 'react-vtree/dist/es/Tree';
// Types assumed for this example
interface ITreeWalkerData extends NodeData {
displayName: string;
depth: number;
}
type RecomputeTreeKeyValuePair = [
string,
(
| OpennessStateUpdateRules<
ITreeWalkerData,
NodePublicState<ITreeWalkerData>
>
| boolean
)
];
// for the brevity of this example I will assume the tree is of this structure
/**
ProjectA/
├── behavior.min.js
├── styles.css
├── vendor/lib.js
ProjectB/
├── behavior.min.js
├── styles.css
├── vendor/lib.js
├── perfect-scrollbar/
| ├── jquery.min.js
| ├── jquery.mousewheel.js
| ├── perfect-scrollbar.js
| └── perfect-scrollbar.css
├── examples/
| └── ...
**/
in your Tree component:
const ref = useRef<FixedSizeTree<ITreeWalkerData>>(null);
const [leafOpenness, setLeafOpenness] = useState(true)
const toggleLeafOpenness = useCallback(async (isOpen: boolean) => {
await ref.current?.recomputeTree(
Object.fromEntries(
// Note: This is for a tree with multiple root nodes
rootNodes.map(
(m): RecomputeTreeKeyValuePair => [
// createNodeId is a custom function to construct and ensure a unique id per node
createNodeId(m.key),
{
open: true, // because you said that you wanted only the leafs to close
subtreeCallback: (node) => {
/**
In here you can use node to look at the date and specific
further logic that determines the open state of each node.
Since you said that you only wanted to show/hide the leaf nodes,
I assumed that you have multiple root nodes and can just set the
open state of each leaf of those root nodes directly.
If you wanted to prevent the user from expanding the tree by
clicking on the root nodes then you might want to hide or disable
their ability to do so based on `leafOpenness`
**/
// Option A:
// This will toggle the openness of all nodes except for ProjectA and ProjectB
node.isOpen = isOpen; // NOTE: this is permitted by the library and is faster than using setOpen
// or Option B:
// This will toggle the openness of all nodes except for ProjectA and ProjectB and their direct nodes
if (node.data.depth > 1) {
node.isOpen = isOpen;
}
// or Option C:
// This will toggle the openness of all nodes except for ProjectA and ProjectB and any nodes that end with '.js'
if (node.data.displayName.endsWith('.js')) {
node.isOpen = isOpen;
}
},
},
]
)
)
);
setLeafOpenness(isOpen)
}, [rootNodes, setLeafOpenness]);
return (
<div>
<button onClick={() => toggleLeafOpenness(!leafOpenness)}>{leafOpenness ? "Hide Leafs" : "Show Leafs"}</button>
<FixedSizeTree
...
ref={ref}
>
...
</FixedSizeTree>
</div>
)
I hope that this helps! Please let me know if you have any questions about my example.
from react-vtree.
@orelHAnyvision, does the answer to #65 help you at all?
from react-vtree.
@gregjoeval nope
from react-vtree.
Related Issues (20)
- React VTree example is not working HOT 1
- how to close all nodes HOT 2
- Returning undefined from treeWalker throws error HOT 2
- Filtering of nodes HOT 1
- scroll to item as a prop HOT 2
- [help] async example HOT 1
- treeWalker is walking all nodes HOT 4
- Changing async tree shape re-opens nested items HOT 1
- Bump React version to 17
- children type NodeComponentType not exposed for consumption HOT 1
- Are there plans to release 3.0.0 soon? HOT 2
- I didn't find any where in the readme about sorting & filter feature ? HOT 1
- Expose row index to Node renderer HOT 3
- [v3.0.0-beta.3] (Safari) ReferenceError: Can't find variable: requestIdleCallback HOT 1
- Build fails with Typescript version v4.4 HOT 1
- The expanded children nodes are expanded even when we collapsed at the parent level. HOT 1
- Collapse specific row HOT 1
- How to update tree after dynamically modifying nodes height? HOT 1
- Setting component state onClick causes the tree to lose focus position during keyboard navigation and go to top of the rendered tree HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-vtree.