virtual-scroller - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

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

commonjs/ReactVirtualScroller.js

@@ -85,3 +85,5 @@ "use strict";
         onLastSeenItemIndexChange = _this$props.onLastSeenItemIndexChange,
-        onStateChange = _this$props.onStateChange; // `this.previousItemsProperty` is only used for comparing
+        onStateChange = _this$props.onStateChange,
+        bypass = _this$props.bypass,
+        bypassBatchSize = _this$props.bypassBatchSize; // `this.previousItemsProperty` is only used for comparing
     // `previousItems` with `newItems` in `render()`.
@@ -95,2 +97,4 @@
       estimatedItemHeight: estimatedItemHeight,
+      bypass: bypass,
+      bypassBatchSize: bypassBatchSize,
       onLastSeenItemIndexChange: onLastSeenItemIndexChange,
@@ -127,3 +131,7 @@ state: initialState,
       }
-    }
+    } // Functional components can't have a `ref` assigned to them.
+    // Item `ref`s are only used for calling `.updateItem(i)` instance method.
+    // If a developer is not using the `.updateItem(i)` instance method
+    // then `ref`s aren't required and will be omitted.
+
   }, {
@@ -227,2 +235,4 @@ key: "getItemRef",
           estimatedItemHeight = _this$props2.estimatedItemHeight,
+          bypass = _this$props2.bypass,
+          bypassBatchSize = _this$props2.bypassBatchSize,
           initialState = _this$props2.initialState,
@@ -232,3 +242,3 @@ onStateChange = _this$props2.onStateChange,
           onMount = _this$props2.onMount,
-          rest = _objectWithoutProperties(_this$props2, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "initialState", "onStateChange", "onLastSeenItemIndexChange", "onMount"]);
+          rest = _objectWithoutProperties(_this$props2, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "initialState", "onStateChange", "onLastSeenItemIndexChange", "onMount"]);
 
@@ -321,3 +331,3 @@ var _this$virtualScroller = this.virtualScroller.getState(),
           return _react["default"].createElement(Component, _extends({}, itemComponentProps, {
-            ref: _this4.getItemRef(i),
+            ref: isComponentClass(Component) ? _this4.getItemRef(i) : undefined,
             key: "".concat(_this4.uniquePrefix, ":").concat(i),
@@ -337,3 +347,10 @@ state: itemStates && itemStates[i],
 }(_react["default"].Component);
+/**
+ * Checks if the argument is a React.Component class.
+ * https://overreacted.io/how-does-react-tell-a-class-from-a-function/
+ * @param  {any}  Component
+ * @return {object} [object]
+ */
 
+
 exports["default"] = ReactVirtualScroller;
@@ -346,2 +363,4 @@
   estimatedItemHeight: _propTypes["default"].number,
+  bypass: _propTypes["default"].bool,
+  bypassBatchSize: _propTypes["default"].number,
   onMount: _propTypes["default"].func,
@@ -369,2 +388,7 @@ onLastSeenItemIndexChange: _propTypes["default"].func,
 });
+
+function isComponentClass(Component) {
+  // return Component.prototype instanceof React.Component
+  return Component.prototype.isReactComponent;
+}
 //# sourceMappingURL=ReactVirtualScroller.js.map

commonjs/VirtualScroller.js

