virtual-scroller - npm Package Compare versions

Comparing version 1.0.26 to 1.1.0

bundle/virtual-scroller-dom.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function n(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function i(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,o=window.pageYOffset,s=window.pageXOffset;return{top:t.top+o-i,left:t.left+s-n,width:t.width,height:t.height}}function o(){return window.pageYOffset}function s(){return window.innerHeight}function r(){return window.innerWidth}function a(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function h(){if(u()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,a(["[virtual-scroller]"].concat(n)))}}function u(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function d(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var m=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.reset()}var t,n,i;return t=e,(n=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),o=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&h("Item spacing",o),o}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,o=this.lastMeasuredItemIndex,s=!1,r=e;r<=t;){var a=this._getItemHeight(r,n);void 0!==a&&(this.set(r,a),(void 0===i||r<i)&&(this.measuredItemsHeight+=a,s||(this.firstMeasuredItemIndex=r,s=!0)),(void 0===o||r>o)&&(void 0!==o&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=r)),r++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&d(t.prototype,n),i&&d(t,i),e}();function l(e){return e.toFixed(2)+"px"}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){I(e,t,n[t])})}return e}function g(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function I(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var f=250,S=function(){function a(i,r){var d,l,g,S=this,p=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),I(this,"updateLayout",function(){return S.onUpdateShownItemIndexes({reason:"manual"})}),I(this,"onScroll",function(){return S.onUpdateShownItemIndexes({reason:"scroll"})}),I(this,"updateScrollPosition",function(){return S.getState().scrollY=o()}),I(this,"layout",function(){return S.updateLayout()}),I(this,"onResize",(d=function(e){S.isMounted&&S.shouldUpdateLayoutOnWindowResize(e)&&(h("~ Window width changed, re-measure item heights. ~"),S.setState(S.getInitialLayoutState(),function(){S.onInitialRender("resize")}))},l=f,function(){clearTimeout(g),g=setTimeout(d,l)})),I(this,"updateShownItemIndexes",function(e){var t=S.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,o=t.redoLayoutAfterRender,s=S.getBeforeItemsHeight(n,i),r=S.getAfterItemsHeight(n,i);S.updateWillBeHiddenItemHeightsAndState(n,i),h("~ Layout results "+(S.bypass?"(bypass) ":"")+"~"),h("First shown item index",n),h("Last shown item index",i),h("Before items height",s),h("After items height",r),h("Average item height (calculated on previous render)",S.itemHeights.getAverage()),u()&&(h("Item heights",S.getState().itemHeights.slice()),h("Item states",S.getState().itemStates.slice())),o&&h("Redo layout after render"),void 0!==S.firstSeenItemIndex&&(n>S.lastSeenItemIndex+1||i<S.firstSeenItemIndex-1)&&(S.firstSeenItemIndex=void 0,S.lastSeenItemIndex=void 0),S.onBeforeShowItems(n,i),S.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:s,afterItemsHeight:r},function(){return e(o)})}),I(this,"updateShownItemIndexesRecursive",function(){S.updateShownItemIndexes(function(e){e?setTimeout(function(){S.isMounted?S.updateShownItemIndexesRecursive():S.onDoneUpdatingItemIndexes()},0):S.onDoneUpdatingItemIndexes()})}),I(this,"restoreScroll",function(){var e=S.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;S.restoreScrollAfterPrepend=void 0;var i=S.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(h("Restore scroll position: scroll by",i),window.scrollTo(0,o()+i))}),I(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==S.getItemsCount()&&!S.isUpdatingItemIndexes){if(clearTimeout(S.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==S.latestLayoutScreenTopAfterMargin&&o()<S.latestLayoutScreenTopAfterMargin&&S.getState().firstShownItemIndex>0||void 0!==S.latestLayoutScreenBottomAfterMargin&&o()+s()>S.latestLayoutScreenBottomAfterMargin&&S.getState().lastShownItemIndex<S.getItemsCount()-1;if(h(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return S.onUserStopsScrollingTimeout=setTimeout(S.onUserStoppedScrolling,100)}h("~ Update layout (".concat(t,") ~")),S.isUpdatingItemIndexes=!0,S.updateShownItemIndexesRecursive()}}),I(this,"onUserStoppedScrolling",function(){S.isMounted&&S.updateLayout("stopped scrolling")});var v=p.getState,y=p.setState,w=p.onStateChange,x=p.customState,b=p.preserveScrollPositionAtBottomOnMount,H=p.shouldUpdateLayoutOnWindowResize,C=p.measureItemsBatchSize,k=p.bypass,O=p.bypassBatchSize,A=p.estimatedItemHeight,M=p.onItemFirstRender,P=p.state;h("~ Initialize ~"),P&&(r=P.items),this.bypass=k,this.bypassBatchSize=O||10,this.initialItems=r,this.estimatedItemHeight=A,this._shouldUpdateLayoutOnWindowResize=H,this.measureItemsBatchSize=void 0===C?50:C,M&&(this.onItemFirstRender=M),i()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(i()),y?(this.getState=v,this.setState=y):(this.getState=function(){return S.state},this.setState=function(i,o){var s=S.state;S.state=c({},s,i),function(i,o){if(n(i,o))return!0;if("object"!==e(i)||null===i||"object"!==e(o)||null===o)return!1;var s=Object.keys(i),r=Object.keys(o);if(s.length!==r.length)return!1;for(var a=0;a<s.length;a++)if(!t.call(o,s[a])||!n(i[s[a]],o[s[a]]))return!1;return!0}(S.state,s)||(w&&w(S.state,s),S.isMounted&&S.onUpdate(s)),o&&o()}),P&&h("Initial state (passed)",P),this.getContainerNode=i,this.itemHeights=new m(i,this.getState),b&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(P||this.getInitialState(x),function(){S.itemHeights.onInitItemHeights()}),h("Items count",r.length),A&&h("Estimated item height",A)}var d,l,S;return d=a,(l=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=c({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return h("Initial state (created)",n),h("First shown item index",n.firstShownItemIndex),h("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems.length;return n>0&&(e=Math.min(0,n-1),t=this.getLastShownItemIndex(e,n)),this.preserveScrollPositionAtBottomOnMount&&(e=0,t=n-1),this.onBeforeShowItems(e,t),{itemHeights:new Array(n),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onBeforeShowItems",value:function(e,t){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var n=e;n<=t;)this.onItemFirstRender(n),n++;this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}else{if(e<this.firstSeenItemIndex){for(var i=e,o=Math.min(t,this.firstSeenItemIndex-1),s=i;s<=o;)this.onItemFirstRender(s),s++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var r=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=r;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.onInitialRender("mount"),this.isMounted=!0,this.screenWidth=r(),this.screenHeight=s(),this.updateScrollPosition(),window.addEventListener("scroll",this.updateScrollPosition),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onInitialRender",value:function(e){var t=this.getState(),n=t.firstShownItemIndex,i=t.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(n,i),this.preserveScrollPositionAtBottomOnMount?window.scrollTo(0,o()+(document.documentElement.scrollHeight-this.preserveScrollPositionAtBottomOnMount.documentHeight)):this.onUpdateShownItemIndexes({reason:e})}},{key:"shouldUpdateLayoutOnWindowResize",value:function(e){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1;var t=r(),n=s(),i=this.screenWidth,o=this.screenHeight;return this.screenWidth=t,this.screenHeight=n,t!==i||n!==o&&(this.onUpdateShownItemIndexes({reason:"resize"}),!1)}},{key:"onUnmount",value:function(){this.isMounted=!1,window.removeEventListener("scroll",this.updateScrollPosition),this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,o=t.lastShownItemIndex;i===e.firstShownItemIndex&&o===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,o)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(h("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),u()&&h("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){u()&&(h("~ Item state changed ~"),h("Item",e),h("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),h("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(h("~ Item height changed ~"),h("Item",e),h("Previous height",n),h("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=i(this.getContainerNode()).top,n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,o,s,r=0,a=!1,u=0;u<this.getItemsCount();){var d=this.itemHeights.get(u);if(void 0===d){h("Item ".concat(u," height hasn't been measured yet: render and redo layout")),s=u,void 0===i&&(i=u);var m=t-(n+r);o=Math.min(u+(this.getEstimatedItemsCount(m)-1),this.getItemsCount()-1),a=!0;break}if(r+=d,void 0===i&&n+r>e&&(h("First visible item index (including margin)",u),i=u),u<this.getItemsCount()-1&&(r+=this.getItemSpacing()),n+r>t){h("Last visible item index (including margin)",u),void 0!==i&&(o=u);break}u++}return void 0!==i&&void 0===o&&h("Last item index (is fully visible)",o=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(o<this.restoreScrollAfterPrepend.index&&(o=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(o=Math.min(o,s+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:o,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(!(i>e&&n<t))return this.getOffscreenListShownItemIndexes();var o=this.getVisibleItemIndexes(e,t,n);return void 0===o.firstShownItemIndex?this.getOffscreenListShownItemIndexes():o}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this,t=Date.now();!function n(){e.isMounted&&(void 0!==e.top&&i(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementTopCoordinateTimer=setTimeout(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass){var e=this.getState().firstShownItemIndex,t=this.getState().lastShownItemIndex;return{firstShownItemIndex:e,lastShownItemIndex:t=Math.min(t+this.bypassBatchSize,this.getItemsCount()-1),redoLayoutAfterRender:t<this.getItemsCount()-1}}var n=i(this.getContainerNode()),r=n.top,a=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=r;var h=function(){var e=s();return{top:o(),bottom:o()+e,height:e}}(),u=h.top,d=h.bottom;return this.latestLayoutScreenTopAfterMargin=u-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=d+this.getMargin(),this.getItemIndexes(u-this.getMargin(),d+this.getMargin(),r,r+a)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=this.getState().items,o=this.getState(),s=o.firstShownItemIndex,r=o.lastShownItemIndex,a=o.beforeItemsHeight,u=o.afterItemsHeight,d=o.itemStates,m=o.itemHeights;o.itemSpacing;h("~ Update items ~");var l=function(e,t){var n=-1,i=-1;e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1);if(n>=0&&i>=0)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(i,e),g=l.prependedItemsCount,I=l.appendedItemsCount,f=g>0||I>0;f?(g>0&&(h("Prepended items count",g),m=new Array(g).concat(m),this.itemHeights.onPrepend(g),d&&(d=new Array(g).concat(d)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,g)),I>0&&(h("Appended items count",I),m=m.concat(new Array(I)),d&&(d=d.concat(new Array(I)))),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=g,this.lastSeenItemIndex+=g),s+=g,r+=g,a+=this.itemHeights.getAverage()*g,u+=this.itemHeights.getAverage()*I):(h("Non-incremental items update"),h("Previous items",i),h("New items",e),m=new Array(e.length),d=new Array(e.length),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,0===e.length?(s=void 0,r=void 0):(s=0,r=this.getLastShownItemIndex(s,e.length)),a=0,u=0),h("First shown item index",s),h("Last shown item index",r),h("Before items height",a),h("After items height",u),this.onBeforeShowItems(s,r),this.setState(c({},void 0,{items:e,itemStates:d,itemHeights:m,firstShownItemIndex:s,lastShownItemIndex:r,beforeItemsHeight:a,afterItemsHeight:u}),function(){f||t.itemHeights.onInitItemHeights(),t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&g(d.prototype,l),S&&g(d,S),a}();function p(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},s=Object.keys(e);for(i=0;i<s.length;i++)n=s[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i<s.length;i++)n=s[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function v(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}return function(){function e(t,n,i){var o=this,s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),y(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,s=e.lastShownItemIndex,r=e.beforeItemsHeight,a=e.afterItemsHeight;h("~ On state change ~"),h("Previous state",t),h("New state",e),o.container.style.paddingTop=l(r),o.container.style.paddingBottom=l(a);var u=t&&n===t.items&&t.items.length>0;if(u){h("Incremental render");for(var d=t.lastShownItemIndex;d>=t.firstShownItemIndex;){if(d>=i&&d<=s);else{h("Remove item",d);var m=o.container.childNodes[d-t.firstShownItemIndex];o.container.removeChild(m)}d--}}else for(h("Clean render");o.container.firstChild;)o.container.removeChild(o.container.firstChild);for(var c=u,g=c&&o.container.firstChild,I=i;I<=s;){if(u&&I>=t.firstShownItemIndex&&I<=t.lastShownItemIndex)c&&(c=!1);else{var f=o.renderItem(n[I]);c?(h("Prepend item",I),o.container.insertBefore(f,g)):(h("Append item",I),o.container.appendChild(f))}I++}}),y(this,"onUnmount",function(){o.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var r=s.onMount,a=p(s,["onMount"]);this.virtualScroller=new S(function(){return o.container},n,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){y(e,t,n[t])})}return e}({},a,{onStateChange:this.onStateChange})),r&&r(),this.virtualScroller.onMount()}var t,n,i;return t=e,(n=[{key:"onItemHeightChange",value:function(e){this.virtualScroller.onItemHeightChange(e)}},{key:"updateItems",value:function(e,t){this.setItems(e,t)}},{key:"setItems",value:function(e,t){this.virtualScroller.setItems(e,t)}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}}])&&v(t.prototype,n),i&&v(t,i),e}()});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function n(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function i(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,o=window.pageYOffset,r=window.pageXOffset;return{top:t.top+o-i,left:t.left+r-n,width:t.width,height:t.height}}function o(){return window.pageYOffset}function r(){return window.innerHeight}function s(){return window.innerWidth}function a(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function h(){if(u()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,a(["[virtual-scroller]"].concat(n)))}}function u(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function d(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var l=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.reset()}var t,n,i;return t=e,(n=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),o=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&h("Item spacing",o),o}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,o=this.lastMeasuredItemIndex,r=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this.set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=s,r=!0)),(void 0===o||s>o)&&(void 0!==o&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&d(t.prototype,n),i&&d(t,i),e}();function m(e){return e.toFixed(2)+"px"}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){I(e,t,n[t])})}return e}function g(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function I(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var f=250,S=function(){function a(i,s){var d,m,g,S=this,v=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),I(this,"updateLayout",function(){return S.onUpdateShownItemIndexes({reason:"manual"})}),I(this,"onScroll",function(){return S.onUpdateShownItemIndexes({reason:"scroll"})}),I(this,"restoreScrollPosition",function(){var e=S.getState().scrollY;void 0!==e&&window.scrollTo(0,e)}),I(this,"updateScrollPosition",function(){return S.getState().scrollY=o()}),I(this,"layout",function(){return S.updateLayout()}),I(this,"onResize",(d=function(e){S.isMounted&&S.shouldUpdateLayoutOnWindowResize(e)&&(h("~ Window width changed, re-measure item heights. ~"),S.setState(S.getInitialLayoutState(),function(){S.onInitialRender("resize")}))},m=f,function(){clearTimeout(g),g=setTimeout(d,m)})),I(this,"updateShownItemIndexes",function(e){var t=S.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,o=t.redoLayoutAfterRender,r=S.getBeforeItemsHeight(n,i),s=S.getAfterItemsHeight(n,i);S.updateWillBeHiddenItemHeightsAndState(n,i),h("~ Layout results "+(S.bypass?"(bypass) ":"")+"~"),h("First shown item index",n),h("Last shown item index",i),h("Before items height",r),h("After items height",s),h("Average item height (calculated on previous render)",S.itemHeights.getAverage()),u()&&(h("Item heights",S.getState().itemHeights.slice()),h("Item states",S.getState().itemStates.slice())),o&&h("Redo layout after render"),void 0!==S.firstSeenItemIndex&&(n>S.lastSeenItemIndex+1||i<S.firstSeenItemIndex-1)&&(S.firstSeenItemIndex=void 0,S.lastSeenItemIndex=void 0),S.onBeforeShowItems(n,i),S.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:r,afterItemsHeight:s},function(){return e(o)})}),I(this,"updateShownItemIndexesRecursive",function(){S.updateShownItemIndexes(function(e){e?setTimeout(function(){S.isMounted?S.updateShownItemIndexesRecursive():S.onDoneUpdatingItemIndexes()},0):S.onDoneUpdatingItemIndexes()})}),I(this,"restoreScroll",function(){var e=S.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;S.restoreScrollAfterPrepend=void 0;var i=S.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(h("Restore scroll position: scroll by",i),window.scrollTo(0,o()+i))}),I(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==S.getItemsCount()&&!S.isUpdatingItemIndexes){if(clearTimeout(S.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==S.latestLayoutScreenTopAfterMargin&&o()<S.latestLayoutScreenTopAfterMargin&&S.getState().firstShownItemIndex>0||void 0!==S.latestLayoutScreenBottomAfterMargin&&o()+r()>S.latestLayoutScreenBottomAfterMargin&&S.getState().lastShownItemIndex<S.getItemsCount()-1;if(h(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return S.onUserStopsScrollingTimeout=setTimeout(S.onUserStoppedScrolling,100)}h("~ Update layout (".concat(t,") ~")),S.isUpdatingItemIndexes=!0,S.updateShownItemIndexesRecursive()}}),I(this,"onUserStoppedScrolling",function(){S.isMounted&&S.updateLayout("stopped scrolling")});var p=v.getState,y=v.setState,w=v.onStateChange,x=v.customState,b=v.preserveScrollPositionAtBottomOnMount,H=v.shouldUpdateLayoutOnWindowResize,C=v.measureItemsBatchSize,k=v.bypass,O=v.estimatedItemHeight,A=v.onItemFirstRender,M=v.state;h("~ Initialize ~"),M&&(s=M.items),this.bypass=k,this.initialItems=s,this.estimatedItemHeight=O,this._shouldUpdateLayoutOnWindowResize=H,this.measureItemsBatchSize=void 0===C?50:C,A&&(this.onItemFirstRender=A),i()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(i()),y?(this.getState=p,this.setState=y):(this.getState=function(){return S.state},this.setState=function(i,o){var r=S.state;S.state=c({},r,i),function(i,o){if(n(i,o))return!0;if("object"!==e(i)||null===i||"object"!==e(o)||null===o)return!1;var r=Object.keys(i),s=Object.keys(o);if(r.length!==s.length)return!1;for(var a=0;a<r.length;a++)if(!t.call(o,r[a])||!n(i[r[a]],o[r[a]]))return!1;return!0}(S.state,r)||(w&&w(S.state,r),S.isMounted&&S.onUpdate(r)),o&&o()}),M&&h("Initial state (passed)",M),this.getContainerNode=i,this.itemHeights=new l(i,this.getState),b&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(M||this.getInitialState(x),function(){S.itemHeights.onInitItemHeights()}),h("Items count",s.length),O&&h("Estimated item height",O)}var d,m,S;return d=a,(m=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=c({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return h("Initial state (created)",n),h("First shown item index",n.firstShownItemIndex),h("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems.length;return n>0&&(e=0,t=this.getLastShownItemIndex(e,n)),this.preserveScrollPositionAtBottomOnMount&&(e=0,t=n-1),this.onBeforeShowItems(e,t),{itemHeights:new Array(n),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onBeforeShowItems",value:function(e,t){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var n=e;n<=t;)this.onItemFirstRender(n),n++;this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}else{if(e<this.firstSeenItemIndex){for(var i=e,o=Math.min(t,this.firstSeenItemIndex-1),r=i;r<=o;)this.onItemFirstRender(r),r++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var s=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=s;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.onInitialRender("mount"),this.isMounted=!0,this.screenWidth=s(),this.screenHeight=r(),this.restoreScrollPosition(),this.updateScrollPosition(),window.addEventListener("scroll",this.updateScrollPosition),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onInitialRender",value:function(e){var t=this.getState(),n=t.firstShownItemIndex,i=t.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(n,i),this.preserveScrollPositionAtBottomOnMount?window.scrollTo(0,o()+(document.documentElement.scrollHeight-this.preserveScrollPositionAtBottomOnMount.documentHeight)):this.onUpdateShownItemIndexes({reason:e})}},{key:"shouldUpdateLayoutOnWindowResize",value:function(e){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1;var t=s(),n=r(),i=this.screenWidth,o=this.screenHeight;return this.screenWidth=t,this.screenHeight=n,t!==i||n!==o&&(this.onUpdateShownItemIndexes({reason:"resize"}),!1)}},{key:"onUnmount",value:function(){this.isMounted=!1,window.removeEventListener("scroll",this.updateScrollPosition),this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,o=t.lastShownItemIndex;i===e.firstShownItemIndex&&o===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,o)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(h("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),u()&&h("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){u()&&(h("~ Item state changed ~"),h("Item",e),h("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),h("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(h("~ Item height changed ~"),h("Item",e),h("Previous height",n),h("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=i(this.getContainerNode()).top,n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,o,r,s=0,a=!1,u=0;u<this.getItemsCount();){var d=this.itemHeights.get(u);if(void 0===d){h("Item ".concat(u," height hasn't been measured yet: render and redo layout")),r=u,void 0===i&&(i=u);var l=t-(n+s);o=Math.min(u+(this.getEstimatedItemsCount(l)-1),this.getItemsCount()-1),a=!0;break}if(s+=d,void 0===i&&n+s>e&&(h("First visible item index (including margin)",u),i=u),u<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){h("Last visible item index (including margin)",u),void 0!==i&&(o=u);break}u++}return void 0!==i&&void 0===o&&h("Last item index (is fully visible)",o=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(o<this.restoreScrollAfterPrepend.index&&(o=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(o=Math.min(o,r+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:o,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(!(i>e&&n<t))return this.getOffscreenListShownItemIndexes();var o=this.getVisibleItemIndexes(e,t,n);return void 0===o.firstShownItemIndex?this.getOffscreenListShownItemIndexes():o}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this,t=Date.now();!function n(){e.isMounted&&(void 0!==e.top&&i(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementTopCoordinateTimer=setTimeout(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=i(this.getContainerNode()),t=e.top,n=e.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=t;var s=function(){var e=r();return{top:o(),bottom:o()+e,height:e}}(),a=s.top,h=s.bottom;return this.latestLayoutScreenTopAfterMargin=a-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=h+this.getMargin(),this.getItemIndexes(a-this.getMargin(),h+this.getMargin(),t,t+n)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=this.getState().items,o=this.getState(),r=o.firstShownItemIndex,s=o.lastShownItemIndex,a=o.beforeItemsHeight,u=o.afterItemsHeight,d=o.itemStates,l=o.itemHeights;o.itemSpacing;h("~ Update items ~");var m=function(e,t){var n=-1,i=-1;e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1);if(n>=0&&i>=0)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(i,e),g=m.prependedItemsCount,I=m.appendedItemsCount,f=g>0||I>0;f?(g>0&&(h("Prepended items count",g),l=new Array(g).concat(l),this.itemHeights.onPrepend(g),d&&(d=new Array(g).concat(d)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,g)),I>0&&(h("Appended items count",I),l=l.concat(new Array(I)),d&&(d=d.concat(new Array(I)))),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=g,this.lastSeenItemIndex+=g),r+=g,s+=g,a+=this.itemHeights.getAverage()*g,u+=this.itemHeights.getAverage()*I):(h("Non-incremental items update"),h("Previous items",i),h("New items",e),l=new Array(e.length),d=new Array(e.length),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),a=0,u=0),h("First shown item index",r),h("Last shown item index",s),h("Before items height",a),h("After items height",u),this.onBeforeShowItems(r,s),this.setState(c({},void 0,{items:e,itemStates:d,itemHeights:l,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:a,afterItemsHeight:u}),function(){f||t.itemHeights.onInitItemHeights(),t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&g(d.prototype,m),S&&g(d,S),a}();function v(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function p(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}return function(){function e(t,n,i){var o=this,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),y(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,r=e.lastShownItemIndex,s=e.beforeItemsHeight,a=e.afterItemsHeight;h("~ On state change ~"),h("Previous state",t),h("New state",e),o.container.style.paddingTop=m(s),o.container.style.paddingBottom=m(a);var u=t&&n===t.items&&t.items.length>0;if(u){h("Incremental render");for(var d=t.lastShownItemIndex;d>=t.firstShownItemIndex;){if(d>=i&&d<=r);else{h("Remove item",d);var l=o.container.childNodes[d-t.firstShownItemIndex];o.container.removeChild(l)}d--}}else for(h("Clean render");o.container.firstChild;)o.container.removeChild(o.container.firstChild);for(var c=u,g=c&&o.container.firstChild,I=i;I<=r;){if(u&&I>=t.firstShownItemIndex&&I<=t.lastShownItemIndex)c&&(c=!1);else{var f=o.renderItem(n[I]);c?(h("Prepend item",I),o.container.insertBefore(f,g)):(h("Append item",I),o.container.appendChild(f))}I++}}),y(this,"onUnmount",function(){o.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var s=r.onMount,a=v(r,["onMount"]);this.virtualScroller=new S(function(){return o.container},n,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){y(e,t,n[t])})}return e}({},a,{onStateChange:this.onStateChange})),s&&s(),this.virtualScroller.onMount()}var t,n,i;return t=e,(n=[{key:"onItemHeightChange",value:function(e){this.virtualScroller.onItemHeightChange(e)}},{key:"updateItems",value:function(e,t){this.setItems(e,t)}},{key:"setItems",value:function(e,t){this.virtualScroller.setItems(e,t)}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}}])&&p(t.prototype,n),i&&p(t,i),e}()});
 //# sourceMappingURL=virtual-scroller-dom.js.map

bundle/virtual-scroller-react.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).VirtualScroller=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var i=Object.prototype.hasOwnProperty;function o(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function r(e,t){if(o(e,t))return!0;if("object"!==n(e)||null===e||"object"!==n(t)||null===t)return!1;var r=Object.keys(e),s=Object.keys(t);if(r.length!==s.length)return!1;for(var a=0;a<r.length;a++)if(!i.call(t,r[a])||!o(e[r[a]],t[r[a]]))return!1;return!0}function s(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,o=window.pageYOffset,r=window.pageXOffset;return{top:t.top+o-i,left:t.left+r-n,width:t.width,height:t.height}}function a(){return window.pageYOffset}function h(){return window.innerHeight}function u(){return window.innerWidth}function m(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function l(){if(d()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,m(["[virtual-scroller]"].concat(n)))}}function d(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function c(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var f=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.reset()}var t,n,i;return t=e,(n=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),o=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&l("Item spacing",o),o}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,o=this.lastMeasuredItemIndex,r=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this.set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=s,r=!0)),(void 0===o||s>o)&&(void 0!==o&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&c(t.prototype,n),i&&c(t,i),e}();function g(e){return e.toFixed(2)+"px"}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){S(e,t,n[t])})}return e}function p(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var v=250,y=function(){function e(t,n){var i,o,s,u=this,m=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),S(this,"updateLayout",function(){return u.onUpdateShownItemIndexes({reason:"manual"})}),S(this,"onScroll",function(){return u.onUpdateShownItemIndexes({reason:"scroll"})}),S(this,"updateScrollPosition",function(){return u.getState().scrollY=a()}),S(this,"layout",function(){return u.updateLayout()}),S(this,"onResize",(i=function(e){u.isMounted&&u.shouldUpdateLayoutOnWindowResize(e)&&(l("~ Window width changed, re-measure item heights. ~"),u.setState(u.getInitialLayoutState(),function(){u.onInitialRender("resize")}))},o=v,function(){clearTimeout(s),s=setTimeout(i,o)})),S(this,"updateShownItemIndexes",function(e){var t=u.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,o=t.redoLayoutAfterRender,r=u.getBeforeItemsHeight(n,i),s=u.getAfterItemsHeight(n,i);u.updateWillBeHiddenItemHeightsAndState(n,i),l("~ Layout results "+(u.bypass?"(bypass) ":"")+"~"),l("First shown item index",n),l("Last shown item index",i),l("Before items height",r),l("After items height",s),l("Average item height (calculated on previous render)",u.itemHeights.getAverage()),d()&&(l("Item heights",u.getState().itemHeights.slice()),l("Item states",u.getState().itemStates.slice())),o&&l("Redo layout after render"),void 0!==u.firstSeenItemIndex&&(n>u.lastSeenItemIndex+1||i<u.firstSeenItemIndex-1)&&(u.firstSeenItemIndex=void 0,u.lastSeenItemIndex=void 0),u.onBeforeShowItems(n,i),u.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:r,afterItemsHeight:s},function(){return e(o)})}),S(this,"updateShownItemIndexesRecursive",function(){u.updateShownItemIndexes(function(e){e?setTimeout(function(){u.isMounted?u.updateShownItemIndexesRecursive():u.onDoneUpdatingItemIndexes()},0):u.onDoneUpdatingItemIndexes()})}),S(this,"restoreScroll",function(){var e=u.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;u.restoreScrollAfterPrepend=void 0;var i=u.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(l("Restore scroll position: scroll by",i),window.scrollTo(0,a()+i))}),S(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==u.getItemsCount()&&!u.isUpdatingItemIndexes){if(clearTimeout(u.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==u.latestLayoutScreenTopAfterMargin&&a()<u.latestLayoutScreenTopAfterMargin&&u.getState().firstShownItemIndex>0||void 0!==u.latestLayoutScreenBottomAfterMargin&&a()+h()>u.latestLayoutScreenBottomAfterMargin&&u.getState().lastShownItemIndex<u.getItemsCount()-1;if(l(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return u.onUserStopsScrollingTimeout=setTimeout(u.onUserStoppedScrolling,100)}l("~ Update layout (".concat(t,") ~")),u.isUpdatingItemIndexes=!0,u.updateShownItemIndexesRecursive()}}),S(this,"onUserStoppedScrolling",function(){u.isMounted&&u.updateLayout("stopped scrolling")});var c=m.getState,g=m.setState,p=m.onStateChange,y=m.customState,w=m.preserveScrollPositionAtBottomOnMount,x=m.shouldUpdateLayoutOnWindowResize,b=m.measureItemsBatchSize,H=m.bypass,C=m.bypassBatchSize,O=m.estimatedItemHeight,P=m.onItemFirstRender,R=m.state;l("~ Initialize ~"),R&&(n=R.items),this.bypass=H,this.bypassBatchSize=C||10,this.initialItems=n,this.estimatedItemHeight=O,this._shouldUpdateLayoutOnWindowResize=x,this.measureItemsBatchSize=void 0===b?50:b,P&&(this.onItemFirstRender=P),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),g?(this.getState=c,this.setState=g):(this.getState=function(){return u.state},this.setState=function(e,t){var n=u.state;u.state=I({},n,e),r(u.state,n)||(p&&p(u.state,n),u.isMounted&&u.onUpdate(n)),t&&t()}),R&&l("Initial state (passed)",R),this.getContainerNode=t,this.itemHeights=new f(t,this.getState),w&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(R||this.getInitialState(y),function(){u.itemHeights.onInitItemHeights()}),l("Items count",n.length),O&&l("Estimated item height",O)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=I({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return l("Initial state (created)",n),l("First shown item index",n.firstShownItemIndex),l("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems.length;return n>0&&(e=Math.min(0,n-1),t=this.getLastShownItemIndex(e,n)),this.preserveScrollPositionAtBottomOnMount&&(e=0,t=n-1),this.onBeforeShowItems(e,t),{itemHeights:new Array(n),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onBeforeShowItems",value:function(e,t){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var n=e;n<=t;)this.onItemFirstRender(n),n++;this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}else{if(e<this.firstSeenItemIndex){for(var i=e,o=Math.min(t,this.firstSeenItemIndex-1),r=i;r<=o;)this.onItemFirstRender(r),r++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var s=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=s;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.onInitialRender("mount"),this.isMounted=!0,this.screenWidth=u(),this.screenHeight=h(),this.updateScrollPosition(),window.addEventListener("scroll",this.updateScrollPosition),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onInitialRender",value:function(e){var t=this.getState(),n=t.firstShownItemIndex,i=t.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(n,i),this.preserveScrollPositionAtBottomOnMount?window.scrollTo(0,a()+(document.documentElement.scrollHeight-this.preserveScrollPositionAtBottomOnMount.documentHeight)):this.onUpdateShownItemIndexes({reason:e})}},{key:"shouldUpdateLayoutOnWindowResize",value:function(e){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1;var t=u(),n=h(),i=this.screenWidth,o=this.screenHeight;return this.screenWidth=t,this.screenHeight=n,t!==i||n!==o&&(this.onUpdateShownItemIndexes({reason:"resize"}),!1)}},{key:"onUnmount",value:function(){this.isMounted=!1,window.removeEventListener("scroll",this.updateScrollPosition),this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,o=t.lastShownItemIndex;i===e.firstShownItemIndex&&o===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,o)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(l("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),d()&&l("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){d()&&(l("~ Item state changed ~"),l("Item",e),l("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),l("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(l("~ Item height changed ~"),l("Item",e),l("Previous height",n),l("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=s(this.getContainerNode()).top,n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,o,r,s=0,a=!1,h=0;h<this.getItemsCount();){var u=this.itemHeights.get(h);if(void 0===u){l("Item ".concat(h," height hasn't been measured yet: render and redo layout")),r=h,void 0===i&&(i=h);var m=t-(n+s);o=Math.min(h+(this.getEstimatedItemsCount(m)-1),this.getItemsCount()-1),a=!0;break}if(s+=u,void 0===i&&n+s>e&&(l("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){l("Last visible item index (including margin)",h),void 0!==i&&(o=h);break}h++}return void 0!==i&&void 0===o&&l("Last item index (is fully visible)",o=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(o<this.restoreScrollAfterPrepend.index&&(o=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(o=Math.min(o,r+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:o,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(!(i>e&&n<t))return this.getOffscreenListShownItemIndexes();var o=this.getVisibleItemIndexes(e,t,n);return void 0===o.firstShownItemIndex?this.getOffscreenListShownItemIndexes():o}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this,t=Date.now();!function n(){e.isMounted&&(void 0!==e.top&&s(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementTopCoordinateTimer=setTimeout(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass){var e=this.getState().firstShownItemIndex,t=this.getState().lastShownItemIndex;return{firstShownItemIndex:e,lastShownItemIndex:t=Math.min(t+this.bypassBatchSize,this.getItemsCount()-1),redoLayoutAfterRender:t<this.getItemsCount()-1}}var n=s(this.getContainerNode()),i=n.top,o=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=i;var r=function(){var e=h();return{top:a(),bottom:a()+e,height:e}}(),u=r.top,m=r.bottom;return this.latestLayoutScreenTopAfterMargin=u-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=m+this.getMargin(),this.getItemIndexes(u-this.getMargin(),m+this.getMargin(),i,i+o)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=this.getState().items,o=this.getState(),r=o.firstShownItemIndex,s=o.lastShownItemIndex,a=o.beforeItemsHeight,h=o.afterItemsHeight,u=o.itemStates,m=o.itemHeights;o.itemSpacing;l("~ Update items ~");var d=w(i,e),c=d.prependedItemsCount,f=d.appendedItemsCount,g=c>0||f>0;g?(c>0&&(l("Prepended items count",c),m=new Array(c).concat(m),this.itemHeights.onPrepend(c),u&&(u=new Array(c).concat(u)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,c)),f>0&&(l("Appended items count",f),m=m.concat(new Array(f)),u&&(u=u.concat(new Array(f)))),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=c,this.lastSeenItemIndex+=c),r+=c,s+=c,a+=this.itemHeights.getAverage()*c,h+=this.itemHeights.getAverage()*f):(l("Non-incremental items update"),l("Previous items",i),l("New items",e),m=new Array(e.length),u=new Array(e.length),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),a=0,h=0),l("First shown item index",r),l("Last shown item index",s),l("Before items height",a),l("After items height",h),this.onBeforeShowItems(r,s),this.setState(I({},void 0,{items:e,itemStates:u,itemHeights:m,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:a,afterItemsHeight:h}),function(){g||t.itemHeights.onInitItemHeights(),t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&p(t.prototype,n),i&&p(t,i),e}();function w(e,t){var n=-1,i=-1;return e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1),n>=0&&i>=0?{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}:{prependedItemsCount:-1,appendedItemsCount:-1}}function x(e){return(x="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function b(){return(b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function H(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function C(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function O(e){return(O=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function P(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function R(e,t){return(R=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function k(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var M=t.elementType||t.oneOfType([t.string,t.func,t.object]),A=function(t){function n(t){var i,o,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),o=this,r=O(n).call(this,t),i=!r||"object"!==x(r)&&"function"!=typeof r?P(o):r,k(P(i),"container",e.createRef()),k(P(i),"onItemStateChange",new Array(i.props.items.length)),k(P(i),"onItemHeightChange",new Array(i.props.items.length)),k(P(i),"itemRefs",new Array(i.props.items.length)),k(P(i),"uniquePrefixes",[]),k(P(i),"updateLayout",function(){return i.virtualScroller.updateLayout()}),k(P(i),"layout",function(){return i.updateLayout()}),k(P(i),"onItemFirstRender",function(){var e=i.props.onItemFirstRender;e&&e.apply(void 0,arguments)}),k(P(i),"shouldUpdateLayoutOnWindowResize",function(){var e=i.props.shouldUpdateLayoutOnWindowResize;if(e)return e.apply(void 0,arguments)}),k(P(i),"onStateChange",function(){var e=i.props.onStateChange;e&&e.apply(void 0,arguments)});var s=i.props,a=s.items,h=s.initialState,u=s.initialCustomState,m=s.estimatedItemHeight,l=s.preserveScrollPositionAtBottomOnMount,d=s.measureItemsBatchSize,c=s.bypass,f=s.bypassBatchSize;return i.previousItemsProperty=a,i.virtualScroller=new y(function(){return i.container.current},a,{estimatedItemHeight:m,bypass:c,bypassBatchSize:f,onItemFirstRender:i.onItemFirstRender,preserveScrollPositionAtBottomOnMount:l,shouldUpdateLayoutOnWindowResize:i.shouldUpdateLayoutOnWindowResize,measureItemsBatchSize:d,state:h,customState:u,getState:function(){return i.state},setState:function(e,t){i.state?i.setState(e,t):(i.state=e,i.onStateChange(e))}}),i.generateUniquePrefix(),i}var i,o,s;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&R(e,t)}(n,e.Component),i=n,(o=[{key:"shouldUseRefs",value:function(){var e,t=this.props.itemComponent;return(e=t).prototype&&e.prototype.isReactComponent}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}},{key:"updateItem",value:function(e){return this.renderItem(e)}},{key:"renderItem",value:function(e){var t=this;if(!this.shouldUseRefs())return console.error("[virtual-scroller] `.renderItem(i)` has been called but the `component` doesn't allow `ref`s. Only `component`s that're `React.Component`s support this feature.");if(this.itemRefs[e]&&this.itemRefs[e].current){var n=this.props.items,i=n[e];this.itemRefs[e].current.forceUpdate(function(){if(t._isMounted){var e=n.indexOf(i);e>=0&&t.virtualScroller.onItemHeightChange(e)}})}}},{key:"getItemRef",value:function(t){return this.itemRefs[t]||(this.itemRefs[t]=e.createRef()),this.itemRefs[t]}},{key:"getOnItemStateChange",value:function(e){var t=this;return this.onItemStateChange[e]||(this.onItemStateChange[e]=function(n){return t.virtualScroller.onItemStateChange(e,n)}),this.onItemStateChange[e]}},{key:"getOnItemHeightChange",value:function(e){var t=this;return this.onItemHeightChange[e]||(this.onItemHeightChange[e]=function(){return t.virtualScroller.onItemHeightChange(e)}),this.onItemHeightChange[e]}},{key:"generateUniquePrefix",value:function(){var e=String(Math.random()).slice(2);if(this.uniquePrefixes.indexOf(e)>=0)return this.generateUniquePrefix();this.uniquePrefixes.push(e),this.uniquePrefix=e}},{key:"componentDidMount",value:function(){var e=this.props.onMount;e&&e(),this.virtualScroller.onMount(),this._isMounted=!0}},{key:"componentDidUpdate",value:function(e,t){var n=this.props.onStateChange;n&&(r(this.state,t)||n(this.state,t)),this.virtualScroller.onUpdate(t);var i=this.props,o=i.items,s=i.preserveScrollPosition,a=i.preserveScrollPositionOnPrependItems;o!==e.items&&this.virtualScroller.setItems(o,{preserveScrollPositionOnPrependItems:a||s})}},{key:"componentWillUnmount",value:function(){this.virtualScroller.onUnmount(),this._isMounted=!1}},{key:"render",value:function(){var t=this,n=this.props,i=n.as,o=n.itemComponent,r=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.bypassBatchSize,n.preserveScrollPositionOnPrependItems),a=n.preserveScrollPosition,h=(n.preserveScrollPositionAtBottomOnMount,n.shouldUpdateLayoutOnWindowResize,n.measureItemsBatchSize,n.initialState,n.initialCustomState,n.onStateChange,n.onItemFirstRender,n.onMount,H(n,["as","itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","bypassBatchSize","preserveScrollPositionOnPrependItems","preserveScrollPosition","preserveScrollPositionAtBottomOnMount","shouldUpdateLayoutOnWindowResize","measureItemsBatchSize","initialState","initialCustomState","onStateChange","onItemFirstRender","onMount"])),u=this.virtualScroller.getState(),m=u.items,l=u.itemStates,d=u.firstShownItemIndex,c=u.lastShownItemIndex,f=u.beforeItemsHeight,I=u.afterItemsHeight,p=this.props.items,S=m;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&p!==S){var v=w(S,p),y=v.prependedItemsCount,x=v.appendedItemsCount;0===y&&x>0||((s||a)&&this.virtualScroller.captureScroll(S,p),this.generateUniquePrefix(),this.onItemStateChange=new Array(p.length),this.onItemHeightChange=new Array(p.length),this.itemRefs=new Array(p.length))}return e.createElement(i,b({},h,{ref:this.container,style:{paddingTop:g(f),paddingBottom:g(I)}}),m.map(function(n,i){return i>=d&&i<=c?e.createElement(o,b({},r,{ref:t.shouldUseRefs()?t.getItemRef(i):void 0,key:"".concat(t.uniquePrefix,":").concat(i),state:l&&l[i],onStateChange:t.getOnItemStateChange(i),onHeightChange:t.getOnItemHeightChange(i)}),n):null}))}}])&&C(i.prototype,o),s&&C(i,s),n}();return k(A,"propTypes",{as:M,items:t.arrayOf(t.object).isRequired,itemComponent:M.isRequired,itemComponentProps:t.object,estimatedItemHeight:t.number,bypass:t.bool,bypassBatchSize:t.number,preserveScrollPositionOnPrependItems:t.bool,preserveScrollPosition:t.bool,preserveScrollPositionAtBottomOnMount:t.bool,shouldUpdateLayoutOnWindowResize:t.func,measureItemsBatchSize:t.number,onMount:t.func,onItemFirstRender:t.func,onStateChange:t.func,initialCustomState:t.object,initialState:t.shape({items:t.arrayOf(t.object).isRequired,itemStates:t.arrayOf(t.any),firstShownItemIndex:t.number.isRequired,lastShownItemIndex:t.number.isRequired,beforeItemsHeight:t.number.isRequired,afterItemsHeight:t.number.isRequired,itemHeights:t.arrayOf(t.number).isRequired,itemSpacing:t.number})}),k(A,"defaultProps",{as:"div"}),A});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).VirtualScroller=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var i=Object.prototype.hasOwnProperty;function o(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function r(e,t){if(o(e,t))return!0;if("object"!==n(e)||null===e||"object"!==n(t)||null===t)return!1;var r=Object.keys(e),s=Object.keys(t);if(r.length!==s.length)return!1;for(var a=0;a<r.length;a++)if(!i.call(t,r[a])||!o(e[r[a]],t[r[a]]))return!1;return!0}function s(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,o=window.pageYOffset,r=window.pageXOffset;return{top:t.top+o-i,left:t.left+r-n,width:t.width,height:t.height}}function a(){return window.pageYOffset}function u(){return window.innerHeight}function h(){return window.innerWidth}function m(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function l(){if(d()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,m(["[virtual-scroller]"].concat(n)))}}function d(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function c(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var f=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.reset()}var t,n,i;return t=e,(n=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),o=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&l("Item spacing",o),o}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,o=this.lastMeasuredItemIndex,r=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this.set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=s,r=!0)),(void 0===o||s>o)&&(void 0!==o&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&c(t.prototype,n),i&&c(t,i),e}();function g(e){return e.toFixed(2)+"px"}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){S(e,t,n[t])})}return e}function p(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var v=250,y=function(){function e(t,n){var i,o,s,h=this,m=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),S(this,"updateLayout",function(){return h.onUpdateShownItemIndexes({reason:"manual"})}),S(this,"onScroll",function(){return h.onUpdateShownItemIndexes({reason:"scroll"})}),S(this,"restoreScrollPosition",function(){var e=h.getState().scrollY;void 0!==e&&window.scrollTo(0,e)}),S(this,"updateScrollPosition",function(){return h.getState().scrollY=a()}),S(this,"layout",function(){return h.updateLayout()}),S(this,"onResize",(i=function(e){h.isMounted&&h.shouldUpdateLayoutOnWindowResize(e)&&(l("~ Window width changed, re-measure item heights. ~"),h.setState(h.getInitialLayoutState(),function(){h.onInitialRender("resize")}))},o=v,function(){clearTimeout(s),s=setTimeout(i,o)})),S(this,"updateShownItemIndexes",function(e){var t=h.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,o=t.redoLayoutAfterRender,r=h.getBeforeItemsHeight(n,i),s=h.getAfterItemsHeight(n,i);h.updateWillBeHiddenItemHeightsAndState(n,i),l("~ Layout results "+(h.bypass?"(bypass) ":"")+"~"),l("First shown item index",n),l("Last shown item index",i),l("Before items height",r),l("After items height",s),l("Average item height (calculated on previous render)",h.itemHeights.getAverage()),d()&&(l("Item heights",h.getState().itemHeights.slice()),l("Item states",h.getState().itemStates.slice())),o&&l("Redo layout after render"),void 0!==h.firstSeenItemIndex&&(n>h.lastSeenItemIndex+1||i<h.firstSeenItemIndex-1)&&(h.firstSeenItemIndex=void 0,h.lastSeenItemIndex=void 0),h.onBeforeShowItems(n,i),h.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:r,afterItemsHeight:s},function(){return e(o)})}),S(this,"updateShownItemIndexesRecursive",function(){h.updateShownItemIndexes(function(e){e?setTimeout(function(){h.isMounted?h.updateShownItemIndexesRecursive():h.onDoneUpdatingItemIndexes()},0):h.onDoneUpdatingItemIndexes()})}),S(this,"restoreScroll",function(){var e=h.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;h.restoreScrollAfterPrepend=void 0;var i=h.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(l("Restore scroll position: scroll by",i),window.scrollTo(0,a()+i))}),S(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==h.getItemsCount()&&!h.isUpdatingItemIndexes){if(clearTimeout(h.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==h.latestLayoutScreenTopAfterMargin&&a()<h.latestLayoutScreenTopAfterMargin&&h.getState().firstShownItemIndex>0||void 0!==h.latestLayoutScreenBottomAfterMargin&&a()+u()>h.latestLayoutScreenBottomAfterMargin&&h.getState().lastShownItemIndex<h.getItemsCount()-1;if(l(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return h.onUserStopsScrollingTimeout=setTimeout(h.onUserStoppedScrolling,100)}l("~ Update layout (".concat(t,") ~")),h.isUpdatingItemIndexes=!0,h.updateShownItemIndexesRecursive()}}),S(this,"onUserStoppedScrolling",function(){h.isMounted&&h.updateLayout("stopped scrolling")});var c=m.getState,g=m.setState,p=m.onStateChange,y=m.customState,w=m.preserveScrollPositionAtBottomOnMount,x=m.shouldUpdateLayoutOnWindowResize,b=m.measureItemsBatchSize,H=m.bypass,C=m.estimatedItemHeight,O=m.onItemFirstRender,P=m.state;l("~ Initialize ~"),P&&(n=P.items),this.bypass=H,this.initialItems=n,this.estimatedItemHeight=C,this._shouldUpdateLayoutOnWindowResize=x,this.measureItemsBatchSize=void 0===b?50:b,O&&(this.onItemFirstRender=O),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),g?(this.getState=c,this.setState=g):(this.getState=function(){return h.state},this.setState=function(e,t){var n=h.state;h.state=I({},n,e),r(h.state,n)||(p&&p(h.state,n),h.isMounted&&h.onUpdate(n)),t&&t()}),P&&l("Initial state (passed)",P),this.getContainerNode=t,this.itemHeights=new f(t,this.getState),w&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(P||this.getInitialState(y),function(){h.itemHeights.onInitItemHeights()}),l("Items count",n.length),C&&l("Estimated item height",C)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=I({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return l("Initial state (created)",n),l("First shown item index",n.firstShownItemIndex),l("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems.length;return n>0&&(e=0,t=this.getLastShownItemIndex(e,n)),this.preserveScrollPositionAtBottomOnMount&&(e=0,t=n-1),this.onBeforeShowItems(e,t),{itemHeights:new Array(n),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onBeforeShowItems",value:function(e,t){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var n=e;n<=t;)this.onItemFirstRender(n),n++;this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}else{if(e<this.firstSeenItemIndex){for(var i=e,o=Math.min(t,this.firstSeenItemIndex-1),r=i;r<=o;)this.onItemFirstRender(r),r++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var s=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=s;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.onInitialRender("mount"),this.isMounted=!0,this.screenWidth=h(),this.screenHeight=u(),this.restoreScrollPosition(),this.updateScrollPosition(),window.addEventListener("scroll",this.updateScrollPosition),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onInitialRender",value:function(e){var t=this.getState(),n=t.firstShownItemIndex,i=t.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(n,i),this.preserveScrollPositionAtBottomOnMount?window.scrollTo(0,a()+(document.documentElement.scrollHeight-this.preserveScrollPositionAtBottomOnMount.documentHeight)):this.onUpdateShownItemIndexes({reason:e})}},{key:"shouldUpdateLayoutOnWindowResize",value:function(e){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1;var t=h(),n=u(),i=this.screenWidth,o=this.screenHeight;return this.screenWidth=t,this.screenHeight=n,t!==i||n!==o&&(this.onUpdateShownItemIndexes({reason:"resize"}),!1)}},{key:"onUnmount",value:function(){this.isMounted=!1,window.removeEventListener("scroll",this.updateScrollPosition),this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,o=t.lastShownItemIndex;i===e.firstShownItemIndex&&o===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,o)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(l("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),d()&&l("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){d()&&(l("~ Item state changed ~"),l("Item",e),l("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),l("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(l("~ Item height changed ~"),l("Item",e),l("Previous height",n),l("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=s(this.getContainerNode()).top,n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,o,r,s=0,a=!1,u=0;u<this.getItemsCount();){var h=this.itemHeights.get(u);if(void 0===h){l("Item ".concat(u," height hasn't been measured yet: render and redo layout")),r=u,void 0===i&&(i=u);var m=t-(n+s);o=Math.min(u+(this.getEstimatedItemsCount(m)-1),this.getItemsCount()-1),a=!0;break}if(s+=h,void 0===i&&n+s>e&&(l("First visible item index (including margin)",u),i=u),u<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){l("Last visible item index (including margin)",u),void 0!==i&&(o=u);break}u++}return void 0!==i&&void 0===o&&l("Last item index (is fully visible)",o=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(o<this.restoreScrollAfterPrepend.index&&(o=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(o=Math.min(o,r+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:o,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(!(i>e&&n<t))return this.getOffscreenListShownItemIndexes();var o=this.getVisibleItemIndexes(e,t,n);return void 0===o.firstShownItemIndex?this.getOffscreenListShownItemIndexes():o}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this,t=Date.now();!function n(){e.isMounted&&(void 0!==e.top&&s(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementTopCoordinateTimer=setTimeout(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=s(this.getContainerNode()),t=e.top,n=e.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=t;var i=function(){var e=u();return{top:a(),bottom:a()+e,height:e}}(),o=i.top,r=i.bottom;return this.latestLayoutScreenTopAfterMargin=o-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=r+this.getMargin(),this.getItemIndexes(o-this.getMargin(),r+this.getMargin(),t,t+n)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=this.getState().items,o=this.getState(),r=o.firstShownItemIndex,s=o.lastShownItemIndex,a=o.beforeItemsHeight,u=o.afterItemsHeight,h=o.itemStates,m=o.itemHeights;o.itemSpacing;l("~ Update items ~");var d=w(i,e),c=d.prependedItemsCount,f=d.appendedItemsCount,g=c>0||f>0;g?(c>0&&(l("Prepended items count",c),m=new Array(c).concat(m),this.itemHeights.onPrepend(c),h&&(h=new Array(c).concat(h)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,c)),f>0&&(l("Appended items count",f),m=m.concat(new Array(f)),h&&(h=h.concat(new Array(f)))),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=c,this.lastSeenItemIndex+=c),r+=c,s+=c,a+=this.itemHeights.getAverage()*c,u+=this.itemHeights.getAverage()*f):(l("Non-incremental items update"),l("Previous items",i),l("New items",e),m=new Array(e.length),h=new Array(e.length),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),a=0,u=0),l("First shown item index",r),l("Last shown item index",s),l("Before items height",a),l("After items height",u),this.onBeforeShowItems(r,s),this.setState(I({},void 0,{items:e,itemStates:h,itemHeights:m,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:a,afterItemsHeight:u}),function(){g||t.itemHeights.onInitItemHeights(),t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&p(t.prototype,n),i&&p(t,i),e}();function w(e,t){var n=-1,i=-1;return e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1),n>=0&&i>=0?{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}:{prependedItemsCount:-1,appendedItemsCount:-1}}function x(e){return(x="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function b(){return(b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function H(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function C(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function O(e){return(O=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function P(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function R(e,t){return(R=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function k(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var A=t.elementType||t.oneOfType([t.string,t.func,t.object]),M=function(t){function n(t){var i,o,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),o=this,r=O(n).call(this,t),i=!r||"object"!==x(r)&&"function"!=typeof r?P(o):r,k(P(i),"container",e.createRef()),k(P(i),"onItemStateChange",new Array(i.props.items.length)),k(P(i),"onItemHeightChange",new Array(i.props.items.length)),k(P(i),"itemRefs",new Array(i.props.items.length)),k(P(i),"uniquePrefixes",[]),k(P(i),"updateLayout",function(){return i.virtualScroller.updateLayout()}),k(P(i),"layout",function(){return i.updateLayout()}),k(P(i),"onItemFirstRender",function(){var e=i.props.onItemFirstRender;e&&e.apply(void 0,arguments)}),k(P(i),"shouldUpdateLayoutOnWindowResize",function(){var e=i.props.shouldUpdateLayoutOnWindowResize;if(e)return e.apply(void 0,arguments)}),k(P(i),"onStateChange",function(){var e=i.props.onStateChange;e&&e.apply(void 0,arguments)});var s=i.props,a=s.items,u=s.initialState,h=s.initialCustomState,m=s.estimatedItemHeight,l=s.preserveScrollPositionAtBottomOnMount,d=s.measureItemsBatchSize,c=s.bypass;return i.previousItemsProperty=a,i.virtualScroller=new y(function(){return i.container.current},a,{estimatedItemHeight:m,bypass:c,onItemFirstRender:i.onItemFirstRender,preserveScrollPositionAtBottomOnMount:l,shouldUpdateLayoutOnWindowResize:i.shouldUpdateLayoutOnWindowResize,measureItemsBatchSize:d,state:u,customState:h,getState:function(){return i.state},setState:function(e,t){i.state?i.setState(e,t):(i.state=e,i.onStateChange(e))}}),i.generateUniquePrefix(),i}var i,o,s;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&R(e,t)}(n,e.Component),i=n,(o=[{key:"shouldUseRefs",value:function(){var e,t=this.props.itemComponent;return(e=t).prototype&&e.prototype.isReactComponent}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}},{key:"updateItem",value:function(e){return this.renderItem(e)}},{key:"renderItem",value:function(e){var t=this;if(!this.shouldUseRefs())return console.error("[virtual-scroller] `.renderItem(i)` has been called but the `component` doesn't allow `ref`s. Only `component`s that're `React.Component`s support this feature.");if(this.itemRefs[e]&&this.itemRefs[e].current){var n=this.props.items,i=n[e];this.itemRefs[e].current.forceUpdate(function(){if(t._isMounted){var e=n.indexOf(i);e>=0&&t.virtualScroller.onItemHeightChange(e)}})}}},{key:"getItemRef",value:function(t){return this.itemRefs[t]||(this.itemRefs[t]=e.createRef()),this.itemRefs[t]}},{key:"getOnItemStateChange",value:function(e){var t=this;return this.onItemStateChange[e]||(this.onItemStateChange[e]=function(n){return t.virtualScroller.onItemStateChange(e,n)}),this.onItemStateChange[e]}},{key:"getOnItemHeightChange",value:function(e){var t=this;return this.onItemHeightChange[e]||(this.onItemHeightChange[e]=function(){return t.virtualScroller.onItemHeightChange(e)}),this.onItemHeightChange[e]}},{key:"generateUniquePrefix",value:function(){var e=String(Math.random()).slice(2);if(this.uniquePrefixes.indexOf(e)>=0)return this.generateUniquePrefix();this.uniquePrefixes.push(e),this.uniquePrefix=e}},{key:"componentDidMount",value:function(){var e=this.props.onMount;e&&e(),this.virtualScroller.onMount(),this._isMounted=!0}},{key:"componentDidUpdate",value:function(e,t){var n=this.props.onStateChange;n&&(r(this.state,t)||n(this.state,t)),this.virtualScroller.onUpdate(t);var i=this.props,o=i.items,s=i.preserveScrollPosition,a=i.preserveScrollPositionOnPrependItems;o!==e.items&&this.virtualScroller.setItems(o,{preserveScrollPositionOnPrependItems:a||s})}},{key:"componentWillUnmount",value:function(){this.virtualScroller.onUnmount(),this._isMounted=!1}},{key:"render",value:function(){var t=this,n=this.props,i=n.as,o=n.itemComponent,r=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.preserveScrollPositionOnPrependItems),a=n.preserveScrollPosition,u=(n.preserveScrollPositionAtBottomOnMount,n.shouldUpdateLayoutOnWindowResize,n.measureItemsBatchSize,n.initialState,n.initialCustomState,n.onStateChange,n.onItemFirstRender,n.onMount,H(n,["as","itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","preserveScrollPositionOnPrependItems","preserveScrollPosition","preserveScrollPositionAtBottomOnMount","shouldUpdateLayoutOnWindowResize","measureItemsBatchSize","initialState","initialCustomState","onStateChange","onItemFirstRender","onMount"])),h=this.virtualScroller.getState(),m=h.items,l=h.itemStates,d=h.firstShownItemIndex,c=h.lastShownItemIndex,f=h.beforeItemsHeight,I=h.afterItemsHeight,p=this.props.items,S=m;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&p!==S){var v=w(S,p),y=v.prependedItemsCount,x=v.appendedItemsCount;0===y&&x>0||((s||a)&&this.virtualScroller.captureScroll(S,p),this.generateUniquePrefix(),this.onItemStateChange=new Array(p.length),this.onItemHeightChange=new Array(p.length),this.itemRefs=new Array(p.length))}return e.createElement(i,b({},u,{ref:this.container,style:{paddingTop:g(f),paddingBottom:g(I)}}),m.map(function(n,i){return i>=d&&i<=c?e.createElement(o,b({},r,{ref:t.shouldUseRefs()?t.getItemRef(i):void 0,key:"".concat(t.uniquePrefix,":").concat(i),state:l&&l[i],onStateChange:t.getOnItemStateChange(i),onHeightChange:t.getOnItemHeightChange(i)}),n):null}))}}])&&C(i.prototype,o),s&&C(i,s),n}();return k(M,"propTypes",{as:A,items:t.arrayOf(t.object).isRequired,itemComponent:A.isRequired,itemComponentProps:t.object,estimatedItemHeight:t.number,bypass:t.bool,preserveScrollPositionOnPrependItems:t.bool,preserveScrollPosition:t.bool,preserveScrollPositionAtBottomOnMount:t.bool,shouldUpdateLayoutOnWindowResize:t.func,measureItemsBatchSize:t.number,onMount:t.func,onItemFirstRender:t.func,onStateChange:t.func,initialCustomState:t.object,initialState:t.shape({items:t.arrayOf(t.object).isRequired,itemStates:t.arrayOf(t.any),firstShownItemIndex:t.number.isRequired,lastShownItemIndex:t.number.isRequired,beforeItemsHeight:t.number.isRequired,afterItemsHeight:t.number.isRequired,itemHeights:t.arrayOf(t.number).isRequired,itemSpacing:t.number})}),k(M,"defaultProps",{as:"div"}),M});
 //# sourceMappingURL=virtual-scroller-react.js.map

bundle/virtual-scroller.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function n(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function i(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,s=window.pageYOffset,o=window.pageXOffset;return{top:t.top+s-i,left:t.left+o-n,width:t.width,height:t.height}}function s(){return window.pageYOffset}function o(){return window.innerHeight}function r(){return window.innerWidth}function a(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function h(){if(d()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,a(["[virtual-scroller]"].concat(n)))}}function d(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function u(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var m=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.reset()}var t,n,i;return t=e,(n=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),s=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&h("Item spacing",s),s}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,s=this.lastMeasuredItemIndex,o=!1,r=e;r<=t;){var a=this._getItemHeight(r,n);void 0!==a&&(this.set(r,a),(void 0===i||r<i)&&(this.measuredItemsHeight+=a,o||(this.firstMeasuredItemIndex=r,o=!0)),(void 0===s||r>s)&&(void 0!==s&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=r)),r++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&u(t.prototype,n),i&&u(t,i),e}();function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){I(e,t,n[t])})}return e}function g(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function I(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var c=250;return function(){function a(i,r){var u,g,f,S=this,p=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),I(this,"updateLayout",function(){return S.onUpdateShownItemIndexes({reason:"manual"})}),I(this,"onScroll",function(){return S.onUpdateShownItemIndexes({reason:"scroll"})}),I(this,"updateScrollPosition",function(){return S.getState().scrollY=s()}),I(this,"layout",function(){return S.updateLayout()}),I(this,"onResize",(u=function(e){S.isMounted&&S.shouldUpdateLayoutOnWindowResize(e)&&(h("~ Window width changed, re-measure item heights. ~"),S.setState(S.getInitialLayoutState(),function(){S.onInitialRender("resize")}))},g=c,function(){clearTimeout(f),f=setTimeout(u,g)})),I(this,"updateShownItemIndexes",function(e){var t=S.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,s=t.redoLayoutAfterRender,o=S.getBeforeItemsHeight(n,i),r=S.getAfterItemsHeight(n,i);S.updateWillBeHiddenItemHeightsAndState(n,i),h("~ Layout results "+(S.bypass?"(bypass) ":"")+"~"),h("First shown item index",n),h("Last shown item index",i),h("Before items height",o),h("After items height",r),h("Average item height (calculated on previous render)",S.itemHeights.getAverage()),d()&&(h("Item heights",S.getState().itemHeights.slice()),h("Item states",S.getState().itemStates.slice())),s&&h("Redo layout after render"),void 0!==S.firstSeenItemIndex&&(n>S.lastSeenItemIndex+1||i<S.firstSeenItemIndex-1)&&(S.firstSeenItemIndex=void 0,S.lastSeenItemIndex=void 0),S.onBeforeShowItems(n,i),S.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:o,afterItemsHeight:r},function(){return e(s)})}),I(this,"updateShownItemIndexesRecursive",function(){S.updateShownItemIndexes(function(e){e?setTimeout(function(){S.isMounted?S.updateShownItemIndexesRecursive():S.onDoneUpdatingItemIndexes()},0):S.onDoneUpdatingItemIndexes()})}),I(this,"restoreScroll",function(){var e=S.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;S.restoreScrollAfterPrepend=void 0;var i=S.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(h("Restore scroll position: scroll by",i),window.scrollTo(0,s()+i))}),I(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==S.getItemsCount()&&!S.isUpdatingItemIndexes){if(clearTimeout(S.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==S.latestLayoutScreenTopAfterMargin&&s()<S.latestLayoutScreenTopAfterMargin&&S.getState().firstShownItemIndex>0||void 0!==S.latestLayoutScreenBottomAfterMargin&&s()+o()>S.latestLayoutScreenBottomAfterMargin&&S.getState().lastShownItemIndex<S.getItemsCount()-1;if(h(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return S.onUserStopsScrollingTimeout=setTimeout(S.onUserStoppedScrolling,100)}h("~ Update layout (".concat(t,") ~")),S.isUpdatingItemIndexes=!0,S.updateShownItemIndexesRecursive()}}),I(this,"onUserStoppedScrolling",function(){S.isMounted&&S.updateLayout("stopped scrolling")});var v=p.getState,w=p.setState,y=p.onStateChange,x=p.customState,H=p.preserveScrollPositionAtBottomOnMount,b=p.shouldUpdateLayoutOnWindowResize,A=p.measureItemsBatchSize,C=p.bypass,k=p.bypassBatchSize,M=p.estimatedItemHeight,L=p.onItemFirstRender,O=p.state;h("~ Initialize ~"),O&&(r=O.items),this.bypass=C,this.bypassBatchSize=k||10,this.initialItems=r,this.estimatedItemHeight=M,this._shouldUpdateLayoutOnWindowResize=b,this.measureItemsBatchSize=void 0===A?50:A,L&&(this.onItemFirstRender=L),i()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(i()),w?(this.getState=v,this.setState=w):(this.getState=function(){return S.state},this.setState=function(i,s){var o=S.state;S.state=l({},o,i),function(i,s){if(n(i,s))return!0;if("object"!==e(i)||null===i||"object"!==e(s)||null===s)return!1;var o=Object.keys(i),r=Object.keys(s);if(o.length!==r.length)return!1;for(var a=0;a<o.length;a++)if(!t.call(s,o[a])||!n(i[o[a]],s[o[a]]))return!1;return!0}(S.state,o)||(y&&y(S.state,o),S.isMounted&&S.onUpdate(o)),s&&s()}),O&&h("Initial state (passed)",O),this.getContainerNode=i,this.itemHeights=new m(i,this.getState),H&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(O||this.getInitialState(x),function(){S.itemHeights.onInitItemHeights()}),h("Items count",r.length),M&&h("Estimated item height",M)}var u,f,S;return u=a,(f=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=l({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return h("Initial state (created)",n),h("First shown item index",n.firstShownItemIndex),h("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems.length;return n>0&&(e=Math.min(0,n-1),t=this.getLastShownItemIndex(e,n)),this.preserveScrollPositionAtBottomOnMount&&(e=0,t=n-1),this.onBeforeShowItems(e,t),{itemHeights:new Array(n),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onBeforeShowItems",value:function(e,t){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var n=e;n<=t;)this.onItemFirstRender(n),n++;this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}else{if(e<this.firstSeenItemIndex){for(var i=e,s=Math.min(t,this.firstSeenItemIndex-1),o=i;o<=s;)this.onItemFirstRender(o),o++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var r=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=r;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.onInitialRender("mount"),this.isMounted=!0,this.screenWidth=r(),this.screenHeight=o(),this.updateScrollPosition(),window.addEventListener("scroll",this.updateScrollPosition),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onInitialRender",value:function(e){var t=this.getState(),n=t.firstShownItemIndex,i=t.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(n,i),this.preserveScrollPositionAtBottomOnMount?window.scrollTo(0,s()+(document.documentElement.scrollHeight-this.preserveScrollPositionAtBottomOnMount.documentHeight)):this.onUpdateShownItemIndexes({reason:e})}},{key:"shouldUpdateLayoutOnWindowResize",value:function(e){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1;var t=r(),n=o(),i=this.screenWidth,s=this.screenHeight;return this.screenWidth=t,this.screenHeight=n,t!==i||n!==s&&(this.onUpdateShownItemIndexes({reason:"resize"}),!1)}},{key:"onUnmount",value:function(){this.isMounted=!1,window.removeEventListener("scroll",this.updateScrollPosition),this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,s=t.lastShownItemIndex;i===e.firstShownItemIndex&&s===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,s)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(h("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),d()&&h("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){d()&&(h("~ Item state changed ~"),h("Item",e),h("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),h("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(h("~ Item height changed ~"),h("Item",e),h("Previous height",n),h("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=i(this.getContainerNode()).top,n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,s,o,r=0,a=!1,d=0;d<this.getItemsCount();){var u=this.itemHeights.get(d);if(void 0===u){h("Item ".concat(d," height hasn't been measured yet: render and redo layout")),o=d,void 0===i&&(i=d);var m=t-(n+r);s=Math.min(d+(this.getEstimatedItemsCount(m)-1),this.getItemsCount()-1),a=!0;break}if(r+=u,void 0===i&&n+r>e&&(h("First visible item index (including margin)",d),i=d),d<this.getItemsCount()-1&&(r+=this.getItemSpacing()),n+r>t){h("Last visible item index (including margin)",d),void 0!==i&&(s=d);break}d++}return void 0!==i&&void 0===s&&h("Last item index (is fully visible)",s=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(s<this.restoreScrollAfterPrepend.index&&(s=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(s=Math.min(s,o+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:s,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(!(i>e&&n<t))return this.getOffscreenListShownItemIndexes();var s=this.getVisibleItemIndexes(e,t,n);return void 0===s.firstShownItemIndex?this.getOffscreenListShownItemIndexes():s}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this,t=Date.now();!function n(){e.isMounted&&(void 0!==e.top&&i(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementTopCoordinateTimer=setTimeout(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass){var e=this.getState().firstShownItemIndex,t=this.getState().lastShownItemIndex;return{firstShownItemIndex:e,lastShownItemIndex:t=Math.min(t+this.bypassBatchSize,this.getItemsCount()-1),redoLayoutAfterRender:t<this.getItemsCount()-1}}var n=i(this.getContainerNode()),r=n.top,a=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=r;var h=function(){var e=o();return{top:s(),bottom:s()+e,height:e}}(),d=h.top,u=h.bottom;return this.latestLayoutScreenTopAfterMargin=d-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=u+this.getMargin(),this.getItemIndexes(d-this.getMargin(),u+this.getMargin(),r,r+a)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=this.getState().items,s=this.getState(),o=s.firstShownItemIndex,r=s.lastShownItemIndex,a=s.beforeItemsHeight,d=s.afterItemsHeight,u=s.itemStates,m=s.itemHeights;s.itemSpacing;h("~ Update items ~");var g=function(e,t){var n=-1,i=-1;e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1);if(n>=0&&i>=0)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(i,e),I=g.prependedItemsCount,c=g.appendedItemsCount,f=I>0||c>0;f?(I>0&&(h("Prepended items count",I),m=new Array(I).concat(m),this.itemHeights.onPrepend(I),u&&(u=new Array(I).concat(u)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,I)),c>0&&(h("Appended items count",c),m=m.concat(new Array(c)),u&&(u=u.concat(new Array(c)))),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=I,this.lastSeenItemIndex+=I),o+=I,r+=I,a+=this.itemHeights.getAverage()*I,d+=this.itemHeights.getAverage()*c):(h("Non-incremental items update"),h("Previous items",i),h("New items",e),m=new Array(e.length),u=new Array(e.length),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,0===e.length?(o=void 0,r=void 0):(o=0,r=this.getLastShownItemIndex(o,e.length)),a=0,d=0),h("First shown item index",o),h("Last shown item index",r),h("Before items height",a),h("After items height",d),this.onBeforeShowItems(o,r),this.setState(l({},void 0,{items:e,itemStates:u,itemHeights:m,firstShownItemIndex:o,lastShownItemIndex:r,beforeItemsHeight:a,afterItemsHeight:d}),function(){f||t.itemHeights.onInitItemHeights(),t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&g(u.prototype,f),S&&g(u,S),a}()});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function i(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function n(e){var t=e.getBoundingClientRect(),i=document.clientLeft||document.body.clientLeft||0,n=document.clientTop||document.body.clientTop||0,s=window.pageYOffset,o=window.pageXOffset;return{top:t.top+s-n,left:t.left+o-i,width:t.width,height:t.height}}function s(){return window.pageYOffset}function o(){return window.innerHeight}function r(){return window.innerWidth}function a(e){return function(e){if(Array.isArray(e)){for(var t=0,i=new Array(e.length);t<e.length;t++)i[t]=e[t];return i}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function h(){if(d()){for(var e,t=arguments.length,i=new Array(t),n=0;n<t;n++)i[n]=arguments[n];(e=console).log.apply(e,a(["[virtual-scroller]"].concat(i)))}}function d(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function u(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var m=function(){function e(t,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.reset()}var t,i,n;return t=e,(i=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var i=this.getContainerNode();if(i){var n=e-t;if(n>=0&&n<i.childNodes.length)return i.childNodes[n].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],i=e.childNodes[1],n=t.getBoundingClientRect(),s=i.getBoundingClientRect().top-(n.top+n.height);return window.VirtualScrollerDebug&&h("Item spacing",s),s}}},{key:"update",value:function(e,t,i){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var n=this.firstMeasuredItemIndex,s=this.lastMeasuredItemIndex,o=!1,r=e;r<=t;){var a=this._getItemHeight(r,i);void 0!==a&&(this.set(r,a),(void 0===n||r<n)&&(this.measuredItemsHeight+=a,o||(this.firstMeasuredItemIndex=r,o=!0)),(void 0===s||r>s)&&(void 0!==s&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=r)),r++}}},{key:"updateItemHeight",value:function(e,t){var i=this.get(e),n=this._getItemHeight(e,t);void 0!==i&&void 0!==n&&(this.set(e,n),this.measuredItemsHeight+=n-i)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&u(t.prototype,i),n&&u(t,n),e}();function l(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{},n=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter(function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable}))),n.forEach(function(t){I(e,t,i[t])})}return e}function g(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function I(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}var c=250;return function(){function a(n,r){var u,g,f,S=this,p=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),I(this,"updateLayout",function(){return S.onUpdateShownItemIndexes({reason:"manual"})}),I(this,"onScroll",function(){return S.onUpdateShownItemIndexes({reason:"scroll"})}),I(this,"restoreScrollPosition",function(){var e=S.getState().scrollY;void 0!==e&&window.scrollTo(0,e)}),I(this,"updateScrollPosition",function(){return S.getState().scrollY=s()}),I(this,"layout",function(){return S.updateLayout()}),I(this,"onResize",(u=function(e){S.isMounted&&S.shouldUpdateLayoutOnWindowResize(e)&&(h("~ Window width changed, re-measure item heights. ~"),S.setState(S.getInitialLayoutState(),function(){S.onInitialRender("resize")}))},g=c,function(){clearTimeout(f),f=setTimeout(u,g)})),I(this,"updateShownItemIndexes",function(e){var t=S.getShownItemIndexes(),i=t.firstShownItemIndex,n=t.lastShownItemIndex,s=t.redoLayoutAfterRender,o=S.getBeforeItemsHeight(i,n),r=S.getAfterItemsHeight(i,n);S.updateWillBeHiddenItemHeightsAndState(i,n),h("~ Layout results "+(S.bypass?"(bypass) ":"")+"~"),h("First shown item index",i),h("Last shown item index",n),h("Before items height",o),h("After items height",r),h("Average item height (calculated on previous render)",S.itemHeights.getAverage()),d()&&(h("Item heights",S.getState().itemHeights.slice()),h("Item states",S.getState().itemStates.slice())),s&&h("Redo layout after render"),void 0!==S.firstSeenItemIndex&&(i>S.lastSeenItemIndex+1||n<S.firstSeenItemIndex-1)&&(S.firstSeenItemIndex=void 0,S.lastSeenItemIndex=void 0),S.onBeforeShowItems(i,n),S.setState({firstShownItemIndex:i,lastShownItemIndex:n,beforeItemsHeight:o,afterItemsHeight:r},function(){return e(s)})}),I(this,"updateShownItemIndexesRecursive",function(){S.updateShownItemIndexes(function(e){e?setTimeout(function(){S.isMounted?S.updateShownItemIndexesRecursive():S.onDoneUpdatingItemIndexes()},0):S.onDoneUpdatingItemIndexes()})}),I(this,"restoreScroll",function(){var e=S.restoreScrollAfterPrepend,t=e.index,i=e.screenTop;S.restoreScrollAfterPrepend=void 0;var n=S.getItemElement(t).getBoundingClientRect().top-i;0!==n&&(h("Restore scroll position: scroll by",n),window.scrollTo(0,s()+n))}),I(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==S.getItemsCount()&&!S.isUpdatingItemIndexes){if(clearTimeout(S.onUserStopsScrollingTimeout),"scroll"===t){var i=void 0!==S.latestLayoutScreenTopAfterMargin&&s()<S.latestLayoutScreenTopAfterMargin&&S.getState().firstShownItemIndex>0||void 0!==S.latestLayoutScreenBottomAfterMargin&&s()+o()>S.latestLayoutScreenBottomAfterMargin&&S.getState().lastShownItemIndex<S.getItemsCount()-1;if(h(i?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!i)return S.onUserStopsScrollingTimeout=setTimeout(S.onUserStoppedScrolling,100)}h("~ Update layout (".concat(t,") ~")),S.isUpdatingItemIndexes=!0,S.updateShownItemIndexesRecursive()}}),I(this,"onUserStoppedScrolling",function(){S.isMounted&&S.updateLayout("stopped scrolling")});var v=p.getState,w=p.setState,y=p.onStateChange,x=p.customState,H=p.preserveScrollPositionAtBottomOnMount,b=p.shouldUpdateLayoutOnWindowResize,A=p.measureItemsBatchSize,C=p.bypass,k=p.estimatedItemHeight,M=p.onItemFirstRender,L=p.state;h("~ Initialize ~"),L&&(r=L.items),this.bypass=C,this.initialItems=r,this.estimatedItemHeight=k,this._shouldUpdateLayoutOnWindowResize=b,this.measureItemsBatchSize=void 0===A?50:A,M&&(this.onItemFirstRender=M),n()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(n()),w?(this.getState=v,this.setState=w):(this.getState=function(){return S.state},this.setState=function(n,s){var o=S.state;S.state=l({},o,n),function(n,s){if(i(n,s))return!0;if("object"!==e(n)||null===n||"object"!==e(s)||null===s)return!1;var o=Object.keys(n),r=Object.keys(s);if(o.length!==r.length)return!1;for(var a=0;a<o.length;a++)if(!t.call(s,o[a])||!i(n[o[a]],s[o[a]]))return!1;return!0}(S.state,o)||(y&&y(S.state,o),S.isMounted&&S.onUpdate(o)),s&&s()}),L&&h("Initial state (passed)",L),this.getContainerNode=n,this.itemHeights=new m(n,this.getState),H&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(L||this.getInitialState(x),function(){S.itemHeights.onInitItemHeights()}),h("Items count",r.length),k&&h("Estimated item height",k)}var u,f,S;return u=a,(f=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,i=l({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return h("Initial state (created)",i),h("First shown item index",i.firstShownItemIndex),h("Last shown item index",i.lastShownItemIndex),i}},{key:"getInitialLayoutState",value:function(){var e,t,i=this.initialItems.length;return i>0&&(e=0,t=this.getLastShownItemIndex(e,i)),this.preserveScrollPositionAtBottomOnMount&&(e=0,t=i-1),this.onBeforeShowItems(e,t),{itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onBeforeShowItems",value:function(e,t){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var i=e;i<=t;)this.onItemFirstRender(i),i++;this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}else{if(e<this.firstSeenItemIndex){for(var n=e,s=Math.min(t,this.firstSeenItemIndex-1),o=n;o<=s;)this.onItemFirstRender(o),o++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var r=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=r;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.onInitialRender("mount"),this.isMounted=!0,this.screenWidth=r(),this.screenHeight=o(),this.restoreScrollPosition(),this.updateScrollPosition(),window.addEventListener("scroll",this.updateScrollPosition),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onInitialRender",value:function(e){var t=this.getState(),i=t.firstShownItemIndex,n=t.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(i,n),this.preserveScrollPositionAtBottomOnMount?window.scrollTo(0,s()+(document.documentElement.scrollHeight-this.preserveScrollPositionAtBottomOnMount.documentHeight)):this.onUpdateShownItemIndexes({reason:e})}},{key:"shouldUpdateLayoutOnWindowResize",value:function(e){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1;var t=r(),i=o(),n=this.screenWidth,s=this.screenHeight;return this.screenWidth=t,this.screenHeight=i,t!==n||i!==s&&(this.onUpdateShownItemIndexes({reason:"resize"}),!1)}},{key:"onUnmount",value:function(){this.isMounted=!1,window.removeEventListener("scroll",this.updateScrollPosition),this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),i=t.items,n=t.firstShownItemIndex,s=t.lastShownItemIndex;n===e.firstShownItemIndex&&s===e.lastShownItemIndex&&i===e.items||this.updateItemHeights(n,s)}},{key:"updateItemHeights",value:function(e,t){var i=this.getState().firstShownItemIndex;void 0!==e&&(h("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,i),d()&&h("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){d()&&(h("~ Item state changed ~"),h("Item",e),h("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),h("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,i=t[e];this.updateItemHeight(e);var n=t[e];i!==n&&(h("~ Item height changed ~"),h("Item",e),h("Previous height",i),h("New height",n),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=n(this.getContainerNode()).top,i=0;i<e;)t+=this.getState().itemHeights[i],t+=this.getItemSpacing(),i++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[i]}}},{key:"getVisibleItemIndexes",value:function(e,t,i){for(var n,s,o,r=0,a=!1,d=0;d<this.getItemsCount();){var u=this.itemHeights.get(d);if(void 0===u){h("Item ".concat(d," height hasn't been measured yet: render and redo layout")),o=d,void 0===n&&(n=d);var m=t-(i+r);s=Math.min(d+(this.getEstimatedItemsCount(m)-1),this.getItemsCount()-1),a=!0;break}if(r+=u,void 0===n&&i+r>e&&(h("First visible item index (including margin)",d),n=d),d<this.getItemsCount()-1&&(r+=this.getItemSpacing()),i+r>t){h("Last visible item index (including margin)",d),void 0!==n&&(s=d);break}d++}return void 0!==n&&void 0===s&&h("Last item index (is fully visible)",s=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(s<this.restoreScrollAfterPrepend.index&&(s=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(s=Math.min(s,o+this.measureItemsBatchSize-1)),{firstShownItemIndex:n,lastShownItemIndex:s,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,i,n){if(!(n>e&&i<t))return this.getOffscreenListShownItemIndexes();var s=this.getVisibleItemIndexes(e,t,i);return void 0===s.firstShownItemIndex?this.getOffscreenListShownItemIndexes():s}},{key:"getBeforeItemsHeight",value:function(e,t){for(var i=0,n=0;n<e;)i+=this.itemHeights.get(n)||this.itemHeights.getAverage(),i+=this.getItemSpacing(),n++;return i}},{key:"getAfterItemsHeight",value:function(e,t){for(var i=0,n=t+1;n<this.getItemsCount();)i+=this.getItemSpacing(),i+=this.itemHeights.get(n)||this.itemHeights.getAverage(),n++;return i}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var i=this.getState().firstShownItemIndex;i<=this.getState().lastShownItemIndex;)i>=e&&i<=t||this.updateItemHeight(i),i++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this,t=Date.now();!function i(){e.isMounted&&(void 0!==e.top&&n(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementTopCoordinateTimer=setTimeout(i,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=n(this.getContainerNode()),t=e.top,i=e.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=t;var r=function(){var e=o();return{top:s(),bottom:s()+e,height:e}}(),a=r.top,h=r.bottom;return this.latestLayoutScreenTopAfterMargin=a-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=h+this.getMargin(),this.getItemIndexes(a-this.getMargin(),h+this.getMargin(),t,t+i)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,i){0!==e.length&&(void 0===i&&(i=t.indexOf(e[0])),i<0||0!==i&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:i,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this.getState().items,s=this.getState(),o=s.firstShownItemIndex,r=s.lastShownItemIndex,a=s.beforeItemsHeight,d=s.afterItemsHeight,u=s.itemStates,m=s.itemHeights;s.itemSpacing;h("~ Update items ~");var g=function(e,t){var i=-1,n=-1;e.length>0&&(i=t.indexOf(e[0]))>=0&&function(e,t,i){var n=0;for(;n<e.length;){if(t.length<=i+n||t[i+n]!==e[n])return!1;n++}return!0}(e,t,i)&&(n=i+e.length-1);if(i>=0&&n>=0)return{prependedItemsCount:i,appendedItemsCount:t.length-(n+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(n,e),I=g.prependedItemsCount,c=g.appendedItemsCount,f=I>0||c>0;f?(I>0&&(h("Prepended items count",I),m=new Array(I).concat(m),this.itemHeights.onPrepend(I),u&&(u=new Array(I).concat(u)),(i.preserveScrollPositionOnPrependItems||i.preserveScrollPosition)&&this.captureScroll(n,e,I)),c>0&&(h("Appended items count",c),m=m.concat(new Array(c)),u&&(u=u.concat(new Array(c)))),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=I,this.lastSeenItemIndex+=I),o+=I,r+=I,a+=this.itemHeights.getAverage()*I,d+=this.itemHeights.getAverage()*c):(h("Non-incremental items update"),h("Previous items",n),h("New items",e),m=new Array(e.length),u=new Array(e.length),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,0===e.length?(o=void 0,r=void 0):(o=0,r=this.getLastShownItemIndex(o,e.length)),a=0,d=0),h("First shown item index",o),h("Last shown item index",r),h("Before items height",a),h("After items height",d),this.onBeforeShowItems(o,r),this.setState(l({},void 0,{items:e,itemStates:u,itemHeights:m,firstShownItemIndex:o,lastShownItemIndex:r,beforeItemsHeight:a,afterItemsHeight:d}),function(){f||t.itemHeights.onInitItemHeights(),t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&g(u.prototype,f),S&&g(u,S),a}()});
 //# sourceMappingURL=virtual-scroller.js.map

CHANGELOG.md

 <!-- `virtual-scroller`: in `.updateItems()` handle a case when `items.length` is the same, in which case find different items and if those items are rendered then maybe update them on screen and update their height, if the items are past rendered then maybe just discard all item heights past rendered, if the items are before rendered then maybe ignore and it will jump on scroll up which is kinda acceptable. -->
 
+1.1.0 / 23.02.2020
+===================
+
+* `state.scrollY` is now applied on mount: if initial `state` is passed, then the page will be scrolled to `state.scrollY` on `VirtualScroller` mount.
+
+* Documented `bypass: boolean` property/option. Can be used on server side to render the full list of items (for example, search engine indexing).
+
 1.0.26 / 19.01.2020
@@ -4,0 +11,0 @@ ===================

commonjs/ReactVirtualScroller.js

@@ -121,4 +121,3 @@ "use strict";
         measureItemsBatchSize = _this$props.measureItemsBatchSize,
-        bypass = _this$props.bypass,
-        bypassBatchSize = _this$props.bypassBatchSize; // `this.previousItemsProperty` is only used for comparing
+        bypass = _this$props.bypass; // `this.previousItemsProperty` is only used for comparing
     // `previousItems` with `newItems` in `render()`.
@@ -133,3 +132,3 @@
       bypass: bypass,
-      bypassBatchSize: bypassBatchSize,
+      // bypassBatchSize,
       onItemFirstRender: _this.onItemFirstRender,
@@ -348,3 +347,2 @@ preserveScrollPositionAtBottomOnMount: preserveScrollPositionAtBottomOnMount,
           bypass = _this$props3.bypass,
-          bypassBatchSize = _this$props3.bypassBatchSize,
           preserveScrollPositionOnPrependItems = _this$props3.preserveScrollPositionOnPrependItems,
@@ -360,3 +358,3 @@ preserveScrollPosition = _this$props3.preserveScrollPosition,
           onMount = _this$props3.onMount,
-          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "initialState", "initialCustomState", "onStateChange", "onItemFirstRender", "onMount"]);
+          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "initialState", "initialCustomState", "onStateChange", "onItemFirstRender", "onMount"]);
 
@@ -486,3 +484,3 @@ var _this$virtualScroller = this.virtualScroller.getState(),
   bypass: _propTypes["default"].bool,
-  bypassBatchSize: _propTypes["default"].number,
+  // bypassBatchSize: PropTypes.number,
   preserveScrollPositionOnPrependItems: _propTypes["default"].bool,
@@ -489,0 +487,0 @@ // `preserveScrollPosition` property name is deprecated,

commonjs/VirtualScroller.js

@@ -65,2 +65,11 @@ "use strict";
 
+    _defineProperty(this, "restoreScrollPosition", function () {
+      var _this$getState = _this.getState(),
+          scrollY = _this$getState.scrollY;
+
+      if (scrollY !== undefined) {
+        window.scrollTo(0, scrollY);
+      }
+    });
+
     _defineProperty(this, "updateScrollPosition", function () {
@@ -286,4 +295,3 @@ return _this.getState().scrollY = (0, _DOM.getScrollY)();
         measureItemsBatchSize = options.measureItemsBatchSize,
-        bypass = options.bypass,
-        bypassBatchSize = options.bypassBatchSize;
+        bypass = options.bypass;
     var estimatedItemHeight = options.estimatedItemHeight,
@@ -303,9 +311,16 @@ onItemFirstRender = options.onItemFirstRender,
     // }
-    // `bypass` mode could work but turns out that
-    // unmounting large React component trees is a
-    // very long process, so it's still not a viable UX.
+    // In `bypass` mode, `VirtualScroller` doesn't wait
+    // for the user to scroll down to render all items:
+    // instead, it renders all items right away, as if
+    // the list is rendered without using `VirtualScroller`.
+    // It was added just to measure how much is the
+    // performance difference between using a `VirtualScroller`
+    // and not using a `VirtualScroller`.
+    // It turned out that unmounting large React component trees
+    // is a very long process, so `VirtualScroller` does seem to
+    // make sense when used in a React application.
 
 
-    this.bypass = bypass;
-    this.bypassBatchSize = bypassBatchSize || 10;
+    this.bypass = bypass; // this.bypassBatchSize = bypassBatchSize || 10
+
     this.initialItems = items; // this.margin = margin
@@ -409,3 +424,3 @@
       if (itemsCount > 0) {
-        firstShownItemIndex = Math.min(0, itemsCount - 1);
+        firstShownItemIndex = 0;
         lastShownItemIndex = this.getLastShownItemIndex(firstShownItemIndex, itemsCount);
@@ -468,2 +483,6 @@ }
     value: function getLastShownItemIndex(firstShownItemIndex, itemsCount) {
+      if (this.bypass) {
+        return itemsCount - 1;
+      }
+
       return Math.min(firstShownItemIndex + (this.getEstimatedItemsCountOnScreen() - 1), itemsCount - 1);
@@ -540,2 +559,3 @@ }
       this.screenHeight = (0, _DOM.getScreenHeight)();
+      this.restoreScrollPosition();
       this.updateScrollPosition();
@@ -552,5 +572,5 @@ window.addEventListener('scroll', this.updateScrollPosition);
     value: function onInitialRender(reason) {
-      var _this$getState = this.getState(),
-          firstShownItemIndex = _this$getState.firstShownItemIndex,
-          lastShownItemIndex = _this$getState.lastShownItemIndex; // If there're any items.
+      var _this$getState2 = this.getState(),
+          firstShownItemIndex = _this$getState2.firstShownItemIndex,
+          lastShownItemIndex = _this$getState2.lastShownItemIndex; // If there're any items.
 
@@ -631,6 +651,6 @@
     value: function onUpdate(prevState) {
-      var _this$getState2 = this.getState(),
-          items = _this$getState2.items,
-          firstShownItemIndex = _this$getState2.firstShownItemIndex,
-          lastShownItemIndex = _this$getState2.lastShownItemIndex; // If new items are shown (or older items are hidden).
+      var _this$getState3 = this.getState(),
+          items = _this$getState3.items,
+          firstShownItemIndex = _this$getState3.firstShownItemIndex,
+          lastShownItemIndex = _this$getState3.lastShownItemIndex; // If new items are shown (or older items are hidden).
 
@@ -652,4 +672,4 @@
     value: function updateItemHeights(fromIndex, toIndex) {
-      var _this$getState3 = this.getState(),
-          firstShownItemIndex = _this$getState3.firstShownItemIndex;
+      var _this$getState4 = this.getState(),
+          firstShownItemIndex = _this$getState4.firstShownItemIndex;
 
@@ -668,4 +688,4 @@ if (fromIndex !== undefined) {
     value: function updateItemHeight(i) {
-      var _this$getState4 = this.getState(),
-          firstShownItemIndex = _this$getState4.firstShownItemIndex;
+      var _this$getState5 = this.getState(),
+          firstShownItemIndex = _this$getState5.firstShownItemIndex;
 
@@ -689,4 +709,4 @@ this.itemHeights.updateItemHeight(i, firstShownItemIndex);
     value: function onItemHeightChange(i) {
-      var _this$getState5 = this.getState(),
-          itemHeights = _this$getState5.itemHeights;
+      var _this$getState6 = this.getState(),
+          itemHeights = _this$getState6.itemHeights;
 
@@ -1028,14 +1048,18 @@ var previousHeight = itemHeights[i];
       if (this.bypass) {
-        var _this$getState6 = this.getState(),
-            firstShownItemIndex = _this$getState6.firstShownItemIndex;
+        return {
+          firstShownItemIndex: 0,
+          lastShownItemIndex: this.getItemsCount() - 1 // This code emulates batch loading in bypass mode.
+          // const { firstShownItemIndex } = this.getState()
+          // let { lastShownItemIndex } = this.getState()
+          // lastShownItemIndex = Math.min(
+          // 	lastShownItemIndex + this.bypassBatchSize,
+          // 	this.getItemsCount() - 1
+          // )
+          // return {
+          // 	firstShownItemIndex,
+          // 	lastShownItemIndex,
+          // 	// Redo layout until all items are rendered.
+          // 	redoLayoutAfterRender: lastShownItemIndex < this.getItemsCount() - 1
+          // }
 
-        var _this$getState7 = this.getState(),
-            lastShownItemIndex = _this$getState7.lastShownItemIndex;
-
-        lastShownItemIndex = Math.min(lastShownItemIndex + this.bypassBatchSize, this.getItemsCount() - 1);
-        return {
-          firstShownItemIndex: firstShownItemIndex,
-          lastShownItemIndex: lastShownItemIndex,
-          // Redo layout untill all items are rendered.
-          redoLayoutAfterRender: lastShownItemIndex < this.getItemsCount() - 1
         };
@@ -1169,14 +1193,14 @@ } // // A minor optimization. Just because I can.
       // * @param  {object} [newCustomState] — If `customState` was passed to `getInitialState()`, this `newCustomState` updates it.
+      var _this$getState7 = this.getState(),
+          previousItems = _this$getState7.items;
+
       var _this$getState8 = this.getState(),
-          previousItems = _this$getState8.items;
+          firstShownItemIndex = _this$getState8.firstShownItemIndex,
+          lastShownItemIndex = _this$getState8.lastShownItemIndex,
+          beforeItemsHeight = _this$getState8.beforeItemsHeight,
+          afterItemsHeight = _this$getState8.afterItemsHeight,
+          itemStates = _this$getState8.itemStates,
+          itemHeights = _this$getState8.itemHeights,
+          itemSpacing = _this$getState8.itemSpacing;
 
-      var _this$getState9 = this.getState(),
-          firstShownItemIndex = _this$getState9.firstShownItemIndex,
-          lastShownItemIndex = _this$getState9.lastShownItemIndex,
-          beforeItemsHeight = _this$getState9.beforeItemsHeight,
-          afterItemsHeight = _this$getState9.afterItemsHeight,
-          itemStates = _this$getState9.itemStates,
-          itemHeights = _this$getState9.itemHeights,
-          itemSpacing = _this$getState9.itemSpacing;
-
       (0, _log["default"])('~ Update items ~');
@@ -1183,0 +1207,0 @@

modules/ReactVirtualScroller.js

@@ -105,4 +105,3 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
         measureItemsBatchSize = _this$props.measureItemsBatchSize,
-        bypass = _this$props.bypass,
-        bypassBatchSize = _this$props.bypassBatchSize; // `this.previousItemsProperty` is only used for comparing
+        bypass = _this$props.bypass; // `this.previousItemsProperty` is only used for comparing
     // `previousItems` with `newItems` in `render()`.
@@ -117,3 +116,3 @@
       bypass: bypass,
-      bypassBatchSize: bypassBatchSize,
+      // bypassBatchSize,
       onItemFirstRender: _this.onItemFirstRender,
@@ -332,3 +331,2 @@ preserveScrollPositionAtBottomOnMount: preserveScrollPositionAtBottomOnMount,
           bypass = _this$props3.bypass,
-          bypassBatchSize = _this$props3.bypassBatchSize,
           preserveScrollPositionOnPrependItems = _this$props3.preserveScrollPositionOnPrependItems,
@@ -344,3 +342,3 @@ preserveScrollPosition = _this$props3.preserveScrollPosition,
           onMount = _this$props3.onMount,
-          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "initialState", "initialCustomState", "onStateChange", "onItemFirstRender", "onMount"]);
+          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "initialState", "initialCustomState", "onStateChange", "onItemFirstRender", "onMount"]);
 
@@ -468,3 +466,3 @@ var _this$virtualScroller = this.virtualScroller.getState(),
   bypass: PropTypes.bool,
-  bypassBatchSize: PropTypes.number,
+  // bypassBatchSize: PropTypes.number,
   preserveScrollPositionOnPrependItems: PropTypes.bool,
@@ -471,0 +469,0 @@ // `preserveScrollPosition` property name is deprecated,

modules/VirtualScroller.js

@@ -48,2 +48,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
+    _defineProperty(this, "restoreScrollPosition", function () {
+      var _this$getState = _this.getState(),
+          scrollY = _this$getState.scrollY;
+
+      if (scrollY !== undefined) {
+        window.scrollTo(0, scrollY);
+      }
+    });
+
     _defineProperty(this, "updateScrollPosition", function () {
@@ -269,4 +278,3 @@ return _this.getState().scrollY = getScrollY();
         measureItemsBatchSize = options.measureItemsBatchSize,
-        bypass = options.bypass,
-        bypassBatchSize = options.bypassBatchSize;
+        bypass = options.bypass;
     var estimatedItemHeight = options.estimatedItemHeight,
@@ -286,9 +294,16 @@ onItemFirstRender = options.onItemFirstRender,
     // }
-    // `bypass` mode could work but turns out that
-    // unmounting large React component trees is a
-    // very long process, so it's still not a viable UX.
+    // In `bypass` mode, `VirtualScroller` doesn't wait
+    // for the user to scroll down to render all items:
+    // instead, it renders all items right away, as if
+    // the list is rendered without using `VirtualScroller`.
+    // It was added just to measure how much is the
+    // performance difference between using a `VirtualScroller`
+    // and not using a `VirtualScroller`.
+    // It turned out that unmounting large React component trees
+    // is a very long process, so `VirtualScroller` does seem to
+    // make sense when used in a React application.
 
 
-    this.bypass = bypass;
-    this.bypassBatchSize = bypassBatchSize || 10;
+    this.bypass = bypass; // this.bypassBatchSize = bypassBatchSize || 10
+
     this.initialItems = items; // this.margin = margin
@@ -392,3 +407,3 @@
       if (itemsCount > 0) {
-        firstShownItemIndex = Math.min(0, itemsCount - 1);
+        firstShownItemIndex = 0;
         lastShownItemIndex = this.getLastShownItemIndex(firstShownItemIndex, itemsCount);
@@ -451,2 +466,6 @@ }
     value: function getLastShownItemIndex(firstShownItemIndex, itemsCount) {
+      if (this.bypass) {
+        return itemsCount - 1;
+      }
+
       return Math.min(firstShownItemIndex + (this.getEstimatedItemsCountOnScreen() - 1), itemsCount - 1);
@@ -523,2 +542,3 @@ }
       this.screenHeight = getScreenHeight();
+      this.restoreScrollPosition();
       this.updateScrollPosition();
@@ -535,5 +555,5 @@ window.addEventListener('scroll', this.updateScrollPosition);
     value: function onInitialRender(reason) {
-      var _this$getState = this.getState(),
-          firstShownItemIndex = _this$getState.firstShownItemIndex,
-          lastShownItemIndex = _this$getState.lastShownItemIndex; // If there're any items.
+      var _this$getState2 = this.getState(),
+          firstShownItemIndex = _this$getState2.firstShownItemIndex,
+          lastShownItemIndex = _this$getState2.lastShownItemIndex; // If there're any items.
 
@@ -614,6 +634,6 @@
     value: function onUpdate(prevState) {
-      var _this$getState2 = this.getState(),
-          items = _this$getState2.items,
-          firstShownItemIndex = _this$getState2.firstShownItemIndex,
-          lastShownItemIndex = _this$getState2.lastShownItemIndex; // If new items are shown (or older items are hidden).
+      var _this$getState3 = this.getState(),
+          items = _this$getState3.items,
+          firstShownItemIndex = _this$getState3.firstShownItemIndex,
+          lastShownItemIndex = _this$getState3.lastShownItemIndex; // If new items are shown (or older items are hidden).
 
@@ -635,4 +655,4 @@
     value: function updateItemHeights(fromIndex, toIndex) {
-      var _this$getState3 = this.getState(),
-          firstShownItemIndex = _this$getState3.firstShownItemIndex;
+      var _this$getState4 = this.getState(),
+          firstShownItemIndex = _this$getState4.firstShownItemIndex;
 
@@ -651,4 +671,4 @@ if (fromIndex !== undefined) {
     value: function updateItemHeight(i) {
-      var _this$getState4 = this.getState(),
-          firstShownItemIndex = _this$getState4.firstShownItemIndex;
+      var _this$getState5 = this.getState(),
+          firstShownItemIndex = _this$getState5.firstShownItemIndex;
 
@@ -672,4 +692,4 @@ this.itemHeights.updateItemHeight(i, firstShownItemIndex);
     value: function onItemHeightChange(i) {
-      var _this$getState5 = this.getState(),
-          itemHeights = _this$getState5.itemHeights;
+      var _this$getState6 = this.getState(),
+          itemHeights = _this$getState6.itemHeights;
 
@@ -1011,14 +1031,18 @@ var previousHeight = itemHeights[i];
       if (this.bypass) {
-        var _this$getState6 = this.getState(),
-            firstShownItemIndex = _this$getState6.firstShownItemIndex;
+        return {
+          firstShownItemIndex: 0,
+          lastShownItemIndex: this.getItemsCount() - 1 // This code emulates batch loading in bypass mode.
+          // const { firstShownItemIndex } = this.getState()
+          // let { lastShownItemIndex } = this.getState()
+          // lastShownItemIndex = Math.min(
+          // 	lastShownItemIndex + this.bypassBatchSize,
+          // 	this.getItemsCount() - 1
+          // )
+          // return {
+          // 	firstShownItemIndex,
+          // 	lastShownItemIndex,
+          // 	// Redo layout until all items are rendered.
+          // 	redoLayoutAfterRender: lastShownItemIndex < this.getItemsCount() - 1
+          // }
 
-        var _this$getState7 = this.getState(),
-            lastShownItemIndex = _this$getState7.lastShownItemIndex;
-
-        lastShownItemIndex = Math.min(lastShownItemIndex + this.bypassBatchSize, this.getItemsCount() - 1);
-        return {
-          firstShownItemIndex: firstShownItemIndex,
-          lastShownItemIndex: lastShownItemIndex,
-          // Redo layout untill all items are rendered.
-          redoLayoutAfterRender: lastShownItemIndex < this.getItemsCount() - 1
         };
@@ -1152,14 +1176,14 @@ } // // A minor optimization. Just because I can.
       // * @param  {object} [newCustomState] — If `customState` was passed to `getInitialState()`, this `newCustomState` updates it.
+      var _this$getState7 = this.getState(),
+          previousItems = _this$getState7.items;
+
       var _this$getState8 = this.getState(),
-          previousItems = _this$getState8.items;
+          firstShownItemIndex = _this$getState8.firstShownItemIndex,
+          lastShownItemIndex = _this$getState8.lastShownItemIndex,
+          beforeItemsHeight = _this$getState8.beforeItemsHeight,
+          afterItemsHeight = _this$getState8.afterItemsHeight,
+          itemStates = _this$getState8.itemStates,
+          itemHeights = _this$getState8.itemHeights,
+          itemSpacing = _this$getState8.itemSpacing;
 
-      var _this$getState9 = this.getState(),
-          firstShownItemIndex = _this$getState9.firstShownItemIndex,
-          lastShownItemIndex = _this$getState9.lastShownItemIndex,
-          beforeItemsHeight = _this$getState9.beforeItemsHeight,
-          afterItemsHeight = _this$getState9.afterItemsHeight,
-          itemStates = _this$getState9.itemStates,
-          itemHeights = _this$getState9.itemHeights,
-          itemSpacing = _this$getState9.itemSpacing;
-
       log('~ Update items ~');
@@ -1166,0 +1190,0 @@

package.json

 {
   "name": "virtual-scroller",
-  "version": "1.0.26",
+  "version": "1.1.0",
   "description": "A component for efficiently rendering large lists of variable height items",
@@ -5,0 +5,0 @@ "main": "index.commonjs.js",

README.md

@@ -78,7 +78,8 @@ # VirtualScroller
 * `onStateChange(newState: object, prevState: object?)` — Is called whenever `VirtualScroller` `state` is updated (including setting the initial `state`) if `getState()` and `setState()` properties aren't defined.
+* `bypass: boolean` — Pass `true` to turn off `VirtualScroller` behavior and just render the full list of items.
 * `onItemFirstRender(i: number)` — Is called for each item the first time it's rendered. Is guaranteed to be called at least one time for each item rendered, though could also be called multiple times. For an example of using such feature, consider a list of items that must be somehow preprocessed (parsed, enhanced, etc) before being rendered, and such preprocessing puts some load on the CPU (and therefore takes some time). In such case, instead of preprocessing the whole list of items upfront, a developer could preprocess the items as they're being rendered thereby eliminating any associated lag/freezing and draining less battery.
 <!-- * `bypass` — Set to `true` to disable the "virtual scroller" behavior: it will (eventually) render the entire list on mount and won't hide items that go offscreen as the user scrolls. -->
-* `preserveScrollPositionAtBottomOnMount: boolean` — (optional) (advanced) Set to `true` to preserve scroll position of the bottom of the list when it's first mounted. A possible use case: consider a forum thread only showing unread posts by default. If a user navigates to such thread, it could show "No new posts" message with a "Show previous" button above it. When the user clicks the "Show previous" button, a `<VirtualScroller/>` is mounted with a list of posts. If `preserveScrollPositionAtBottomOnMount: true` is set then, after the list of posts is show, page scroll will be restored so that the bottom of the list remain on screen so that the user could scroll up from the most recent posts to the oldest ones.
-* `measureItemsBatchSize: number` — (optional) (advanced) (experimental) Imagine a situation when a user doesn't gradually scroll through a huge list but instead hits an End key to scroll right to the end of such huge list: this will result in the whole list rendering at once (because an item needs to know the height of all previous items in order to render at correct scroll position) which could be CPU-intensive in some cases (for example, when using React due to its slow performance when initially rendering components on a page). To prevent freezing the UI in the process, a `measureItemsBatchSize` could be configured, that would limit the maximum count of items that're being rendered in a single pass for measuring their height: if `measureItemsBatchSize` is configured, then such items will be rendered and measured in batches. By default it's set to `100`. This is an experimental feature and could be removed in future non-major versions of this library. For example, the future React 17 will come with [Fiber](https://www.youtube.com/watch?v=ZCuYPiUIONs) rendering engine that is said to resolve such freezing issues internally. In that case, introducing this option may be reconsidered.
-* `shouldUpdateLayoutOnWindowResize(event: Event): boolean`  — (optional) By default, `VirtualScroller` always performs a re-layout on window `resize` event. The `resize` event is not only triggered when a user resizes the window itself: it's also [triggered](https://developer.mozilla.org/en-US/docs/Web/API/Window/fullScreen#Notes) when the user switches into (and out of) fullscreen mode. By default, `VirtualScroller` performs a re-layout on all window `resize` events, except for ones that don't result in actual window width or height change, and except for cases when, for example, a video somewhere in a list is maximized into fullscreen. There still can be other "custom" cases: for example, when an application uses a custom "slideshow" component (rendered outside of the list DOM element) that goes into fullscreen when a user clicks a picture or a video in the list. For such "custom" cases `shouldUpdateLayoutOnWindowResize(event)` option / property can be specified.
+* `preserveScrollPositionAtBottomOnMount: boolean` — (advanced) Set to `true` to preserve scroll position of the bottom of the list when it's first mounted. A possible use case: consider a forum thread only showing unread posts by default. If a user navigates to such thread, it could show "No new posts" message with a "Show previous" button above it. When the user clicks the "Show previous" button, a `<VirtualScroller/>` is mounted with a list of posts. If `preserveScrollPositionAtBottomOnMount: true` is set then, after the list of posts is show, page scroll will be restored so that the bottom of the list remain on screen so that the user could scroll up from the most recent posts to the oldest ones.
+* `measureItemsBatchSize: number` — (advanced) (experimental) Imagine a situation when a user doesn't gradually scroll through a huge list but instead hits an End key to scroll right to the end of such huge list: this will result in the whole list rendering at once (because an item needs to know the height of all previous items in order to render at correct scroll position) which could be CPU-intensive in some cases (for example, when using React due to its slow performance when initially rendering components on a page). To prevent freezing the UI in the process, a `measureItemsBatchSize` could be configured, that would limit the maximum count of items that're being rendered in a single pass for measuring their height: if `measureItemsBatchSize` is configured, then such items will be rendered and measured in batches. By default it's set to `100`. This is an experimental feature and could be removed in future non-major versions of this library. For example, the future React 17 will come with [Fiber](https://www.youtube.com/watch?v=ZCuYPiUIONs) rendering engine that is said to resolve such freezing issues internally. In that case, introducing this option may be reconsidered.
+* `shouldUpdateLayoutOnWindowResize(event: Event): boolean`  — By default, `VirtualScroller` always performs a re-layout on window `resize` event. The `resize` event is not only triggered when a user resizes the window itself: it's also [triggered](https://developer.mozilla.org/en-US/docs/Web/API/Window/fullScreen#Notes) when the user switches into (and out of) fullscreen mode. By default, `VirtualScroller` performs a re-layout on all window `resize` events, except for ones that don't result in actual window width or height change, and except for cases when, for example, a video somewhere in a list is maximized into fullscreen. There still can be other "custom" cases: for example, when an application uses a custom "slideshow" component (rendered outside of the list DOM element) that goes into fullscreen when a user clicks a picture or a video in the list. For such "custom" cases `shouldUpdateLayoutOnWindowResize(event)` option / property can be specified.
 
@@ -107,3 +108,3 @@ `VirtualScroller` class instance provides methods:
 * `itemSpacing: number?` — Inter-item spacing. Is `undefined` until at least two items have been rendered.
-* `scrollY: number?` — Vertical scroll offset. Is `undefined` until the component has mounted.
+* `scrollY: number?` — Page scroll Y (page vertical scroll offset). If initial `state` is passed, then the page will be scrolled to `state.scrollY` on `VirtualScroller` mount.
 
@@ -235,2 +236,3 @@ ### DOM
 * `estimatedItemHeight: number` — (optional) The `estimatedItemHeight` option of `VirtualScroller` class.
+* `bypass: boolean` — (optional) The `bypass` option of `VirtualScroller` class.
 * `preserveScrollPositionOnPrependItems: boolean` — (optional) The `preserveScrollPositionOnPrependItems` option of `VirtualScroller.setItems()` method.
@@ -241,3 +243,2 @@ * `preserveScrollPositionAtBottomOnMount: boolean` — (optional) The `preserveScrollPositionAtBottomOnMount` option of `VirtualScroller`.
 * `onItemFirstRender(i)` — (optional) The `onItemFirstRender` option of `VirtualScroller` class.
-<!-- * `bypass` — (optional) The `bypass` option of `VirtualScroller` class. -->
 <!-- * `shouldUpdateLayoutOnWindowResize(event)`  — (optional) The `shouldUpdateLayoutOnWindowResize` option of `VirtualScroller` class. -->
@@ -244,0 +245,0 @@ * `initialState: object` — (optional) The initial state for `VirtualScroller`: the `state` option of `VirtualScroller`. For example, can be used to quicky restore the list on "Back" navigation.

source/ReactVirtualScroller.js

@@ -24,3 +24,3 @@ import React from 'react'
 		bypass: PropTypes.bool,
-		bypassBatchSize: PropTypes.number,
+		// bypassBatchSize: PropTypes.number,
 		preserveScrollPositionOnPrependItems: PropTypes.bool,
@@ -89,3 +89,3 @@ // `preserveScrollPosition` property name is deprecated,
 			bypass,
-			bypassBatchSize
+			// bypassBatchSize
 		} = this.props
@@ -102,3 +102,3 @@ // `this.previousItemsProperty` is only used for comparing
 				bypass,
-				bypassBatchSize,
+				// bypassBatchSize,
 				onItemFirstRender: this.onItemFirstRender,
@@ -311,3 +311,3 @@ preserveScrollPositionAtBottomOnMount,
 			bypass,
-			bypassBatchSize,
+			// bypassBatchSize,
 			preserveScrollPositionOnPrependItems,
@@ -314,0 +314,0 @@ // `preserveScrollPosition` property name is deprecated,

source/VirtualScroller.js

@@ -39,3 +39,3 @@ import shallowEqual from './shallowEqual'
 			bypass,
-			bypassBatchSize
+			// bypassBatchSize
 		} = options
@@ -66,7 +66,14 @@
 
-		// `bypass` mode could work but turns out that
-		// unmounting large React component trees is a
-		// very long process, so it's still not a viable UX.
+		// In `bypass` mode, `VirtualScroller` doesn't wait
+		// for the user to scroll down to render all items:
+		// instead, it renders all items right away, as if
+		// the list is rendered without using `VirtualScroller`.
+		// It was added just to measure how much is the
+		// performance difference between using a `VirtualScroller`
+		// and not using a `VirtualScroller`.
+		// It turned out that unmounting large React component trees
+		// is a very long process, so `VirtualScroller` does seem to
+		// make sense when used in a React application.
 		this.bypass = bypass
-		this.bypassBatchSize = bypassBatchSize || 10
+		// this.bypassBatchSize = bypassBatchSize || 10
 
@@ -166,3 +173,3 @@ this.initialItems = items
 		if (itemsCount > 0) {
-			firstShownItemIndex = Math.min(0, itemsCount - 1)
+			firstShownItemIndex = 0
 			lastShownItemIndex = this.getLastShownItemIndex(firstShownItemIndex, itemsCount)
@@ -217,2 +224,5 @@ }
 	getLastShownItemIndex(firstShownItemIndex, itemsCount) {
+		if (this.bypass) {
+			return itemsCount - 1
+		}
 		return Math.min(
@@ -279,2 +289,3 @@ firstShownItemIndex + (this.getEstimatedItemsCountOnScreen() - 1),
 		this.screenHeight = getScreenHeight()
+		this.restoreScrollPosition()
 		this.updateScrollPosition()
@@ -311,2 +322,13 @@ window.addEventListener('scroll', this.updateScrollPosition)
 
+	/**
+	 * Restores page scroll Y on `VirtualScroller` mount
+	 * if a previously captured `VirtualScroller` `state` was passed.
+	 */
+	restoreScrollPosition = () => {
+		const { scrollY } = this.getState()
+		if (scrollY !== undefined) {
+			window.scrollTo(0, scrollY)
+		}
+	}
+
 	updateScrollPosition = () => this.getState().scrollY = getScrollY()
@@ -731,14 +753,19 @@
 		if (this.bypass) {
-			const { firstShownItemIndex } = this.getState()
-			let { lastShownItemIndex } = this.getState()
-			lastShownItemIndex = Math.min(
-				lastShownItemIndex + this.bypassBatchSize,
-				this.getItemsCount() - 1
-			)
 			return {
-				firstShownItemIndex,
-				lastShownItemIndex,
-				// Redo layout untill all items are rendered.
-				redoLayoutAfterRender: lastShownItemIndex < this.getItemsCount() - 1
+				firstShownItemIndex: 0,
+				lastShownItemIndex: this.getItemsCount() - 1
 			}
+			// This code emulates batch loading in bypass mode.
+			// const { firstShownItemIndex } = this.getState()
+			// let { lastShownItemIndex } = this.getState()
+			// lastShownItemIndex = Math.min(
+			// 	lastShownItemIndex + this.bypassBatchSize,
+			// 	this.getItemsCount() - 1
+			// )
+			// return {
+			// 	firstShownItemIndex,
+			// 	lastShownItemIndex,
+			// 	// Redo layout until all items are rendered.
+			// 	redoLayoutAfterRender: lastShownItemIndex < this.getItemsCount() - 1
+			// }
 		}
@@ -745,0 +772,0 @@ // // A minor optimization. Just because I can.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1127174

increased by0.55%

Lines of code

7177

increased by0.89%

Number of lines in readme file

390

increased by0.26%

No dependency changes