virtual-scroller - npm Package Compare versions

Comparing version 1.0.20 to 1.0.21

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

bundle/virtual-scroller.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function n(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function i(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,s=window.pageYOffset,o=window.pageXOffset;return{top:t.top+s-i,left:t.left+o-n,width:t.width,height:t.height}}function s(){return window.pageYOffset}function o(){return window.innerHeight}function r(){return window.innerWidth}function a(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function h(){if(d()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,a(["[virtual-scroller]"].concat(n)))}}function d(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function u(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var m=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.reset()}var t,n,i;return t=e,(n=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),s=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&h("Item spacing",s),s}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,s=this.lastMeasuredItemIndex,o=!1,r=e;r<=t;){var a=this._getItemHeight(r,n);void 0!==a&&(this.set(r,a),(void 0===i||r<i)&&(this.measuredItemsHeight+=a,o||(this.firstMeasuredItemIndex=r,o=!0)),(void 0===s||r>s)&&(void 0!==s&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=r)),r++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&u(t.prototype,n),i&&u(t,i),e}();function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){I(e,t,n[t])})}return e}function g(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function I(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var c=250;return function(){function a(i,r){var u,g,f,S=this,p=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),I(this,"updateLayout",function(){return S.onUpdateShownItemIndexes({reason:"manual"})}),I(this,"onScroll",function(){return S.onUpdateShownItemIndexes({reason:"scroll"})}),I(this,"layout",function(){return S.updateLayout()}),I(this,"onResize",(u=function(e){S.shouldUpdateLayoutOnWindowResize(e)&&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,y=p.setState,w=p.onStateChange,x=p.preserveScrollPositionAtBottomOnMount,H=p.shouldUpdateLayoutOnWindowResize,b=p.measureItemsBatchSize,A=p.bypass,C=p.bypassBatchSize,k=p.estimatedItemHeight,M=p.onItemFirstRender,O=p.state;h("~ Initialize ~"),O&&(r=O.items),this.bypass=A,this.bypassBatchSize=C||10,this.initialItems=r,this.estimatedItemHeight=k,this._shouldUpdateLayoutOnWindowResize=H,this.measureItemsBatchSize=void 0===b?50:b,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 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)||(w&&w(S.state,o),S.isMounted&&S.onUpdate(o)),s&&s()}),O&&h("Initial state (passed)",O),this.getContainerNode=i,this.itemHeights=new m(i,this.getState),x&&(this.preserveScrollPositionAtBottomOnMount={documentHeight:document.documentElement.scrollHeight}),this.setState(O||this.getInitialState(),function(){S.itemHeights.onInitItemHeights()}),h("Items count",r.length),k&&h("Estimated item height",k)}var u,f,S;return u=a,(f=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,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();return(t!==this.screenWidth||n!==this.screenHeight)&&(this.screenWidth=t,this.screenHeight=n,!0)}},{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.shouldUpdateLayoutOnWindowResize(e)&&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,y=p.setState,w=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()),y?(this.getState=v,this.setState=y):(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)||(w&&w(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();return(t!==this.screenWidth||n!==this.screenHeight)&&(this.screenWidth=t,this.screenHeight=n,!0)}},{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}()});
 //# sourceMappingURL=virtual-scroller.js.map

commonjs/ReactVirtualScroller.js

@@ -117,2 +117,3 @@ "use strict";
         initialState = _this$props.initialState,
+        initialCustomState = _this$props.initialCustomState,
         estimatedItemHeight = _this$props.estimatedItemHeight,
@@ -138,2 +139,3 @@ preserveScrollPositionAtBottomOnMount = _this$props.preserveScrollPositionAtBottomOnMount,
       state: initialState,
+      customState: initialCustomState,
       getState: function getState() {
@@ -352,6 +354,7 @@ return _this.state;
           initialState = _this$props3.initialState,
+          initialCustomState = _this$props3.initialCustomState,
           onStateChange = _this$props3.onStateChange,
           onItemFirstRender = _this$props3.onItemFirstRender,
           onMount = _this$props3.onMount,
-          rest = _objectWithoutProperties(_this$props3, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "initialState", "onStateChange", "onItemFirstRender", "onMount"]);
+          rest = _objectWithoutProperties(_this$props3, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "initialState", "initialCustomState", "onStateChange", "onItemFirstRender", "onMount"]);
 
