Comments (7)
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.
from react-vtree.
@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.
from react-vtree.
@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.
from react-vtree.
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
from react-vtree.
@ramHruday, not sure I understand your case. Could you explain it with more details?
from react-vtree.
Well, since there is no recent activity, I'm going to close this issue. Fell free to reopen!
from react-vtree.
@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)
- 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 - 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?
from react-vtree.
Related Issues (20)
- How easy would it be to have rows with columns? 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
- Show/hide leaf nodes by outer prop HOT 3
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.