clauderic / clauderic/react-tiny-virtual-list
getTotalSize when using itemSize array.
- Dominant language
- TypeScript
- Stars
- 2.5k
- Forks
- 159
- PR merge metrics
- No merged PRs in 30d
Description
When I learned `itemSize` can be a getter or array — I was hoping the array approach would help with the `getTotalSize` function and reduce the total height of the container — instead of estimating it.
In of our use cases the heights for each row are much different, resulting in janky scrolling and poor estimates for the total height.
The below example is just me trying to explain what I mean. The actual implementation might be different, for example, it might make sense to determine this in the `constructor` and `updateConfig` — as well as have some caching.
```javascript
/**
* Total size of all items being measured.
* This value will be completedly estimated initially.
* As items as measured the estimate will be updated.
* ---
* When itemSizeGetter is an array, use it to determine the total height.
*/
getTotalSize(): number {
const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
// Just an example.
if (Array.isArray(this.itemSizeGetter)) {
return this.itemSizeGetter.reduce((acc, currentValue) {
return acc + currentValue
}, 0)
}
return (
lastMeasuredSizeAndPosition.offset +
lastMeasuredSizeAndPosition.size +
(this.itemCount - this.lastMeasuredIndex - 1) * this.estimatedItemSize
);
}
```
@clauderic do you have any thoughts around this? I wouldn't mind passing a property to accomplish this either. Potentially we can do the same if `itemSizeGetter` is a function.
## Update
Looking at the code it seems that `itemSizeGetter` is always a function within the component:
```Typescript
itemSizeGetter = (itemSize: Props['itemSize']) => {
return index => this.getSize(index, itemSize);
};
```
I am currently trying out adding a `preCalculateTotalHeight` bool prop in my fork.
Contributor guide
Assessment
This issue has not been assessed yet.