lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
983 stars 82 forks source link

extensible view state #48

Closed dlech closed 2 years ago

dlech commented 2 years ago

It would be useful to be able to add addition custom state to the viewState property of a ControlledTreeEnvironment.

One use case is for having an "active" item separate from the focused item. This state is usually indicated by making the title <strong> and/or highlighting the background.

Another use case could be a list of disabled items. These are usually rendered with the title color muted and don't respond to keyboard/mouse input.

lukasbach commented 2 years ago

I looked into it a bit, and found that even though right now it is fairly easily possible, it would make future performance improvements a bit harder. Right now, items pretty much rerender for all viewState updates (of course item renderers can still manually memoize), but if I want to add more precise update logic this will become harder if view state can be arbitrarily extended.

A long-term solution would be to overhaul how viewState works, make its properties all have the same type and abstract how it's used and how it is defined.

Until then, I added a technical workaround that can be used for the time being, although it might be deprecated in a future version if such performance improvements will be added and if they will collide with the current implementation:

You can add arbitrary data to viewState (yes TypeScript won't allow them, but you still can), and in InteractionManager:createinteractiveelementprops (see https://rct.lukasbach.com/docs/api/interfaces/InteractionManager/#createinteractiveelementprops) you can access the viewstate of the current tree when creating the render props for an item.

dlech commented 2 years ago

What do you think about just adding an activeItem (similar to focusedItem) instead of generic additions?

lukasbach commented 2 years ago

I now added a way to define custom tree view props, you can see how to use them here.