@@ -62,29 +62,9 @@ "use strict";
     _defineProperty(this, "updateShownItemIndexes", function (callback) {
-      // // A minor optimization. Just because I can.
-      // let listCoordinates
-      // if (this.listCoordinatesCached) {
-      // 	listCoordinates = this.listCoordinatesCached
-      // 	this.listCoordinatesCached = undefined
-      // } else {
-      // 	listCoordinates = getOffset(this.getContainerNode())
-      // }
-      // const { top, height } = listCoordinates
-      var _getOffset = (0, _DOM.getOffset)(_this.getContainerNode()),
-          top = _getOffset.top,
-          height = _getOffset.height;
+      // Find the items which are displayed in the viewport.
+      var _this$getShownItemInd = _this.getShownItemIndexes(),
+          firstShownItemIndex = _this$getShownItemInd.firstShownItemIndex,
+          lastShownItemIndex = _this$getShownItemInd.lastShownItemIndex,
+          redoLayoutAfterRender = _this$getShownItemInd.redoLayoutAfterRender; // Measure "before" items height.
 
-      var _getScreenBounds = (0, _DOM.getScreenBounds)(),
-          screenTop = _getScreenBounds.top,
-          screenBottom = _getScreenBounds.bottom; // Set screen top and bottom for current layout.
 
-
-      _this.latestLayoutScreenTopAfterMargin = screenTop - _this.getMargin();
-      _this.latestLayoutScreenBottomAfterMargin = screenBottom + _this.getMargin(); // Find the items which are displayed in the viewport.
-
-      var _this$getItemIndexes = _this.getItemIndexes(screenTop - _this.getMargin(), screenBottom + _this.getMargin(), top, top + height),
-          firstShownItemIndex = _this$getItemIndexes.firstShownItemIndex,
-          lastShownItemIndex = _this$getItemIndexes.lastShownItemIndex,
-          redoLayoutAfterRender = _this$getItemIndexes.redoLayoutAfterRender; // Measure "before" items height.
-
-
       var beforeItemsHeight = _this.getBeforeItemsHeight(firstShownItemIndex, lastShownItemIndex); // Measure "after" items height.
@@ -103,3 +83,3 @@
 
-      (0, _log["default"])('~ Layout results ~');
+      (0, _log["default"])('~ Layout results ' + (_this.bypass ? '(bypass) ' : '') + '~');
       (0, _log["default"])('First shown item index', firstShownItemIndex);
@@ -128,3 +108,3 @@ (0, _log["default"])('Last shown item index', lastShownItemIndex);
       }, function () {
-        return callback(redoLayoutAfterRender ? 1 : 0);
+        return callback(redoLayoutAfterRender);
       });
@@ -134,4 +114,4 @@ });
     _defineProperty(this, "updateShownItemIndexesRecursive", function () {
-      _this.updateShownItemIndexes(function (status) {
-        if (status === 1) {
+      _this.updateShownItemIndexes(function (redoLayoutAfterRender) {
+        if (redoLayoutAfterRender) {
           // Recurse in a timeout to prevent React error:
@@ -148,3 +128,3 @@ // "Maximum update depth exceeded.
             }
-          });
+          }, 0);
         } else {
@@ -252,3 +232,5 @@ _this.onDoneUpdatingItemIndexes();
         setState = options.setState,
-        onStateChange = options.onStateChange;
+        onStateChange = options.onStateChange,
+        bypass = options.bypass,
+        bypassBatchSize = options.bypassBatchSize;
     var estimatedItemHeight = options.estimatedItemHeight,
@@ -268,4 +250,9 @@ onLastSeenItemIndexChange = options.onLastSeenItemIndexChange,
     // }
+    // `bypass` mode could work but turns out that
+    // unmounting large React component trees is a
+    // very long process, so it's still not a viable UX.
 
 
+    this.bypass = bypass;
+    this.bypassBatchSize = bypassBatchSize || 10;
     this.initialItems = items; // this.margin = margin
@@ -446,4 +433,7 @@
       });
-      window.addEventListener('scroll', this.onScroll);
-      window.addEventListener('resize', this.onResize);
+
+      if (!this.bypass) {
+        window.addEventListener('scroll', this.onScroll);
+        window.addEventListener('resize', this.onResize);
+      }
     }
@@ -454,5 +444,8 @@ }, {
       this.isMounted = false;
-      window.removeEventListener('scroll', this.onScroll);
-      window.removeEventListener('resize', this.onResize);
-      clearTimeout(this.onUserStopsScrollingTimeout);
+
+      if (!this.bypass) {
+        window.removeEventListener('scroll', this.onScroll);
+        window.removeEventListener('resize', this.onResize);
+        clearTimeout(this.onUserStopsScrollingTimeout);
+      }
     }