@@ -491,2 +494,3 @@ var _this$virtualScroller = this.virtualScroller.getState(),
   onStateChange: _propTypes["default"].func,
+  initialCustomState: _propTypes["default"].object,
   initialState: _propTypes["default"].shape({
@@ -493,0 +497,0 @@ items: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,

commonjs/VirtualScroller.js

@@ -269,2 +269,3 @@ "use strict";
         onStateChange = options.onStateChange,
+        customState = options.customState,
         preserveScrollPositionAtBottomOnMount = options.preserveScrollPositionAtBottomOnMount,
@@ -355,3 +356,3 @@ shouldUpdateLayoutOnWindowResize = options.shouldUpdateLayoutOnWindowResize,
 
-    this.setState(state || this.getInitialState(), function () {
+    this.setState(state || this.getInitialState(customState), function () {
       _this.itemHeights.onInitItemHeights();
@@ -358,0 +359,0 @@ });

modules/ReactVirtualScroller.js

@@ -101,2 +101,3 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
         initialState = _this$props.initialState,
+        initialCustomState = _this$props.initialCustomState,
         estimatedItemHeight = _this$props.estimatedItemHeight,
@@ -122,2 +123,3 @@ preserveScrollPositionAtBottomOnMount = _this$props.preserveScrollPositionAtBottomOnMount,
       state: initialState,
+      customState: initialCustomState,
       getState: function getState() {
@@ -336,6 +338,7 @@ return _this.state;
           initialState = _this$props3.initialState,
+          initialCustomState = _this$props3.initialCustomState,
           onStateChange = _this$props3.onStateChange,
           onItemFirstRender = _this$props3.onItemFirstRender,
           onMount = _this$props3.onMount,
-          rest = _objectWithoutProperties(_this$props3, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "initialState", "onStateChange", "onItemFirstRender", "onMount"]);
+          rest = _objectWithoutProperties(_this$props3, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "initialState", "initialCustomState", "onStateChange", "onItemFirstRender", "onMount"]);
 
@@ -473,2 +476,3 @@ var _this$virtualScroller = this.virtualScroller.getState(),
   onStateChange: PropTypes.func,
+  initialCustomState: PropTypes.object,
   initialState: PropTypes.shape({
@@ -475,0 +479,0 @@ items: PropTypes.arrayOf(PropTypes.object).isRequired,

modules/VirtualScroller.js

@@ -252,2 +252,3 @@ 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; }
         onStateChange = options.onStateChange,
+        customState = options.customState,
         preserveScrollPositionAtBottomOnMount = options.preserveScrollPositionAtBottomOnMount,
@@ -338,3 +339,3 @@ shouldUpdateLayoutOnWindowResize = options.shouldUpdateLayoutOnWindowResize,
 
-    this.setState(state || this.getInitialState(), function () {
+    this.setState(state || this.getInitialState(customState), function () {
       _this.itemHeights.onInitItemHeights();
@@ -341,0 +342,0 @@ });

package.json

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

README.md

@@ -69,15 +69,16 @@ # VirtualScroller
 
-* `estimatedItemHeight` — Is used for the initial render of the list: determines how many list items are rendered initially to cover the screen height plus some extra vertical margin for future scrolling. If not set then the list first renders just the first item, measures it, and then assumes it to be the `estimatedItemHeight` from which it calculates how many items to show on the second render pass to fill the screen height plus some extra vertical margin for future scrolling. Therefore, this setting is only for the initial render minor optimization and is not required.
+* `estimatedItemHeight: number` — Is used for the initial render of the list: determines how many list items are rendered initially to cover the screen height plus some extra vertical margin for future scrolling. If not set then the list first renders just the first item, measures it, and then assumes it to be the `estimatedItemHeight` from which it calculates how many items to show on the second render pass to fill the screen height plus some extra vertical margin for future scrolling. Therefore, this setting is only for the initial render minor optimization and is not required.
 <!--
 * `margin` — Renders items which are outside of the screen by the amount of this "margin". Is the screen height by default: seems to be the optimal value for "Page Up" / "Page Down" navigation and optimized mouse wheel scrolling.
 -->
-* `initialState` — The initial state for `VirtualScroller`. Can be used, for example, to quicky restore the list on "Back" navigation.
-* `getState()` — Returns `VirtualScroller` `state`. Is used for React `VirtualScroller` component implementation.
-* `setState()` — Stores `VirtualScroller` `state` (including setting the initial `state`). The `state` must reflect what's currently rendered on screen. Is used for React `VirtualScroller` component implementation.
-* `onStateChange(newState, prevState)` — Is called whenever `VirtualScroller` `state` is updated (including setting the initial `state`) if `getState()` and `setState()` properties aren't defined.
-* `onItemFirstRender(i)` — Is called for each item the first time it's rendered. Is guaranteed to be called at least one time for each item rendered, though could also be called multiple times. For an example of using such feature, consider a list of items that must be somehow preprocessed (parsed, enhanced, etc) before being rendered, and such preprocessing puts some load on the CPU (and therefore takes some time). In such case, instead of preprocessing the whole list of items upfront, a developer could preprocess the items as they're being rendered thereby eliminating any associated lag/freezing and draining less battery.
+* `state: object` — The initial state for `VirtualScroller`. Can be used, for example, to quicky restore the list on "Back" navigation.
+* `customState: object` — (advanced) The initial "custom" state for `VirtualScroller`. It can be used to initialize the "custom" part of `VirtualScroller` state in cases when `VirtualScroller` state is used to store some "custom" list state.
+* `getState(): object` — Returns `VirtualScroller` `state`. Is used for React `VirtualScroller` component implementation.
+* `setState(newState: object)` — Stores `VirtualScroller` `state` (including setting the initial `state`). The `state` must reflect what's currently rendered on screen. Is used for React `VirtualScroller` component implementation.
+* `onStateChange(newState: object, prevState: object?)` — Is called whenever `VirtualScroller` `state` is updated (including setting the initial `state`) if `getState()` and `setState()` properties aren't defined.
+* `onItemFirstRender(i: number)` — Is called for each item the first time it's rendered. Is guaranteed to be called at least one time for each item rendered, though could also be called multiple times. For an example of using such feature, consider a list of items that must be somehow preprocessed (parsed, enhanced, etc) before being rendered, and such preprocessing puts some load on the CPU (and therefore takes some time). In such case, instead of preprocessing the whole list of items upfront, a developer could preprocess the items as they're being rendered thereby eliminating any associated lag/freezing and draining less battery.
 <!-- * `bypass` — Set to `true` to disable the "virtual scroller" behavior: it will (eventually) render the entire list on mount and won't hide items that go offscreen as the user scrolls. -->
 * `preserveScrollPositionAtBottomOnMount: boolean` — (optional) (advanced) Set to `true` to preserve scroll position of the bottom of the list when it's first mounted. A possible use case: consider a forum thread only showing unread posts by default. If a user navigates to such thread, it could show "No new posts" message with a "Show previous" button above it. When the user clicks the "Show previous" button, a `<VirtualScroller/>` is mounted with a list of posts. If `preserveScrollPositionAtBottomOnMount: true` is set then, after the list of posts is show, page scroll will be restored so that the bottom of the list remain on screen so that the user could scroll up from the most recent posts to the oldest ones.
 * `measureItemsBatchSize: number` — (optional) (advanced) (experimental) Imagine a situation when a user doesn't gradually scroll through a huge list but instead hits an End key to scroll right to the end of such huge list: this will result in the whole list rendering at once (because an item needs to know the height of all previous items in order to render at correct scroll position) which could be CPU-intensive in some cases (for example, when using React due to its slow performance when initially rendering components on a page). To prevent freezing the UI in the process, a `measureItemsBatchSize` could be configured, that would limit the maximum count of items that're being rendered in a single pass for measuring their height: if `measureItemsBatchSize` is configured, then such items will be rendered and measured in batches. By default it's set to `100`. This is an experimental feature and could be removed in future non-major versions of this library. For example, the future React 17 will come with [Fiber](https://www.youtube.com/watch?v=ZCuYPiUIONs) rendering engine that is said to resolve such freezing issues internally. In that case, introducing this option may be reconsidered.
-* `shouldUpdateLayoutOnWindowResize(event)`  — (optional) By default, `VirtualScroller` always performs a re-layout on window `resize` event. The `resize` event is not only triggered when a user resizes the window itself: it's also [triggered](https://developer.mozilla.org/en-US/docs/Web/API/Window/fullScreen#Notes) when the user switches into (and out of) fullscreen mode. By default, `VirtualScroller` performs a re-layout on all window `resize` events, except for ones that don't result in actual window width or height change, and except for cases when, for example, a video somewhere in a list is maximized into fullscreen. There still can be other "custom" cases: for example, when an application uses a custom "slideshow" component (rendered outside of the list DOM element) that goes into fullscreen when a user clicks a picture or a video in the list. For such "custom" cases `shouldUpdateLayoutOnWindowResize(event)` option / property can be specified.
+* `shouldUpdateLayoutOnWindowResize(event: Event): boolean`  — (optional) By default, `VirtualScroller` always performs a re-layout on window `resize` event. The `resize` event is not only triggered when a user resizes the window itself: it's also [triggered](https://developer.mozilla.org/en-US/docs/Web/API/Window/fullScreen#Notes) when the user switches into (and out of) fullscreen mode. By default, `VirtualScroller` performs a re-layout on all window `resize` events, except for ones that don't result in actual window width or height change, and except for cases when, for example, a video somewhere in a list is maximized into fullscreen. There still can be other "custom" cases: for example, when an application uses a custom "slideshow" component (rendered outside of the list DOM element) that goes into fullscreen when a user clicks a picture or a video in the list. For such "custom" cases `shouldUpdateLayoutOnWindowResize(event)` option / property can be specified.
 
@@ -89,6 +90,6 @@ `VirtualScroller` class instance provides methods:
 * `onUnmount()` — Should be called when the `VirtualScroller` component is "unmounted" (removed) from the page.
-* `getState()` — Returns `VirtualScroller` state. Is used for React `VirtualScroller` component implementation.
-* `onItemHeightChange(i)` — Should be called whenever a list item's height changes: triggers a re-layout of `VirtualScroller`. This allows `VirtualScroller` to re-measure the new item's height and re-render correctly. Calling `onItemHeightChange()` manually could be replaced with detecting item height changes automatically via [Resize Observer](https://caniuse.com/#search=Resize%20Observer). For example, when a user clicks an "Expand"/"Collapse" button in a post. Calling `onItemHeightChange()` is only required when an item shrinks in height. For example, consider a post with an "Expand"/"Collapse" button: when such post is expanded the next posts in the feed might not be visible yet but if a user clicks the "Collapse" button the post is collapsed and the next posts become visible but they're not yet rendered because `VirtualScroller` didn't render them previously due to them being invisible. Calling `onItemHeightChange(i)` in such case would make `VirtualScroller` re-measure the collapsed post height and perform a re-layout.
-* `onItemStateChange(i, itemState)` — Can be used to update a list item's state inside `VirtualScroller` state. For example, storing list item's state inside `VirtualScroller` state is used in React `VirtualScroller` component to preserve the state of list items that are unmounted due to being no longer visible: when they're visible again they're re-mounted and their state isn't lost. Calling `onItemStateChange()` doesn't trigger a re-layout of `VirtualScroller` because changing a list item's state doesn't necessarily mean a change of its height, so a re-layout isn't necessarily required. If a re-layout is required then call `onItemHeightChange(i)` manually. For example, consider a social network feed, each post optionally having an attachment. Suppose there's a post in the feed having a YouTube video attachment. The attachment is initially shown as a thumbnail that expands into an embedded YouTube player on click. If a user expands the video, then scrolls down so that the post with the video is unmounted, then scrolls back up so that the post with the video is re-mounted again, then the video should stay expanded (or maybe not, but you get the idea).
-* `setItems(newItems, [options])` — Updates `VirtualScroller` `items`. For example, can be used to prepend or append new items to the list. See [Dynamically Loaded Lists](#dynamically-loaded-lists) section for more details. Available options: `preserveScrollPositionOnPrependItems: boolean` — Set to `true` to enable "restore scroll position after prepending items" feature (could be useful when implementing "Show previous items" button).
+* `getState(): object` — Returns `VirtualScroller` state. Is used for React `VirtualScroller` component implementation.
+* `onItemHeightChange(i: number)` — Should be called whenever a list item's height changes: triggers a re-layout of `VirtualScroller`. This allows `VirtualScroller` to re-measure the new item's height and re-render correctly. Calling `onItemHeightChange()` manually could be replaced with detecting item height changes automatically via [Resize Observer](https://caniuse.com/#search=Resize%20Observer). For example, when a user clicks an "Expand"/"Collapse" button in a post. Calling `onItemHeightChange()` is only required when an item shrinks in height. For example, consider a post with an "Expand"/"Collapse" button: when such post is expanded the next posts in the feed might not be visible yet but if a user clicks the "Collapse" button the post is collapsed and the next posts become visible but they're not yet rendered because `VirtualScroller` didn't render them previously due to them being invisible. Calling `onItemHeightChange(i)` in such case would make `VirtualScroller` re-measure the collapsed post height and perform a re-layout.
+* `onItemStateChange(i: number, itemState: object)` — Can be used to update a list item's state inside `VirtualScroller` state. For example, storing list item's state inside `VirtualScroller` state is used in React `VirtualScroller` component to preserve the state of list items that are unmounted due to being no longer visible: when they're visible again they're re-mounted and their state isn't lost. Calling `onItemStateChange()` doesn't trigger a re-layout of `VirtualScroller` because changing a list item's state doesn't necessarily mean a change of its height, so a re-layout isn't necessarily required. If a re-layout is required then call `onItemHeightChange(i)` manually. For example, consider a social network feed, each post optionally having an attachment. Suppose there's a post in the feed having a YouTube video attachment. The attachment is initially shown as a thumbnail that expands into an embedded YouTube player on click. If a user expands the video, then scrolls down so that the post with the video is unmounted, then scrolls back up so that the post with the video is re-mounted again, then the video should stay expanded (or maybe not, but you get the idea).
+* `setItems(newItems: any[], options: object?)` — Updates `VirtualScroller` `items`. For example, can be used to prepend or append new items to the list. See [Dynamically Loaded Lists](#dynamically-loaded-lists) section for more details. Available options: `preserveScrollPositionOnPrependItems: boolean` — Set to `true` to enable "restore scroll position after prepending items" feature (could be useful when implementing "Show previous items" button).
 * `getItemCoordinates(i: number): object` — Returns coordinates of item with index `i` relative to the document: `top` is the top offset of the item relative to the start of the document, `bottom` is the top offset of the item's bottom edge relative to the start of the document, `height` is the item's height.
@@ -99,10 +100,10 @@ * `updateLayout()` — (advanced) Triggers a re-layout of `VirtualScroller`. It's what's called every time on page scroll or window resize. You most likely won't ever need to call this method manually. Still, it can be called manually when the list's top position changes not as a result of scrolling the page or resizing the window. For example, if some DOM elements above the list are removed (like a closeable "info" panel) or collapsed (like an "accordion" panel) then the list's top position changes which means that now some of the previoulsy shown items might go off screen and the user might be seeing a blank area where items haven't been rendered yet because they were off-screen during the previous `VirtualScroller` layout. `VirtualScroller` automatically performs a layout only on page scroll or window resize; in all other cases, when layout needs to be re-run then call it manually via this instance method.
 
-* `firstShownItemIndex` — The index of the first item to render.
-* `lastShownItemIndex` — The index of the last item to render.
-* `beforeItemsHeight` — The `padding-top` which should be applied to the "container" element.
-* `afterItemsHeight` — The `padding-bottom` which should be applied to the "container" element.
-* `items` — The list of items (can be updated via [`.setItems()`](#dynamically-loaded-lists)).
-* `itemStates` — The list of item states.
-* `itemHeights` — A list of measured item heights. If an item's height hasn't been measured yet then it's height is `undefined`.
-* `itemSpacing` — Inter-item spacing. If it hasn't been measured yet then it's `undefined`.
+* `firstShownItemIndex: number` — The index of the first item to render.
+* `lastShownItemIndex: number` — The index of the last item to render.
+* `beforeItemsHeight: number` — The `padding-top` which should be applied to the "container" element.
+* `afterItemsHeight: number` — The `padding-bottom` which should be applied to the "container" element.
+* `items: any[]` — The list of items (can be updated via [`.setItems()`](#dynamically-loaded-lists)).
+* `itemStates: object?[]` — The list of item states.
+* `itemHeights: number?[]` — A list of measured item heights. If an item's height hasn't been measured yet then it's height is `undefined`.
+* `itemSpacing: number?` — Inter-item spacing. If it hasn't been measured yet then it's `undefined`.
 
@@ -240,3 +241,4 @@ ### DOM
 <!-- * `shouldUpdateLayoutOnWindowResize(event)`  — (optional) The `shouldUpdateLayoutOnWindowResize` option of `VirtualScroller` class. -->
-* `initialState: object` — (optional) The initial state for `VirtualScroller`. For example, can be used to quicky restore the list on "Back" navigation.
+* `initialState: object` — (optional) The initial state for `VirtualScroller`: the `state` option of `VirtualScroller`. For example, can be used to quicky restore the list on "Back" navigation.
+* `initialCustomState: object` — (advanced) (optional) The initial "custom" state for `VirtualScroller`: the `customState` option of `VirtualScroller`. It can be used to initialize the "custom" part of `VirtualScroller` state in cases when `VirtualScroller` state is used to store some "custom" list state.
 * `onStateChange(newState: object, prevState: object)` — (optional) Can be called when `VirtualScroller` `state` is updated (including setting the initial `state`). For example, can be used to keep `VirtualScroller` `state` copy in an instance variable and later in `componentWillUnmount()` persist it somewhere in global application state for quickly restoring it later on "Back" navigation:
@@ -243,0 +245,0 @@

source/ReactVirtualScroller.js

@@ -33,2 +33,3 @@ import React from 'react'
 		onStateChange: PropTypes.func,
+		initialCustomState: PropTypes.object,
 		initialState: PropTypes.shape({
@@ -77,2 +78,3 @@ items: PropTypes.arrayOf(PropTypes.object).isRequired,
 			initialState,
+			initialCustomState,
 			estimatedItemHeight,
@@ -100,2 +102,3 @@ preserveScrollPositionAtBottomOnMount,
 				state: initialState,
+				customState: initialCustomState,
 				getState: () => this.state,
@@ -310,2 +313,3 @@ setState: (newState, callback) => {
 			initialState,
+			initialCustomState,
 			onStateChange,
@@ -312,0 +316,0 @@ onItemFirstRender,

source/VirtualScroller.js

@@ -34,2 +34,3 @@ import shallowEqual from './shallowEqual'
 			onStateChange,
+			customState,
 			preserveScrollPositionAtBottomOnMount,
@@ -129,3 +130,3 @@ shouldUpdateLayoutOnWindowResize,
 
-		this.setState(state || this.getInitialState(), () => {
+		this.setState(state || this.getInitialState(customState), () => {
 			this.itemHeights.onInitItemHeights()
@@ -132,0 +133,0 @@ })

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

1109544

increased by0.28%

Lines of code

7022

increased by0.23%

Number of lines in readme file

387

increased by0.52%

No dependency changes