rerender / recalculate handle for the VList

[Razum]

Hi @inokawa!

First of all, thank you for creating such a wonderful component.

I'm currently facing the same issue mentioned by @mattwondra here.

I've noticed that triggering a resize causes Vlist to recalculate its children's positions and fixes the layout. Since the shift issue seems to be more complex and requires significant effort, is it possible to add a recalculate handler to the VList?

Thanks in advance!

cc @LookRain

[inokawa]

Hello @Razum , I'm not sure what "recalculate handler" means. Is it something like below?

const ref = useRef(null);
<VList
  ref={ref}
  onScroll={(offset)=> {
    if (offset < 100) return ref.current.dontFixChildrenPosition();
    ref.current.fixChildrenPosition()
  }}
>

[Razum]

@inokawa

The main idea was to add a new method here.

If we add new elements to <VList shift reverse /> and it causes the UI to break, we could use ref.current.recalculate() to update the item sizes accordingly, similar to how it is done for the ACTION_ITEM_RESIZE action here.

[inokawa]

Thanks, I understood.

I think recalculate like method will not be suitable for virtua because of its architecture, but the idea is helpful. I'll try to think this hard problem again.

[inokawa]

The point is that virtua have to know where the items are removed from/added to, before modifying DOM on next render. Currently shift prop is the one for the purpose to notify the top of the list was modified. Probably we have to do the similar thing even if we add a new method.

[Razum]

I would consider not just a flexible component that easily adapts to passed properties and flags, but rather a component that operates in different modes: standard and reverse. In standard mode, it would be <VList />, and in reverse mode, <VList mode="reverse" />. Each mode operates with different strategies for size, offsets, and scroll calculations, as there are too many differences between them, but they use the same cache.

Under the hood, these could be different Virtualizers.