@@ -541,4 +534,3 @@ }, {
           var heightLeft = screenBottom - (listTop + itemsHeight);
-          var batchSize = this.getEstimatedItemsCount(heightLeft);
-          showItemsToIndex = Math.min(i + (batchSize - 1), // Guard against index overflow.
+          showItemsToIndex = Math.min(i + (this.getEstimatedItemsCount(heightLeft) - 1), // Guard against index overflow.
           this.getItemsCount() - 1);
@@ -716,9 +708,54 @@ redoLayoutAfterRender = true;
     /**
+     * Finds the items that are displayed in the viewport.
+     * @return {object} `{ firstShownItemIndex: number, lastShownItemIndex: number, redoLayoutAfterRender: boolean }`
+     */
+
+  }, {
+    key: "getShownItemIndexes",
+    value: function getShownItemIndexes() {
+      if (this.bypass) {
+        var _this$getState6 = this.getState(),
+            firstShownItemIndex = _this$getState6.firstShownItemIndex;
+
+        var _this$getState7 = this.getState(),
+            lastShownItemIndex = _this$getState7.lastShownItemIndex;
+
+        lastShownItemIndex = Math.min(lastShownItemIndex + this.bypassBatchSize, this.getItemsCount() - 1);
+        return {
+          firstShownItemIndex: firstShownItemIndex,
+          lastShownItemIndex: lastShownItemIndex,
+          redoLayoutAfterRender: lastShownItemIndex < this.getItemsCount() - 1
+        };
+      } // // A minor optimization. Just because I can.
+      // let listCoordinates
+      // if (this.listCoordinatesCached) {
+      // 	listCoordinates = this.listCoordinatesCached
+      // 	this.listCoordinatesCached = undefined
+      // } else {
+      // 	listCoordinates = getOffset(this.getContainerNode())
+      // }
+      // const { top, height } = listCoordinates
+
+
+      var _getOffset = (0, _DOM.getOffset)(this.getContainerNode()),
+          top = _getOffset.top,
+          height = _getOffset.height;
+
+      var _getScreenBounds = (0, _DOM.getScreenBounds)(),
+          screenTop = _getScreenBounds.top,
+          screenBottom = _getScreenBounds.bottom; // Set screen top and bottom for current layout.
+
+
+      this.latestLayoutScreenTopAfterMargin = screenTop - this.getMargin();
+      this.latestLayoutScreenBottomAfterMargin = screenBottom + this.getMargin(); // Find the items that are displayed in the viewport.
+
+      return this.getItemIndexes(screenTop - this.getMargin(), screenBottom + this.getMargin(), top, top + height);
+    }
+    /**
      * Updates the "from" and "to" shown item indexes.
-     * `callback(status)` is called after it re-renders.
-     * If the list isn't visible then `status` is `-1`.
-     * If the list is visible and some of the items being shown
-     * are new and required to be measured first then `status` is `1`.
-     * If the list is visible and all items being shown
-     * have been encountered (and measured) before then `status` is `0`.
+     * `callback(redoLayoutAfterRender)` is called after it re-renders.
+     * If the list is visible and some of the items being shown are new
+     * and required to be measured first then `redoLayoutAfterRender` is `true`.
+     * If the list is visible and all items being shown have been encountered
+     * (and measured) before then `redoLayoutAfterRender` is `false`.
      * @param {Function} callback
@@ -804,13 +841,13 @@ */
       // * @param  {object} [newCustomState] — If `customState` was passed to `getInitialState()`, this `newCustomState` updates it.
-      var _this$getState6 = this.getState(),
-          previousItems = _this$getState6.items;
+      var _this$getState8 = this.getState(),
+          previousItems = _this$getState8.items;
 
-      var _this$getState7 = this.getState(),
-          firstShownItemIndex = _this$getState7.firstShownItemIndex,
-          lastShownItemIndex = _this$getState7.lastShownItemIndex,
-          beforeItemsHeight = _this$getState7.beforeItemsHeight,
-          afterItemsHeight = _this$getState7.afterItemsHeight,
-          itemStates = _this$getState7.itemStates,
-          itemHeights = _this$getState7.itemHeights,
-          itemSpacing = _this$getState7.itemSpacing;
+      var _this$getState9 = this.getState(),
+          firstShownItemIndex = _this$getState9.firstShownItemIndex,
+          lastShownItemIndex = _this$getState9.lastShownItemIndex,
+          beforeItemsHeight = _this$getState9.beforeItemsHeight,
+          afterItemsHeight = _this$getState9.afterItemsHeight,
+          itemStates = _this$getState9.itemStates,
+          itemHeights = _this$getState9.itemHeights,
+          itemSpacing = _this$getState9.itemSpacing;
 
@@ -817,0 +854,0 @@ (0, _log["default"])('~ Update items ~');

modules/ReactVirtualScroller.js

@@ -70,3 +70,5 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
         onLastSeenItemIndexChange = _this$props.onLastSeenItemIndexChange,
-        onStateChange = _this$props.onStateChange; // `this.previousItemsProperty` is only used for comparing
+        onStateChange = _this$props.onStateChange,
+        bypass = _this$props.bypass,
+        bypassBatchSize = _this$props.bypassBatchSize; // `this.previousItemsProperty` is only used for comparing
     // `previousItems` with `newItems` in `render()`.
@@ -80,2 +82,4 @@
       estimatedItemHeight: estimatedItemHeight,
+      bypass: bypass,
+      bypassBatchSize: bypassBatchSize,
       onLastSeenItemIndexChange: onLastSeenItemIndexChange,
@@ -112,3 +116,7 @@ state: initialState,
       }
-    }
+    } // Functional components can't have a `ref` assigned to them.
+    // Item `ref`s are only used for calling `.updateItem(i)` instance method.
+    // If a developer is not using the `.updateItem(i)` instance method
+    // then `ref`s aren't required and will be omitted.
+
   }, {
@@ -212,2 +220,4 @@ key: "getItemRef",
           estimatedItemHeight = _this$props2.estimatedItemHeight,
+          bypass = _this$props2.bypass,
+          bypassBatchSize = _this$props2.bypassBatchSize,
           initialState = _this$props2.initialState,
@@ -217,3 +227,3 @@ onStateChange = _this$props2.onStateChange,
           onMount = _this$props2.onMount,
-          rest = _objectWithoutProperties(_this$props2, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "initialState", "onStateChange", "onLastSeenItemIndexChange", "onMount"]);
+          rest = _objectWithoutProperties(_this$props2, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "initialState", "onStateChange", "onLastSeenItemIndexChange", "onMount"]);
 
