How to Implement infinite scroll in tree component

[ramHruday]

I am having trouble in implementing infinite scroll in a tree,
How do I approach this using vtree

[kunalnhes]

Using React Material TreeItem for Node, getting an error when selecting the node:

TreeItem.js:367 Uncaught TypeError: focus is not a function at handleFocus (TreeItem.js:367) 

Sample Code:

<Tree treeWalker={treeWalker} itemSize={30} height={600}> {Node} </Tree>

Node Component:

const Node = ({data,data: {isLeaf,nestingLevel,name}, isOpen, style, toggle}) => ( <div style={{ ...style, alignItems: 'center', display: 'flex', marginLeft: nestingLevel * 40 + (isLeaf ? 48 : 0), }} > { !isLeaf && ( <div onClick={toggle}> {!isOpen ? <Expandcon/>:<CollapseIcon/>} </div> ) } <div> <TreeItem nodeId={data.id} label={name}> </TreeItem> </div> </div>

TreeItem is the custom Material UI. Stuck with it think somthing to do with forwarding the ref,but couldnt find a way around. Can you help.

[Lodin]

@kunalnhes, unfortunately, MaterialUI tree cannot work with the react-vtree because it requires nested TreeItems to display the tree structure (more details in #10).

Regarding your question: since react-vtree does not provide any other handlers except for ones you can receive in the Node component, the error is hiding somewhere else. I guess it is connected with the nesting MaterialUI requires for tree structures.

[Lodin]

@ramHruday, you can track the current scroll via the scrollTop for the ref of the Tree component. When the scroll alsmost reaches the bottom of the Tree component, the new data for the infinite scroll can be loaded. After that the treeWalker is re-created with the new data, and because of it the Tree component will be re-rendered to consume the new data. Well, something like that.

[ramHruday]

Thanks , @Lodin , My use case is more of scrolling in child-level also.
Shifted to a custom approach for implementing this.
Let me know if this is possible in treewalker

[Lodin]

@ramHruday, not sure I understand your case. Could you explain it with more details?

[adsee42]

@Lodin
Sorry for commenting on a closed issue, but I do really need to implement this. Infinite scroll + async
An example would be very useful!.

My use case: a contact list (hierarchy structure: company -> department -> contact)

1. for init, fetching from server 30 company and render
   1.1. the infinite scroll and async part is for company only
   1.2. when user scrolls down, more company would be downloaded and rendered
2. for department and contact, when user clicks one company, its departments get downloaded and rendered; and department clicked, user downloaded and rendered.

I saw this story book example. It shows solution for 2..
And also an example for multiple roots; this is partly an answer to 1.
How can I combine this two, and add Infinite scroll + async to multiple roots?

[Lodin]

@adsee42, sorry for the late answer, I was a bit busy at the end of the year.

I suppose, you need react-window-infinite-loader. This library allows making an infinite loader for react-window, a library react-vtree is based on. Combining it with the multiple roots (and probably the async prop which allows preserving the openness state between updates) may allow you to do the trick