Compare commits
3 Commits
Author | SHA1 | Date |
---|---|---|
Vitaliy Filippov | 8567a14027 | |
Vitaliy Filippov | f530c8301c | |
Vitaliy Filippov | ea707b2c08 |
|
@ -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++;
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "dynamic-virtual-scroll",
|
||||
"version": "1.0.13",
|
||||
"version": "1.0.15",
|
||||
"author": {
|
||||
"name": "Vitaliy Filippov",
|
||||
"email": "vitalif@yourcmc.ru",
|
||||
|
|
Loading…
Reference in New Issue