@@ -306,3 +316,3 @@ var _this$virtualScroller = this.virtualScroller.getState(),
           return React.createElement(Component, _extends({}, itemComponentProps, {
-            ref: _this4.getItemRef(i),
+            ref: isComponentClass(Component) ? _this4.getItemRef(i) : undefined,
             key: "".concat(_this4.uniquePrefix, ":").concat(i),
@@ -322,3 +332,10 @@ state: itemStates && itemStates[i],
 }(React.Component);
+/**
+ * Checks if the argument is a React.Component class.
+ * https://overreacted.io/how-does-react-tell-a-class-from-a-function/
+ * @param  {any}  Component
+ * @return {object} [object]
+ */
 
+
 _defineProperty(ReactVirtualScroller, "propTypes", {
@@ -329,2 +346,4 @@ items: PropTypes.arrayOf(PropTypes.object).isRequired,
   estimatedItemHeight: PropTypes.number,
+  bypass: PropTypes.bool,
+  bypassBatchSize: PropTypes.number,
   onMount: PropTypes.func,
@@ -354,2 +373,7 @@ onLastSeenItemIndexChange: PropTypes.func,
 export { ReactVirtualScroller as default };
+
+function isComponentClass(Component) {
+  // return Component.prototype instanceof React.Component
+  return Component.prototype.isReactComponent;
+}
 //# sourceMappingURL=ReactVirtualScroller.js.map

modules/VirtualScroller.js

@@ -46,29 +46,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
     _defineProperty(this, "updateShownItemIndexes", function (callback) {
-      // // A minor optimization. Just because I can.
-      // let listCoordinates
-      // if (this.listCoordinatesCached) {
-      // 	listCoordinates = this.listCoordinatesCached
-      // 	this.listCoordinatesCached = undefined
-      // } else {
-      // 	listCoordinates = getOffset(this.getContainerNode())
-      // }
-      // const { top, height } = listCoordinates
-      var _getOffset = getOffset(_this.getContainerNode()),
-          top = _getOffset.top,
-          height = _getOffset.height;
+      // Find the items which are displayed in the viewport.
+      var _this$getShownItemInd = _this.getShownItemIndexes(),
+          firstShownItemIndex = _this$getShownItemInd.firstShownItemIndex,
+          lastShownItemIndex = _this$getShownItemInd.lastShownItemIndex,
+          redoLayoutAfterRender = _this$getShownItemInd.redoLayoutAfterRender; // Measure "before" items height.
 
-      var _getScreenBounds = getScreenBounds(),
-          screenTop = _getScreenBounds.top,
-          screenBottom = _getScreenBounds.bottom; // Set screen top and bottom for current layout.
 
-
-      _this.latestLayoutScreenTopAfterMargin = screenTop - _this.getMargin();
-      _this.latestLayoutScreenBottomAfterMargin = screenBottom + _this.getMargin(); // Find the items which are displayed in the viewport.
-
-      var _this$getItemIndexes = _this.getItemIndexes(screenTop - _this.getMargin(), screenBottom + _this.getMargin(), top, top + height),
-          firstShownItemIndex = _this$getItemIndexes.firstShownItemIndex,
-          lastShownItemIndex = _this$getItemIndexes.lastShownItemIndex,
-          redoLayoutAfterRender = _this$getItemIndexes.redoLayoutAfterRender; // Measure "before" items height.
-
-
       var beforeItemsHeight = _this.getBeforeItemsHeight(firstShownItemIndex, lastShownItemIndex); // Measure "after" items height.
@@ -87,3 +67,3 @@
 
-      log('~ Layout results ~');
+      log('~ Layout results ' + (_this.bypass ? '(bypass) ' : '') + '~');
       log('First shown item index', firstShownItemIndex);
@@ -112,3 +92,3 @@ log('Last shown item index', lastShownItemIndex);
       }, function () {
-        return callback(redoLayoutAfterRender ? 1 : 0);
+        return callback(redoLayoutAfterRender);
       });
@@ -118,4 +98,4 @@ });
     _defineProperty(this, "updateShownItemIndexesRecursive", function () {
-      _this.updateShownItemIndexes(function (status) {
-        if (status === 1) {
+      _this.updateShownItemIndexes(function (redoLayoutAfterRender) {
+        if (redoLayoutAfterRender) {
           // Recurse in a timeout to prevent React error:
@@ -132,3 +112,3 @@ // "Maximum update depth exceeded.
             }
-          });
+          }, 0);
         } else {
@@ -236,3 +216,5 @@ _this.onDoneUpdatingItemIndexes();
         setState = options.setState,
-        onStateChange = options.onStateChange;
+        onStateChange = options.onStateChange,
+        bypass = options.bypass,
+        bypassBatchSize = options.bypassBatchSize;
     var estimatedItemHeight = options.estimatedItemHeight,
@@ -252,4 +234,9 @@ onLastSeenItemIndexChange = options.onLastSeenItemIndexChange,
     // }
+    // `bypass` mode could work but turns out that
+    // unmounting large React component trees is a
+    // very long process, so it's still not a viable UX.
 
 
+    this.bypass = bypass;
+    this.bypassBatchSize = bypassBatchSize || 10;
     this.initialItems = items; // this.margin = margin
@@ -430,4 +417,7 @@
       });
-      window.addEventListener('scroll', this.onScroll);
-      window.addEventListener('resize', this.onResize);
+
+      if (!this.bypass) {
+        window.addEventListener('scroll', this.onScroll);
+        window.addEventListener('resize', this.onResize);
+      }
     }
@@ -438,5 +428,8 @@ }, {
       this.isMounted = false;
-      window.removeEventListener('scroll', this.onScroll);
-      window.removeEventListener('resize', this.onResize);
-      clearTimeout(this.onUserStopsScrollingTimeout);
+
+      if (!this.bypass) {
+        window.removeEventListener('scroll', this.onScroll);
+        window.removeEventListener('resize', this.onResize);
+        clearTimeout(this.onUserStopsScrollingTimeout);
+      }
     }
@@ -525,4 +518,3 @@ }, {
           var heightLeft = screenBottom - (listTop + itemsHeight);
-          var batchSize = this.getEstimatedItemsCount(heightLeft);
-          showItemsToIndex = Math.min(i + (batchSize - 1), // Guard against index overflow.
+          showItemsToIndex = Math.min(i + (this.getEstimatedItemsCount(heightLeft) - 1), // Guard against index overflow.
           this.getItemsCount() - 1);
@@ -700,9 +692,54 @@ redoLayoutAfterRender = true;
     /**
+     * Finds the items that are displayed in the viewport.
+     * @return {object} `{ firstShownItemIndex: number, lastShownItemIndex: number, redoLayoutAfterRender: boolean }`
+     */
+
+  }, {
+    key: "getShownItemIndexes",
+    value: function getShownItemIndexes() {
+      if (this.bypass) {
+        var _this$getState6 = this.getState(),
+            firstShownItemIndex = _this$getState6.firstShownItemIndex;
+
+        var _this$getState7 = this.getState(),
+            lastShownItemIndex = _this$getState7.lastShownItemIndex;
+
+        lastShownItemIndex = Math.min(lastShownItemIndex + this.bypassBatchSize, this.getItemsCount() - 1);
+        return {
+          firstShownItemIndex: firstShownItemIndex,
+          lastShownItemIndex: lastShownItemIndex,
+          redoLayoutAfterRender: lastShownItemIndex < this.getItemsCount() - 1
+        };
+      } // // A minor optimization. Just because I can.
+      // let listCoordinates
+      // if (this.listCoordinatesCached) {
+      // 	listCoordinates = this.listCoordinatesCached
+      // 	this.listCoordinatesCached = undefined
+      // } else {
+      // 	listCoordinates = getOffset(this.getContainerNode())
+      // }
+      // const { top, height } = listCoordinates
+
+
+      var _getOffset = getOffset(this.getContainerNode()),
+          top = _getOffset.top,
+          height = _getOffset.height;
+
+      var _getScreenBounds = getScreenBounds(),
+          screenTop = _getScreenBounds.top,
+          screenBottom = _getScreenBounds.bottom; // Set screen top and bottom for current layout.
+
+
+      this.latestLayoutScreenTopAfterMargin = screenTop - this.getMargin();
+      this.latestLayoutScreenBottomAfterMargin = screenBottom + this.getMargin(); // Find the items that are displayed in the viewport.
+
+      return this.getItemIndexes(screenTop - this.getMargin(), screenBottom + this.getMargin(), top, top + height);
+    }
+    /**
      * Updates the "from" and "to" shown item indexes.
-     * `callback(status)` is called after it re-renders.
-     * If the list isn't visible then `status` is `-1`.
-     * If the list is visible and some of the items being shown
-     * are new and required to be measured first then `status` is `1`.
-     * If the list is visible and all items being shown
-     * have been encountered (and measured) before then `status` is `0`.
+     * `callback(redoLayoutAfterRender)` is called after it re-renders.
+     * If the list is visible and some of the items being shown are new
+     * and required to be measured first then `redoLayoutAfterRender` is `true`.
+     * If the list is visible and all items being shown have been encountered
+     * (and measured) before then `redoLayoutAfterRender` is `false`.
      * @param {Function} callback
@@ -788,13 +825,13 @@ */
       // * @param  {object} [newCustomState] — If `customState` was passed to `getInitialState()`, this `newCustomState` updates it.
-      var _this$getState6 = this.getState(),
-          previousItems = _this$getState6.items;
+      var _this$getState8 = this.getState(),
+          previousItems = _this$getState8.items;
 
-      var _this$getState7 = this.getState(),
-          firstShownItemIndex = _this$getState7.firstShownItemIndex,
-          lastShownItemIndex = _this$getState7.lastShownItemIndex,
-          beforeItemsHeight = _this$getState7.beforeItemsHeight,
-          afterItemsHeight = _this$getState7.afterItemsHeight,
-          itemStates = _this$getState7.itemStates,
-          itemHeights = _this$getState7.itemHeights,
-          itemSpacing = _this$getState7.itemSpacing;
+      var _this$getState9 = this.getState(),
+          firstShownItemIndex = _this$getState9.firstShownItemIndex,
+          lastShownItemIndex = _this$getState9.lastShownItemIndex,
+          beforeItemsHeight = _this$getState9.beforeItemsHeight,
+          afterItemsHeight = _this$getState9.afterItemsHeight,
+          itemStates = _this$getState9.itemStates,
+          itemHeights = _this$getState9.itemHeights,
+          itemSpacing = _this$getState9.itemSpacing;
 
@@ -801,0 +838,0 @@ log('~ Update items ~');

package.json

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

README.md

@@ -80,2 +80,3 @@ # VirtualScroller
 * `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).
+<!-- * `bypass` — Set to `true` to disable the "virtual scroller" behavior: it will (eventually) render the entire list on mount and won't hide items that go offscreen as the user scrolls. -->
 
@@ -229,2 +230,3 @@ `VirtualScroller` class instance provides methods:
 * `onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex)` — (optional) The `onLastSeenItemIndexChange` option of `VirtualScroller` class.
+<!-- * `bypass` — (optional) The `bypass` option of `VirtualScroller` class. -->
 * `initialState` — (optional) The initial state for `VirtualScroller`. For example, can be used to quicky restore the list on "Back" navigation.
@@ -263,3 +265,3 @@ * `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:
 
-* `updateItem(i)` — Calls `.forceUpdate()` on the `itemComponent` instance for item with index `i`.
+* `updateItem(i)` — Calls `.forceUpdate()` on the `itemComponent` instance for item with index `i`. Does nothing if the item isn't rendered.
 
@@ -266,0 +268,0 @@ ## Dynamically Loaded Lists

source/ReactVirtualScroller.js

@@ -20,2 +20,4 @@ import React from 'react'
 		estimatedItemHeight: PropTypes.number,
+		bypass: PropTypes.bool,
+		bypassBatchSize: PropTypes.number,
 		onMount: PropTypes.func,
@@ -69,3 +71,5 @@ onLastSeenItemIndexChange: PropTypes.func,
 			onLastSeenItemIndexChange,
-			onStateChange
+			onStateChange,
+			bypass,
+			bypassBatchSize
 		} = this.props
