react-arborist icon indicating copy to clipboard operation
react-arborist copied to clipboard

Expose onSelect event to Tree component

Open mooijtech opened this issue 1 year ago • 2 comments

Hi James,

I need to listen for the tree node select event via the Tree component. Would it be possible to add this?

My use case is I'm using check-boxes to select multiple tree nodes using the handlers.select which has shift-click but I only want one event to fire.

Kind regards, Marten

mooijtech avatar Sep 25 '22 20:09 mooijtech

Yes! This is in the works.

jameskerr avatar Sep 26 '22 02:09 jameskerr

@jameskerr does this mean select can be a controlled state as well?

thien-do avatar Oct 17 '22 07:10 thien-do

Yes and no, in version 2, you can pass a "selection" prop to the tree with the id of the node you want selected. Everytime that prop changes, the selection will change to that id.

However, the tree still manages the selection state.

What's your use case @thien-do ?

jameskerr avatar Oct 17 '22 19:10 jameskerr

Thanks @jameskerr 😄

What's your use case

It is an app like Figma or Sketch, where there's a canvas and a tree on the left (using react-arborist). We want that when the user clicks on something on the canvas, it is also highlighted on the tree. For example when you click on a rectangle in Figma, its layer is also selected on the left sidebar.

you can pass a "selection" prop to the tree with the id of the node you want selected. Everytime that prop changes, the selection will change to that id.

I think that's good enough for us? Practically, it means we can change the selection from outside, isn't it? And with the onSelect props, we can manage an outside state as well?

thien-do avatar Oct 18 '22 02:10 thien-do

Awesome. That makes sense. The selection prop in version 2 will do exactly what you want. That was my use case as well.

Mine was like VSCode where you have tabs and each time you switch tabs, I wanted the selection to change to match the tab.

jameskerr avatar Oct 18 '22 15:10 jameskerr