React-sortable-tree: How do I border the selected node?

[yunusunver]

I just want to change the border of the node I selected when I click, without doing drag and drop. How can I do that?
Like the borders change when I do the search.

[nreis11]

Here's a quick example from the repo's demo sandbox. You can keep track of the selected node in the state using a click handler on the node. Most of the added code is from line 60. In this case, I'm just adding styling inline, but obviously you can use a CSS class instead.

https://codesandbox.io/s/rstnodeclickhandler-81sew?file=/App.js:1469-1486

[yunusunver]

Here's a quick example from the repo's demo sandbox. You can keep track of the selected node in the state using a click handler on the node. Most of the added code is from line 60. In this case, I'm just adding styling inline, but obviously you can use a CSS class instead.

codesandbox.io/s/rstnodeclickhandler-81sew?file=/App.js:1469-1486

Thanks 🙏 👍👍

[jo47011]

Hey @nreis11,

thanks for your example. Works fine and helped me getting started.

https://codesandbox.io/s/rstnodeclickhandler-81sew?file=/App.js:1469-1486

Your style assignment raises a Failed prop type: Invalid prop style it works using this:

style: node === this.state.nodeClicked ? {
border: "3px solid blue"
} : {}

I thought this may help other newcomers. Great package!!!

Happy hacking
Jo

[nreis11]

@jo47011 Good catch. I've updated the example to reflect this.

In my own code, I used classes instead to apply the styling so probably why it didn't occur to me.

generateNodeProps={(rowInfo) => {
  const { node } = rowInfo;
  const className = [];
  activeNode &&
    activeNode.id === node.id &&
    className.push("active-node");
  node.isInternal && node.mapping
    ? className.push("mapped")
    : className.push(highlightUnmapped ? "un-mapped" : "");

  return {
    onClick: () => onSelectNode(rowInfo),
    className: className.join(" "),
    id: node.id,
  };
}}

[kayesn786]

@nreis11 @jo47011 any workaround to select multiple nodes with the help of ctrl+ click and highlight them?

[jo47011]

any workaround to select multiple nodes with the help of ctrl+ click and highlight them?

Sorry haven't tried this.

[nreis11]

@kayesn786 Yea this is possible using event.ctrlKey to check if the control key is pressed while clicking on a node. I created a quick example. I am using an object to store the nodes as this is more time efficient than using an array. Then I check if the node id is a prop in the object.

https://codesandbox.io/s/rstmultiplenodes-lkkno?file=/App.js

[kayesn786]

@nreis11 thanks.
I have implemented using an array.