@@ -81,2 +85,4 @@ // `this.previousItemsProperty` is only used for comparing
 				estimatedItemHeight,
+				bypass,
+				bypassBatchSize,
 				onLastSeenItemIndexChange,
@@ -109,2 +115,6 @@ state: initialState,
 
+	// Functional components can't have a `ref` assigned to them.
+	// Item `ref`s are only used for calling `.updateItem(i)` instance method.
+	// If a developer is not using the `.updateItem(i)` instance method
+	// then `ref`s aren't required and will be omitted.
 	getItemRef(i) {
@@ -182,2 +192,4 @@ if (!this.itemRefs[i]) {
 			estimatedItemHeight,
+			bypass,
+			bypassBatchSize,
 			initialState,
@@ -279,3 +291,3 @@ onStateChange,
 								{...itemComponentProps}
-								ref={this.getItemRef(i)}
+								ref={isComponentClass(Component) ? this.getItemRef(i) : undefined}
 								key={`${this.uniquePrefix}:${i}`}
@@ -294,2 +306,13 @@ state={itemStates && itemStates[i]}
 	}
+}
+
+/**
+ * Checks if the argument is a React.Component class.
+ * https://overreacted.io/how-does-react-tell-a-class-from-a-function/
+ * @param  {any}  Component
+ * @return {object} [object]
+ */
+function isComponentClass(Component) {
+	// return Component.prototype instanceof React.Component
+	return Component.prototype.isReactComponent
 }

