feat: support variable node height

[hasanayan]

Hello, this is a first attempt at supporting variable row heights. I tested it with the existing examples and it seems to work fine with both exact and dynamic row heights.

[jameskerr]

Very interesting! I am in the middle or re-working the code for a new version, so I am not going to merge this yet. But can you help me understand the steps you took?

Can you summarize the changes you've made in this branch?

What is the use case you needed the variable heights for?

[hasanayan]

Sure. We need to style our tree view so that rows have different height based on their levels or their order in the branch, that's why we needed this and we are currently using it with slight modifications from this PR. I was going to update this PR with our final changes and open others based on our needs but apparently now is not the right time. Do you have any date in mind to release the new version? I can tell you about our use cases.

Here is the summary of suggested changes in this PR;

• Tree now accepts rowHeight as a number or a function that returns the height based on RowHeightCalculatorParams<T>

export type RowHeightCalculatorParams<T> = Pick<
  NodeApi<T>,
  | "childIndex"
  | "children"
  | "data"
  | "parent"
  | "id"
  | "rowIndex"
  | "tree"
  | "isRoot"
  | "isLeaf"
  | "isClosed"
  | "isOpen"
  | "isAncestorOf"
  | "level"
>;

the omitted properties of the NodeApi could be passed, too. I wasn't well versed with the library and I did not include those states so that I don't break anything I don't know. Plus, whatever you provide to rowHeight calculation function, you have to track places that might trigger changes to them it internally and re-draw the list after the change.(explained in the last point) and I didn't want to do that until there is a green light from you 😄

-DnD cursor positioning relies on computing top offset of specific rows which was a simple rowHeight*index before, now there is a method that iterates the list from the first element until 1 before the target element, computes their height and sums them as top offset

-It renders VariableSizeList instead of FixedSizeList and the only different prop is itemSize. Now, it should be a function that returns row height based on row index.

-Whenever a change is made on the list data (re-ordering, renaming, dnd etc), it calls VariableSizeList.resetAfterIndex() so that the heights of the row are updated

[jameskerr]

Thank you for the detailed explanation. This is a good plan. I don't have a date for the new release. But I am actively working on it.

[josh-complex]

Would really love to see this feature 👍 We use dynamic row heights in our current unvirtualized tree, and working this into the current arborist implementation is rough to say the least

[simonpeters]

Would really love to see this feature 👍 We use dynamic row heights in our current unvirtualized tree, and working this into the current arborist implementation is rough to say the least

What library are you using?

[hoarseProgramming]

Hi Hasanayan! I'm interested in trying out your variable row sizes, and was wondering if you're still working with your version of react-arborist and how you've been working with the variable row sizes in your project? Since react-arborist isn't being maintained anymore it would be cool to try out your version.