virtual-scroller - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

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 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 s(){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,o(["[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&&s("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)}}])&&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 o(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,o),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,n,o,a,h,u,d=(t=m.getContainerNode(),n=t.getBoundingClientRect(),o=document.clientLeft||document.body.clientLeft||0,a=document.clientTop||document.body.clientTop||0,h=window.pageYOffset,u=window.pageXOffset,{top:n.top+h-a,left:n.left+u-o,width:n.width,height:n.height}),l=d.top,g=d.height,I=function(){var e=r();return{top:i(),bottom:i()+e,height:e}}(),c=I.top,f=I.bottom;m.latestLayoutScreenTopAfterMargin=c-m.getMargin(),m.latestLayoutScreenBottomAfterMargin=f+m.getMargin();var v=m.getItemIndexes(c-m.getMargin(),f+m.getMargin(),l,l+g),p=v.firstShownItemIndex,S=v.lastShownItemIndex,y=v.redoLayoutAfterRender,w=m.getBeforeItemsHeight(p,S),x=m.getAfterItemsHeight(p,S);m.updateWillBeHiddenItemHeightsAndState(p,S),s("~ Layout results ~"),s("First shown item index",p),s("Last shown item index",S),s("Before items height",w),s("After items height",x),s("Average item height (for previous layout)",m.itemHeights.getAverage()),y&&s("Redo layout after render"),m.onShowItems(p,S),m.setState({firstShownItemIndex:p,lastShownItemIndex:S,beforeItemsHeight:w,afterItemsHeight:x},function(){return e(y?1:0)})}),l(this,"updateShownItemIndexesRecursive",function(){m.updateShownItemIndexes(function(e){1===e?setTimeout(function(){m.isMounted?m.updateShownItemIndexesRecursive():m.onDoneUpdatingItemIndexes()}):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&&(s("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(s(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.estimatedItemHeight,p=g.onLastSeenItemIndexChange,S=g.state;s("~ Initialize ~"),S&&(h=S.items),this.initialItems=h,this.estimatedItemHeight=v,p&&(this.onLastSeenItemIndexChange=p,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 o=m.state;m.state=d({},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}(m.state,o)||(f&&f(m.state,o),m.isMounted&&m.onUpdate(o)),r&&r()}),S&&s("Initial state (passed)",S),this.setState(S||this.getInitialState()),this.getContainerNode=a,this.itemHeights=new u(a,h.length,this.getState),s("Items count",h.length),v&&s("Estimated item height",v)}var h,g,I;return h=o,(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 s("Initial state (created)",r),s("First shown item index",t),s("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){this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex&&(this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex))}},{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"}),window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize)}},{key:"onUnmount",value:function(){this.isMounted=!1,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()&&(s("Item",e,"state changed"),s("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),s("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&&(s("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,a=!1,h=0;h<this.getItemsCount();){var u=this.itemHeights.get(h);if(void 0===u){s("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=h);var d=t-(n+o),m=this.getEstimatedItemsCount(d);r=Math.min(h+(m-1),this.getItemsCount()-1),a=!0;break}if(o+=u,void 0===i&&n+o>e&&(s("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(o+=this.getItemSpacing()),n+o>t){s("Last visible item index (including margin)",h),void 0!==i&&(r=h);break}h++}return void 0!==i&&void 0===r&&s("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:"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){s("~ 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,a=i.beforeItemsHeight,h=i.afterItemsHeight,m=i.itemStates,l=i.itemHeights;i.itemSpacing;s("~ 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&&(s("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&&(s("Appended items count",c),l=l.concat(new Array(c)),m&&(m=m.concat(new Array(c)))),r+=I,o+=I,a+=this.itemHeights.getAverage()*I,h+=this.itemHeights.getAverage()*c):(s("Non-incremental items update"),s("Previous items",n),s("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,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length)),a=0,h=0),this.setState(d({},void 0,{items:e,itemStates:m,itemHeights:l,firstShownItemIndex:r,lastShownItemIndex:o,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),o}();function I(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function c(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function 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,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),f(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,o=e.lastShownItemIndex,a=e.beforeItemsHeight,h=e.afterItemsHeight;s("~ On state change ~"),s("Previous state",t),s("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){s("Incremental render");for(var d=t.lastShownItemIndex;d>=t.firstShownItemIndex;){if(d>=i&&d<=o);else{s("Remove item",d);var m=r.container.childNodes[d-t.firstShownItemIndex];r.container.removeChild(m)}d--}}else for(s("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?(s("Prepend item",I),r.container.insertBefore(c,g)):(s("Append item",I),r.container.appendChild(c))}I++}}),f(this,"onUnmount",function(){r.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var a=o.onMount,h=I(o,["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:"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(){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 s(){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,o(["[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&&s("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)}}])&&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){m(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 m(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 o(a,h){var l=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),m(this,"onScroll",function(){return l.onUpdateShownItemIndexes({reason:"scroll"})}),m(this,"onResize",function(){return l.onUpdateShownItemIndexes({reason:"resize"})}),m(this,"updateShownItemIndexes",function(e){var t,n,o,a,h,u,d=(t=l.getContainerNode(),n=t.getBoundingClientRect(),o=document.clientLeft||document.body.clientLeft||0,a=document.clientTop||document.body.clientTop||0,h=window.pageYOffset,u=window.pageXOffset,{top:n.top+h-a,left:n.left+u-o,width:n.width,height:n.height}),m=d.top,g=d.height,I=function(){var e=r();return{top:i(),bottom:i()+e,height:e}}(),c=I.top,f=I.bottom;l.latestLayoutScreenTopAfterMargin=c-l.getMargin(),l.latestLayoutScreenBottomAfterMargin=f+l.getMargin();var v=l.getItemIndexes(c-l.getMargin(),f+l.getMargin(),m,m+g),p=v.firstShownItemIndex,S=v.lastShownItemIndex,y=v.redoLayoutAfterRender,w=l.getBeforeItemsHeight(p,S),x=l.getAfterItemsHeight(p,S);l.updateWillBeHiddenItemHeightsAndState(p,S),s("~ Layout results ~"),s("First shown item index",p),s("Last shown item index",S),s("Before items height",w),s("After items height",x),s("Average item height (calculated on previous render)",l.itemHeights.getAverage()),y&&s("Redo layout after render"),l.onShowItems(p,S),l.setState({firstShownItemIndex:p,lastShownItemIndex:S,beforeItemsHeight:w,afterItemsHeight:x},function(){return e(y?1:0)})}),m(this,"updateShownItemIndexesRecursive",function(){l.updateShownItemIndexes(function(e){1===e?setTimeout(function(){l.isMounted?l.updateShownItemIndexesRecursive():l.onDoneUpdatingItemIndexes()}):l.onDoneUpdatingItemIndexes()})}),m(this,"restoreScroll",function(){var e=l.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;l.restoreScrollAfterPrepend=void 0;var r=l.getItemElement(t).getBoundingClientRect().top-n;0!==r&&(s("Restore scroll position: scroll by",r),window.scrollTo(0,i()+r))}),m(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==l.getItemsCount()&&!l.isUpdatingItemIndexes){if(clearTimeout(l.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==l.latestLayoutScreenTopAfterMargin&&i()<l.latestLayoutScreenTopAfterMargin&&l.getState().firstShownItemIndex>0||void 0!==l.latestLayoutScreenBottomAfterMargin&&i()+r()>l.latestLayoutScreenBottomAfterMargin&&l.getState().lastShownItemIndex<l.getItemsCount()-1;if(s(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return l.onUserStopsScrollingTimeout=setTimeout(l.onUserStoppedScrolling,100)}l.updateLayout(t)}}),m(this,"onUserStoppedScrolling",function(){l.isMounted&&l.updateLayout("stopped scrolling")});var I=g.getState,c=g.setState,f=g.onStateChange,v=g.estimatedItemHeight,p=g.onLastSeenItemIndexChange,S=g.state;s("~ Initialize ~"),S&&(h=S.items),this.initialItems=h,this.estimatedItemHeight=v,p&&(this.onLastSeenItemIndexChange=p,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 l.state},this.setState=function(i,r){var o=l.state;l.state=d({},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}(l.state,o)||(f&&f(l.state,o),l.isMounted&&l.onUpdate(o)),r&&r()}),S&&s("Initial state (passed)",S),this.setState(S||this.getInitialState()),this.getContainerNode=a,this.itemHeights=new u(a,h.length,this.getState),s("Items count",h.length),v&&s("Estimated item height",v)}var h,g,I;return h=o,(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 s("Initial state (created)",r),s("First shown item index",t),s("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"}),window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize)}},{key:"onUnmount",value:function(){this.isMounted=!1,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()&&(s("Item",e,"state changed"),s("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),s("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&&(s("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,a=!1,h=0;h<this.getItemsCount();){var u=this.itemHeights.get(h);if(void 0===u){s("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=h);var d=t-(n+o),l=this.getEstimatedItemsCount(d);r=Math.min(h+(l-1),this.getItemsCount()-1),a=!0;break}if(o+=u,void 0===i&&n+o>e&&(s("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(o+=this.getItemSpacing()),n+o>t){s("Last visible item index (including margin)",h),void 0!==i&&(r=h);break}h++}return void 0!==i&&void 0===r&&s("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:"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){s("~ 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,a=i.beforeItemsHeight,h=i.afterItemsHeight,l=i.itemStates,m=i.itemHeights;i.itemSpacing;s("~ 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&&(s("Prepended items count",I),m=new Array(I).concat(m),this.itemHeights.onPrepend(I),l&&(l=new Array(I).concat(l)),this.captureScroll(n,e,I)),c>0&&(s("Appended items count",c),m=m.concat(new Array(c)),l&&(l=l.concat(new Array(c)))),r+=I,o+=I,a+=this.itemHeights.getAverage()*I,h+=this.itemHeights.getAverage()*c):(s("Non-incremental items update"),s("Previous items",n),s("New items",e),this.itemHeights=new u(this.getContainerNode,e.length,this.getState),m=new Array(e.length),l=new Array(e.length),0===e.length?(r=void 0,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length)),a=0,h=0),this.setState(d({},void 0,{items:e,itemStates:l,itemHeights:m,firstShownItemIndex:r,lastShownItemIndex:o,beforeItemsHeight:a,afterItemsHeight:h}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&l(h.prototype,g),I&&l(h,I),o}();function I(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function c(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function 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,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),f(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,o=e.lastShownItemIndex,a=e.beforeItemsHeight,h=e.afterItemsHeight;s("~ On state change ~"),s("Previous state",t),s("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){s("Incremental render");for(var d=t.lastShownItemIndex;d>=t.firstShownItemIndex;){if(d>=i&&d<=o);else{s("Remove item",d);var l=r.container.childNodes[d-t.firstShownItemIndex];r.container.removeChild(l)}d--}}else for(s("Clean render");r.container.firstChild;)r.container.removeChild(r.container.firstChild);for(var m=u,g=m&&r.container.firstChild,I=i;I<=o;){if(u&&I>=t.firstShownItemIndex&&I<=t.lastShownItemIndex)m&&(m=!1);else{var c=r.renderItem(n[I]);m?(s("Prepend item",I),r.container.insertBefore(c,g)):(s("Append item",I),r.container.appendChild(c))}I++}}),f(this,"onUnmount",function(){r.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var a=o.onMount,h=I(o,["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}()});
 //# sourceMappingURL=virtual-scroller-dom.js.map

bundle/virtual-scroller-react.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).VirtualScroller=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var i=Object.prototype.hasOwnProperty;function r(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function o(e,t){if(r(e,t))return!0;if("object"!==n(e)||null===e||"object"!==n(t)||null===t)return!1;var o=Object.keys(e),s=Object.keys(t);if(o.length!==s.length)return!1;for(var a=0;a<o.length;a++)if(!i.call(t,o[a])||!r(e[o[a]],t[o[a]]))return!1;return!0}function s(){return window.pageYOffset}function a(){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 h(){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,u(["[virtual-scroller]"].concat(n)))}}function m(){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 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&&h("Item spacing",r),r}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&(this.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)}}])&&g(t.prototype,n),i&&g(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,n,r,o,u,m,g=(t=i.getContainerNode(),n=t.getBoundingClientRect(),r=document.clientLeft||document.body.clientLeft||0,o=document.clientTop||document.body.clientTop||0,u=window.pageYOffset,m=window.pageXOffset,{top:n.top+u-o,left:n.left+m-r,width:n.width,height:n.height}),d=g.top,l=g.height,c=function(){var e=a();return{top:s(),bottom:s()+e,height:e}}(),f=c.top,I=c.bottom;i.latestLayoutScreenTopAfterMargin=f-i.getMargin(),i.latestLayoutScreenBottomAfterMargin=I+i.getMargin();var p=i.getItemIndexes(f-i.getMargin(),I+i.getMargin(),d,d+l),S=p.firstShownItemIndex,v=p.lastShownItemIndex,y=p.redoLayoutAfterRender,w=i.getBeforeItemsHeight(S,v),x=i.getAfterItemsHeight(S,v);i.updateWillBeHiddenItemHeightsAndState(S,v),h("~ Layout results ~"),h("First shown item index",S),h("Last shown item index",v),h("Before items height",w),h("After items height",x),h("Average item height (for previous layout)",i.itemHeights.getAverage()),y&&h("Redo layout after render"),i.onShowItems(S,v),i.setState({firstShownItemIndex:S,lastShownItemIndex:v,beforeItemsHeight:w,afterItemsHeight:x},function(){return e(y?1:0)})}),f(this,"updateShownItemIndexesRecursive",function(){i.updateShownItemIndexes(function(e){1===e?setTimeout(function(){i.isMounted?i.updateShownItemIndexesRecursive():i.onDoneUpdatingItemIndexes()}):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&&(h("Restore scroll position: scroll by",r),window.scrollTo(0,s()+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&&s()<i.latestLayoutScreenTopAfterMargin&&i.getState().firstShownItemIndex>0||void 0!==i.latestLayoutScreenBottomAfterMargin&&s()+a()>i.latestLayoutScreenBottomAfterMargin&&i.getState().lastShownItemIndex<i.getItemsCount()-1;if(h(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return i.onUserStopsScrollingTimeout=setTimeout(i.onUserStoppedScrolling,100)}i.updateLayout(t)}}),f(this,"onUserStoppedScrolling",function(){i.isMounted&&i.updateLayout("stopped scrolling")});var u=r.getState,m=r.setState,g=r.onStateChange,c=r.estimatedItemHeight,I=r.onLastSeenItemIndexChange,p=r.state;h("~ Initialize ~"),p&&(n=p.items),this.initialItems=n,this.estimatedItemHeight=c,I&&(this.onLastSeenItemIndexChange=I,this.lastSeenItemIndex=-1),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),m?(this.getState=u,this.setState=m):(this.getState=function(){return i.state},this.setState=function(e,t){var n=i.state;i.state=l({},n,e),o(i.state,n)||(g&&g(i.state,n),i.isMounted&&i.onUpdate(n)),t&&t()}),p&&h("Initial state (passed)",p),this.setState(p||this.getInitialState()),this.getContainerNode=t,this.itemHeights=new d(t,n.length,this.getState),h("Items count",n.length),c&&h("Estimated item height",c)}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 h("Initial state (created)",r),h("First shown item index",t),h("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){this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex&&(this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex))}},{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"}),window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize)}},{key:"onUnmount",value:function(){this.isMounted=!1,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()&&(h("Item",e,"state changed"),h("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),h("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(h("Item",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,a=0;a<this.getItemsCount();){var u=this.itemHeights.get(a);if(void 0===u){h("Item ".concat(a," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=a);var m=t-(n+o),g=this.getEstimatedItemsCount(m);r=Math.min(a+(g-1),this.getItemsCount()-1),s=!0;break}if(o+=u,void 0===i&&n+o>e&&(h("First visible item index (including margin)",a),i=a),a<this.getItemsCount()-1&&(o+=this.getItemSpacing()),n+o>t){h("Last visible item index (including margin)",a),void 0!==i&&(r=a);break}a++}return void 0!==i&&void 0===r&&h("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),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:"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){h("~ 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,a=i.afterItemsHeight,u=i.itemStates,m=i.itemHeights;i.itemSpacing;h("~ Update items ~");var g=p(n,e),c=g.prependedItemsCount,f=g.appendedItemsCount;c>0||f>0?(c>0&&(h("Prepended items count",c),m=new Array(c).concat(m),this.itemHeights.onPrepend(c),u&&(u=new Array(c).concat(u)),this.captureScroll(n,e,c)),f>0&&(h("Appended items count",f),m=m.concat(new Array(f)),u&&(u=u.concat(new Array(f)))),r+=c,o+=c,s+=this.itemHeights.getAverage()*c,a+=this.itemHeights.getAverage()*f):(h("Non-incremental items update"),h("Previous items",n),h("New items",e),this.itemHeights=new d(this.getContainerNode,e.length,this.getState),m=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,a=0),this.setState(l({},void 0,{items:e,itemStates:u,itemHeights:m,firstShownItemIndex:r,lastShownItemIndex:o,beforeItemsHeight:s,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={},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 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 x(e){return(x=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function b(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 O=t.elementType||t.oneOfType([t.func,t.object]),A=function(t){function n(t){var i,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,o=x(n).call(this,t),i=!o||"object"!==S(o)&&"function"!=typeof o?b(r):o,C(b(i),"container",e.createRef()),C(b(i),"onItemStateChange",new Array(i.props.items.length)),C(b(i),"onItemHeightChange",new Array(i.props.items.length)),C(b(i),"uniquePrefixes",[]);var s=i.props,a=s.items,u=s.initialState,h=s.estimatedItemHeight,m=s.onLastSeenItemIndexChange,g=s.onStateChange;return i.previousItemsProperty=a,i.virtualScroller=new I(function(){return i.container.current},a,{estimatedItemHeight:h,onLastSeenItemIndexChange:m,state:u,getState:function(){return i.state},setState:function(e,t){i.state?i.setState(e,t):(i.state=e,g&&g(e))}}),i.generateUniquePrefix(),i}var i,r,s;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&H(e,t)}(n,e.Component),i=n,(r=[{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&&(o(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,o=(n.items,n.estimatedItemHeight,n.initialState,n.onStateChange,n.onLastSeenItemIndexChange,n.onMount,y(n,["itemComponent","itemComponentProps","items","estimatedItemHeight","initialState","onStateChange","onLastSeenItemIndexChange","onMount"])),s=this.virtualScroller.getState(),a=s.items,u=s.itemStates,h=s.firstShownItemIndex,m=s.lastShownItemIndex,g=s.beforeItemsHeight,d=s.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))}return e.createElement("div",v({},o,{ref:this.container,style:{paddingTop:g+"px",paddingBottom:d+"px"}}),a.map(function(n,o){return o>=h&&o<=m?e.createElement(i,v({},r,{key:"".concat(t.uniquePrefix,":").concat(o),state:u&&u[o],onStateChange:t.getOnItemStateChange(o),onHeightChange:t.getOnItemHeightChange(o)}),n):null}))}}])&&w(i.prototype,r),s&&w(i,s),n}();return C(A,"propTypes",{items:t.arrayOf(t.object).isRequired,itemComponent:O.isRequired,itemComponentProps:t.object,estimatedItemHeight: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})}),A});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).VirtualScroller=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var i=Object.prototype.hasOwnProperty;function r(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function o(e,t){if(r(e,t))return!0;if("object"!==n(e)||null===e||"object"!==n(t)||null===t)return!1;var o=Object.keys(e),s=Object.keys(t);if(o.length!==s.length)return!1;for(var a=0;a<o.length;a++)if(!i.call(t,o[a])||!r(e[o[a]],t[o[a]]))return!1;return!0}function s(){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,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)}}])&&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,n,r,o,h,m,d=(t=i.getContainerNode(),n=t.getBoundingClientRect(),r=document.clientLeft||document.body.clientLeft||0,o=document.clientTop||document.body.clientTop||0,h=window.pageYOffset,m=window.pageXOffset,{top:n.top+h-o,left:n.left+m-r,width:n.width,height:n.height}),g=d.top,l=d.height,c=function(){var e=a();return{top:s(),bottom:s()+e,height:e}}(),f=c.top,I=c.bottom;i.latestLayoutScreenTopAfterMargin=f-i.getMargin(),i.latestLayoutScreenBottomAfterMargin=I+i.getMargin();var p=i.getItemIndexes(f-i.getMargin(),I+i.getMargin(),g,g+l),S=p.firstShownItemIndex,v=p.lastShownItemIndex,y=p.redoLayoutAfterRender,w=i.getBeforeItemsHeight(S,v),x=i.getAfterItemsHeight(S,v);i.updateWillBeHiddenItemHeightsAndState(S,v),u("~ Layout results ~"),u("First shown item index",S),u("Last shown item index",v),u("Before items height",w),u("After items height",x),u("Average item height (calculated on previous render)",i.itemHeights.getAverage()),y&&u("Redo layout after render"),i.onShowItems(S,v),i.setState({firstShownItemIndex:S,lastShownItemIndex:v,beforeItemsHeight:w,afterItemsHeight:x},function(){return e(y?1:0)})}),f(this,"updateShownItemIndexesRecursive",function(){i.updateShownItemIndexes(function(e){1===e?setTimeout(function(){i.isMounted?i.updateShownItemIndexesRecursive():i.onDoneUpdatingItemIndexes()}):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,s()+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&&s()<i.latestLayoutScreenTopAfterMargin&&i.getState().firstShownItemIndex>0||void 0!==i.latestLayoutScreenBottomAfterMargin&&s()+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.estimatedItemHeight,I=r.onLastSeenItemIndexChange,p=r.state;u("~ Initialize ~"),p&&(n=p.items),this.initialItems=n,this.estimatedItemHeight=c,I&&(this.onLastSeenItemIndexChange=I,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),o(i.state,n)||(d&&d(i.state,n),i.isMounted&&i.onUpdate(n)),t&&t()}),p&&u("Initial state (passed)",p),this.setState(p||this.getInitialState()),this.getContainerNode=t,this.itemHeights=new g(t,n.length,this.getState),u("Items count",n.length),c&&u("Estimated item height",c)}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"}),window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize)}},{key:"onUnmount",value:function(){this.isMounted=!1,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,o=0,s=!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+o),d=this.getEstimatedItemsCount(m);r=Math.min(a+(d-1),this.getItemsCount()-1),s=!0;break}if(o+=h,void 0===i&&n+o>e&&(u("First visible item index (including margin)",a),i=a),a<this.getItemsCount()-1&&(o+=this.getItemSpacing()),n+o>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),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:"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,o=i.lastShownItemIndex,s=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,o+=c,s+=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,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length)),s=0,a=0),this.setState(l({},void 0,{items:e,itemStates:h,itemHeights:m,firstShownItemIndex:r,lastShownItemIndex:o,beforeItemsHeight:s,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={},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 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 x(e){return(x=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function b(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 O=t.elementType||t.oneOfType([t.func,t.object]),A=function(t){function n(t){var i,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,o=x(n).call(this,t),i=!o||"object"!==S(o)&&"function"!=typeof o?b(r):o,C(b(i),"container",e.createRef()),C(b(i),"onItemStateChange",new Array(i.props.items.length)),C(b(i),"onItemHeightChange",new Array(i.props.items.length)),C(b(i),"uniquePrefixes",[]);var s=i.props,a=s.items,h=s.initialState,u=s.estimatedItemHeight,m=s.onLastSeenItemIndexChange,d=s.onStateChange;return i.previousItemsProperty=a,i.virtualScroller=new I(function(){return i.container.current},a,{estimatedItemHeight:u,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,s;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&H(e,t)}(n,e.Component),i=n,(r=[{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&&(o(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,o=(n.items,n.estimatedItemHeight,n.initialState,n.onStateChange,n.onLastSeenItemIndexChange,n.onMount,y(n,["itemComponent","itemComponentProps","items","estimatedItemHeight","initialState","onStateChange","onLastSeenItemIndexChange","onMount"])),s=this.virtualScroller.getState(),a=s.items,h=s.itemStates,u=s.firstShownItemIndex,m=s.lastShownItemIndex,d=s.beforeItemsHeight,g=s.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))}return e.createElement("div",v({},o,{ref:this.container,style:{paddingTop:d+"px",paddingBottom:g+"px"}}),a.map(function(n,o){return o>=u&&o<=m?e.createElement(i,v({},r,{key:"".concat(t.uniquePrefix,":").concat(o),state:h&&h[o],onStateChange:t.getOnItemStateChange(o),onHeightChange:t.getOnItemHeightChange(o)}),n):null}))}}])&&w(i.prototype,r),s&&w(i,s),n}();return C(A,"propTypes",{items:t.arrayOf(t.object).isRequired,itemComponent:O.isRequired,itemComponentProps:t.object,estimatedItemHeight: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})}),A});
 //# sourceMappingURL=virtual-scroller-react.js.map

bundle/virtual-scroller.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function n(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function i(){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,n,r,a,h,u,d=(t=m.getContainerNode(),n=t.getBoundingClientRect(),r=document.clientLeft||document.body.clientLeft||0,a=document.clientTop||document.body.clientTop||0,h=window.pageYOffset,u=window.pageXOffset,{top:n.top+h-a,left:n.left+u-r,width:n.width,height:n.height}),g=d.top,l=d.height,I=function(){var e=s();return{top:i(),bottom:i()+e,height:e}}(),c=I.top,f=I.bottom;m.latestLayoutScreenTopAfterMargin=c-m.getMargin(),m.latestLayoutScreenBottomAfterMargin=f+m.getMargin();var v=m.getItemIndexes(c-m.getMargin(),f+m.getMargin(),g,g+l),p=v.firstShownItemIndex,S=v.lastShownItemIndex,y=v.redoLayoutAfterRender,w=m.getBeforeItemsHeight(p,S),x=m.getAfterItemsHeight(p,S);m.updateWillBeHiddenItemHeightsAndState(p,S),o("~ Layout results ~"),o("First shown item index",p),o("Last shown item index",S),o("Before items height",w),o("After items height",x),o("Average item height (for previous layout)",m.itemHeights.getAverage()),y&&o("Redo layout after render"),m.onShowItems(p,S),m.setState({firstShownItemIndex:p,lastShownItemIndex:S,beforeItemsHeight:w,afterItemsHeight:x},function(){return e(y?1:0)})}),g(this,"updateShownItemIndexesRecursive",function(){m.updateShownItemIndexes(function(e){1===e?setTimeout(function(){m.isMounted?m.updateShownItemIndexesRecursive():m.onDoneUpdatingItemIndexes()}):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,v=l.estimatedItemHeight,p=l.onLastSeenItemIndexChange,S=l.state;o("~ Initialize ~"),S&&(h=S.items),this.initialItems=h,this.estimatedItemHeight=v,p&&(this.onLastSeenItemIndexChange=p,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()}),S&&o("Initial state (passed)",S),this.setState(S||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){this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex&&(this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex))}},{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"}),window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize)}},{key:"onUnmount",value:function(){this.isMounted=!1,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),m=this.getEstimatedItemsCount(d);s=Math.min(h+(m-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:"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(){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,n,r,a,h,u,d=(t=m.getContainerNode(),n=t.getBoundingClientRect(),r=document.clientLeft||document.body.clientLeft||0,a=document.clientTop||document.body.clientTop||0,h=window.pageYOffset,u=window.pageXOffset,{top:n.top+h-a,left:n.left+u-r,width:n.width,height:n.height}),g=d.top,l=d.height,I=function(){var e=s();return{top:i(),bottom:i()+e,height:e}}(),c=I.top,f=I.bottom;m.latestLayoutScreenTopAfterMargin=c-m.getMargin(),m.latestLayoutScreenBottomAfterMargin=f+m.getMargin();var v=m.getItemIndexes(c-m.getMargin(),f+m.getMargin(),g,g+l),p=v.firstShownItemIndex,S=v.lastShownItemIndex,y=v.redoLayoutAfterRender,w=m.getBeforeItemsHeight(p,S),x=m.getAfterItemsHeight(p,S);m.updateWillBeHiddenItemHeightsAndState(p,S),o("~ Layout results ~"),o("First shown item index",p),o("Last shown item index",S),o("Before items height",w),o("After items height",x),o("Average item height (calculated on previous render)",m.itemHeights.getAverage()),y&&o("Redo layout after render"),m.onShowItems(p,S),m.setState({firstShownItemIndex:p,lastShownItemIndex:S,beforeItemsHeight:w,afterItemsHeight:x},function(){return e(y?1:0)})}),g(this,"updateShownItemIndexesRecursive",function(){m.updateShownItemIndexes(function(e){1===e?setTimeout(function(){m.isMounted?m.updateShownItemIndexesRecursive():m.onDoneUpdatingItemIndexes()}):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,v=l.estimatedItemHeight,p=l.onLastSeenItemIndexChange,S=l.state;o("~ Initialize ~"),S&&(h=S.items),this.initialItems=h,this.estimatedItemHeight=v,p&&(this.onLastSeenItemIndexChange=p,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()}),S&&o("Initial state (passed)",S),this.setState(S||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"}),window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize)}},{key:"onUnmount",value:function(){this.isMounted=!1,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),m=this.getEstimatedItemsCount(d);s=Math.min(h+(m-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:"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}()});
 //# sourceMappingURL=virtual-scroller.js.map

commonjs/DOMVirtualScroller.js

@@ -138,2 +138,7 @@ "use strict";
   }, {
+    key: "onLastSeenItemIndexChange",
+    value: function onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex) {
+      this.virtualScroller.onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex);
+    }
+  }, {
     key: "updateItems",
@@ -140,0 +145,0 @@ value: function updateItems(newItems, options) {

commonjs/VirtualScroller.js

@@ -107,3 +107,3 @@ "use strict";
       (0, _log["default"])('After items height', afterItemsHeight);
-      (0, _log["default"])('Average item height (for previous layout)', _this.itemHeights.getAverage());
+      (0, _log["default"])('Average item height (calculated on previous render)', _this.itemHeights.getAverage());
 
@@ -417,4 +417,5 @@ if (redoLayoutAfterRender) {
         if (lastShownItemIndex > this.lastSeenItemIndex) {
+          var previousLastSeenItemIndex = this.lastSeenItemIndex;
           this.lastSeenItemIndex = lastShownItemIndex;
-          this.onLastSeenItemIndexChange(this.lastSeenItemIndex);
+          this.onLastSeenItemIndexChange(this.lastSeenItemIndex, previousLastSeenItemIndex);
         }
@@ -421,0 +422,0 @@ }

modules/DOMVirtualScroller.js

@@ -128,2 +128,7 @@ 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; }
   }, {
+    key: "onLastSeenItemIndexChange",
+    value: function onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex) {
+      this.virtualScroller.onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex);
+    }
+  }, {
     key: "updateItems",
@@ -130,0 +135,0 @@ value: function updateItems(newItems, options) {

modules/VirtualScroller.js

@@ -91,3 +91,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; }
       log('After items height', afterItemsHeight);
-      log('Average item height (for previous layout)', _this.itemHeights.getAverage());
+      log('Average item height (calculated on previous render)', _this.itemHeights.getAverage());
 
@@ -401,4 +401,5 @@ if (redoLayoutAfterRender) {
         if (lastShownItemIndex > this.lastSeenItemIndex) {
+          var previousLastSeenItemIndex = this.lastSeenItemIndex;
           this.lastSeenItemIndex = lastShownItemIndex;
-          this.onLastSeenItemIndexChange(this.lastSeenItemIndex);
+          this.onLastSeenItemIndexChange(this.lastSeenItemIndex, previousLastSeenItemIndex);
         }
@@ -405,0 +406,0 @@ }

package.json

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

README.md

@@ -79,3 +79,3 @@ # VirtualScroller
 * `onStateChange(newState, prevState)` — Is called whenever `VirtualScroller` `state` is updated (including setting the initial `state`) if `getState()` and `setState()` properties aren't defined.
-* `onLastSeenItemIndexChange(i)` — Can be used to track the last "seen" item index. For example, consider a list of items that must be somehow preprocessed before being rendered and such preprocessing takes some time. In this case instead of preprocessing the whole list of items upfront a developer could only preprocess the items as they're being rendered.
+* `onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex)` — Can be used to track the last "seen" item index. For example, consider a list of items that must be somehow preprocessed before being rendered and such preprocessing takes some time. In this case instead of preprocessing the whole list of items upfront a developer could only preprocess the items as they're being rendered. `onLastSeenItemIndexChange()` is called initially when a `VirtualScroller` instance is created with `previousLastSeenItemIndex` being `-1` (including the cases when `initialState` is passed).
 
@@ -162,2 +162,3 @@ `VirtualScroller` class instance provides methods:
 * `onItemStateChange(i, itemState)` — A proxy for the corresponding `VirtualScroller` method.
+* `onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex)` — A proxy for the corresponding `VirtualScroller` method.
 
@@ -228,3 +229,3 @@ Additional `options`:
 * `onMount` — (optional) Is called after `<VirtualScroller/>` component has been mounted and before `VirtualScroller.onMount()` is called. Can be used in advanced cases: for example, to restore page scroll Y position for the corresponding `VirtualScroller` `state` on "Back" navigation.
-* `onLastSeenItemIndexChange(i)` — (optional) The `onLastSeenItemIndexChange` option of `VirtualScroller` class.
+* `onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex)` — (optional) The `onLastSeenItemIndexChange` option of `VirtualScroller` class.
 * `initialState` — (optional) The initial state for `VirtualScroller`. For example, can be used to quicky restore the list on "Back" navigation.
@@ -231,0 +232,0 @@ * `onStateChange(newState, prevState)` — (optional) Can be called when `VirtualScroller` `state` is updated (including setting the initial `state`). For example, can be used to keep `VirtualScroller` `state` copy in an instance variable and later in `componentWillUnmount()` persist it somewhere in global application state for quickly restoring it later on "Back" navigation:

source/DOMVirtualScroller.js

@@ -97,2 +97,6 @@ import VirtualScroller from './VirtualScroller'
 
+  onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex) {
+    this.virtualScroller.onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex)
+  }
+
   updateItems(newItems, options) {
@@ -99,0 +103,0 @@ this.virtualScroller.updateItems(newItems, options)

source/VirtualScroller.js

@@ -190,4 +190,5 @@ import shallowEqual from './shallowEqual'
 			if (lastShownItemIndex > this.lastSeenItemIndex) {
+				const previousLastSeenItemIndex = this.lastSeenItemIndex
 				this.lastSeenItemIndex = lastShownItemIndex
-				this.onLastSeenItemIndexChange(this.lastSeenItemIndex)
+				this.onLastSeenItemIndexChange(this.lastSeenItemIndex, previousLastSeenItemIndex)
 			}
@@ -505,3 +506,3 @@ }
 		log('After items height', afterItemsHeight)
-		log('Average item height (for previous layout)', this.itemHeights.getAverage())
+		log('Average item height (calculated on previous render)', this.itemHeights.getAverage())
 		if (redoLayoutAfterRender) {
@@ -508,0 +509,0 @@ log('Redo layout after render')

No alert changes

Improved metrics

Total package byte prevSize

841757

increased by0.44%

Lines of code

5203

increased by0.33%

Number of lines in readme file

336

increased by0.3%

No dependency changes