source/VirtualScroller.js

@@ -23,4 +23,7 @@ import shallowEqual from './shallowEqual'
 			setState,
-			onStateChange
+			onStateChange,
+			bypass,
+			bypassBatchSize
 		} = options
+
 		let {
@@ -49,2 +52,8 @@ // margin,
 
+		// `bypass` mode could work but turns out that
+		// unmounting large React component trees is a
+		// very long process, so it's still not a viable UX.
+		this.bypass = bypass
+		this.bypassBatchSize = bypassBatchSize || 10
+
 		this.initialItems = items
@@ -214,4 +223,6 @@ // this.margin = margin
 		this.onUpdateShownItemIndexes({ reason: 'on mount' })
-		window.addEventListener('scroll', this.onScroll)
-		window.addEventListener('resize', this.onResize)
+		if (!this.bypass) {
+			window.addEventListener('scroll', this.onScroll)
+			window.addEventListener('resize', this.onResize)
+		}
 	}
@@ -224,5 +235,7 @@
 		this.isMounted = false
-		window.removeEventListener('scroll', this.onScroll)
-		window.removeEventListener('resize', this.onResize)
-		clearTimeout(this.onUserStopsScrollingTimeout)
+		if (!this.bypass) {
+			window.removeEventListener('scroll', this.onScroll)
+			window.removeEventListener('resize', this.onResize)
+			clearTimeout(this.onUserStopsScrollingTimeout)
+		}
 	}
