React-sortable-tree: Interacting With Nodes

[tchubs]

This is more of a question than an issue, I am somewhat new to the github ecosystem. I apologize if this is not a good use of the "issues" forum.

Can you interact via onClick() onMouseEnter() for the nodes?
I saw that you can add a button by passing it in using the title prop.
Is this the only way to interact with the nodes?

The only reference I found to interacting with buttons is the text for generateNodeProps:

"Generate an object with additional props to be passed to the node renderer. Use this for adding buttons via the buttons key, or additional style / className settings."

Sorry if this is a dumb question and I missed the link to the documentation.
Perhaps is there an example of this somewhere?

[fritz-c]

That's a perfectly good question. I just tried this in my environment, and it seemed to work:

generateNodeProps={rowInfo => ({
    onClick: () => console.log(1),
})}

[Guzinsson]

Click event fires when I click on "+" or "-" too. How can I avoid it?

[fritz-c]

@Borknagar Take the event parameter passed to the onClick event handler, and call event.stopPropagation(); with it.

[tchubs]

Thank you Fritz! That code worked quite well.

Following up, how do you get the information off of the node? I see it works with the little 'i' button's you added in the demo but I am only receiving the React synthetic event and another event.

I'd be looking for an identifier that I could use with the backing model (state) to determine which node had been clicked so that I could allow the user to do things such as:

• Change the title or other attributes of the node
• Add nodes as children
• Delete the node

Thanks for your help! It really is a lovely tree.

[fritz-c]

@tchubs As with the demo code, you don't fetch the node information from the event call, but rather pass it to the function whenever you create the callback (in the demo, I passed it directly in render(), or you can create a curried function / closure of your own).

As for changing the node info / adding node children / deleting nodes from within your code, I would recommend using some of the (admittedly poorly documented) helper functions that are exported along with the tree:

• Changing node attributes / adding children: changeNodeAtPath
• Deleting nodes: removeNodeAtPath

If the usage is a bit confusing, please refer to some of the usage examples that show up in the tree-data-util tests before you ask here.

[fritz-c]

@tchubs Just remembered one more purpose-made utility function for adding child nodes:
addNodeUnderParent

[tchubs]

@fritz-c - Thanks for the help. The tree was very helpful in a demo last week.

Regarding the above, I have been able to add an onClick handler to a button as you have in the demo code but I wanted to add a handler directly on the node itself that you are rendering.

In other words I want to catch a click on the right hand side text box beside the draggable grey tab. Is that possible?

I realize I can do by doing a custom render via a component rendered over the right hand side box, but I wanted to try and hook into your original component.

Also, thanks for the tree-data-util tests, those will be very helpful the next couple of weeks!

[robgamlin]

Regarding
@Borknagar comment: Click event fires when I click on "+" or "-" too. How can I avoid it?

@fritz-c reply: Take the event parameter passed to the onClick event handler, and call event.stopPropagation(); with it.

How can we discern from the onClick event if the (+)/(-) has been clicked or the node itself has been clicked.
Clicking (+)/(-) does correctly invoke the onChange handler, so is there a way to detect the (+)/(-) click within onClick so we can inhibit/adapt our custom onClick handling ?

Thanks @fritz-c , a dumb question now I know the answer. But for anyone else with same block as me:

generateNodeProps={rowInfo => ({
  onClick: (event) => { 
    if(event.target.className.includes('collapseButton') || event.target.className.includes('expandButton')) {
      // Ignore the onlick, or do something different as the (+) or (-) button has been clicked.
  }
  else {
    clickAction(rowInfo, 'clickNode');
  }
},

[fritz-c]

@robgamlin I think what I usually do to discriminate between different elements in situations like that is to check something unique on the event.target element, like an id or className.

[Trinakriae]

Hello @fritz-c, sorry to open this old thread again but my issue is realted to one of the solutions offered above. I am using React with TypeScript and my code looks like this:

```
treeData={this.state.treeData}
onChange={treeData => this.onChange(treeData)}
maxDepth={4}
generateNodeProps={rowInfo => ({
onClick: () => this.onSelectNode(rowInfo),
buttons: [,
]
})}

                />

```

In one of the replies you state

Take the event parameter passed to the onClick event handler, and call event.stopPropagation(); with it.

but if I change my code as r @robgamlin suggests into:

generateNodeProps={rowInfo => ({ onClick: (event) => this.onSelectNode(rowInfo, event),

the parameter event, contrarily to what happens inside the Buttons, is not populated since just rowInfo gets passed inside the delegate function. From where do you get this parameter? Thanks!

[rmaravanthe]

How about rightClick guys. Please drop your answer

[rmaravanthe]

How can I dynamically expand the tree view data or how can I make dynamic click if data is there. Can somebody please suggest.

[irfanandratama]

what if i want to disable onclick on parent?