react-tiny-virtual-list
react-tiny-virtual-list copied to clipboard
getTotalSize when using itemSize array.
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.
/**
* 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:
itemSizeGetter = (itemSize: Props['itemSize']) => {
return index => this.getSize(index, itemSize);
};
I am currently trying out adding a preCalculateTotalHeight
bool prop in my fork.
Here is an example of what I am describing above
const range = N => Array.from({length: N}, (_, k) => k + 1);
class MixedHeight extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
items: range(1000).map(() => {
return Math.max(Math.ceil(Math.random() * 1000), 50);
}),
};
}
renderItem = ({style, index}: {style: ItemStyle; index: number}) => {
return (
<div className="Row" style={style} key={index}>
Row #{index}. Height: #{this.state.items[index]}
</div>
);
};
render() {
return (
<div className="Root">
<VirtualList
width="auto"
height={400}
itemCount={1000}
renderItem={this.renderItem}
itemSize={this.state.items}
className="VirtualList"
/>
</div>
);
}
}
Got it to work, about to put in a PR. Scrolling is buttery smooth.
<VirtualList
preCalculateTotalHeight
width="auto"
height={400}
itemCount={1000}
renderItem={this.renderItem}
itemSize={this.state.items}
className="VirtualList"
/>