@@ -303,5 +316,4 @@
 				const heightLeft = screenBottom - (listTop + itemsHeight)
-				const batchSize = this.getEstimatedItemsCount(heightLeft)
 				showItemsToIndex = Math.min(
-					i + (batchSize - 1),
+					i + (this.getEstimatedItemsCount(heightLeft) - 1),
 					// Guard against index overflow.
@@ -459,12 +471,19 @@ this.getItemsCount() - 1
 	/**
-	 * Updates the "from" and "to" shown item indexes.
-	 * `callback(status)` is called after it re-renders.
-	 * If the list isn't visible then `status` is `-1`.
-	 * If the list is visible and some of the items being shown
-	 * are new and required to be measured first then `status` is `1`.
-	 * If the list is visible and all items being shown
-	 * have been encountered (and measured) before then `status` is `0`.
-	 * @param {Function} callback
+	 * Finds the items that are displayed in the viewport.
+	 * @return {object} `{ firstShownItemIndex: number, lastShownItemIndex: number, redoLayoutAfterRender: boolean }`
 	 */
-	updateShownItemIndexes = (callback) => {
+	getShownItemIndexes() {
+		if (this.bypass) {
+			const { firstShownItemIndex } = this.getState()
+			let { lastShownItemIndex } = this.getState()
+			lastShownItemIndex = Math.min(
+				lastShownItemIndex + this.bypassBatchSize,
+				this.getItemsCount() - 1
+			)
+			return {
+				firstShownItemIndex,
+				lastShownItemIndex,
+				redoLayoutAfterRender: lastShownItemIndex < this.getItemsCount() - 1
+			}
+		}
 		// // A minor optimization. Just because I can.
@@ -484,8 +503,4 @@ // let listCoordinates
 		this.latestLayoutScreenBottomAfterMargin = screenBottom + this.getMargin()
-		// Find the items which are displayed in the viewport.
-		const  {
-			firstShownItemIndex,
-			lastShownItemIndex,
-			redoLayoutAfterRender
-		} = this.getItemIndexes(
+		// Find the items that are displayed in the viewport.
+		return this.getItemIndexes(
 			screenTop - this.getMargin(),
@@ -496,2 +511,20 @@ screenBottom + this.getMargin(),
 		)
+	}
+
+	/**
+	 * Updates the "from" and "to" shown item indexes.
+	 * `callback(redoLayoutAfterRender)` is called after it re-renders.
+	 * If the list is visible and some of the items being shown are new
+	 * and required to be measured first then `redoLayoutAfterRender` is `true`.
+	 * If the list is visible and all items being shown have been encountered
+	 * (and measured) before then `redoLayoutAfterRender` is `false`.
+	 * @param {Function} callback
+	 */
+	updateShownItemIndexes = (callback) => {
+		// Find the items which are displayed in the viewport.
+		const {
+			firstShownItemIndex,
+			lastShownItemIndex,
+			redoLayoutAfterRender
+		} = this.getShownItemIndexes()
 		// Measure "before" items height.
@@ -508,3 +541,3 @@ const beforeItemsHeight = this.getBeforeItemsHeight(firstShownItemIndex, lastShownItemIndex)
 		// Debugging.
-		log('~ Layout results ~')
+		log('~ Layout results ' + (this.bypass ? '(bypass) ' : '') + '~')
 		log('First shown item index', firstShownItemIndex)
@@ -529,8 +562,8 @@ log('Last shown item index', lastShownItemIndex)
 			// averageItemHeight: this.itemHeights.getAverage()
-		}, () => callback(redoLayoutAfterRender ? 1 : 0))
+		}, () => callback(redoLayoutAfterRender))
 	}
 
 	updateShownItemIndexesRecursive = () => {
-		this.updateShownItemIndexes((status) => {
-			if (status === 1) {
+		this.updateShownItemIndexes((redoLayoutAfterRender) => {
+			if (redoLayoutAfterRender) {
 				// Recurse in a timeout to prevent React error:
@@ -547,3 +580,3 @@ // "Maximum update depth exceeded.
 					}
-				})
+				}, 0)
 			} else {
@@ -550,0 +583,0 @@ this.onDoneUpdatingItemIndexes()

No alert changes

Improved metrics

Total package byte prevSize

869732

increased by2.61%

Lines of code

5419

increased by3.06%

Number of lines in readme file

346

increased by0.58%

No dependency changes