virtual-scroller - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

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(){return window.pageYOffset}function r(){return window.innerHeight}function s(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 o(){if(a()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,s(["[virtual-scroller]"].concat(n)))}}function a(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function h(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 u=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var r=0;r<i().itemHeights.length;){if(null==i().itemHeights[r]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=r-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=r),this.measuredItemsHeight+=i().itemHeights[r];r++}}var t,n,i;return t=e,(n=[{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&&o("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.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);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++}this.updateAverageItemHeight()}},{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:"updateAverageItemHeight",value:function(){this.averageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.averageItemHeight=this.measuredItemsHeight/this.averageItemHeightSamplesCount}},{key:"getAverage",value:function(){return this.previousAverageItemHeight&&this.previousAverageItemHeightSamplesCount>this.averageItemHeightSamplesCount?this.previousAverageItemHeight:this.averageItemHeight||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)}}])&&h(t.prototype,n),i&&h(t,i),e}();function d(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){l(e,t,n[t])})}return e}function m(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 l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var g=function(){function s(a,h){var m=this,g=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,s),l(this,"onScroll",function(){return m.onUpdateShownItemIndexes({reason:"scroll"})}),l(this,"onResize",function(){return m.onUpdateShownItemIndexes({reason:"resize"})}),l(this,"updateShownItemIndexes",function(e){var t=m.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,r=t.redoLayoutAfterRender,s=m.getBeforeItemsHeight(n,i),a=m.getAfterItemsHeight(n,i);m.updateWillBeHiddenItemHeightsAndState(n,i),o("~ Layout results "+(m.bypass?"(bypass) ":"")+"~"),o("First shown item index",n),o("Last shown item index",i),o("Before items height",s),o("After items height",a),o("Average item height (calculated on previous render)",m.itemHeights.getAverage()),r&&o("Redo layout after render"),m.onShowItems(n,i),m.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:s,afterItemsHeight:a},function(){return e(r)})}),l(this,"updateShownItemIndexesRecursive",function(){m.updateShownItemIndexes(function(e){e?setTimeout(function(){m.isMounted?m.updateShownItemIndexesRecursive():m.onDoneUpdatingItemIndexes()},0):m.onDoneUpdatingItemIndexes()})}),l(this,"restoreScroll",function(){var e=m.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;m.restoreScrollAfterPrepend=void 0;var r=m.getItemElement(t).getBoundingClientRect().top-n;0!==r&&(o("Restore scroll position: scroll by",r),window.scrollTo(0,i()+r))}),l(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==m.getItemsCount()&&!m.isUpdatingItemIndexes){if(clearTimeout(m.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==m.latestLayoutScreenTopAfterMargin&&i()<m.latestLayoutScreenTopAfterMargin&&m.getState().firstShownItemIndex>0||void 0!==m.latestLayoutScreenBottomAfterMargin&&i()+r()>m.latestLayoutScreenBottomAfterMargin&&m.getState().lastShownItemIndex<m.getItemsCount()-1;if(o(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return m.onUserStopsScrollingTimeout=setTimeout(m.onUserStoppedScrolling,100)}m.updateLayout(t)}}),l(this,"onUserStoppedScrolling",function(){m.isMounted&&m.updateLayout("stopped scrolling")});var I=g.getState,c=g.setState,f=g.onStateChange,v=g.bypass,p=g.bypassBatchSize,S=g.estimatedItemHeight,y=g.onLastSeenItemIndexChange,w=g.state;o("~ Initialize ~"),w&&(h=w.items),this.bypass=v,this.bypassBatchSize=p||10,this.initialItems=h,this.estimatedItemHeight=S,y&&(this.onLastSeenItemIndexChange=y,this.lastSeenItemIndex=-1),a()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(a()),c?(this.getState=I,this.setState=c):(this.getState=function(){return m.state},this.setState=function(i,r){var s=m.state;m.state=d({},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}(m.state,s)||(f&&f(m.state,s),m.isMounted&&m.onUpdate(s)),r&&r()}),w&&o("Initial state (passed)",w),this.setState(w||this.getInitialState()),this.getContainerNode=a,this.itemHeights=new u(a,h.length,this.getState),o("Items count",h.length),S&&o("Estimated item height",S)}var h,g,I;return h=s,(g=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var r=d({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return o("Initial state (created)",r),o("First shown item index",t),o("Last shown item index",n),r}},{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:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onUnmount",value:function(){this.isMounted=!1,this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout))}},{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&&this.itemHeights.update(e,t,n)}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){a()&&(o("Item",e,"state changed"),o("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),o("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&&(o("Item",e,"height changed from",n,"to",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,s=0,a=!1,h=0;h<this.getItemsCount();){var u=this.itemHeights.get(h);if(void 0===u){o("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=h);var d=t-(n+s);r=Math.min(h+(this.getEstimatedItemsCount(d)-1),this.getItemsCount()-1),a=!0;break}if(s+=u,void 0===i&&n+s>e&&(o("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){o("Last visible item index (including margin)",h),void 0!==i&&(r=h);break}h++}return void 0!==i&&void 0===r&&o("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),a=!1),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:a}}},{key:"getInvisibleItemIndexes",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.getInvisibleItemIndexes();var r=this.getVisibleItemIndexes(e,t,n);return void 0===r.firstShownItemIndex?this.getInvisibleItemIndexes():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:"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,o,a,h,u,d=(n=this.getContainerNode(),s=n.getBoundingClientRect(),o=document.clientLeft||document.body.clientLeft||0,a=document.clientTop||document.body.clientTop||0,h=window.pageYOffset,u=window.pageXOffset,{top:s.top+h-a,left:s.left+u-o,width:s.width,height:s.height}),m=d.top,l=d.height,g=function(){var e=r();return{top:i(),bottom:i()+e,height:e}}(),I=g.top,c=g.bottom;return this.latestLayoutScreenTopAfterMargin=I-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=c+this.getMargin(),this.getItemIndexes(I-this.getMargin(),c+this.getMargin(),m,m+l)}},{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:"updateLayout",value:function(e){o("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,s=i.lastShownItemIndex,a=i.beforeItemsHeight,h=i.afterItemsHeight,m=i.itemStates,l=i.itemHeights;i.itemSpacing;o("~ 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}}(n,e),I=g.prependedItemsCount,c=g.appendedItemsCount;I>0||c>0?(I>0&&(o("Prepended items count",I),l=new Array(I).concat(l),this.itemHeights.onPrepend(I),m&&(m=new Array(I).concat(m)),this.captureScroll(n,e,I)),c>0&&(o("Appended items count",c),l=l.concat(new Array(c)),m&&(m=m.concat(new Array(c)))),r+=I,s+=I,a+=this.itemHeights.getAverage()*I,h+=this.itemHeights.getAverage()*c):(o("Non-incremental items update"),o("Previous items",n),o("New items",e),this.itemHeights=new u(this.getContainerNode,e.length,this.getState),l=new Array(e.length),m=new Array(e.length),0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),a=0,h=0),this.setState(d({},void 0,{items:e,itemStates:m,itemHeights:l,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:a,afterItemsHeight:h}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&m(h.prototype,g),I&&m(h,I),s}();function I(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 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 f(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),f(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,s=e.lastShownItemIndex,a=e.beforeItemsHeight,h=e.afterItemsHeight;o("~ On state change ~"),o("Previous state",t),o("New state",e),r.container.style.paddingTop=a+"px",r.container.style.paddingBottom=h+"px";var u=t&&n===t.items&&t.items.length>0;if(u){o("Incremental render");for(var d=t.lastShownItemIndex;d>=t.firstShownItemIndex;){if(d>=i&&d<=s);else{o("Remove item",d);var m=r.container.childNodes[d-t.firstShownItemIndex];r.container.removeChild(m)}d--}}else for(o("Clean render");r.container.firstChild;)r.container.removeChild(r.container.firstChild);for(var l=u,g=l&&r.container.firstChild,I=i;I<=s;){if(u&&I>=t.firstShownItemIndex&&I<=t.lastShownItemIndex)l&&(l=!1);else{var c=r.renderItem(n[I]);l?(o("Prepend item",I),r.container.insertBefore(c,g)):(o("Append item",I),r.container.appendChild(c))}I++}}),f(this,"onUnmount",function(){r.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var a=s.onMount,h=I(s,["onMount"]);this.virtualScroller=new g(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){f(e,t,n[t])})}return e}({},h,{onStateChange:this.onStateChange})),a&&a(),this.virtualScroller.onMount()}var t,n,i;return t=e,(n=[{key:"onItemHeightChange",value:function(e){this.virtualScroller.onItemHeightChange(e)}},{key:"onLastSeenItemIndexChange",value:function(e,t){this.virtualScroller.onLastSeenItemIndexChange(e,t)}},{key:"updateItems",value:function(e,t){this.virtualScroller.updateItems(e,t)}}])&&c(t.prototype,n),i&&c(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,o=window.pageXOffset;return{top:t.top+r-i,left:t.left+o-n,width:t.width,height:t.height}}function r(){return window.pageYOffset}function o(){return window.innerHeight}function s(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 a(){if(h()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,s(["[virtual-scroller]"].concat(n)))}}function h(){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 d=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var r=0;r<i().itemHeights.length;){if(null==i().itemHeights[r]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=r-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=r),this.measuredItemsHeight+=i().itemHeights[r];r++}}var t,n,i;return t=e,(n=[{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&&a("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.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);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++}this.updateAverageItemHeight()}},{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:"updateAverageItemHeight",value:function(){this.averageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.averageItemHeight=this.measuredItemsHeight/this.averageItemHeightSamplesCount}},{key:"getAverage",value:function(){return this.previousAverageItemHeight&&this.previousAverageItemHeightSamplesCount>this.averageItemHeightSamplesCount?this.previousAverageItemHeight:this.averageItemHeight||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 m(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){g(e,t,n[t])})}return e}function l(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 g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var I=function(){function s(i,h){var u=this,l=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,s),g(this,"onScroll",function(){return u.onUpdateShownItemIndexes({reason:"scroll"})}),g(this,"onResize",function(){return u.onUpdateShownItemIndexes({reason:"resize"})}),g(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),a("~ Layout results "+(u.bypass?"(bypass) ":"")+"~"),a("First shown item index",n),a("Last shown item index",i),a("Before items height",o),a("After items height",s),a("Average item height (calculated on previous render)",u.itemHeights.getAverage()),r&&a("Redo layout after render"),u.onShowItems(n,i),u.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:o,afterItemsHeight:s},function(){return e(r)})}),g(this,"updateShownItemIndexesRecursive",function(){u.updateShownItemIndexes(function(e){e?setTimeout(function(){u.isMounted?u.updateShownItemIndexesRecursive():u.onDoneUpdatingItemIndexes()},0):u.onDoneUpdatingItemIndexes()})}),g(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&&(a("Restore scroll position: scroll by",i),window.scrollTo(0,r()+i))}),g(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&&r()<u.latestLayoutScreenTopAfterMargin&&u.getState().firstShownItemIndex>0||void 0!==u.latestLayoutScreenBottomAfterMargin&&r()+o()>u.latestLayoutScreenBottomAfterMargin&&u.getState().lastShownItemIndex<u.getItemsCount()-1;if(a(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)}u.updateLayout(t)}}),g(this,"onUserStoppedScrolling",function(){u.isMounted&&u.updateLayout("stopped scrolling")});var I=l.getState,c=l.setState,f=l.onStateChange,p=l.bypass,v=l.bypassBatchSize,S=l.estimatedItemHeight,y=l.onLastSeenItemIndexChange,w=l.state;a("~ Initialize ~"),w&&(h=w.items),this.bypass=p,this.bypassBatchSize=v||10,this.initialItems=h,this.estimatedItemHeight=S,y&&(this.onLastSeenItemIndexChange=y,this.lastSeenItemIndex=-1),i()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(i()),c?(this.getState=I,this.setState=c):(this.getState=function(){return u.state},this.setState=function(i,r){var o=u.state;u.state=m({},o,i),function(i,r){if(n(i,r))return!0;if("object"!==e(i)||null===i||"object"!==e(r)||null===r)return!1;var o=Object.keys(i),s=Object.keys(r);if(o.length!==s.length)return!1;for(var a=0;a<o.length;a++)if(!t.call(r,o[a])||!n(i[o[a]],r[o[a]]))return!1;return!0}(u.state,o)||(f&&f(u.state,o),u.isMounted&&u.onUpdate(o)),r&&r()}),w&&a("Initial state (passed)",w),this.setState(w||this.getInitialState()),this.getContainerNode=i,this.itemHeights=new d(i,h.length,this.getState),a("Items count",h.length),S&&a("Estimated item height",S)}var u,I,c;return u=s,(I=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var r=m({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return a("Initial state (created)",r),a("First shown item index",t),a("Last shown item index",n),r}},{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:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{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&&this.itemHeights.update(e,t,n)}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){h()&&(a("Item",e,"state changed"),a("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),a("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&&(a("Item",e,"height changed from",n,"to",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,o=0,s=!1,h=0;h<this.getItemsCount();){var u=this.itemHeights.get(h);if(void 0===u){a("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=h);var d=t-(n+o);r=Math.min(h+(this.getEstimatedItemsCount(d)-1),this.getItemsCount()-1),s=!0;break}if(o+=u,void 0===i&&n+o>e&&(a("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(o+=this.getItemSpacing()),n+o>t){a("Last visible item index (including margin)",h),void 0!==i&&(r=h);break}h++}return void 0!==i&&void 0===r&&a("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),s=!1),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:s}}},{key:"getInvisibleItemIndexes",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.getInvisibleItemIndexes();var r=this.getVisibleItemIndexes(e,t,n);return void 0===r.firstShownItemIndex?this.getInvisibleItemIndexes():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;!function t(){void 0!==e.top&&i(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"});e.watchContainerElementTopCoordinateTimer=setTimeout(t,1e3)}()}},{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()),s=n.top,a=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=s;var h=function(){var e=o();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(),s,s+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:"updateLayout",value:function(e){a("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,o=i.lastShownItemIndex,s=i.beforeItemsHeight,h=i.afterItemsHeight,u=i.itemStates,l=i.itemHeights;i.itemSpacing;a("~ 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}}(n,e),I=g.prependedItemsCount,c=g.appendedItemsCount;I>0||c>0?(I>0&&(a("Prepended items count",I),l=new Array(I).concat(l),this.itemHeights.onPrepend(I),u&&(u=new Array(I).concat(u)),this.captureScroll(n,e,I)),c>0&&(a("Appended items count",c),l=l.concat(new Array(c)),u&&(u=u.concat(new Array(c)))),r+=I,o+=I,s+=this.itemHeights.getAverage()*I,h+=this.itemHeights.getAverage()*c):(a("Non-incremental items update"),a("Previous items",n),a("New items",e),this.itemHeights=new d(this.getContainerNode,e.length,this.getState),l=new Array(e.length),u=new Array(e.length),0===e.length?(r=void 0,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length)),s=0,h=0),this.setState(m({},void 0,{items:e,itemStates:u,itemHeights:l,firstShownItemIndex:r,lastShownItemIndex:o,beforeItemsHeight:s,afterItemsHeight:h}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&l(u.prototype,I),c&&l(u,c),s}();function c(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 f(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 p(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,o=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),p(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,o=e.lastShownItemIndex,s=e.beforeItemsHeight,h=e.afterItemsHeight;a("~ On state change ~"),a("Previous state",t),a("New state",e),r.container.style.paddingTop=s+"px",r.container.style.paddingBottom=h+"px";var u=t&&n===t.items&&t.items.length>0;if(u){a("Incremental render");for(var d=t.lastShownItemIndex;d>=t.firstShownItemIndex;){if(d>=i&&d<=o);else{a("Remove item",d);var m=r.container.childNodes[d-t.firstShownItemIndex];r.container.removeChild(m)}d--}}else for(a("Clean render");r.container.firstChild;)r.container.removeChild(r.container.firstChild);for(var l=u,g=l&&r.container.firstChild,I=i;I<=o;){if(u&&I>=t.firstShownItemIndex&&I<=t.lastShownItemIndex)l&&(l=!1);else{var c=r.renderItem(n[I]);l?(a("Prepend item",I),r.container.insertBefore(c,g)):(a("Append item",I),r.container.appendChild(c))}I++}}),p(this,"onUnmount",function(){r.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var s=o.onMount,h=c(o,["onMount"]);this.virtualScroller=new I(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){p(e,t,n[t])})}return e}({},h,{onStateChange:this.onStateChange})),s&&s(),this.virtualScroller.onMount()}var t,n,i;return t=e,(n=[{key:"onItemHeightChange",value:function(e){this.virtualScroller.onItemHeightChange(e)}},{key:"onLastSeenItemIndexChange",value:function(e,t){this.virtualScroller.onLastSeenItemIndexChange(e,t)}},{key:"updateItems",value:function(e,t){this.virtualScroller.updateItems(e,t)}}])&&f(t.prototype,n),i&&f(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 s(e,t){if(r(e,t))return!0;if("object"!==n(e)||null===e||"object"!==n(t)||null===t)return!1;var s=Object.keys(e),o=Object.keys(t);if(s.length!==o.length)return!1;for(var a=0;a<s.length;a++)if(!i.call(t,s[a])||!r(e[s[a]],t[s[a]]))return!1;return!0}function o(){return window.pageYOffset}function a(){return window.innerHeight}function h(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 u(){if(m()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,h(["[virtual-scroller]"].concat(n)))}}function m(){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 g=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var r=0;r<i().itemHeights.length;){if(null==i().itemHeights[r]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=r-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=r),this.measuredItemsHeight+=i().itemHeights[r];r++}}var t,n,i;return t=e,(n=[{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&&u("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.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);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++}this.updateAverageItemHeight()}},{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:"updateAverageItemHeight",value:function(){this.averageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.averageItemHeight=this.measuredItemsHeight/this.averageItemHeightSamplesCount}},{key:"getAverage",value:function(){return this.previousAverageItemHeight&&this.previousAverageItemHeightSamplesCount>this.averageItemHeightSamplesCount?this.previousAverageItemHeight:this.averageItemHeight||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){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){f(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 f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var I=function(){function e(t,n){var i=this,r=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),f(this,"onScroll",function(){return i.onUpdateShownItemIndexes({reason:"scroll"})}),f(this,"onResize",function(){return i.onUpdateShownItemIndexes({reason:"resize"})}),f(this,"updateShownItemIndexes",function(e){var t=i.getShownItemIndexes(),n=t.firstShownItemIndex,r=t.lastShownItemIndex,s=t.redoLayoutAfterRender,o=i.getBeforeItemsHeight(n,r),a=i.getAfterItemsHeight(n,r);i.updateWillBeHiddenItemHeightsAndState(n,r),u("~ Layout results "+(i.bypass?"(bypass) ":"")+"~"),u("First shown item index",n),u("Last shown item index",r),u("Before items height",o),u("After items height",a),u("Average item height (calculated on previous render)",i.itemHeights.getAverage()),s&&u("Redo layout after render"),i.onShowItems(n,r),i.setState({firstShownItemIndex:n,lastShownItemIndex:r,beforeItemsHeight:o,afterItemsHeight:a},function(){return e(s)})}),f(this,"updateShownItemIndexesRecursive",function(){i.updateShownItemIndexes(function(e){e?setTimeout(function(){i.isMounted?i.updateShownItemIndexesRecursive():i.onDoneUpdatingItemIndexes()},0):i.onDoneUpdatingItemIndexes()})}),f(this,"restoreScroll",function(){var e=i.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;i.restoreScrollAfterPrepend=void 0;var r=i.getItemElement(t).getBoundingClientRect().top-n;0!==r&&(u("Restore scroll position: scroll by",r),window.scrollTo(0,o()+r))}),f(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==i.getItemsCount()&&!i.isUpdatingItemIndexes){if(clearTimeout(i.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==i.latestLayoutScreenTopAfterMargin&&o()<i.latestLayoutScreenTopAfterMargin&&i.getState().firstShownItemIndex>0||void 0!==i.latestLayoutScreenBottomAfterMargin&&o()+a()>i.latestLayoutScreenBottomAfterMargin&&i.getState().lastShownItemIndex<i.getItemsCount()-1;if(u(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return i.onUserStopsScrollingTimeout=setTimeout(i.onUserStoppedScrolling,100)}i.updateLayout(t)}}),f(this,"onUserStoppedScrolling",function(){i.isMounted&&i.updateLayout("stopped scrolling")});var h=r.getState,m=r.setState,d=r.onStateChange,c=r.bypass,I=r.bypassBatchSize,p=r.estimatedItemHeight,S=r.onLastSeenItemIndexChange,v=r.state;u("~ Initialize ~"),v&&(n=v.items),this.bypass=c,this.bypassBatchSize=I||10,this.initialItems=n,this.estimatedItemHeight=p,S&&(this.onLastSeenItemIndexChange=S,this.lastSeenItemIndex=-1),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),m?(this.getState=h,this.setState=m):(this.getState=function(){return i.state},this.setState=function(e,t){var n=i.state;i.state=l({},n,e),s(i.state,n)||(d&&d(i.state,n),i.isMounted&&i.onUpdate(n)),t&&t()}),v&&u("Initial state (passed)",v),this.setState(v||this.getInitialState()),this.getContainerNode=t,this.itemHeights=new g(t,n.length,this.getState),u("Items count",n.length),p&&u("Estimated item height",p)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var r=l({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return u("Initial state (created)",r),u("First shown item index",t),u("Last shown item index",n),r}},{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:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onUnmount",value:function(){this.isMounted=!1,this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout))}},{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&&this.itemHeights.update(e,t,n)}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){m()&&(u("Item",e,"state changed"),u("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),u("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&&(u("Item",e,"height changed from",n,"to",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,s=0,o=!1,a=0;a<this.getItemsCount();){var h=this.itemHeights.get(a);if(void 0===h){u("Item ".concat(a," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=a);var m=t-(n+s);r=Math.min(a+(this.getEstimatedItemsCount(m)-1),this.getItemsCount()-1),o=!0;break}if(s+=h,void 0===i&&n+s>e&&(u("First visible item index (including margin)",a),i=a),a<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){u("Last visible item index (including margin)",a),void 0!==i&&(r=a);break}a++}return void 0!==i&&void 0===r&&u("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),o=!1),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:o}}},{key:"getInvisibleItemIndexes",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.getInvisibleItemIndexes();var r=this.getVisibleItemIndexes(e,t,n);return void 0===r.firstShownItemIndex?this.getInvisibleItemIndexes():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:"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,r,s,h,u,m=(n=this.getContainerNode(),i=n.getBoundingClientRect(),r=document.clientLeft||document.body.clientLeft||0,s=document.clientTop||document.body.clientTop||0,h=window.pageYOffset,u=window.pageXOffset,{top:i.top+h-s,left:i.left+u-r,width:i.width,height:i.height}),d=m.top,g=m.height,l=function(){var e=a();return{top:o(),bottom:o()+e,height:e}}(),c=l.top,f=l.bottom;return this.latestLayoutScreenTopAfterMargin=c-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=f+this.getMargin(),this.getItemIndexes(c-this.getMargin(),f+this.getMargin(),d,d+g)}},{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:"updateLayout",value:function(e){u("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,s=i.lastShownItemIndex,o=i.beforeItemsHeight,a=i.afterItemsHeight,h=i.itemStates,m=i.itemHeights;i.itemSpacing;u("~ Update items ~");var d=p(n,e),c=d.prependedItemsCount,f=d.appendedItemsCount;c>0||f>0?(c>0&&(u("Prepended items count",c),m=new Array(c).concat(m),this.itemHeights.onPrepend(c),h&&(h=new Array(c).concat(h)),this.captureScroll(n,e,c)),f>0&&(u("Appended items count",f),m=m.concat(new Array(f)),h&&(h=h.concat(new Array(f)))),r+=c,s+=c,o+=this.itemHeights.getAverage()*c,a+=this.itemHeights.getAverage()*f):(u("Non-incremental items update"),u("Previous items",n),u("New items",e),this.itemHeights=new g(this.getContainerNode,e.length,this.getState),m=new Array(e.length),h=new Array(e.length),0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),o=0,a=0),this.setState(l({},void 0,{items:e,itemStates:h,itemHeights:m,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:o,afterItemsHeight:a}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&c(t.prototype,n),i&&c(t,i),e}();function p(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 S(e){return(S="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 v(){return(v=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 y(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 w(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 b(e){return(b=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function H(e,t){return(H=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function C(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]),O=function(t){function n(t){var i,r,s;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,s=b(n).call(this,t),i=!s||"object"!==S(s)&&"function"!=typeof s?x(r):s,C(x(i),"container",e.createRef()),C(x(i),"onItemStateChange",new Array(i.props.items.length)),C(x(i),"onItemHeightChange",new Array(i.props.items.length)),C(x(i),"itemRefs",new Array(i.props.items.length)),C(x(i),"uniquePrefixes",[]);var o=i.props,a=o.items,h=o.initialState,u=o.estimatedItemHeight,m=o.onLastSeenItemIndexChange,d=o.onStateChange,g=o.bypass,l=o.bypassBatchSize;return i.previousItemsProperty=a,i.virtualScroller=new I(function(){return i.container.current},a,{estimatedItemHeight:u,bypass:g,bypassBatchSize:l,onLastSeenItemIndexChange:m,state:h,getState:function(){return i.state},setState:function(e,t){i.state?i.setState(e,t):(i.state=e,d&&d(e))}}),i.generateUniquePrefix(),i}var i,r,o;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&&H(e,t)}(n,e.Component),i=n,(r=[{key:"updateItem",value:function(e){this.itemRefs[e]&&this.itemRefs[e].current&&this.itemRefs[e].current.forceUpdate()}},{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()}},{key:"componentDidUpdate",value:function(e,t){var n=this.props.onStateChange;n&&(s(this.state,t)||n(this.state,t)),this.virtualScroller.onUpdate(t);var i=this.props.items;i!==e.items&&this.virtualScroller.updateItems(i)}},{key:"componentWillUnmount",value:function(){this.virtualScroller.onUnmount()}},{key:"render",value:function(){var t=this,n=this.props,i=n.itemComponent,r=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.bypassBatchSize,n.initialState,n.onStateChange,n.onLastSeenItemIndexChange,n.onMount,y(n,["itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","bypassBatchSize","initialState","onStateChange","onLastSeenItemIndexChange","onMount"])),o=this.virtualScroller.getState(),a=o.items,h=o.itemStates,u=o.firstShownItemIndex,m=o.lastShownItemIndex,d=o.beforeItemsHeight,g=o.afterItemsHeight,l=this.props.items,c=a;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&l!==c){var f=p(c,l),I=f.prependedItemsCount,S=f.appendedItemsCount;0===I&&S>0||(this.virtualScroller.captureScroll(c,l),this.generateUniquePrefix(),this.onItemStateChange=new Array(l.length),this.onItemHeightChange=new Array(l.length),this.itemRefs=new Array(l.length))}return e.createElement("div",v({},s,{ref:this.container,style:{paddingTop:d+"px",paddingBottom:g+"px"}}),a.map(function(n,s){return s>=u&&s<=m?e.createElement(i,v({},r,{ref:k(i)?t.getItemRef(s):void 0,key:"".concat(t.uniquePrefix,":").concat(s),state:h&&h[s],onStateChange:t.getOnItemStateChange(s),onHeightChange:t.getOnItemHeightChange(s)}),n):null}))}}])&&w(i.prototype,r),o&&w(i,o),n}();function k(e){return e.prototype.isReactComponent}return C(O,"propTypes",{items:t.arrayOf(t.object).isRequired,itemComponent:A.isRequired,itemComponentProps:t.object,estimatedItemHeight:t.number,bypass:t.bool,bypassBatchSize:t.number,onMount:t.func,onLastSeenItemIndexChange: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})}),O});
+!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 s(e,t){if(r(e,t))return!0;if("object"!==n(e)||null===e||"object"!==n(t)||null===t)return!1;var s=Object.keys(e),o=Object.keys(t);if(s.length!==o.length)return!1;for(var a=0;a<s.length;a++)if(!i.call(t,s[a])||!r(e[s[a]],t[s[a]]))return!1;return!0}function o(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 a(){return window.pageYOffset}function h(){return window.innerHeight}function u(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 m(){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,u(["[virtual-scroller]"].concat(n)))}}function d(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}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)}}var l=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var r=0;r<i().itemHeights.length;){if(null==i().itemHeights[r]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=r-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=r),this.measuredItemsHeight+=i().itemHeights[r];r++}}var t,n,i;return t=e,(n=[{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&&m("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.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);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++}this.updateAverageItemHeight()}},{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:"updateAverageItemHeight",value:function(){this.averageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.averageItemHeight=this.measuredItemsHeight/this.averageItemHeightSamplesCount}},{key:"getAverage",value:function(){return this.previousAverageItemHeight&&this.previousAverageItemHeightSamplesCount>this.averageItemHeightSamplesCount?this.previousAverageItemHeight:this.averageItemHeight||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)}}])&&g(t.prototype,n),i&&g(t,i),e}();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 f(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 p=function(){function e(t,n){var i=this,r=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),I(this,"onScroll",function(){return i.onUpdateShownItemIndexes({reason:"scroll"})}),I(this,"onResize",function(){return i.onUpdateShownItemIndexes({reason:"resize"})}),I(this,"updateShownItemIndexes",function(e){var t=i.getShownItemIndexes(),n=t.firstShownItemIndex,r=t.lastShownItemIndex,s=t.redoLayoutAfterRender,o=i.getBeforeItemsHeight(n,r),a=i.getAfterItemsHeight(n,r);i.updateWillBeHiddenItemHeightsAndState(n,r),m("~ Layout results "+(i.bypass?"(bypass) ":"")+"~"),m("First shown item index",n),m("Last shown item index",r),m("Before items height",o),m("After items height",a),m("Average item height (calculated on previous render)",i.itemHeights.getAverage()),s&&m("Redo layout after render"),i.onShowItems(n,r),i.setState({firstShownItemIndex:n,lastShownItemIndex:r,beforeItemsHeight:o,afterItemsHeight:a},function(){return e(s)})}),I(this,"updateShownItemIndexesRecursive",function(){i.updateShownItemIndexes(function(e){e?setTimeout(function(){i.isMounted?i.updateShownItemIndexesRecursive():i.onDoneUpdatingItemIndexes()},0):i.onDoneUpdatingItemIndexes()})}),I(this,"restoreScroll",function(){var e=i.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;i.restoreScrollAfterPrepend=void 0;var r=i.getItemElement(t).getBoundingClientRect().top-n;0!==r&&(m("Restore scroll position: scroll by",r),window.scrollTo(0,a()+r))}),I(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==i.getItemsCount()&&!i.isUpdatingItemIndexes){if(clearTimeout(i.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==i.latestLayoutScreenTopAfterMargin&&a()<i.latestLayoutScreenTopAfterMargin&&i.getState().firstShownItemIndex>0||void 0!==i.latestLayoutScreenBottomAfterMargin&&a()+h()>i.latestLayoutScreenBottomAfterMargin&&i.getState().lastShownItemIndex<i.getItemsCount()-1;if(m(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return i.onUserStopsScrollingTimeout=setTimeout(i.onUserStoppedScrolling,100)}i.updateLayout(t)}}),I(this,"onUserStoppedScrolling",function(){i.isMounted&&i.updateLayout("stopped scrolling")});var o=r.getState,u=r.setState,d=r.onStateChange,g=r.bypass,f=r.bypassBatchSize,p=r.estimatedItemHeight,S=r.onLastSeenItemIndexChange,v=r.state;m("~ Initialize ~"),v&&(n=v.items),this.bypass=g,this.bypassBatchSize=f||10,this.initialItems=n,this.estimatedItemHeight=p,S&&(this.onLastSeenItemIndexChange=S,this.lastSeenItemIndex=-1),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),u?(this.getState=o,this.setState=u):(this.getState=function(){return i.state},this.setState=function(e,t){var n=i.state;i.state=c({},n,e),s(i.state,n)||(d&&d(i.state,n),i.isMounted&&i.onUpdate(n)),t&&t()}),v&&m("Initial state (passed)",v),this.setState(v||this.getInitialState()),this.getContainerNode=t,this.itemHeights=new l(t,n.length,this.getState),m("Items count",n.length),p&&m("Estimated item height",p)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var r=c({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return m("Initial state (created)",r),m("First shown item index",t),m("Last shown item index",n),r}},{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:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{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&&this.itemHeights.update(e,t,n)}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){d()&&(m("Item",e,"state changed"),m("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),m("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&&(m("Item",e,"height changed from",n,"to",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,s=0,o=!1,a=0;a<this.getItemsCount();){var h=this.itemHeights.get(a);if(void 0===h){m("Item ".concat(a," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=a);var u=t-(n+s);r=Math.min(a+(this.getEstimatedItemsCount(u)-1),this.getItemsCount()-1),o=!0;break}if(s+=h,void 0===i&&n+s>e&&(m("First visible item index (including margin)",a),i=a),a<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){m("Last visible item index (including margin)",a),void 0!==i&&(r=a);break}a++}return void 0!==i&&void 0===r&&m("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),o=!1),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:o}}},{key:"getInvisibleItemIndexes",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.getInvisibleItemIndexes();var r=this.getVisibleItemIndexes(e,t,n);return void 0===r.firstShownItemIndex?this.getInvisibleItemIndexes():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;!function t(){void 0!==e.top&&o(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"});e.watchContainerElementTopCoordinateTimer=setTimeout(t,1e3)}()}},{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=o(this.getContainerNode()),i=n.top,r=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=i;var s=function(){var e=h();return{top:a(),bottom:a()+e,height:e}}(),u=s.top,m=s.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:"updateLayout",value:function(e){m("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,s=i.lastShownItemIndex,o=i.beforeItemsHeight,a=i.afterItemsHeight,h=i.itemStates,u=i.itemHeights;i.itemSpacing;m("~ Update items ~");var d=S(n,e),g=d.prependedItemsCount,f=d.appendedItemsCount;g>0||f>0?(g>0&&(m("Prepended items count",g),u=new Array(g).concat(u),this.itemHeights.onPrepend(g),h&&(h=new Array(g).concat(h)),this.captureScroll(n,e,g)),f>0&&(m("Appended items count",f),u=u.concat(new Array(f)),h&&(h=h.concat(new Array(f)))),r+=g,s+=g,o+=this.itemHeights.getAverage()*g,a+=this.itemHeights.getAverage()*f):(m("Non-incremental items update"),m("Previous items",n),m("New items",e),this.itemHeights=new l(this.getContainerNode,e.length,this.getState),u=new Array(e.length),h=new Array(e.length),0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),o=0,a=0),this.setState(c({},void 0,{items:e,itemStates:h,itemHeights:u,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:o,afterItemsHeight:a}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&f(t.prototype,n),i&&f(t,i),e}();function S(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 v(e){return(v="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 y(){return(y=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 w(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 b(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 x(e){return(x=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function C(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function H(e,t){return(H=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function A(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var O=t.elementType||t.oneOfType([t.func,t.object]),k=function(t){function n(t){var i,r,s;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,s=x(n).call(this,t),i=!s||"object"!==v(s)&&"function"!=typeof s?C(r):s,A(C(i),"container",e.createRef()),A(C(i),"onItemStateChange",new Array(i.props.items.length)),A(C(i),"onItemHeightChange",new Array(i.props.items.length)),A(C(i),"itemRefs",new Array(i.props.items.length)),A(C(i),"uniquePrefixes",[]);var o=i.props,a=o.items,h=o.initialState,u=o.estimatedItemHeight,m=o.onLastSeenItemIndexChange,d=o.onStateChange,g=o.bypass,l=o.bypassBatchSize;return i.previousItemsProperty=a,i.virtualScroller=new p(function(){return i.container.current},a,{estimatedItemHeight:u,bypass:g,bypassBatchSize:l,onLastSeenItemIndexChange:m,state:h,getState:function(){return i.state},setState:function(e,t){i.state?i.setState(e,t):(i.state=e,d&&d(e))}}),i.generateUniquePrefix(),i}var i,r,o;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&&H(e,t)}(n,e.Component),i=n,(r=[{key:"updateItem",value:function(e){this.itemRefs[e]&&this.itemRefs[e].current&&this.itemRefs[e].current.forceUpdate()}},{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()}},{key:"componentDidUpdate",value:function(e,t){var n=this.props.onStateChange;n&&(s(this.state,t)||n(this.state,t)),this.virtualScroller.onUpdate(t);var i=this.props.items;i!==e.items&&this.virtualScroller.updateItems(i)}},{key:"componentWillUnmount",value:function(){this.virtualScroller.onUnmount()}},{key:"render",value:function(){var t=this,n=this.props,i=n.itemComponent,r=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.bypassBatchSize,n.initialState,n.onStateChange,n.onLastSeenItemIndexChange,n.onMount,w(n,["itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","bypassBatchSize","initialState","onStateChange","onLastSeenItemIndexChange","onMount"])),o=this.virtualScroller.getState(),a=o.items,h=o.itemStates,u=o.firstShownItemIndex,m=o.lastShownItemIndex,d=o.beforeItemsHeight,g=o.afterItemsHeight,l=this.props.items,c=a;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&l!==c){var f=S(c,l),I=f.prependedItemsCount,p=f.appendedItemsCount;0===I&&p>0||(this.virtualScroller.captureScroll(c,l),this.generateUniquePrefix(),this.onItemStateChange=new Array(l.length),this.onItemHeightChange=new Array(l.length),this.itemRefs=new Array(l.length))}return e.createElement("div",y({},s,{ref:this.container,style:{paddingTop:d+"px",paddingBottom:g+"px"}}),a.map(function(n,s){return s>=u&&s<=m?e.createElement(i,y({},r,{ref:P(i)?t.getItemRef(s):void 0,key:"".concat(t.uniquePrefix,":").concat(s),state:h&&h[s],onStateChange:t.getOnItemStateChange(s),onHeightChange:t.getOnItemHeightChange(s)}),n):null}))}}])&&b(i.prototype,r),o&&b(i,o),n}();function P(e){return e.prototype.isReactComponent}return A(k,"propTypes",{items:t.arrayOf(t.object).isRequired,itemComponent:O.isRequired,itemComponentProps:t.object,estimatedItemHeight:t.number,bypass:t.bool,bypassBatchSize:t.number,onMount:t.func,onLastSeenItemIndexChange: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})}),k});
 //# 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(){return window.pageYOffset}function s(){return window.innerHeight}function r(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 o(){if(a()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,r(["[virtual-scroller]"].concat(n)))}}function a(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function h(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 u=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var s=0;s<i().itemHeights.length;){if(null==i().itemHeights[s]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=s-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=s),this.measuredItemsHeight+=i().itemHeights[s];s++}}var t,n,i;return t=e,(n=[{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&&o("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.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);for(var i=this.firstMeasuredItemIndex,s=this.lastMeasuredItemIndex,r=!1,o=e;o<=t;){var a=this._getItemHeight(o,n);void 0!==a&&(this.set(o,a),(void 0===i||o<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=o,r=!0)),(void 0===s||o>s)&&(void 0!==s&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=o)),o++}this.updateAverageItemHeight()}},{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:"updateAverageItemHeight",value:function(){this.averageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.averageItemHeight=this.measuredItemsHeight/this.averageItemHeightSamplesCount}},{key:"getAverage",value:function(){return this.previousAverageItemHeight&&this.previousAverageItemHeightSamplesCount>this.averageItemHeightSamplesCount?this.previousAverageItemHeight:this.averageItemHeight||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)}}])&&h(t.prototype,n),i&&h(t,i),e}();function d(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){g(e,t,n[t])})}return e}function m(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 g(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 r(a,h){var m=this,l=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,r),g(this,"onScroll",function(){return m.onUpdateShownItemIndexes({reason:"scroll"})}),g(this,"onResize",function(){return m.onUpdateShownItemIndexes({reason:"resize"})}),g(this,"updateShownItemIndexes",function(e){var t=m.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,s=t.redoLayoutAfterRender,r=m.getBeforeItemsHeight(n,i),a=m.getAfterItemsHeight(n,i);m.updateWillBeHiddenItemHeightsAndState(n,i),o("~ Layout results "+(m.bypass?"(bypass) ":"")+"~"),o("First shown item index",n),o("Last shown item index",i),o("Before items height",r),o("After items height",a),o("Average item height (calculated on previous render)",m.itemHeights.getAverage()),s&&o("Redo layout after render"),m.onShowItems(n,i),m.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:r,afterItemsHeight:a},function(){return e(s)})}),g(this,"updateShownItemIndexesRecursive",function(){m.updateShownItemIndexes(function(e){e?setTimeout(function(){m.isMounted?m.updateShownItemIndexesRecursive():m.onDoneUpdatingItemIndexes()},0):m.onDoneUpdatingItemIndexes()})}),g(this,"restoreScroll",function(){var e=m.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;m.restoreScrollAfterPrepend=void 0;var s=m.getItemElement(t).getBoundingClientRect().top-n;0!==s&&(o("Restore scroll position: scroll by",s),window.scrollTo(0,i()+s))}),g(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==m.getItemsCount()&&!m.isUpdatingItemIndexes){if(clearTimeout(m.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==m.latestLayoutScreenTopAfterMargin&&i()<m.latestLayoutScreenTopAfterMargin&&m.getState().firstShownItemIndex>0||void 0!==m.latestLayoutScreenBottomAfterMargin&&i()+s()>m.latestLayoutScreenBottomAfterMargin&&m.getState().lastShownItemIndex<m.getItemsCount()-1;if(o(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return m.onUserStopsScrollingTimeout=setTimeout(m.onUserStoppedScrolling,100)}m.updateLayout(t)}}),g(this,"onUserStoppedScrolling",function(){m.isMounted&&m.updateLayout("stopped scrolling")});var I=l.getState,c=l.setState,f=l.onStateChange,p=l.bypass,S=l.bypassBatchSize,v=l.estimatedItemHeight,y=l.onLastSeenItemIndexChange,w=l.state;o("~ Initialize ~"),w&&(h=w.items),this.bypass=p,this.bypassBatchSize=S||10,this.initialItems=h,this.estimatedItemHeight=v,y&&(this.onLastSeenItemIndexChange=y,this.lastSeenItemIndex=-1),a()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(a()),c?(this.getState=I,this.setState=c):(this.getState=function(){return m.state},this.setState=function(i,s){var r=m.state;m.state=d({},r,i),function(i,s){if(n(i,s))return!0;if("object"!==e(i)||null===i||"object"!==e(s)||null===s)return!1;var r=Object.keys(i),o=Object.keys(s);if(r.length!==o.length)return!1;for(var a=0;a<r.length;a++)if(!t.call(s,r[a])||!n(i[r[a]],s[r[a]]))return!1;return!0}(m.state,r)||(f&&f(m.state,r),m.isMounted&&m.onUpdate(r)),s&&s()}),w&&o("Initial state (passed)",w),this.setState(w||this.getInitialState()),this.getContainerNode=a,this.itemHeights=new u(a,h.length,this.getState),o("Items count",h.length),v&&o("Estimated item height",v)}var h,l,I;return h=r,(l=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var s=d({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return o("Initial state (created)",s),o("First shown item index",t),o("Last shown item index",n),s}},{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:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onUnmount",value:function(){this.isMounted=!1,this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout))}},{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&&this.itemHeights.update(e,t,n)}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){a()&&(o("Item",e,"state changed"),o("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),o("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&&(o("Item",e,"height changed from",n,"to",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,s,r=0,a=!1,h=0;h<this.getItemsCount();){var u=this.itemHeights.get(h);if(void 0===u){o("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=h);var d=t-(n+r);s=Math.min(h+(this.getEstimatedItemsCount(d)-1),this.getItemsCount()-1),a=!0;break}if(r+=u,void 0===i&&n+r>e&&(o("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(r+=this.getItemSpacing()),n+r>t){o("Last visible item index (including margin)",h),void 0!==i&&(s=h);break}h++}return void 0!==i&&void 0===s&&o("Last item index (is fully visible)",s=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(s<this.restoreScrollAfterPrepend.index&&(s=this.restoreScrollAfterPrepend.index),a=!1),{firstShownItemIndex:i,lastShownItemIndex:s,redoLayoutAfterRender:a}}},{key:"getInvisibleItemIndexes",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.getInvisibleItemIndexes();var s=this.getVisibleItemIndexes(e,t,n);return void 0===s.firstShownItemIndex?this.getInvisibleItemIndexes():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:"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,r,o,a,h,u,d=(n=this.getContainerNode(),r=n.getBoundingClientRect(),o=document.clientLeft||document.body.clientLeft||0,a=document.clientTop||document.body.clientTop||0,h=window.pageYOffset,u=window.pageXOffset,{top:r.top+h-a,left:r.left+u-o,width:r.width,height:r.height}),m=d.top,g=d.height,l=function(){var e=s();return{top:i(),bottom:i()+e,height:e}}(),I=l.top,c=l.bottom;return this.latestLayoutScreenTopAfterMargin=I-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=c+this.getMargin(),this.getItemIndexes(I-this.getMargin(),c+this.getMargin(),m,m+g)}},{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:"updateLayout",value:function(e){o("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,n=this.getState().items,i=this.getState(),s=i.firstShownItemIndex,r=i.lastShownItemIndex,a=i.beforeItemsHeight,h=i.afterItemsHeight,m=i.itemStates,g=i.itemHeights;i.itemSpacing;o("~ 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}}(n,e),I=l.prependedItemsCount,c=l.appendedItemsCount;I>0||c>0?(I>0&&(o("Prepended items count",I),g=new Array(I).concat(g),this.itemHeights.onPrepend(I),m&&(m=new Array(I).concat(m)),this.captureScroll(n,e,I)),c>0&&(o("Appended items count",c),g=g.concat(new Array(c)),m&&(m=m.concat(new Array(c)))),s+=I,r+=I,a+=this.itemHeights.getAverage()*I,h+=this.itemHeights.getAverage()*c):(o("Non-incremental items update"),o("Previous items",n),o("New items",e),this.itemHeights=new u(this.getContainerNode,e.length,this.getState),g=new Array(e.length),m=new Array(e.length),0===e.length?(s=void 0,r=void 0):(s=0,r=this.getLastShownItemIndex(s,e.length)),a=0,h=0),this.setState(d({},void 0,{items:e,itemStates:m,itemHeights:g,firstShownItemIndex:s,lastShownItemIndex:r,beforeItemsHeight:a,afterItemsHeight:h}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&m(h.prototype,l),I&&m(h,I),r}()});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function n(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function i(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,s=window.pageYOffset,r=window.pageXOffset;return{top:t.top+s-i,left:t.left+r-n,width:t.width,height:t.height}}function s(){return window.pageYOffset}function r(){return window.innerHeight}function o(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 a(){if(h()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,o(["[virtual-scroller]"].concat(n)))}}function h(){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 u=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var s=0;s<i().itemHeights.length;){if(null==i().itemHeights[s]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=s-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=s),this.measuredItemsHeight+=i().itemHeights[s];s++}}var t,n,i;return t=e,(n=[{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&&a("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.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);for(var i=this.firstMeasuredItemIndex,s=this.lastMeasuredItemIndex,r=!1,o=e;o<=t;){var a=this._getItemHeight(o,n);void 0!==a&&(this.set(o,a),(void 0===i||o<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=o,r=!0)),(void 0===s||o>s)&&(void 0!==s&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=o)),o++}this.updateAverageItemHeight()}},{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:"updateAverageItemHeight",value:function(){this.averageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.averageItemHeight=this.measuredItemsHeight/this.averageItemHeightSamplesCount}},{key:"getAverage",value:function(){return this.previousAverageItemHeight&&this.previousAverageItemHeightSamplesCount>this.averageItemHeightSamplesCount?this.previousAverageItemHeight:this.averageItemHeight||0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&d(t.prototype,n),i&&d(t,i),e}();function m(e){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){l(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 l(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 o(i,h){var d=this,g=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,o),l(this,"onScroll",function(){return d.onUpdateShownItemIndexes({reason:"scroll"})}),l(this,"onResize",function(){return d.onUpdateShownItemIndexes({reason:"resize"})}),l(this,"updateShownItemIndexes",function(e){var t=d.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,s=t.redoLayoutAfterRender,r=d.getBeforeItemsHeight(n,i),o=d.getAfterItemsHeight(n,i);d.updateWillBeHiddenItemHeightsAndState(n,i),a("~ Layout results "+(d.bypass?"(bypass) ":"")+"~"),a("First shown item index",n),a("Last shown item index",i),a("Before items height",r),a("After items height",o),a("Average item height (calculated on previous render)",d.itemHeights.getAverage()),s&&a("Redo layout after render"),d.onShowItems(n,i),d.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:r,afterItemsHeight:o},function(){return e(s)})}),l(this,"updateShownItemIndexesRecursive",function(){d.updateShownItemIndexes(function(e){e?setTimeout(function(){d.isMounted?d.updateShownItemIndexesRecursive():d.onDoneUpdatingItemIndexes()},0):d.onDoneUpdatingItemIndexes()})}),l(this,"restoreScroll",function(){var e=d.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;d.restoreScrollAfterPrepend=void 0;var i=d.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(a("Restore scroll position: scroll by",i),window.scrollTo(0,s()+i))}),l(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==d.getItemsCount()&&!d.isUpdatingItemIndexes){if(clearTimeout(d.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==d.latestLayoutScreenTopAfterMargin&&s()<d.latestLayoutScreenTopAfterMargin&&d.getState().firstShownItemIndex>0||void 0!==d.latestLayoutScreenBottomAfterMargin&&s()+r()>d.latestLayoutScreenBottomAfterMargin&&d.getState().lastShownItemIndex<d.getItemsCount()-1;if(a(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return d.onUserStopsScrollingTimeout=setTimeout(d.onUserStoppedScrolling,100)}d.updateLayout(t)}}),l(this,"onUserStoppedScrolling",function(){d.isMounted&&d.updateLayout("stopped scrolling")});var I=g.getState,c=g.setState,f=g.onStateChange,p=g.bypass,v=g.bypassBatchSize,S=g.estimatedItemHeight,y=g.onLastSeenItemIndexChange,w=g.state;a("~ Initialize ~"),w&&(h=w.items),this.bypass=p,this.bypassBatchSize=v||10,this.initialItems=h,this.estimatedItemHeight=S,y&&(this.onLastSeenItemIndexChange=y,this.lastSeenItemIndex=-1),i()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(i()),c?(this.getState=I,this.setState=c):(this.getState=function(){return d.state},this.setState=function(i,s){var r=d.state;d.state=m({},r,i),function(i,s){if(n(i,s))return!0;if("object"!==e(i)||null===i||"object"!==e(s)||null===s)return!1;var r=Object.keys(i),o=Object.keys(s);if(r.length!==o.length)return!1;for(var a=0;a<r.length;a++)if(!t.call(s,r[a])||!n(i[r[a]],s[r[a]]))return!1;return!0}(d.state,r)||(f&&f(d.state,r),d.isMounted&&d.onUpdate(r)),s&&s()}),w&&a("Initial state (passed)",w),this.setState(w||this.getInitialState()),this.getContainerNode=i,this.itemHeights=new u(i,h.length,this.getState),a("Items count",h.length),S&&a("Estimated item height",S)}var d,I,c;return d=o,(I=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var s=m({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return a("Initial state (created)",s),a("First shown item index",t),a("Last shown item index",n),s}},{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:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{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&&this.itemHeights.update(e,t,n)}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){h()&&(a("Item",e,"state changed"),a("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),a("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&&(a("Item",e,"height changed from",n,"to",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,s,r=0,o=!1,h=0;h<this.getItemsCount();){var d=this.itemHeights.get(h);if(void 0===d){a("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=h);var u=t-(n+r);s=Math.min(h+(this.getEstimatedItemsCount(u)-1),this.getItemsCount()-1),o=!0;break}if(r+=d,void 0===i&&n+r>e&&(a("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(r+=this.getItemSpacing()),n+r>t){a("Last visible item index (including margin)",h),void 0!==i&&(s=h);break}h++}return void 0!==i&&void 0===s&&a("Last item index (is fully visible)",s=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(s<this.restoreScrollAfterPrepend.index&&(s=this.restoreScrollAfterPrepend.index),o=!1),{firstShownItemIndex:i,lastShownItemIndex:s,redoLayoutAfterRender:o}}},{key:"getInvisibleItemIndexes",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.getInvisibleItemIndexes();var s=this.getVisibleItemIndexes(e,t,n);return void 0===s.firstShownItemIndex?this.getInvisibleItemIndexes():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;!function t(){void 0!==e.top&&i(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"});e.watchContainerElementTopCoordinateTimer=setTimeout(t,1e3)}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass){var e=this.getState().firstShownItemIndex,t=this.getState().lastShownItemIndex;return{firstShownItemIndex:e,lastShownItemIndex:t=Math.min(t+this.bypassBatchSize,this.getItemsCount()-1),redoLayoutAfterRender:t<this.getItemsCount()-1}}var n=i(this.getContainerNode()),o=n.top,a=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=o;var h=function(){var e=r();return{top:s(),bottom:s()+e,height:e}}(),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(),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:"updateLayout",value:function(e){a("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,n=this.getState().items,i=this.getState(),s=i.firstShownItemIndex,r=i.lastShownItemIndex,o=i.beforeItemsHeight,h=i.afterItemsHeight,d=i.itemStates,g=i.itemHeights;i.itemSpacing;a("~ 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}}(n,e),I=l.prependedItemsCount,c=l.appendedItemsCount;I>0||c>0?(I>0&&(a("Prepended items count",I),g=new Array(I).concat(g),this.itemHeights.onPrepend(I),d&&(d=new Array(I).concat(d)),this.captureScroll(n,e,I)),c>0&&(a("Appended items count",c),g=g.concat(new Array(c)),d&&(d=d.concat(new Array(c)))),s+=I,r+=I,o+=this.itemHeights.getAverage()*I,h+=this.itemHeights.getAverage()*c):(a("Non-incremental items update"),a("Previous items",n),a("New items",e),this.itemHeights=new u(this.getContainerNode,e.length,this.getState),g=new Array(e.length),d=new Array(e.length),0===e.length?(s=void 0,r=void 0):(s=0,r=this.getLastShownItemIndex(s,e.length)),o=0,h=0),this.setState(m({},void 0,{items:e,itemStates:d,itemHeights:g,firstShownItemIndex:s,lastShownItemIndex:r,beforeItemsHeight:o,afterItemsHeight:h}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&g(d.prototype,I),c&&g(d,c),o}()});
 //# sourceMappingURL=virtual-scroller.js.map

commonjs/VirtualScroller.js

@@ -32,2 +32,3 @@ "use strict";
 var START_FROM_INDEX = 0;
+var WATCH_CONTAINER_ELEMENT_TOP_COORDINATE_INTERVAL = 1000;
 
@@ -442,2 +443,3 @@ var VirtualScroller =
         clearTimeout(this.onUserStopsScrollingTimeout);
+        clearTimeout(this.watchContainerElementTopCoordinateTimer);
       }
@@ -698,2 +700,53 @@ }
       }
+    } // `VirtualScroller` calls `getShownItemIndexes()` on mount
+    // but if the page styles are applied after `VirtualScroller` mounts
+    // (for example, if styles are applied via javascript, like Webpack does)
+    // then the list might not render correctly and will only show the first item.
+    // The reason for that would be that calling `.getBoundingClientRect()`
+    // on the list container element on mount returned "incorrect" `top` position
+    // because the styles haven't been applied yet.
+    // For example, consider a page:
+    // <div class="page">
+    //   <nav class="sidebar">...</nav>
+    //   <main>...</main>
+    // </div>
+    // The sidebar is styled as `position: fixed`, but until
+    // the page styles have been applied it's gonna be a regular `<div/>`
+    // meaning that `<main/>` will be rendered below the sidebar
+    // and will appear offscreen and so it will only render the first item.
+    // Then, the page styles are loaded and applied and the sidebar
+    // is now `position: fixed` so `<main/>` is now rendered at the top of the page
+    // but `VirtualScroller`'s `onMount()` has already been called
+    // and it won't re-render until the user scrolls or the window is resized.
+    // This type of a bug doesn't occur in production, but it can appear
+    // in development mode when using Webpack. The workaround `VirtualScroller`
+    // implements for such cases is calling `.getBoundingClientRect()` on the
+    // list container DOM element periodically (every second) to check if the
+    // `top` coordinate has changed as a result of CSS being applied:
+    // if it has then it recalculates the shown item indexes.
+
+  }, {
+    key: "watchContainerElementTopCoordinate",
+    value: function watchContainerElementTopCoordinate() {
+      var _this2 = this;
+
+      var check = function check() {
+        // Skip the first time.
+        if (_this2.top !== undefined) {
+          // Calling `.getBoundingClientRect()` on an element is
+          // about 0.002 milliseconds on a modern desktop CPU.
+          var _getOffset = (0, _DOM.getOffset)(_this2.getContainerNode()),
+              top = _getOffset.top;
+
+          if (top !== _this2.top) {
+            _this2.onUpdateShownItemIndexes({
+              reason: 'top offset change'
+            });
+          }
+        }
+
+        _this2.watchContainerElementTopCoordinateTimer = setTimeout(check, WATCH_CONTAINER_ELEMENT_TOP_COORDINATE_INTERVAL);
+      };
+
+      check();
     }
@@ -732,6 +785,13 @@ /**
 
-      var _getOffset = (0, _DOM.getOffset)(this.getContainerNode()),
-          top = _getOffset.top,
-          height = _getOffset.height;
+      var _getOffset2 = (0, _DOM.getOffset)(this.getContainerNode()),
+          top = _getOffset2.top,
+          height = _getOffset2.height;
 
+      if (this.top === undefined) {
+        // See the comments for `watchContainerElementTopCoordinate()` method.
+        this.watchContainerElementTopCoordinate();
+      }
+
+      this.top = top;
+
       var _getScreenBounds = (0, _DOM.getScreenBounds)(),
@@ -830,3 +890,3 @@ screenTop = _getScreenBounds.top,
     value: function updateItems(newItems) {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -922,3 +982,3 @@ // , newCustomState) {
       }), function () {
-        _this2.onUpdateShownItemIndexes({
+        _this3.onUpdateShownItemIndexes({
           reason: 'update items',
@@ -925,0 +985,0 @@ force: true

modules/VirtualScroller.js

@@ -16,2 +16,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; }
 var START_FROM_INDEX = 0;
+var WATCH_CONTAINER_ELEMENT_TOP_COORDINATE_INTERVAL = 1000;
 
@@ -426,2 +427,3 @@ var VirtualScroller =
         clearTimeout(this.onUserStopsScrollingTimeout);
+        clearTimeout(this.watchContainerElementTopCoordinateTimer);
       }
@@ -682,2 +684,53 @@ }
       }
+    } // `VirtualScroller` calls `getShownItemIndexes()` on mount
+    // but if the page styles are applied after `VirtualScroller` mounts
+    // (for example, if styles are applied via javascript, like Webpack does)
+    // then the list might not render correctly and will only show the first item.
+    // The reason for that would be that calling `.getBoundingClientRect()`
+    // on the list container element on mount returned "incorrect" `top` position
+    // because the styles haven't been applied yet.
+    // For example, consider a page:
+    // <div class="page">
+    //   <nav class="sidebar">...</nav>
+    //   <main>...</main>
+    // </div>
+    // The sidebar is styled as `position: fixed`, but until
+    // the page styles have been applied it's gonna be a regular `<div/>`
+    // meaning that `<main/>` will be rendered below the sidebar
+    // and will appear offscreen and so it will only render the first item.
+    // Then, the page styles are loaded and applied and the sidebar
+    // is now `position: fixed` so `<main/>` is now rendered at the top of the page
+    // but `VirtualScroller`'s `onMount()` has already been called
+    // and it won't re-render until the user scrolls or the window is resized.
+    // This type of a bug doesn't occur in production, but it can appear
+    // in development mode when using Webpack. The workaround `VirtualScroller`
+    // implements for such cases is calling `.getBoundingClientRect()` on the
+    // list container DOM element periodically (every second) to check if the
+    // `top` coordinate has changed as a result of CSS being applied:
+    // if it has then it recalculates the shown item indexes.
+
+  }, {
+    key: "watchContainerElementTopCoordinate",
+    value: function watchContainerElementTopCoordinate() {
+      var _this2 = this;
+
+      var check = function check() {
+        // Skip the first time.
+        if (_this2.top !== undefined) {
+          // Calling `.getBoundingClientRect()` on an element is
+          // about 0.002 milliseconds on a modern desktop CPU.
+          var _getOffset = getOffset(_this2.getContainerNode()),
+              top = _getOffset.top;
+
+          if (top !== _this2.top) {
+            _this2.onUpdateShownItemIndexes({
+              reason: 'top offset change'
+            });
+          }
+        }
+
+        _this2.watchContainerElementTopCoordinateTimer = setTimeout(check, WATCH_CONTAINER_ELEMENT_TOP_COORDINATE_INTERVAL);
+      };
+
+      check();
     }
@@ -716,6 +769,13 @@ /**
 
-      var _getOffset = getOffset(this.getContainerNode()),
-          top = _getOffset.top,
-          height = _getOffset.height;
+      var _getOffset2 = getOffset(this.getContainerNode()),
+          top = _getOffset2.top,
+          height = _getOffset2.height;
 
+      if (this.top === undefined) {
+        // See the comments for `watchContainerElementTopCoordinate()` method.
+        this.watchContainerElementTopCoordinate();
+      }
+
+      this.top = top;
+
       var _getScreenBounds = getScreenBounds(),
@@ -814,3 +874,3 @@ screenTop = _getScreenBounds.top,
     value: function updateItems(newItems) {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -906,3 +966,3 @@ // , newCustomState) {
       }), function () {
-        _this2.onUpdateShownItemIndexes({
+        _this3.onUpdateShownItemIndexes({
           reason: 'update items',
@@ -909,0 +969,0 @@ force: true

package.json

 {
   "name": "virtual-scroller",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "An open-source implementation of Twitter's VirtualScroller component.",
@@ -5,0 +5,0 @@ "main": "index.commonjs.js",

README.md

@@ -257,2 +257,3 @@ # VirtualScroller
 
+* `children` — The item.
 * `state` — Item's state. Can be used for storing and then restoring the state of components which are about to be shown again after being previously hidden. For example, consider a post with an "Expand YouTube Video" button. If a user clicks the button the post is expanded and its height changes. Then the user scrolls down until the post is no longer visible and so it's no longer rendered. Then the user scrolls back up and the post is visible again and so it's rendered again. If the "Expand YouTube Video" state wasn't preserved then the list items would "jump" for the expanded minus non-expanded height difference. To avoid that, some `{ videoExpanded: true }` `state` could be passed to the post component which would make it auto-expand the video on mount and so the list items wouldn't "jump". For that, `onStateChange({ videoExpanded: true })` would have to be called when the user clicks the "Expand YouTube Video" button.
@@ -317,2 +318,19 @@ * `onStateChange(itemState)` — A proxy for `VirtualScroller.onItemStateChange(i, itemState)`. Call this function to update item's `state`.
 
+### Only the first item is rendered on page load.
+
+`VirtualScroller` calculates the shown item indexes when its `.onMount()` method is called, but if the page styles are applied after `VirtualScroller` is mounted (for example, if styles are applied via javascript, like Webpack does it in dev mode with its `style-loader`) then the list might not render correctly and will only show the first item. The reason for that is because calling `.getBoundingClientRect()` on the list container DOM element on mount returns "incorrect" `top` position because the styles haven't been applied yet, and so `VirtualScroller` thinks it's offscreen.
+
+For example, consider a page:
+
+```html
+<div class="page">
+  <nav class="sidebar">...</nav>
+  <main>...</main>
+</div>
+```
+
+The sidebar is styled as `position: fixed`, but until the page styles have been applied it's gonna be a regular `<div/>` meaning that `<main/>` will be rendered below the sidebar causing it to be offscreen and so the list will only render the first item. Then, the page styles are loaded and applied and the sidebar is now `position: fixed` so `<main/>` is now rendered at the top of the page but `VirtualScroller`'s `.onMount()` has already been called and it won't re-render until the user scrolls or the window is resized.
+
+This type of a bug doesn't occur in production, but it can appear in development mode when using Webpack. The workaround `VirtualScroller` implements for such cases is calling `.getBoundingClientRect()` on the list container DOM element periodically (every second) to check if the `top` coordinate has changed as a result of CSS being applied: if it has then it recalculates the shown item indexes and re-renders.
+
 ## Debug
@@ -319,0 +337,0 @@

source/VirtualScroller.js

@@ -7,2 +7,3 @@ import shallowEqual from './shallowEqual'
 const START_FROM_INDEX = 0
+const WATCH_CONTAINER_ELEMENT_TOP_COORDINATE_INTERVAL = 1000
 
@@ -237,2 +238,3 @@ export default class VirtualScroller {
 			clearTimeout(this.onUserStopsScrollingTimeout)
+			clearTimeout(this.watchContainerElementTopCoordinateTimer)
 		}
@@ -467,2 +469,44 @@ }
 
+	// `VirtualScroller` calls `getShownItemIndexes()` on mount
+	// but if the page styles are applied after `VirtualScroller` mounts
+	// (for example, if styles are applied via javascript, like Webpack does)
+	// then the list might not render correctly and will only show the first item.
+	// The reason for that would be that calling `.getBoundingClientRect()`
+	// on the list container element on mount returned "incorrect" `top` position
+	// because the styles haven't been applied yet.
+	// For example, consider a page:
+	// <div class="page">
+	//   <nav class="sidebar">...</nav>
+	//   <main>...</main>
+	// </div>
+	// The sidebar is styled as `position: fixed`, but until
+	// the page styles have been applied it's gonna be a regular `<div/>`
+	// meaning that `<main/>` will be rendered below the sidebar
+	// and will appear offscreen and so it will only render the first item.
+	// Then, the page styles are loaded and applied and the sidebar
+	// is now `position: fixed` so `<main/>` is now rendered at the top of the page
+	// but `VirtualScroller`'s `onMount()` has already been called
+	// and it won't re-render until the user scrolls or the window is resized.
+	// This type of a bug doesn't occur in production, but it can appear
+	// in development mode when using Webpack. The workaround `VirtualScroller`
+	// implements for such cases is calling `.getBoundingClientRect()` on the
+	// list container DOM element periodically (every second) to check if the
+	// `top` coordinate has changed as a result of CSS being applied:
+	// if it has then it recalculates the shown item indexes.
+	watchContainerElementTopCoordinate() {
+		const check = () => {
+			// Skip the first time.
+			if (this.top !== undefined) {
+				// Calling `.getBoundingClientRect()` on an element is
+				// about 0.002 milliseconds on a modern desktop CPU.
+				const { top } = getOffset(this.getContainerNode())
+				if (top !== this.top) {
+					this.onUpdateShownItemIndexes({ reason: 'top offset change' })
+				}
+			}
+			this.watchContainerElementTopCoordinateTimer = setTimeout(check, WATCH_CONTAINER_ELEMENT_TOP_COORDINATE_INTERVAL)
+		}
+		check()
+	}
+
 	/**
@@ -496,2 +540,7 @@ * Finds the items that are displayed in the viewport.
 		const { top, height } = getOffset(this.getContainerNode())
+		if (this.top === undefined) {
+			// See the comments for `watchContainerElementTopCoordinate()` method.
+			this.watchContainerElementTopCoordinate()
+		}
+		this.top = top
 		const { top: screenTop, bottom: screenBottom } = getScreenBounds()
@@ -498,0 +547,0 @@ // Set screen top and bottom for current layout.

No alert changes

Improved metrics

Total package byte prevSize

897536

increased by3.2%

Lines of code

5577

increased by2.92%

Number of lines in readme file

364

increased by5.2%

No dependency changes