virtual-scroller - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

bundle/virtual-scroller-dom.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function n(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function i(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,r=window.pageYOffset,s=window.pageXOffset;return{top:t.top+r-i,left:t.left+s-n,width:t.width,height:t.height}}function r(){return window.pageYOffset}function s(){return window.innerHeight}function o(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function a(){if(h()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,o(["[virtual-scroller]"].concat(n)))}}function h(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function u(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var d=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var r=0;r<i().itemHeights.length;){if(null==i().itemHeights[r]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=r-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=r),this.measuredItemsHeight+=i().itemHeights[r];r++}}var t,n,i;return t=e,(n=[{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),r=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&a("Item spacing",r),r}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&(this.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);for(var i=this.firstMeasuredItemIndex,r=this.lastMeasuredItemIndex,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)}}])&&u(t.prototype,n),i&&u(t,i),e}();function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){g(e,t,n[t])})}return e}function l(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var I=function(){function o(i,u){var l=this,I=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),g(this,"onScroll",function(){return l.onUpdateShownItemIndexes({reason:"scroll"})}),g(this,"onResize",function(){return l.onUpdateShownItemIndexes({reason:"resize"})}),g(this,"updateShownItemIndexes",function(e){var t=l.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,r=t.redoLayoutAfterRender,s=l.getBeforeItemsHeight(n,i),o=l.getAfterItemsHeight(n,i);l.updateWillBeHiddenItemHeightsAndState(n,i),a("~ Layout results "+(l.bypass?"(bypass) ":"")+"~"),a("First shown item index",n),a("Last shown item index",i),a("Before items height",s),a("After items height",o),a("Average item height (calculated on previous render)",l.itemHeights.getAverage()),h()&&(a("Item heights",l.getState().itemHeights.slice()),a("Item states",l.getState().itemStates.slice())),r&&a("Redo layout after render"),l.onShowItems(n,i),l.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:s,afterItemsHeight:o},function(){return e(r)})}),g(this,"updateShownItemIndexesRecursive",function(){l.updateShownItemIndexes(function(e){e?setTimeout(function(){l.isMounted?l.updateShownItemIndexesRecursive():l.onDoneUpdatingItemIndexes()},0):l.onDoneUpdatingItemIndexes()})}),g(this,"restoreScroll",function(){var e=l.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;l.restoreScrollAfterPrepend=void 0;var i=l.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(a("Restore scroll position: scroll by",i),window.scrollTo(0,r()+i))}),g(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==l.getItemsCount()&&!l.isUpdatingItemIndexes){if(clearTimeout(l.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==l.latestLayoutScreenTopAfterMargin&&r()<l.latestLayoutScreenTopAfterMargin&&l.getState().firstShownItemIndex>0||void 0!==l.latestLayoutScreenBottomAfterMargin&&r()+s()>l.latestLayoutScreenBottomAfterMargin&&l.getState().lastShownItemIndex<l.getItemsCount()-1;if(a(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return l.onUserStopsScrollingTimeout=setTimeout(l.onUserStoppedScrolling,100)}l.updateLayout(t)}}),g(this,"onUserStoppedScrolling",function(){l.isMounted&&l.updateLayout("stopped scrolling")});var c=I.getState,f=I.setState,p=I.onStateChange,v=I.bypass,S=I.bypassBatchSize,y=I.estimatedItemHeight,w=I.onLastSeenItemIndexChange,x=I.state;a("~ Initialize ~"),x&&(u=x.items),this.bypass=v,this.bypassBatchSize=S||10,this.initialItems=u,this.estimatedItemHeight=y,w&&(this.onLastSeenItemIndexChange=w,this.lastSeenItemIndex=-1),i()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(i()),f?(this.getState=c,this.setState=f):(this.getState=function(){return l.state},this.setState=function(i,r){var s=l.state;l.state=m({},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}(l.state,s)||(p&&p(l.state,s),l.isMounted&&l.onUpdate(s)),r&&r()}),x&&a("Initial state (passed)",x),this.setState(x||this.getInitialState()),this.getContainerNode=i,this.itemHeights=new d(i,u.length,this.getState),a("Items count",u.length),y&&a("Estimated item height",y)}var u,I,c;return u=o,(I=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var r=m({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return a("Initial state (created)",r),a("First shown item index",t),a("Last shown item index",n),r}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onUnmount",value:function(){this.isMounted=!1,this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,r=t.lastShownItemIndex;i===e.firstShownItemIndex&&r===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,r)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(a("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),h()&&a("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){h()&&(a("~ Item state changed ~"),a("Item",e),a("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),a("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(a("~ Item height changed ~"),a("Item",e),a("Previous height",n),a("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,s=0,o=!1,h=0;h<this.getItemsCount();){var u=this.itemHeights.get(h);if(void 0===u){a("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=h);var d=t-(n+s);r=Math.min(h+(this.getEstimatedItemsCount(d)-1),this.getItemsCount()-1),o=!0;break}if(s+=u,void 0===i&&n+s>e&&(a("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){a("Last visible item index (including margin)",h),void 0!==i&&(r=h);break}h++}return void 0!==i&&void 0===r&&a("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),o=!1),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:o}}},{key:"getInvisibleItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(!(i>e&&n<t))return this.getInvisibleItemIndexes();var r=this.getVisibleItemIndexes(e,t,n);return void 0===r.firstShownItemIndex?this.getInvisibleItemIndexes():r}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this;!function t(){void 0!==e.top&&i(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"});e.watchContainerElementTopCoordinateTimer=setTimeout(t,1e3)}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass){var e=this.getState().firstShownItemIndex,t=this.getState().lastShownItemIndex;return{firstShownItemIndex:e,lastShownItemIndex:t=Math.min(t+this.bypassBatchSize,this.getItemsCount()-1),redoLayoutAfterRender:t<this.getItemsCount()-1}}var n=i(this.getContainerNode()),o=n.top,a=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=o;var h=function(){var e=s();return{top:r(),bottom:r()+e,height:e}}(),u=h.top,d=h.bottom;return this.latestLayoutScreenTopAfterMargin=u-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=d+this.getMargin(),this.getItemIndexes(u-this.getMargin(),d+this.getMargin(),o,o+a)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateLayout",value:function(e){a("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,s=i.lastShownItemIndex,o=i.beforeItemsHeight,h=i.afterItemsHeight,u=i.itemStates,l=i.itemHeights;i.itemSpacing;a("~ Update items ~");var g=function(e,t){var n=-1,i=-1;e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1);if(n>=0&&i>=0)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(n,e),I=g.prependedItemsCount,c=g.appendedItemsCount;I>0||c>0?(I>0&&(a("Prepended items count",I),l=new Array(I).concat(l),this.itemHeights.onPrepend(I),u&&(u=new Array(I).concat(u)),this.captureScroll(n,e,I)),c>0&&(a("Appended items count",c),l=l.concat(new Array(c)),u&&(u=u.concat(new Array(c)))),r+=I,s+=I,o+=this.itemHeights.getAverage()*I,h+=this.itemHeights.getAverage()*c):(a("Non-incremental items update"),a("Previous items",n),a("New items",e),this.itemHeights=new d(this.getContainerNode,e.length,this.getState),l=new Array(e.length),u=new Array(e.length),0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),o=0,h=0),this.setState(m({},void 0,{items:e,itemStates:u,itemHeights:l,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:o,afterItemsHeight:h}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&l(u.prototype,I),c&&l(u,c),o}();function c(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 f(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}return function(){function e(t,n,i){var r=this,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),p(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,s=e.lastShownItemIndex,o=e.beforeItemsHeight,h=e.afterItemsHeight;a("~ On state change ~"),a("Previous state",t),a("New state",e),r.container.style.paddingTop=o+"px",r.container.style.paddingBottom=h+"px";var u=t&&n===t.items&&t.items.length>0;if(u){a("Incremental render");for(var d=t.lastShownItemIndex;d>=t.firstShownItemIndex;){if(d>=i&&d<=s);else{a("Remove item",d);var m=r.container.childNodes[d-t.firstShownItemIndex];r.container.removeChild(m)}d--}}else for(a("Clean render");r.container.firstChild;)r.container.removeChild(r.container.firstChild);for(var l=u,g=l&&r.container.firstChild,I=i;I<=s;){if(u&&I>=t.firstShownItemIndex&&I<=t.lastShownItemIndex)l&&(l=!1);else{var c=r.renderItem(n[I]);l?(a("Prepend item",I),r.container.insertBefore(c,g)):(a("Append item",I),r.container.appendChild(c))}I++}}),p(this,"onUnmount",function(){r.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var o=s.onMount,h=c(s,["onMount"]);this.virtualScroller=new I(function(){return r.container},n,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){p(e,t,n[t])})}return e}({},h,{onStateChange:this.onStateChange})),o&&o(),this.virtualScroller.onMount()}var t,n,i;return t=e,(n=[{key:"onItemHeightChange",value:function(e){this.virtualScroller.onItemHeightChange(e)}},{key:"onLastSeenItemIndexChange",value:function(e,t){this.virtualScroller.onLastSeenItemIndexChange(e,t)}},{key:"updateItems",value:function(e,t){this.virtualScroller.updateItems(e,t)}}])&&f(t.prototype,n),i&&f(t,i),e}()});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function n(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function i(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,r=window.pageYOffset,s=window.pageXOffset;return{top:t.top+r-i,left:t.left+s-n,width:t.width,height:t.height}}function r(){return window.pageYOffset}function s(){return window.innerHeight}function o(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function a(){if(h()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,o(["[virtual-scroller]"].concat(n)))}}function h(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function u(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var d=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var r=0;r<i().itemHeights.length;){if(null==i().itemHeights[r]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=r-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=r),this.measuredItemsHeight+=i().itemHeights[r];r++}}var t,n,i;return t=e,(n=[{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),r=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&a("Item spacing",r),r}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&(this.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);for(var i=this.firstMeasuredItemIndex,r=this.lastMeasuredItemIndex,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)}}])&&u(t.prototype,n),i&&u(t,i),e}();function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){g(e,t,n[t])})}return e}function l(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var I=function(){function o(i,u){var l=this,I=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),g(this,"onScroll",function(){return l.onUpdateShownItemIndexes({reason:"scroll"})}),g(this,"onResize",function(){return l.onUpdateShownItemIndexes({reason:"resize"})}),g(this,"updateShownItemIndexes",function(e){var t=l.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,r=t.redoLayoutAfterRender,s=l.getBeforeItemsHeight(n,i),o=l.getAfterItemsHeight(n,i);l.updateWillBeHiddenItemHeightsAndState(n,i),a("~ Layout results "+(l.bypass?"(bypass) ":"")+"~"),a("First shown item index",n),a("Last shown item index",i),a("Before items height",s),a("After items height",o),a("Average item height (calculated on previous render)",l.itemHeights.getAverage()),h()&&(a("Item heights",l.getState().itemHeights.slice()),a("Item states",l.getState().itemStates.slice())),r&&a("Redo layout after render"),l.onShowItems(n,i),l.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:s,afterItemsHeight:o},function(){return e(r)})}),g(this,"updateShownItemIndexesRecursive",function(){l.updateShownItemIndexes(function(e){e?setTimeout(function(){l.isMounted?l.updateShownItemIndexesRecursive():l.onDoneUpdatingItemIndexes()},0):l.onDoneUpdatingItemIndexes()})}),g(this,"restoreScroll",function(){var e=l.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;l.restoreScrollAfterPrepend=void 0;var i=l.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(a("Restore scroll position: scroll by",i),window.scrollTo(0,r()+i))}),g(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==l.getItemsCount()&&!l.isUpdatingItemIndexes){if(clearTimeout(l.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==l.latestLayoutScreenTopAfterMargin&&r()<l.latestLayoutScreenTopAfterMargin&&l.getState().firstShownItemIndex>0||void 0!==l.latestLayoutScreenBottomAfterMargin&&r()+s()>l.latestLayoutScreenBottomAfterMargin&&l.getState().lastShownItemIndex<l.getItemsCount()-1;if(a(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return l.onUserStopsScrollingTimeout=setTimeout(l.onUserStoppedScrolling,100)}l.updateLayout(t)}}),g(this,"onUserStoppedScrolling",function(){l.isMounted&&l.updateLayout("stopped scrolling")});var c=I.getState,f=I.setState,v=I.onStateChange,p=I.bypass,S=I.bypassBatchSize,y=I.estimatedItemHeight,w=I.onItemFirstRender,x=I.state;a("~ Initialize ~"),x&&(u=x.items),this.bypass=p,this.bypassBatchSize=S||10,this.initialItems=u,this.estimatedItemHeight=y,w&&(this.onItemFirstRender=w),i()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(i()),f?(this.getState=c,this.setState=f):(this.getState=function(){return l.state},this.setState=function(i,r){var s=l.state;l.state=m({},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}(l.state,s)||(v&&v(l.state,s),l.isMounted&&l.onUpdate(s)),r&&r()}),x&&a("Initial state (passed)",x),this.setState(x||this.getInitialState()),this.getContainerNode=i,this.itemHeights=new d(i,u.length,this.getState),a("Items count",u.length),y&&a("Estimated item height",y)}var u,I,c;return u=o,(I=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var r=m({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return a("Initial state (created)",r),a("First shown item index",t),a("Last shown item index",n),r}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onShowItems",value:function(e,t){if(this.onItemFirstRender){if(void 0===this.firstSeenItemIndex)for(var n=e;n<=t;)this.onItemFirstRender(n),n++;else{if(e<this.firstSeenItemIndex)for(var i=e;i<this.firstSeenItemIndex;)this.onItemFirstRender(i),i++;if(t>this.lastSeenItemIndex)for(var r=this.lastSeenItemIndex+1;r<=t;)this.onItemFirstRender(r),r++}this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onUnmount",value:function(){this.isMounted=!1,this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,r=t.lastShownItemIndex;i===e.firstShownItemIndex&&r===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,r)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(a("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),h()&&a("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){h()&&(a("~ Item state changed ~"),a("Item",e),a("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),a("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(a("~ Item height changed ~"),a("Item",e),a("Previous height",n),a("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,s=0,o=!1,h=0;h<this.getItemsCount();){var u=this.itemHeights.get(h);if(void 0===u){a("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=h);var d=t-(n+s);r=Math.min(h+(this.getEstimatedItemsCount(d)-1),this.getItemsCount()-1),o=!0;break}if(s+=u,void 0===i&&n+s>e&&(a("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){a("Last visible item index (including margin)",h),void 0!==i&&(r=h);break}h++}return void 0!==i&&void 0===r&&a("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),o=!1),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:o}}},{key:"getInvisibleItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(!(i>e&&n<t))return this.getInvisibleItemIndexes();var r=this.getVisibleItemIndexes(e,t,n);return void 0===r.firstShownItemIndex?this.getInvisibleItemIndexes():r}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this;!function t(){void 0!==e.top&&i(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"});e.watchContainerElementTopCoordinateTimer=setTimeout(t,1e3)}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass){var e=this.getState().firstShownItemIndex,t=this.getState().lastShownItemIndex;return{firstShownItemIndex:e,lastShownItemIndex:t=Math.min(t+this.bypassBatchSize,this.getItemsCount()-1),redoLayoutAfterRender:t<this.getItemsCount()-1}}var n=i(this.getContainerNode()),o=n.top,a=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=o;var h=function(){var e=s();return{top:r(),bottom:r()+e,height:e}}(),u=h.top,d=h.bottom;return this.latestLayoutScreenTopAfterMargin=u-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=d+this.getMargin(),this.getItemIndexes(u-this.getMargin(),d+this.getMargin(),o,o+a)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateLayout",value:function(e){a("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,s=i.lastShownItemIndex,o=i.beforeItemsHeight,h=i.afterItemsHeight,u=i.itemStates,l=i.itemHeights;i.itemSpacing;a("~ Update items ~");var g=function(e,t){var n=-1,i=-1;e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1);if(n>=0&&i>=0)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(n,e),I=g.prependedItemsCount,c=g.appendedItemsCount;I>0||c>0?(I>0&&(a("Prepended items count",I),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=I),l=new Array(I).concat(l),this.itemHeights.onPrepend(I),u&&(u=new Array(I).concat(u)),this.captureScroll(n,e,I)),c>0&&(a("Appended items count",c),l=l.concat(new Array(c)),u&&(u=u.concat(new Array(c)))),r+=I,s+=I,o+=this.itemHeights.getAverage()*I,h+=this.itemHeights.getAverage()*c):(a("Non-incremental items update"),a("Previous items",n),a("New items",e),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,this.itemHeights=new d(this.getContainerNode,e.length,this.getState),l=new Array(e.length),u=new Array(e.length),0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),o=0,h=0),this.setState(m({},void 0,{items:e,itemStates:u,itemHeights:l,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:o,afterItemsHeight:h}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&l(u.prototype,I),c&&l(u,c),o}();function c(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 f(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function v(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),v(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,s=e.lastShownItemIndex,o=e.beforeItemsHeight,h=e.afterItemsHeight;a("~ On state change ~"),a("Previous state",t),a("New state",e),r.container.style.paddingTop=o+"px",r.container.style.paddingBottom=h+"px";var u=t&&n===t.items&&t.items.length>0;if(u){a("Incremental render");for(var d=t.lastShownItemIndex;d>=t.firstShownItemIndex;){if(d>=i&&d<=s);else{a("Remove item",d);var m=r.container.childNodes[d-t.firstShownItemIndex];r.container.removeChild(m)}d--}}else for(a("Clean render");r.container.firstChild;)r.container.removeChild(r.container.firstChild);for(var l=u,g=l&&r.container.firstChild,I=i;I<=s;){if(u&&I>=t.firstShownItemIndex&&I<=t.lastShownItemIndex)l&&(l=!1);else{var c=r.renderItem(n[I]);l?(a("Prepend item",I),r.container.insertBefore(c,g)):(a("Append item",I),r.container.appendChild(c))}I++}}),v(this,"onUnmount",function(){r.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var o=s.onMount,h=c(s,["onMount"]);this.virtualScroller=new I(function(){return r.container},n,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){v(e,t,n[t])})}return e}({},h,{onStateChange:this.onStateChange})),o&&o(),this.virtualScroller.onMount()}var t,n,i;return t=e,(n=[{key:"onItemHeightChange",value:function(e){this.virtualScroller.onItemHeightChange(e)}},{key:"updateItems",value:function(e,t){this.virtualScroller.updateItems(e,t)}}])&&f(t.prototype,n),i&&f(t,i),e}()});
 //# sourceMappingURL=virtual-scroller-dom.js.map

bundle/virtual-scroller-react.js

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

bundle/virtual-scroller.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}var t=Object.prototype.hasOwnProperty;function n(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function i(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,s=window.pageYOffset,r=window.pageXOffset;return{top:t.top+s-i,left:t.left+r-n,width:t.width,height:t.height}}function s(){return window.pageYOffset}function r(){return window.innerHeight}function o(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function a(){if(h()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,o(["[virtual-scroller]"].concat(n)))}}function h(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function u(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var d=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var s=0;s<i().itemHeights.length;){if(null==i().itemHeights[s]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=s-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=s),this.measuredItemsHeight+=i().itemHeights[s];s++}}var t,n,i;return t=e,(n=[{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),s=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&a("Item spacing",s),s}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&(this.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);for(var i=this.firstMeasuredItemIndex,s=this.lastMeasuredItemIndex,r=!1,o=e;o<=t;){var a=this._getItemHeight(o,n);void 0!==a&&(this.set(o,a),(void 0===i||o<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=o,r=!0)),(void 0===s||o>s)&&(void 0!==s&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=o)),o++}this.updateAverageItemHeight()}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"updateAverageItemHeight",value:function(){this.averageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.averageItemHeight=this.measuredItemsHeight/this.averageItemHeightSamplesCount}},{key:"getAverage",value:function(){return this.previousAverageItemHeight&&this.previousAverageItemHeightSamplesCount>this.averageItemHeightSamplesCount?this.previousAverageItemHeight:this.averageItemHeight||0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&u(t.prototype,n),i&&u(t,i),e}();function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){l(e,t,n[t])})}return e}function g(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}return function(){function o(i,u){var g=this,I=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),l(this,"onScroll",function(){return g.onUpdateShownItemIndexes({reason:"scroll"})}),l(this,"onResize",function(){return g.onUpdateShownItemIndexes({reason:"resize"})}),l(this,"updateShownItemIndexes",function(e){var t=g.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,s=t.redoLayoutAfterRender,r=g.getBeforeItemsHeight(n,i),o=g.getAfterItemsHeight(n,i);g.updateWillBeHiddenItemHeightsAndState(n,i),a("~ Layout results "+(g.bypass?"(bypass) ":"")+"~"),a("First shown item index",n),a("Last shown item index",i),a("Before items height",r),a("After items height",o),a("Average item height (calculated on previous render)",g.itemHeights.getAverage()),h()&&(a("Item heights",g.getState().itemHeights.slice()),a("Item states",g.getState().itemStates.slice())),s&&a("Redo layout after render"),g.onShowItems(n,i),g.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:r,afterItemsHeight:o},function(){return e(s)})}),l(this,"updateShownItemIndexesRecursive",function(){g.updateShownItemIndexes(function(e){e?setTimeout(function(){g.isMounted?g.updateShownItemIndexesRecursive():g.onDoneUpdatingItemIndexes()},0):g.onDoneUpdatingItemIndexes()})}),l(this,"restoreScroll",function(){var e=g.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;g.restoreScrollAfterPrepend=void 0;var i=g.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(a("Restore scroll position: scroll by",i),window.scrollTo(0,s()+i))}),l(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==g.getItemsCount()&&!g.isUpdatingItemIndexes){if(clearTimeout(g.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==g.latestLayoutScreenTopAfterMargin&&s()<g.latestLayoutScreenTopAfterMargin&&g.getState().firstShownItemIndex>0||void 0!==g.latestLayoutScreenBottomAfterMargin&&s()+r()>g.latestLayoutScreenBottomAfterMargin&&g.getState().lastShownItemIndex<g.getItemsCount()-1;if(a(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return g.onUserStopsScrollingTimeout=setTimeout(g.onUserStoppedScrolling,100)}g.updateLayout(t)}}),l(this,"onUserStoppedScrolling",function(){g.isMounted&&g.updateLayout("stopped scrolling")});var c=I.getState,f=I.setState,p=I.onStateChange,v=I.bypass,S=I.bypassBatchSize,y=I.estimatedItemHeight,w=I.onLastSeenItemIndexChange,x=I.state;a("~ Initialize ~"),x&&(u=x.items),this.bypass=v,this.bypassBatchSize=S||10,this.initialItems=u,this.estimatedItemHeight=y,w&&(this.onLastSeenItemIndexChange=w,this.lastSeenItemIndex=-1),i()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(i()),f?(this.getState=c,this.setState=f):(this.getState=function(){return g.state},this.setState=function(i,s){var r=g.state;g.state=m({},r,i),function(i,s){if(n(i,s))return!0;if("object"!==e(i)||null===i||"object"!==e(s)||null===s)return!1;var r=Object.keys(i),o=Object.keys(s);if(r.length!==o.length)return!1;for(var a=0;a<r.length;a++)if(!t.call(s,r[a])||!n(i[r[a]],s[r[a]]))return!1;return!0}(g.state,r)||(p&&p(g.state,r),g.isMounted&&g.onUpdate(r)),s&&s()}),x&&a("Initial state (passed)",x),this.setState(x||this.getInitialState()),this.getContainerNode=i,this.itemHeights=new d(i,u.length,this.getState),a("Items count",u.length),y&&a("Estimated item height",y)}var u,I,c;return u=o,(I=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var s=m({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return a("Initial state (created)",s),a("First shown item index",t),a("Last shown item index",n),s}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onUnmount",value:function(){this.isMounted=!1,this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,s=t.lastShownItemIndex;i===e.firstShownItemIndex&&s===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,s)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(a("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,n),h()&&a("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){h()&&(a("~ Item state changed ~"),a("Item",e),a("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),a("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(a("~ Item height changed ~"),a("Item",e),a("Previous height",n),a("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,s,r=0,o=!1,h=0;h<this.getItemsCount();){var u=this.itemHeights.get(h);if(void 0===u){a("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===i&&(i=h);var d=t-(n+r);s=Math.min(h+(this.getEstimatedItemsCount(d)-1),this.getItemsCount()-1),o=!0;break}if(r+=u,void 0===i&&n+r>e&&(a("First visible item index (including margin)",h),i=h),h<this.getItemsCount()-1&&(r+=this.getItemSpacing()),n+r>t){a("Last visible item index (including margin)",h),void 0!==i&&(s=h);break}h++}return void 0!==i&&void 0===s&&a("Last item index (is fully visible)",s=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(s<this.restoreScrollAfterPrepend.index&&(s=this.restoreScrollAfterPrepend.index),o=!1),{firstShownItemIndex:i,lastShownItemIndex:s,redoLayoutAfterRender:o}}},{key:"getInvisibleItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(!(i>e&&n<t))return this.getInvisibleItemIndexes();var s=this.getVisibleItemIndexes(e,t,n);return void 0===s.firstShownItemIndex?this.getInvisibleItemIndexes():s}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this;!function t(){void 0!==e.top&&i(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"});e.watchContainerElementTopCoordinateTimer=setTimeout(t,1e3)}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass){var e=this.getState().firstShownItemIndex,t=this.getState().lastShownItemIndex;return{firstShownItemIndex:e,lastShownItemIndex:t=Math.min(t+this.bypassBatchSize,this.getItemsCount()-1),redoLayoutAfterRender:t<this.getItemsCount()-1}}var n=i(this.getContainerNode()),o=n.top,a=n.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=o;var h=function(){var e=r();return{top:s(),bottom:s()+e,height:e}}(),u=h.top,d=h.bottom;return this.latestLayoutScreenTopAfterMargin=u-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=d+this.getMargin(),this.getItemIndexes(u-this.getMargin(),d+this.getMargin(),o,o+a)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateLayout",value:function(e){a("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,n=this.getState().items,i=this.getState(),s=i.firstShownItemIndex,r=i.lastShownItemIndex,o=i.beforeItemsHeight,h=i.afterItemsHeight,u=i.itemStates,g=i.itemHeights;i.itemSpacing;a("~ Update items ~");var l=function(e,t){var n=-1,i=-1;e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1);if(n>=0&&i>=0)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(n,e),I=l.prependedItemsCount,c=l.appendedItemsCount;I>0||c>0?(I>0&&(a("Prepended items count",I),g=new Array(I).concat(g),this.itemHeights.onPrepend(I),u&&(u=new Array(I).concat(u)),this.captureScroll(n,e,I)),c>0&&(a("Appended items count",c),g=g.concat(new Array(c)),u&&(u=u.concat(new Array(c)))),s+=I,r+=I,o+=this.itemHeights.getAverage()*I,h+=this.itemHeights.getAverage()*c):(a("Non-incremental items update"),a("Previous items",n),a("New items",e),this.itemHeights=new d(this.getContainerNode,e.length,this.getState),g=new Array(e.length),u=new Array(e.length),0===e.length?(s=void 0,r=void 0):(s=0,r=this.getLastShownItemIndex(s,e.length)),o=0,h=0),this.setState(m({},void 0,{items:e,itemStates:u,itemHeights:g,firstShownItemIndex:s,lastShownItemIndex:r,beforeItemsHeight:o,afterItemsHeight:h}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&g(u.prototype,I),c&&g(u,c),o}()});
+!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 i(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function n(e){var t=e.getBoundingClientRect(),i=document.clientLeft||document.body.clientLeft||0,n=document.clientTop||document.body.clientTop||0,s=window.pageYOffset,r=window.pageXOffset;return{top:t.top+s-n,left:t.left+r-i,width:t.width,height:t.height}}function s(){return window.pageYOffset}function r(){return window.innerHeight}function o(e){return function(e){if(Array.isArray(e)){for(var t=0,i=new Array(e.length);t<e.length;t++)i[t]=e[t];return i}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function a(){if(h()){for(var e,t=arguments.length,i=new Array(t),n=0;n<t;n++)i[n]=arguments[n];(e=console).log.apply(e,o(["[virtual-scroller]"].concat(i)))}}function h(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function d(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var u=function(){function e(t,i,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.measuredItemsHeight=0;for(var s=0;s<n().itemHeights.length;){if(null==n().itemHeights[s]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=s-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=s),this.measuredItemsHeight+=n().itemHeights[s];s++}}var t,i,n;return t=e,(i=[{key:"_getItemHeight",value:function(e,t){var i=this.getContainerNode();if(i){var n=e-t;if(n>=0&&n<i.childNodes.length)return i.childNodes[n].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],i=e.childNodes[1],n=t.getBoundingClientRect(),s=i.getBoundingClientRect().top-(n.top+n.height);return window.VirtualScrollerDebug&&a("Item spacing",s),s}}},{key:"update",value:function(e,t,i){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 n=this.firstMeasuredItemIndex,s=this.lastMeasuredItemIndex,r=!1,o=e;o<=t;){var a=this._getItemHeight(o,i);void 0!==a&&(this.set(o,a),(void 0===n||o<n)&&(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 i=this.get(e),n=this._getItemHeight(e,t);void 0!==i&&void 0!==n&&(this.set(e,n),this.measuredItemsHeight+=n-i)}},{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,i),n&&d(t,n),e}();function m(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{},n=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter(function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable}))),n.forEach(function(t){I(e,t,i[t])})}return e}function g(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function I(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}return function(){function o(n,d){var g=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,o),I(this,"onScroll",function(){return g.onUpdateShownItemIndexes({reason:"scroll"})}),I(this,"onResize",function(){return g.onUpdateShownItemIndexes({reason:"resize"})}),I(this,"updateShownItemIndexes",function(e){var t=g.getShownItemIndexes(),i=t.firstShownItemIndex,n=t.lastShownItemIndex,s=t.redoLayoutAfterRender,r=g.getBeforeItemsHeight(i,n),o=g.getAfterItemsHeight(i,n);g.updateWillBeHiddenItemHeightsAndState(i,n),a("~ Layout results "+(g.bypass?"(bypass) ":"")+"~"),a("First shown item index",i),a("Last shown item index",n),a("Before items height",r),a("After items height",o),a("Average item height (calculated on previous render)",g.itemHeights.getAverage()),h()&&(a("Item heights",g.getState().itemHeights.slice()),a("Item states",g.getState().itemStates.slice())),s&&a("Redo layout after render"),g.onShowItems(i,n),g.setState({firstShownItemIndex:i,lastShownItemIndex:n,beforeItemsHeight:r,afterItemsHeight:o},function(){return e(s)})}),I(this,"updateShownItemIndexesRecursive",function(){g.updateShownItemIndexes(function(e){e?setTimeout(function(){g.isMounted?g.updateShownItemIndexesRecursive():g.onDoneUpdatingItemIndexes()},0):g.onDoneUpdatingItemIndexes()})}),I(this,"restoreScroll",function(){var e=g.restoreScrollAfterPrepend,t=e.index,i=e.screenTop;g.restoreScrollAfterPrepend=void 0;var n=g.getItemElement(t).getBoundingClientRect().top-i;0!==n&&(a("Restore scroll position: scroll by",n),window.scrollTo(0,s()+n))}),I(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==g.getItemsCount()&&!g.isUpdatingItemIndexes){if(clearTimeout(g.onUserStopsScrollingTimeout),"scroll"===t){var i=void 0!==g.latestLayoutScreenTopAfterMargin&&s()<g.latestLayoutScreenTopAfterMargin&&g.getState().firstShownItemIndex>0||void 0!==g.latestLayoutScreenBottomAfterMargin&&s()+r()>g.latestLayoutScreenBottomAfterMargin&&g.getState().lastShownItemIndex<g.getItemsCount()-1;if(a(i?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!i)return g.onUserStopsScrollingTimeout=setTimeout(g.onUserStoppedScrolling,100)}g.updateLayout(t)}}),I(this,"onUserStoppedScrolling",function(){g.isMounted&&g.updateLayout("stopped scrolling")});var f=l.getState,c=l.setState,p=l.onStateChange,v=l.bypass,S=l.bypassBatchSize,y=l.estimatedItemHeight,w=l.onItemFirstRender,x=l.state;a("~ Initialize ~"),x&&(d=x.items),this.bypass=v,this.bypassBatchSize=S||10,this.initialItems=d,this.estimatedItemHeight=y,w&&(this.onItemFirstRender=w),n()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(n()),c?(this.getState=f,this.setState=c):(this.getState=function(){return g.state},this.setState=function(n,s){var r=g.state;g.state=m({},r,n),function(n,s){if(i(n,s))return!0;if("object"!==e(n)||null===n||"object"!==e(s)||null===s)return!1;var r=Object.keys(n),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])||!i(n[r[a]],s[r[a]]))return!1;return!0}(g.state,r)||(p&&p(g.state,r),g.isMounted&&g.onUpdate(r)),s&&s()}),x&&a("Initial state (passed)",x),this.setState(x||this.getInitialState()),this.getContainerNode=n,this.itemHeights=new u(n,d.length,this.getState),a("Items count",d.length),y&&a("Estimated item height",y)}var d,l,f;return d=o,(l=[{key:"getInitialState",value:function(e){var t,i,n=this.initialItems.length;n>0&&(t=Math.min(0,n-1),i=this.getLastShownItemIndex(t,n)),this.onShowItems(t,i);var s=m({},e,{items:this.initialItems,itemStates:new Array(n),itemHeights:new Array(n),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:i});return a("Initial state (created)",s),a("First shown item index",t),a("Last shown item index",i),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.onItemFirstRender){if(void 0===this.firstSeenItemIndex)for(var i=e;i<=t;)this.onItemFirstRender(i),i++;else{if(e<this.firstSeenItemIndex)for(var n=e;n<this.firstSeenItemIndex;)this.onItemFirstRender(n),n++;if(t>this.lastSeenItemIndex)for(var s=this.lastSeenItemIndex+1;s<=t;)this.onItemFirstRender(s),s++}this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,i=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,i),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onUnmount",value:function(){this.isMounted=!1,this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),i=t.items,n=t.firstShownItemIndex,s=t.lastShownItemIndex;n===e.firstShownItemIndex&&s===e.lastShownItemIndex&&i===e.items||this.updateItemHeights(n,s)}},{key:"updateItemHeights",value:function(e,t){var i=this.getState().firstShownItemIndex;void 0!==e&&(a("~ Measure item heights after layout ~"),this.itemHeights.update(e,t,i),h()&&a("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){h()&&(a("~ Item state changed ~"),a("Item",e),a("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),a("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,i=t[e];this.updateItemHeight(e);var n=t[e];i!==n&&(a("~ Item height changed ~"),a("Item",e),a("Previous height",i),a("New height",n),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,i){for(var n,s,r=0,o=!1,h=0;h<this.getItemsCount();){var d=this.itemHeights.get(h);if(void 0===d){a("Item ".concat(h," height hasn't been measured yet: render and redo layout")),void 0===n&&(n=h);var u=t-(i+r);s=Math.min(h+(this.getEstimatedItemsCount(u)-1),this.getItemsCount()-1),o=!0;break}if(r+=d,void 0===n&&i+r>e&&(a("First visible item index (including margin)",h),n=h),h<this.getItemsCount()-1&&(r+=this.getItemSpacing()),i+r>t){a("Last visible item index (including margin)",h),void 0!==n&&(s=h);break}h++}return void 0!==n&&void 0===s&&a("Last item index (is fully visible)",s=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(s<this.restoreScrollAfterPrepend.index&&(s=this.restoreScrollAfterPrepend.index),o=!1),{firstShownItemIndex:n,lastShownItemIndex:s,redoLayoutAfterRender:o}}},{key:"getInvisibleItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,i,n){if(!(n>e&&i<t))return this.getInvisibleItemIndexes();var s=this.getVisibleItemIndexes(e,t,i);return void 0===s.firstShownItemIndex?this.getInvisibleItemIndexes():s}},{key:"getBeforeItemsHeight",value:function(e,t){for(var i=0,n=0;n<e;)i+=this.itemHeights.get(n)||this.itemHeights.getAverage(),i+=this.getItemSpacing(),n++;return i}},{key:"getAfterItemsHeight",value:function(e,t){for(var i=0,n=t+1;n<this.getItemsCount();)i+=this.getItemSpacing(),i+=this.itemHeights.get(n)||this.itemHeights.getAverage(),n++;return i}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var i=this.getState().firstShownItemIndex;i<=this.getState().lastShownItemIndex;)i>=e&&i<=t||this.updateItemHeight(i),i++}},{key:"watchContainerElementTopCoordinate",value:function(){var e=this;!function t(){void 0!==e.top&&n(e.getContainerNode()).top!==e.top&&e.onUpdateShownItemIndexes({reason:"top offset change"});e.watchContainerElementTopCoordinateTimer=setTimeout(t,1e3)}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass){var e=this.getState().firstShownItemIndex,t=this.getState().lastShownItemIndex;return{firstShownItemIndex:e,lastShownItemIndex:t=Math.min(t+this.bypassBatchSize,this.getItemsCount()-1),redoLayoutAfterRender:t<this.getItemsCount()-1}}var i=n(this.getContainerNode()),o=i.top,a=i.height;void 0===this.top&&this.watchContainerElementTopCoordinate(),this.top=o;var h=function(){var e=r();return{top:s(),bottom:s()+e,height:e}}(),d=h.top,u=h.bottom;return this.latestLayoutScreenTopAfterMargin=d-this.getMargin(),this.latestLayoutScreenBottomAfterMargin=u+this.getMargin(),this.getItemIndexes(d-this.getMargin(),u+this.getMargin(),o,o+a)}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,i){0!==e.length&&(void 0===i&&(i=t.indexOf(e[0])),i<0||0!==i&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:i,screenTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateLayout",value:function(e){a("~ Update layout (".concat(e,") ~")),this.isUpdatingItemIndexes=!0,this.updateShownItemIndexesRecursive()}},{key:"updateItems",value:function(e){var t=this,i=this.getState().items,n=this.getState(),s=n.firstShownItemIndex,r=n.lastShownItemIndex,o=n.beforeItemsHeight,h=n.afterItemsHeight,d=n.itemStates,g=n.itemHeights;n.itemSpacing;a("~ Update items ~");var I=function(e,t){var i=-1,n=-1;e.length>0&&(i=t.indexOf(e[0]))>=0&&function(e,t,i){var n=0;for(;n<e.length;){if(t.length<=i+n||t[i+n]!==e[n])return!1;n++}return!0}(e,t,i)&&(n=i+e.length-1);if(i>=0&&n>=0)return{prependedItemsCount:i,appendedItemsCount:t.length-(n+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(i,e),l=I.prependedItemsCount,f=I.appendedItemsCount;l>0||f>0?(l>0&&(a("Prepended items count",l),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=l),g=new Array(l).concat(g),this.itemHeights.onPrepend(l),d&&(d=new Array(l).concat(d)),this.captureScroll(i,e,l)),f>0&&(a("Appended items count",f),g=g.concat(new Array(f)),d&&(d=d.concat(new Array(f)))),s+=l,r+=l,o+=this.itemHeights.getAverage()*l,h+=this.itemHeights.getAverage()*f):(a("Non-incremental items update"),a("Previous items",i),a("New items",e),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,this.itemHeights=new u(this.getContainerNode,e.length,this.getState),g=new Array(e.length),d=new Array(e.length),0===e.length?(s=void 0,r=void 0):(s=0,r=this.getLastShownItemIndex(s,e.length)),o=0,h=0),this.setState(m({},void 0,{items:e,itemStates:d,itemHeights:g,firstShownItemIndex:s,lastShownItemIndex:r,beforeItemsHeight:o,afterItemsHeight:h}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&g(d.prototype,l),f&&g(d,f),o}()});
 //# sourceMappingURL=virtual-scroller.js.map

commonjs/DOMVirtualScroller.js

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

commonjs/ReactVirtualScroller.js

@@ -80,2 +80,18 @@ "use strict";
 
+    _defineProperty(_assertThisInitialized(_this), "onItemFirstRender", function () {
+      var onItemFirstRender = _this.props.onItemFirstRender;
+
+      if (onItemFirstRender) {
+        onItemFirstRender.apply(void 0, arguments);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onStateChange", function () {
+      var onStateChange = _this.props.onStateChange;
+
+      if (onStateChange) {
+        onStateChange.apply(void 0, arguments);
+      }
+    });
+
     var _this$props = _this.props,
@@ -85,4 +101,2 @@ items = _this$props.items,
         estimatedItemHeight = _this$props.estimatedItemHeight,
-        onLastSeenItemIndexChange = _this$props.onLastSeenItemIndexChange,
-        onStateChange = _this$props.onStateChange,
         bypass = _this$props.bypass,
@@ -100,3 +114,3 @@ bypassBatchSize = _this$props.bypassBatchSize; // `this.previousItemsProperty` is only used for comparing
       bypassBatchSize: bypassBatchSize,
-      onLastSeenItemIndexChange: onLastSeenItemIndexChange,
+      onItemFirstRender: _this.onItemFirstRender,
       state: initialState,
@@ -114,5 +128,3 @@ getState: function getState() {
 
-          if (onStateChange) {
-            onStateChange(newState);
-          }
+          _this.onStateChange(newState);
         }
@@ -125,4 +137,8 @@ }
     return _this;
-  }
+  } // This proxy is required for cases when
+  // `onItemFirstRender` property changes.
+  // For example, if it's passed as:
+  // `<VirtualScroller onItemFirstRender={() => ...}/>`.
 
+
   _createClass(ReactVirtualScroller, [{
@@ -262,5 +278,5 @@ key: "shouldUseRefs",
           onStateChange = _this$props2.onStateChange,
-          onLastSeenItemIndexChange = _this$props2.onLastSeenItemIndexChange,
+          onItemFirstRender = _this$props2.onItemFirstRender,
           onMount = _this$props2.onMount,
-          rest = _objectWithoutProperties(_this$props2, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "initialState", "onStateChange", "onLastSeenItemIndexChange", "onMount"]);
+          rest = _objectWithoutProperties(_this$props2, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "initialState", "onStateChange", "onItemFirstRender", "onMount"]);
 
@@ -386,3 +402,3 @@ var _this$virtualScroller = this.virtualScroller.getState(),
   onMount: _propTypes["default"].func,
-  onLastSeenItemIndexChange: _propTypes["default"].func,
+  onItemFirstRender: _propTypes["default"].func,
   onStateChange: _propTypes["default"].func,
@@ -389,0 +405,0 @@ initialState: _propTypes["default"].shape({

commonjs/VirtualScroller.js

@@ -237,3 +237,3 @@ "use strict";
     var estimatedItemHeight = options.estimatedItemHeight,
-        onLastSeenItemIndexChange = options.onLastSeenItemIndexChange,
+        onItemFirstRender = options.onItemFirstRender,
         state = options.state;
@@ -262,5 +262,4 @@ (0, _log["default"])('~ Initialize ~'); // If `state` is passed then use `items` from `state`
 
-    if (onLastSeenItemIndexChange) {
-      this.onLastSeenItemIndexChange = onLastSeenItemIndexChange;
-      this.lastSeenItemIndex = -1;
+    if (onItemFirstRender) {
+      this.onItemFirstRender = onItemFirstRender;
     } // Remove accidental text nodes from container.
@@ -409,8 +408,32 @@ // Also guards against cases when someone accidentally tries
     value: function onShowItems(firstShownItemIndex, lastShownItemIndex) {
-      if (this.onLastSeenItemIndexChange) {
-        if (lastShownItemIndex > this.lastSeenItemIndex) {
-          var previousLastSeenItemIndex = this.lastSeenItemIndex;
-          this.lastSeenItemIndex = lastShownItemIndex;
-          this.onLastSeenItemIndexChange(this.lastSeenItemIndex, previousLastSeenItemIndex);
+      if (this.onItemFirstRender) {
+        if (this.firstSeenItemIndex === undefined) {
+          var i = firstShownItemIndex;
+
+          while (i <= lastShownItemIndex) {
+            this.onItemFirstRender(i);
+            i++;
+          }
+        } else {
+          if (firstShownItemIndex < this.firstSeenItemIndex) {
+            var _i = firstShownItemIndex;
+
+            while (_i < this.firstSeenItemIndex) {
+              this.onItemFirstRender(_i);
+              _i++;
+            }
+          }
+
+          if (lastShownItemIndex > this.lastSeenItemIndex) {
+            var _i2 = this.lastSeenItemIndex + 1;
+
+            while (_i2 <= lastShownItemIndex) {
+              this.onItemFirstRender(_i2);
+              _i2++;
+            }
+          }
         }
+
+        this.firstSeenItemIndex = firstShownItemIndex;
+        this.lastSeenItemIndex = lastShownItemIndex;
       }
@@ -928,2 +951,7 @@ }
           (0, _log["default"])('Prepended items count', prependedItemsCount);
+
+          if (this.firstSeenItemIndex !== undefined) {
+            this.firstSeenItemIndex += prependedItemsCount;
+          }
+
           itemHeights = new Array(prependedItemsCount).concat(itemHeights);
@@ -958,2 +986,4 @@ this.itemHeights.onPrepend(prependedItemsCount);
         (0, _log["default"])('New items', newItems);
+        this.firstSeenItemIndex = undefined;
+        this.lastSeenItemIndex = undefined;
         this.itemHeights = new _ItemHeights["default"](this.getContainerNode, newItems.length, this.getState);
@@ -960,0 +990,0 @@ itemHeights = new Array(newItems.length);

modules/DOMVirtualScroller.js

@@ -128,7 +128,2 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
   }, {
-    key: "onLastSeenItemIndexChange",
-    value: function onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex) {
-      this.virtualScroller.onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex);
-    }
-  }, {
     key: "updateItems",
@@ -135,0 +130,0 @@ value: function updateItems(newItems, options) {

modules/ReactVirtualScroller.js

@@ -65,2 +65,18 @@ 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); }
 
+    _defineProperty(_assertThisInitialized(_this), "onItemFirstRender", function () {
+      var onItemFirstRender = _this.props.onItemFirstRender;
+
+      if (onItemFirstRender) {
+        onItemFirstRender.apply(void 0, arguments);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onStateChange", function () {
+      var onStateChange = _this.props.onStateChange;
+
+      if (onStateChange) {
+        onStateChange.apply(void 0, arguments);
+      }
+    });
+
     var _this$props = _this.props,
@@ -70,4 +86,2 @@ items = _this$props.items,
         estimatedItemHeight = _this$props.estimatedItemHeight,
-        onLastSeenItemIndexChange = _this$props.onLastSeenItemIndexChange,
-        onStateChange = _this$props.onStateChange,
         bypass = _this$props.bypass,
@@ -85,3 +99,3 @@ bypassBatchSize = _this$props.bypassBatchSize; // `this.previousItemsProperty` is only used for comparing
       bypassBatchSize: bypassBatchSize,
-      onLastSeenItemIndexChange: onLastSeenItemIndexChange,
+      onItemFirstRender: _this.onItemFirstRender,
       state: initialState,
@@ -99,5 +113,3 @@ getState: function getState() {
 
-          if (onStateChange) {
-            onStateChange(newState);
-          }
+          _this.onStateChange(newState);
         }
@@ -110,4 +122,8 @@ }
     return _this;
-  }
+  } // This proxy is required for cases when
+  // `onItemFirstRender` property changes.
+  // For example, if it's passed as:
+  // `<VirtualScroller onItemFirstRender={() => ...}/>`.
 
+
   _createClass(ReactVirtualScroller, [{
@@ -247,5 +263,5 @@ key: "shouldUseRefs",
           onStateChange = _this$props2.onStateChange,
-          onLastSeenItemIndexChange = _this$props2.onLastSeenItemIndexChange,
+          onItemFirstRender = _this$props2.onItemFirstRender,
           onMount = _this$props2.onMount,
-          rest = _objectWithoutProperties(_this$props2, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "initialState", "onStateChange", "onLastSeenItemIndexChange", "onMount"]);
+          rest = _objectWithoutProperties(_this$props2, ["itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "bypassBatchSize", "initialState", "onStateChange", "onItemFirstRender", "onMount"]);
 
@@ -369,3 +385,3 @@ var _this$virtualScroller = this.virtualScroller.getState(),
   onMount: PropTypes.func,
-  onLastSeenItemIndexChange: PropTypes.func,
+  onItemFirstRender: PropTypes.func,
   onStateChange: PropTypes.func,
@@ -372,0 +388,0 @@ initialState: PropTypes.shape({

modules/VirtualScroller.js

@@ -221,3 +221,3 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
     var estimatedItemHeight = options.estimatedItemHeight,
-        onLastSeenItemIndexChange = options.onLastSeenItemIndexChange,
+        onItemFirstRender = options.onItemFirstRender,
         state = options.state;
@@ -246,5 +246,4 @@ log('~ Initialize ~'); // If `state` is passed then use `items` from `state`
 
-    if (onLastSeenItemIndexChange) {
-      this.onLastSeenItemIndexChange = onLastSeenItemIndexChange;
-      this.lastSeenItemIndex = -1;
+    if (onItemFirstRender) {
+      this.onItemFirstRender = onItemFirstRender;
     } // Remove accidental text nodes from container.
@@ -393,8 +392,32 @@ // Also guards against cases when someone accidentally tries
     value: function onShowItems(firstShownItemIndex, lastShownItemIndex) {
-      if (this.onLastSeenItemIndexChange) {
-        if (lastShownItemIndex > this.lastSeenItemIndex) {
-          var previousLastSeenItemIndex = this.lastSeenItemIndex;
-          this.lastSeenItemIndex = lastShownItemIndex;
-          this.onLastSeenItemIndexChange(this.lastSeenItemIndex, previousLastSeenItemIndex);
+      if (this.onItemFirstRender) {
+        if (this.firstSeenItemIndex === undefined) {
+          var i = firstShownItemIndex;
+
+          while (i <= lastShownItemIndex) {
+            this.onItemFirstRender(i);
+            i++;
+          }
+        } else {
+          if (firstShownItemIndex < this.firstSeenItemIndex) {
+            var _i = firstShownItemIndex;
+
+            while (_i < this.firstSeenItemIndex) {
+              this.onItemFirstRender(_i);
+              _i++;
+            }
+          }
+
+          if (lastShownItemIndex > this.lastSeenItemIndex) {
+            var _i2 = this.lastSeenItemIndex + 1;
+
+            while (_i2 <= lastShownItemIndex) {
+              this.onItemFirstRender(_i2);
+              _i2++;
+            }
+          }
         }
+
+        this.firstSeenItemIndex = firstShownItemIndex;
+        this.lastSeenItemIndex = lastShownItemIndex;
       }
@@ -912,2 +935,7 @@ }
           log('Prepended items count', prependedItemsCount);
+
+          if (this.firstSeenItemIndex !== undefined) {
+            this.firstSeenItemIndex += prependedItemsCount;
+          }
+
           itemHeights = new Array(prependedItemsCount).concat(itemHeights);
@@ -942,2 +970,4 @@ this.itemHeights.onPrepend(prependedItemsCount);
         log('New items', newItems);
+        this.firstSeenItemIndex = undefined;
+        this.lastSeenItemIndex = undefined;
         this.itemHeights = new ItemHeights(this.getContainerNode, newItems.length, this.getState);
@@ -944,0 +974,0 @@ itemHeights = new Array(newItems.length);

package.json

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

README.md

 # VirtualScroller
 
-An open-source implementation of Twitter's [`VirtualScroller`](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3) component.
+An open-source implementation of Twitter's [`VirtualScroller`](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3) component: a component for efficiently rendering large lists of *variable height* items. Automatically measures items as they're rendered and supports items of variable height. Also includes a [React](#react) component for those who're using React.
 
-Also includes a [React](#react) component for those who're using React.
-
 ## Demo
@@ -79,3 +77,3 @@
 * `onStateChange(newState, prevState)` — Is called whenever `VirtualScroller` `state` is updated (including setting the initial `state`) if `getState()` and `setState()` properties aren't defined.
-* `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).
+* `onItemFirstRender(i)` — Is called for each item the first time it's rendered. 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 may only preprocess the items as they're being rendered.
 <!-- * `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. -->
@@ -163,3 +161,2 @@
 * `onItemStateChange(i, itemState)` — A proxy for the corresponding `VirtualScroller` method.
-* `onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex)` — A proxy for the corresponding `VirtualScroller` method.
 
@@ -230,3 +227,3 @@ Additional `options`:
 * `onMount` — (optional) Is called after `<VirtualScroller/>` component has been mounted and before `VirtualScroller.onMount()` is called. Can be used in advanced cases: for example, to restore page scroll Y position for the corresponding `VirtualScroller` `state` on "Back" navigation.
-* `onLastSeenItemIndexChange(newLastSeenItemIndex, previousLastSeenItemIndex)` — (optional) The `onLastSeenItemIndexChange` option of `VirtualScroller` class.
+* `onItemFirstRender(i)` — (optional) The `onItemFirstRender` option of `VirtualScroller` class.
 <!-- * `bypass` — (optional) The `bypass` option of `VirtualScroller` class. -->
@@ -281,2 +278,6 @@ * `initialState` — (optional) The initial state for `VirtualScroller`. For example, can be used to quicky restore the list on "Back" navigation.
 
+### Images
+
+`VirtualScroller` measures item heights as soon as they've rendered and later uses those measurements to determine which items should be rendered when the user scrolls. This means that things like `<img/>`s require special handling to prevent them from changing their size. For example, when rendering a simple `<img src="..."/>` first it renders an element with zero width and height and only after the image file header has been parsed does it resize itself to the actual image's width and height. When used inside `VirtualScroller` items such images would result in scroll position "jumping" as the user scrolls. To avoid that, any `<img/>`s rendered inside `VirtualScroller` items must either have their `width` and `height` set explicitly or have their [aspect ratio](https://www.w3schools.com/howto/howto_css_aspect_ratio.asp) set explicitly by making them `position: absolute` and wrapping them in a parent `<div/>` having `position: relative` and `padding-bottom: ${100/aspectRatio}%`.
+
 ### Margin collapse
@@ -283,0 +284,0 @@

source/DOMVirtualScroller.js

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

source/ReactVirtualScroller.js

@@ -23,3 +23,3 @@ import React from 'react'
 		onMount: PropTypes.func,
-		onLastSeenItemIndexChange: PropTypes.func,
+		onItemFirstRender: PropTypes.func,
 		onStateChange: PropTypes.func,
@@ -70,4 +70,2 @@ initialState: PropTypes.shape({
 			estimatedItemHeight,
-			onLastSeenItemIndexChange,
-			onStateChange,
 			bypass,
@@ -87,3 +85,3 @@ bypassBatchSize
 				bypassBatchSize,
-				onLastSeenItemIndexChange,
+				onItemFirstRender: this.onItemFirstRender,
 				state: initialState,
@@ -98,5 +96,3 @@ getState: () => this.state,
 						this.state = newState
-						if (onStateChange) {
-							onStateChange(newState)
-						}
+						this.onStateChange(newState)
 					}
@@ -110,2 +106,24 @@ }
 
+	// This proxy is required for cases when
+	// `onItemFirstRender` property changes.
+	// For example, if it's passed as:
+	// `<VirtualScroller onItemFirstRender={() => ...}/>`.
+	onItemFirstRender = (...args) => {
+		const { onItemFirstRender } = this.props
+		if (onItemFirstRender) {
+			onItemFirstRender(...args)
+		}
+	}
+
+	// This proxy is required for cases when
+	// `onStateChange` property changes.
+	// For example, if it's passed as:
+	// `<VirtualScroller onStateChange={() => ...}/>`.
+	onStateChange = (...args) => {
+		const { onStateChange } = this.props
+		if (onStateChange) {
+			onStateChange(...args)
+		}
+	}
+
 	shouldUseRefs() {
@@ -216,3 +234,3 @@ // There's no way to detect if `ref` can be passed to `component`:
 			onStateChange,
-			onLastSeenItemIndexChange,
+			onItemFirstRender,
 			onMount,
@@ -219,0 +237,0 @@ ...rest

source/VirtualScroller.js

@@ -33,3 +33,3 @@ import shallowEqual from './shallowEqual'
 			// getItemState,
-			onLastSeenItemIndexChange,
+			onItemFirstRender,
 			state
@@ -65,5 +65,4 @@ } = options
 
-		if (onLastSeenItemIndexChange) {
-			this.onLastSeenItemIndexChange = onLastSeenItemIndexChange
-			this.lastSeenItemIndex = -1
+		if (onItemFirstRender) {
+			this.onItemFirstRender = onItemFirstRender
 		}
@@ -200,8 +199,27 @@
 	onShowItems(firstShownItemIndex, lastShownItemIndex) {
-		if (this.onLastSeenItemIndexChange) {
-			if (lastShownItemIndex > this.lastSeenItemIndex) {
-				const previousLastSeenItemIndex = this.lastSeenItemIndex
-				this.lastSeenItemIndex = lastShownItemIndex
-				this.onLastSeenItemIndexChange(this.lastSeenItemIndex, previousLastSeenItemIndex)
+		if (this.onItemFirstRender) {
+			if (this.firstSeenItemIndex === undefined) {
+				let i = firstShownItemIndex
+				while (i <= lastShownItemIndex) {
+					this.onItemFirstRender(i)
+					i++
+				}
+			} else {
+				if (firstShownItemIndex < this.firstSeenItemIndex) {
+					let i = firstShownItemIndex
+					while (i < this.firstSeenItemIndex) {
+						this.onItemFirstRender(i)
+						i++
+					}
+				}
+				if (lastShownItemIndex > this.lastSeenItemIndex) {
+					let i = this.lastSeenItemIndex + 1
+					while (i <= lastShownItemIndex) {
+						this.onItemFirstRender(i)
+						i++
+					}
+				}
 			}
+			this.firstSeenItemIndex = firstShownItemIndex
+			this.lastSeenItemIndex = lastShownItemIndex
 		}
@@ -813,2 +831,5 @@ }
 				log('Prepended items count', prependedItemsCount)
+				if (this.firstSeenItemIndex !== undefined) {
+					this.firstSeenItemIndex += prependedItemsCount
+				}
 				itemHeights = new Array(prependedItemsCount).concat(itemHeights)
@@ -842,2 +863,4 @@ this.itemHeights.onPrepend(prependedItemsCount)
 			log('New items', newItems)
+			this.firstSeenItemIndex = undefined
+			this.lastSeenItemIndex = undefined
 			this.itemHeights = new ItemHeights(this.getContainerNode, newItems.length, this.getState)
@@ -844,0 +867,0 @@ itemHeights = new Array(newItems.length)

No alert changes

Improved metrics

Total package byte prevSize

923930

increased by1.22%

Number of package files

61

increased by1.67%

Lines of code

5774

increased by1.73%

Number of lines in readme file

365

increased by0.27%

No dependency changes