Closed ramHruday closed 4 years ago
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.
@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.
@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.
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
@ramHruday, not sure I understand your case. Could you explain it with more details?
Well, since there is no recent activity, I'm going to close this issue. Fell free to reopen!
@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)
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?
I am having trouble in implementing infinite scroll in a tree, How do I approach this using vtree