Better control on nodes style

[Lothiraldan]

Hello,

first of all thank you for react-virtualized-tree, it's working well so far and I hope will fix the performance issues I saw with other tree modules.

I wanted to use bulma levels https://bulma.io/documentation/layout/level/ in my nodes but the output were not as great as expected:

After digging a bit,and with some helps, I figured out that by using padding instead of margin, the output will be the one expected and the content will not be cropped:

I ended up doing the modification in my fork branch: master...Lothiraldan:Lothiraldan-patch-1

I don't think I should make a PR as simply changing margin into padding would be too specific, I'm pretty sure some people might need margin and not padding.

Do you have an idea which API could we have for supporting both? Maybe having a styleFunction argument that can return the style for each node, what do you think?

[diogofcunha]

Hi @Lothiraldan, thanks for the feedback.

I believe we could take an approach like the one used in react-virtualized, I can supply the default style in the render function and if can be used or not, I think that's the easiest course of action.

That also means nodeMarginLeft prop can be deprecated.

[Lothiraldan]

I guess we could, but as the Node is rendered inside a react-tree-virtualized component, how could I customize the render function?

[diogofcunha]

Hi @Lothiraldan.

It's easy to achieve, all the rendering needs to be done by the user, this makes sense as it adds all the power to the user side. I already implemented it at https://github.com/diogofcunha/react-virtualized-tree/pull/50/files?w=1.

Now I need to figure out how to do it without a breaking change, otherwise it will need a major release.

[wheelibin]

Hi @diogofcunha, thanks for the library!

I am also needing to use padding instead of margin for the layout.
To avoid a breaking change, could we use a feature switch prop to toggle the behaviour?
e.g. <Tree userStyles={true}.. or something similar

That would then either wrap the renderer in the styled div as per the current implementation (userStyles={false}), or pass the styles object to to the renderer as per your latest change shown above (userStyles={true}).

Perhaps a bit dirty, but would retain backward compatibility?

Cheers

[diogofcunha]

Hi @wheelibin.

Makes sense as a mid term solution, thanks.

I will add that as soon as I can and open a PR that will deprecate all of that on version 3

[msgitb]

Hi @diogofcunha, also thanks for the library!

I'd love to see this functionality, because I also need to change the margin for a padding.
Thanks again!

[naxis18]

Hi @diogofcunha ,
Many thanks for the react-virtualized-tree lib. Applying style to the node by the user will be a very important feature to have. Is there any short-term perspective to be implemented?

[diogofcunha]

I'm gonna do a breaking change over weekend.

Cheers

[diogofcunha]

This was released as a breaking change as part of version 3. Sorry for the delay, I'm gonna be more proactive in the future.