search

frontend-collective / react-sortable-tree

Drag-and-drop sortable component for nested data and hierarchies
https://frontend-collective.github.io/react-sortable-tree/
MIT License
4.91k stars 904 forks source link

rst__expandButton and rst__collapseButton styling issue #807

Open Manali-addweb opened 4 years ago

Manali-addweb commented 4 years ago

I have been trying to change the styling of rstexpandButton and rstcollapseButton on the selected node or on some button not all on all the buttons. Any suggestion or any solution for this?

nahuelleiva commented 4 years ago

What do you want to accomplish? Setting a certain style for a clicked node? If that's so, check #771 for reference.

Manali-addweb commented 4 years ago

@nahuelleiva No, I want to set style on each rst_node which expands/collapses icons by adding a custom class on that with or without clicking on that. I've checked reference but no luck found for my requirement. Actually, I want to indicate some symbols between tree steps using CSS.

nahuelleiva commented 4 years ago

@Manali-addweb can you provide an example? An image, or something that illustrates what you want more clearly.

Manali-addweb commented 4 years ago

@nahuelleiva
Actually I want to display dependency between nodes in a tree ,something like this .so for that I had tried many solutions but not getting any proper way to achieve this . currently I am using react-sortable-tree version 2.6.0 with Ubuntu system

React-App4

nahuelleiva commented 4 years ago

So if I'm not getting this wrong, what you want to do is to build a relationship between nodes that are placed at a root level. And for this, you want to set like an icon (the icon with the vertical bars inside). I do not know if this component is prepared to do that... But changing the classes will affect all the nodes at the same time whether you want it or not. You may want a custom class for that node in particular when you add it to the tree setting some conditions before.

Maybe you can try creating your own style class with all you need inside, and adding a property in the Node object in which you can store the value of the sibling node in the tree if it happens they are at the same level (in this case the root level), and only if you have a value in that property you'll set the style class to the node. It's an idea that I came up with, I cannot provide you a code example right now. Let me know if this works for you.

Manali-addweb commented 4 years ago

Title adding custom class on each node

Steps As per suggestion added property in the Node object and also added own class.

What happens I Had added custom class on each node but it is not working . is there any way to add custom class on each node like we are adding rowHeight on highlighted element in image

OS version Ubuntu Screenshot-from-2020-10-21-16-24-21

sinanyaman95 commented 3 years ago

Were you able to achieve this custom style? @Manali-addweb