Compare commits

...

3 Commits

4 changed files with 18 additions and 6 deletions

View File

@ -62,7 +62,7 @@ export function virtualScrollDriver(props, oldState, getRenderedItemHeight)
if (!lastItemSize)
{
// Some required items in the end are missing
return newState;
lastItemSize = 0;
}
lastItemsHeight += lastItemSize < props.minRowHeight ? props.minRowHeight : lastItemSize;
lastVisibleItems++;

View File

@ -5,12 +5,12 @@ of visible items and skip items that are offscreen. You may also have heard abou
"buffered render" or "windowed render" - it's the same.
There are plenty of virtual scroll implementations for JS.
Some of them are part of a larger UI library (ag-grid, ExtJS and so on),
some of them are more standalone (react-virtualized, react-window, ngx-virtual-scroller, react-dynamic-virtual-list).
Some of them are part of a larger UI library (ag-grid, ExtJS and so on), some of them are more
standalone (react-virtualized, react-window, ngx-virtual-scroller, ngx-ui-scroll, react-dynamic-virtual-list).
However, there is a thing that they all miss: dynamic (and unknown apriori) row heights.
Some implementations allow to set different row heights for items, but you must calculate
all heights before rendering; some allow dynamic row heights, but have bugs and do not really work;
all heights before rendering; some allow dynamic row heights, but have bugs and act weird or don't really work;
others just force you to use fixed row height. Most implementations are also tied to some specific
UI component or framework and are unusable with other ones.

View File

@ -36,10 +36,22 @@ export class VirtualScrollList extends React.Component
setItemRef = []
itemRefs = []
itemRefCount = []
makeRef(i)
{
this.setItemRef[i] = (e) => this.itemRefs[i] = e;
this.setItemRef[i] = (e) =>
{
// If the new row instance is mounted before unmouting the old one,
// we get called 2 times in wrong order: first with the new instance,
// then with null telling us that the old one is unmounted.
// We track reference count to workaround it.
this.itemRefCount[i] = (this.itemRefCount[i]||0) + (e ? 1 : -1);
if (e || !this.itemRefCount[i])
{
this.itemRefs[i] = e;
}
};
}
renderItems(start, count, is_end)

View File

@ -1,6 +1,6 @@
{
"name": "dynamic-virtual-scroll",
"version": "1.0.13",
"version": "1.0.15",
"author": {
"name": "Vitaliy Filippov",
"email": "vitalif@yourcmc.ru",