virtual-scroller - npm Package Compare versions

Comparing version 1.0.23 to 1.0.24

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,s=window.pageYOffset,r=window.pageXOffset;return{top:t.top+s-i,left:t.left+r-n,width:t.width,height:t.height}}function s(){return window.pageYOffset}function r(){return window.innerHeight}function o(){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(),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,r=!1,o=e;o<=t;){var a=this._getItemHeight(o,n);void 0!==a&&(this.set(o,a),(void 0===i||o<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=o,r=!0)),(void 0===s||o>s)&&(void 0!==s&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=o)),o++}}},{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 g(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 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 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,o){var d,l,c,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,"layout",function(){return S.updateLayout()}),I(this,"onResize",(d=function(e){S.shouldUpdateLayoutOnWindowResize(e)&&(h("~ Window width changed, re-measure item heights. ~"),S.setState(S.getInitialLayoutState(),function(){S.onInitialRender("resize")}))},l=f,function(){clearTimeout(c),c=setTimeout(d,l)})),I(this,"updateShownItemIndexes",function(e){var t=S.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,s=t.redoLayoutAfterRender,r=S.getBeforeItemsHeight(n,i),o=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",o),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())),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:r,afterItemsHeight:o},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()+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 v=p.getState,y=p.setState,w=p.onStateChange,x=p.customState,b=p.preserveScrollPositionAtBottomOnMount,H=p.shouldUpdateLayoutOnWindowResize,C=p.measureItemsBatchSize,O=p.bypass,k=p.bypassBatchSize,A=p.estimatedItemHeight,M=p.onItemFirstRender,L=p.state;h("~ Initialize ~"),L&&(o=L.items),this.bypass=O,this.bypassBatchSize=k||10,this.initialItems=o,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,s){var r=S.state;S.state=g({},r,i),function(i,s){if(n(i,s))return!0;if("object"!==e(i)||null===i||"object"!==e(s)||null===s)return!1;var r=Object.keys(i),o=Object.keys(s);if(r.length!==o.length)return!1;for(var a=0;a<r.length;a++)if(!t.call(s,r[a])||!n(i[r[a]],s[r[a]]))return!1;return!0}(S.state,r)||(w&&w(S.state,r),S.isMounted&&S.onUpdate(r)),s&&s()}),L&&h("Initial state (passed)",L),this.getContainerNode=i,this.itemHeights=new m(i,this.getState),b&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(L||this.getInitialState(x),function(){S.itemHeights.onInitItemHeights()}),h("Items count",o.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=g({},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}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return 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),r=i;r<=s;)this.onItemFirstRender(r),r++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var o=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=o;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.onInitialRender("mount"),this.isMounted=!0,this.screenWidth=o(),this.screenHeight=r(),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,window.pageYOffset+(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=o(),n=r(),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,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),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,s,r,o=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 m=t-(n+o);s=Math.min(u+(this.getEstimatedItemsCount(m)-1),this.getItemsCount()-1),a=!0;break}if(o+=d,void 0===i&&n+o>e&&(h("First visible item index (including margin)",u),i=u),u<this.getItemsCount()-1&&(o+=this.getItemSpacing()),n+o>t){h("Last visible item index (including margin)",u),void 0!==i&&(s=u);break}u++}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,r+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(){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()),o=n.top,a=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=o;var h=function(){var e=r();return{top:s(),bottom:s()+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(),o,o+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(),r=s.firstShownItemIndex,o=s.lastShownItemIndex,a=s.beforeItemsHeight,u=s.afterItemsHeight,d=s.itemStates,m=s.itemHeights;s.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),c=l.prependedItemsCount,I=l.appendedItemsCount,f=c>0||I>0;f?(c>0&&(h("Prepended items count",c),m=new Array(c).concat(m),this.itemHeights.onPrepend(c),d&&(d=new Array(c).concat(d)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,c)),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+=c,this.lastSeenItemIndex+=c),r+=c,o+=c,a+=this.itemHeights.getAverage()*c,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?(r=void 0,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length)),a=0,u=0),h("First shown item index",r),h("Last shown item index",o),h("Before items height",a),h("After items height",u),this.onBeforeShowItems(r,o),this.setState(g({},void 0,{items:e,itemStates:d,itemHeights:m,firstShownItemIndex:r,lastShownItemIndex:o,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]}}])&&c(d.prototype,l),S&&c(d,S),a}();function p(e,t){if(null==e)return{};var n,i,s=function(e,t){if(null==e)return{};var n,i,s={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(s[n]=e[n]);return s}(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)&&(s[n]=e[n])}return s}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 s=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,o=e.beforeItemsHeight,a=e.afterItemsHeight;h("~ On state change ~"),h("Previous state",t),h("New state",e),s.container.style.paddingTop=l(o),s.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<=r);else{h("Remove item",d);var m=s.container.childNodes[d-t.firstShownItemIndex];s.container.removeChild(m)}d--}}else for(h("Clean render");s.container.firstChild;)s.container.removeChild(s.container.firstChild);for(var g=u,c=g&&s.container.firstChild,I=i;I<=r;){if(u&&I>=t.firstShownItemIndex&&I<=t.lastShownItemIndex)g&&(g=!1);else{var f=s.renderItem(n[I]);g?(h("Prepend item",I),s.container.insertBefore(f,c)):(h("Append item",I),s.container.appendChild(f))}I++}}),y(this,"onUnmount",function(){s.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var o=r.onMount,a=p(r,["onMount"]);this.virtualScroller=new S(function(){return s.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})),o&&o(),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,s=window.pageYOffset,r=window.pageXOffset;return{top:t.top+s-i,left:t.left+r-n,width:t.width,height:t.height}}function s(){return window.pageYOffset}function r(){return window.innerHeight}function o(){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(),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,r=!1,o=e;o<=t;){var a=this._getItemHeight(o,n);void 0!==a&&(this.set(o,a),(void 0===i||o<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=o,r=!0)),(void 0===s||o>s)&&(void 0!==s&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=o)),o++}}},{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 g(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 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 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,o){var d,l,c,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,"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(c),c=setTimeout(d,l)})),I(this,"updateShownItemIndexes",function(e){var t=S.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,s=t.redoLayoutAfterRender,r=S.getBeforeItemsHeight(n,i),o=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",o),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())),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:r,afterItemsHeight:o},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()+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 v=p.getState,y=p.setState,w=p.onStateChange,x=p.customState,b=p.preserveScrollPositionAtBottomOnMount,H=p.shouldUpdateLayoutOnWindowResize,C=p.measureItemsBatchSize,O=p.bypass,k=p.bypassBatchSize,A=p.estimatedItemHeight,M=p.onItemFirstRender,L=p.state;h("~ Initialize ~"),L&&(o=L.items),this.bypass=O,this.bypassBatchSize=k||10,this.initialItems=o,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,s){var r=S.state;S.state=g({},r,i),function(i,s){if(n(i,s))return!0;if("object"!==e(i)||null===i||"object"!==e(s)||null===s)return!1;var r=Object.keys(i),o=Object.keys(s);if(r.length!==o.length)return!1;for(var a=0;a<r.length;a++)if(!t.call(s,r[a])||!n(i[r[a]],s[r[a]]))return!1;return!0}(S.state,r)||(w&&w(S.state,r),S.isMounted&&S.onUpdate(r)),s&&s()}),L&&h("Initial state (passed)",L),this.getContainerNode=i,this.itemHeights=new m(i,this.getState),b&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(L||this.getInitialState(x),function(){S.itemHeights.onInitItemHeights()}),h("Items count",o.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=g({},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}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return 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),r=i;r<=s;)this.onItemFirstRender(r),r++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var o=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=o;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.onInitialRender("mount"),this.isMounted=!0,this.screenWidth=o(),this.screenHeight=r(),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,window.pageYOffset+(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=o(),n=r(),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,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),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,s,r,o=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 m=t-(n+o);s=Math.min(u+(this.getEstimatedItemsCount(m)-1),this.getItemsCount()-1),a=!0;break}if(o+=d,void 0===i&&n+o>e&&(h("First visible item index (including margin)",u),i=u),u<this.getItemsCount()-1&&(o+=this.getItemSpacing()),n+o>t){h("Last visible item index (including margin)",u),void 0!==i&&(s=u);break}u++}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,r+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()),o=n.top,a=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=o;var h=function(){var e=r();return{top:s(),bottom:s()+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(),o,o+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(),r=s.firstShownItemIndex,o=s.lastShownItemIndex,a=s.beforeItemsHeight,u=s.afterItemsHeight,d=s.itemStates,m=s.itemHeights;s.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),c=l.prependedItemsCount,I=l.appendedItemsCount,f=c>0||I>0;f?(c>0&&(h("Prepended items count",c),m=new Array(c).concat(m),this.itemHeights.onPrepend(c),d&&(d=new Array(c).concat(d)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,c)),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+=c,this.lastSeenItemIndex+=c),r+=c,o+=c,a+=this.itemHeights.getAverage()*c,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?(r=void 0,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length)),a=0,u=0),h("First shown item index",r),h("Last shown item index",o),h("Before items height",a),h("After items height",u),this.onBeforeShowItems(r,o),this.setState(g({},void 0,{items:e,itemStates:d,itemHeights:m,firstShownItemIndex:r,lastShownItemIndex:o,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]}}])&&c(d.prototype,l),S&&c(d,S),a}();function p(e,t){if(null==e)return{};var n,i,s=function(e,t){if(null==e)return{};var n,i,s={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(s[n]=e[n]);return s}(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)&&(s[n]=e[n])}return s}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 s=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,o=e.beforeItemsHeight,a=e.afterItemsHeight;h("~ On state change ~"),h("Previous state",t),h("New state",e),s.container.style.paddingTop=l(o),s.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<=r);else{h("Remove item",d);var m=s.container.childNodes[d-t.firstShownItemIndex];s.container.removeChild(m)}d--}}else for(h("Clean render");s.container.firstChild;)s.container.removeChild(s.container.firstChild);for(var g=u,c=g&&s.container.firstChild,I=i;I<=r;){if(u&&I>=t.firstShownItemIndex&&I<=t.lastShownItemIndex)g&&(g=!1);else{var f=s.renderItem(n[I]);g?(h("Prepend item",I),s.container.insertBefore(f,c)):(h("Append item",I),s.container.appendChild(f))}I++}}),y(this,"onUnmount",function(){s.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var o=r.onMount,a=p(r,["onMount"]);this.virtualScroller=new S(function(){return s.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})),o&&o(),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}()});
 //# 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 d(){if(l()){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 l(){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&&d("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,"layout",function(){return u.updateLayout()}),S(this,"onResize",(i=function(e){u.shouldUpdateLayoutOnWindowResize(e)&&(d("~ 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),d("~ Layout results "+(u.bypass?"(bypass) ":"")+"~"),d("First shown item index",n),d("Last shown item index",i),d("Before items height",r),d("After items height",s),d("Average item height (calculated on previous render)",u.itemHeights.getAverage()),l()&&(d("Item heights",u.getState().itemHeights.slice()),d("Item states",u.getState().itemStates.slice())),o&&d("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&&(d("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(d(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)}d("~ 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;d("~ 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&&d("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()}),d("Items count",n.length),O&&d("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 d("Initial state (created)",n),d("First shown item index",n.firstShownItemIndex),d("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}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return 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.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,window.pageYOffset+(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,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&&(d("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),l()&&d("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){l()&&(d("~ Item state changed ~"),d("Item",e),d("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),d("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&&(d("~ Item height changed ~"),d("Item",e),d("Previous height",n),d("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){d("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&&(d("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){d("Last visible item index (including margin)",h),void 0!==i&&(o=h);break}h++}return void 0!==i&&void 0===o&&d("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(){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;d("~ Update items ~");var l=w(i,e),c=l.prependedItemsCount,f=l.appendedItemsCount,g=c>0||f>0;g?(c>0&&(d("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&&(d("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):(d("Non-incremental items update"),d("Previous items",i),d("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),d("First shown item index",r),d("Last shown item index",s),d("Before items height",a),d("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 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,h=s.initialState,u=s.initialCustomState,m=s.estimatedItemHeight,d=s.preserveScrollPositionAtBottomOnMount,l=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:d,shouldUpdateLayoutOnWindowResize:i.shouldUpdateLayoutOnWindowResize,measureItemsBatchSize:l,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,d=u.itemStates,l=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>=l&&i<=c?e.createElement(o,b({},r,{ref:t.shouldUseRefs()?t.getItemRef(i):void 0,key:"".concat(t.uniquePrefix,":").concat(i),state:d&&d[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,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(M,"defaultProps",{as:"div"}),M});
+!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 d(){if(l()){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 l(){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&&d("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,"layout",function(){return u.updateLayout()}),S(this,"onResize",(i=function(e){u.isMounted&&u.shouldUpdateLayoutOnWindowResize(e)&&(d("~ 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),d("~ Layout results "+(u.bypass?"(bypass) ":"")+"~"),d("First shown item index",n),d("Last shown item index",i),d("Before items height",r),d("After items height",s),d("Average item height (calculated on previous render)",u.itemHeights.getAverage()),l()&&(d("Item heights",u.getState().itemHeights.slice()),d("Item states",u.getState().itemStates.slice())),o&&d("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&&(d("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(d(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)}d("~ 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;d("~ 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&&d("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()}),d("Items count",n.length),O&&d("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 d("Initial state (created)",n),d("First shown item index",n.firstShownItemIndex),d("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}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return 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.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,window.pageYOffset+(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,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&&(d("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),l()&&d("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){l()&&(d("~ Item state changed ~"),d("Item",e),d("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),d("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&&(d("~ Item height changed ~"),d("Item",e),d("Previous height",n),d("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){d("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&&(d("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){d("Last visible item index (including margin)",h),void 0!==i&&(o=h);break}h++}return void 0!==i&&void 0===o&&d("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;d("~ Update items ~");var l=w(i,e),c=l.prependedItemsCount,f=l.appendedItemsCount,g=c>0||f>0;g?(c>0&&(d("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&&(d("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):(d("Non-incremental items update"),d("Previous items",i),d("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),d("First shown item index",r),d("Last shown item index",s),d("Before items height",a),d("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,d=s.preserveScrollPositionAtBottomOnMount,l=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:d,shouldUpdateLayoutOnWindowResize:i.shouldUpdateLayoutOnWindowResize,measureItemsBatchSize:l,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,d=u.itemStates,l=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>=l&&i<=c?e.createElement(o,b({},r,{ref:t.shouldUseRefs()?t.getItemRef(i):void 0,key:"".concat(t.uniquePrefix,":").concat(i),state:d&&d[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});
 //# 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,"layout",function(){return S.updateLayout()}),I(this,"onResize",(u=function(e){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,O=p.onItemFirstRender,L=p.state;h("~ Initialize ~"),L&&(r=L.items),this.bypass=C,this.bypassBatchSize=k||10,this.initialItems=r,this.estimatedItemHeight=M,this._shouldUpdateLayoutOnWindowResize=b,this.measureItemsBatchSize=void 0===A?50:A,O&&(this.onItemFirstRender=O),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()}),L&&h("Initial state (passed)",L),this.getContainerNode=i,this.itemHeights=new m(i,this.getState),H&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(L||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}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return 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.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,window.pageYOffset+(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,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(){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 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,"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,O=p.onItemFirstRender,L=p.state;h("~ Initialize ~"),L&&(r=L.items),this.bypass=C,this.bypassBatchSize=k||10,this.initialItems=r,this.estimatedItemHeight=M,this._shouldUpdateLayoutOnWindowResize=b,this.measureItemsBatchSize=void 0===A?50:A,O&&(this.onItemFirstRender=O),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()}),L&&h("Initial state (passed)",L),this.getContainerNode=i,this.itemHeights=new m(i,this.getState),H&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(L||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}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return 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.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,window.pageYOffset+(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,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}()});
 //# sourceMappingURL=virtual-scroller.js.map

commonjs/VirtualScroller.js

@@ -70,2 +70,8 @@ "use strict";
     _defineProperty(this, "onResize", (0, _utility.debounce)(function (event) {
+      // If `VirtualScroller` has been unmounted
+      // while `setTimeout()` was waiting, then exit.
+      if (!_this.isMounted) {
+        return;
+      }
+
       if (_this.shouldUpdateLayoutOnWindowResize(event)) {
@@ -961,4 +967,10 @@ // Reset item heights because now that window width changed
       var check = function check() {
-        // Skip comparing `top` coordinate of the list
+        // If `VirtualScroller` has been unmounted
+        // while `setTimeout()` was waiting, then exit.
+        if (!_this2.isMounted) {
+          return;
+        } // Skip comparing `top` coordinate of the list
         // when this function is called the first time.
+
+
         if (_this2.top !== undefined) {
@@ -965,0 +977,0 @@ // Calling `getOffset()` on an element is about

modules/VirtualScroller.js

@@ -53,2 +53,8 @@ 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, "onResize", debounce(function (event) {
+      // If `VirtualScroller` has been unmounted
+      // while `setTimeout()` was waiting, then exit.
+      if (!_this.isMounted) {
+        return;
+      }
+
       if (_this.shouldUpdateLayoutOnWindowResize(event)) {
@@ -944,4 +950,10 @@ // Reset item heights because now that window width changed
       var check = function check() {
-        // Skip comparing `top` coordinate of the list
+        // If `VirtualScroller` has been unmounted
+        // while `setTimeout()` was waiting, then exit.
+        if (!_this2.isMounted) {
+          return;
+        } // Skip comparing `top` coordinate of the list
         // when this function is called the first time.
+
+
         if (_this2.top !== undefined) {
@@ -948,0 +960,0 @@ // Calling `getOffset()` on an element is about

package.json

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

source/VirtualScroller.js

@@ -348,2 +348,7 @@ import shallowEqual from './shallowEqual'
 	onResize = debounce((event) => {
+		// If `VirtualScroller` has been unmounted
+		// while `setTimeout()` was waiting, then exit.
+		if (!this.isMounted) {
+			return
+		}
 		if (this.shouldUpdateLayoutOnWindowResize(event)) {
@@ -681,2 +686,7 @@ // Reset item heights because now that window width changed
 		const check = () => {
+			// If `VirtualScroller` has been unmounted
+			// while `setTimeout()` was waiting, then exit.
+			if (!this.isMounted) {
+				return
+			}
 			// Skip comparing `top` coordinate of the list
@@ -683,0 +693,0 @@ // when this function is called the first time.

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

1117903

increased by0.27%

Lines of code

7099

increased by0.4%

No dependency changes