virtual-scroller - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

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

CHANGELOG.md

 <!-- `virtual-scroller`: in `.updateItems()` handle a case when `items.length` is the same, in which case find different items and if those items are rendered then maybe update them on screen and update their height, if the items are past rendered then maybe just discard all item heights past rendered, if the items are before rendered then maybe ignore and it will jump on scroll up which is kinda acceptable. -->
 
+1.2.0 / 27.02.2020
+===================
+
+* Added `onItemUnmount` option on DOM `VirtualScroller`: it's called when a `VirtualScroller` item DOM `Element` is unmounted. Can be used to add DOM `Element` ["pooling"](https://github.com/ChrisAntaki/dom-pool#what-performance-gains-can-i-expect).
+
+* Deprecated `onMount` option.
+
 1.1.0 / 23.02.2020
@@ -4,0 +11,0 @@ ===================

commonjs/DOMVirtualScroller.js

@@ -66,5 +66,3 @@ "use strict";
 
-            var item = _this.container.childNodes[_i - prevState.firstShownItemIndex];
-
-            _this.container.removeChild(item);
+            _this.unmountItem(_this.container.childNodes[_i - prevState.firstShownItemIndex]);
           }
@@ -78,3 +76,3 @@
         while (_this.container.firstChild) {
-          _this.container.removeChild(_this.container.firstChild);
+          _this.unmountItem(_this.container.firstChild);
         }
@@ -96,3 +94,3 @@ } // Add newly visible items to the DOM.
         } else {
-          var _item = _this.renderItem(items[i]);
+          var item = _this.renderItem(items[i]);
 
@@ -102,7 +100,7 @@ if (shouldPrependItems) {
 
-            _this.container.insertBefore(_item, prependBeforeItemElement);
+            _this.container.insertBefore(item, prependBeforeItemElement);
           } else {
             (0, _log["default"])('Append item', i); // Append `item` to `this.container`.
 
-            _this.container.appendChild(_item);
+            _this.container.appendChild(item);
           }
@@ -123,4 +121,6 @@ }
     var onMount = options.onMount,
-        restOptions = _objectWithoutProperties(options, ["onMount"]);
+        onItemUnmount = options.onItemUnmount,
+        restOptions = _objectWithoutProperties(options, ["onMount", "onItemUnmount"]);
 
+    this.onItemUnmount = onItemUnmount;
     this.virtualScroller = new _VirtualScroller["default"](function () {
@@ -130,3 +130,4 @@ return _this.container;
       onStateChange: this.onStateChange
-    }));
+    })); // `onMount()` option is deprecated due to no longer being used.
+    // If someone thinks there's a valid use case for it, create an issue.
 
@@ -141,2 +142,11 @@ if (onMount) {
   _createClass(DOMVirtualScroller, [{
+    key: "unmountItem",
+    value: function unmountItem(itemElement) {
+      this.container.removeChild(itemElement);
+
+      if (this.onItemUnmount) {
+        this.onItemUnmount(itemElement);
+      }
+    }
+  }, {
     key: "onItemHeightChange",
@@ -143,0 +153,0 @@ value: function onItemHeightChange(i) {

commonjs/ReactVirtualScroller.js

@@ -286,5 +286,4 @@ "use strict";
     value: function componentDidMount() {
-      var onMount = this.props.onMount; // `onMount()` should be called before `VirtualScroller`'s
-      // in order for it to be able to be used for restoring
-      // page scroll Y position.
+      var onMount = this.props.onMount; // `onMount()` option is deprecated due to no longer being used.
+      // If someone thinks there's a valid use case for it, create an issue.
 
@@ -291,0 +290,0 @@ if (onMount) {

modules/DOMVirtualScroller.js

@@ -55,5 +55,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 item = _this.container.childNodes[_i - prevState.firstShownItemIndex];
-
-            _this.container.removeChild(item);
+            _this.unmountItem(_this.container.childNodes[_i - prevState.firstShownItemIndex]);
           }
@@ -67,3 +65,3 @@
         while (_this.container.firstChild) {
-          _this.container.removeChild(_this.container.firstChild);
+          _this.unmountItem(_this.container.firstChild);
         }
@@ -85,3 +83,3 @@ } // Add newly visible items to the DOM.
         } else {
-          var _item = _this.renderItem(items[i]);
+          var item = _this.renderItem(items[i]);
 
@@ -91,7 +89,7 @@ if (shouldPrependItems) {
 
-            _this.container.insertBefore(_item, prependBeforeItemElement);
+            _this.container.insertBefore(item, prependBeforeItemElement);
           } else {
             log('Append item', i); // Append `item` to `this.container`.
 
-            _this.container.appendChild(_item);
+            _this.container.appendChild(item);
           }
@@ -112,4 +110,6 @@ }
     var onMount = options.onMount,
-        restOptions = _objectWithoutProperties(options, ["onMount"]);
+        onItemUnmount = options.onItemUnmount,
+        restOptions = _objectWithoutProperties(options, ["onMount", "onItemUnmount"]);
 
+    this.onItemUnmount = onItemUnmount;
     this.virtualScroller = new VirtualScroller(function () {
@@ -119,3 +119,4 @@ return _this.container;
       onStateChange: this.onStateChange
-    }));
+    })); // `onMount()` option is deprecated due to no longer being used.
+    // If someone thinks there's a valid use case for it, create an issue.
 
@@ -130,2 +131,11 @@ if (onMount) {
   _createClass(DOMVirtualScroller, [{
+    key: "unmountItem",
+    value: function unmountItem(itemElement) {
+      this.container.removeChild(itemElement);
+
+      if (this.onItemUnmount) {
+        this.onItemUnmount(itemElement);
+      }
+    }
+  }, {
     key: "onItemHeightChange",
@@ -132,0 +142,0 @@ value: function onItemHeightChange(i) {

modules/ReactVirtualScroller.js

@@ -270,5 +270,4 @@ 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); }
     value: function componentDidMount() {
-      var onMount = this.props.onMount; // `onMount()` should be called before `VirtualScroller`'s
-      // in order for it to be able to be used for restoring
-      // page scroll Y position.
+      var onMount = this.props.onMount; // `onMount()` option is deprecated due to no longer being used.
+      // If someone thinks there's a valid use case for it, create an issue.
 
@@ -275,0 +274,0 @@ if (onMount) {

package.json

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

README.md

@@ -163,2 +163,8 @@ # VirtualScroller
 
+Additional `options`:
+
+<!-- * `onMount()` — Is called before `VirtualScroller.onMount()` is called. -->
+
+* `onItemUnmount(itemElement)` — Is called after a `VirtualScroller` item DOM `Element` is unmounted. Can be used to add DOM `Element` ["pooling"](https://github.com/ChrisAntaki/dom-pool#what-performance-gains-can-i-expect).
+
 `VirtualScroller` instance provides methods:
@@ -171,6 +177,2 @@
 
-Additional `options`:
-
-* `onMount` — 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.
-
 ### React
@@ -240,3 +242,3 @@
 * `measureItemsBatchSize: number` — (optional) The `measureItemsBatchSize` option of `VirtualScroller`.
-* `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.
+<!-- * `onMount()` — (optional) Is called after `<VirtualScroller/>` component has been mounted and before `VirtualScroller.onMount()` is called. -->
 * `onItemFirstRender(i)` — (optional) The `onItemFirstRender` option of `VirtualScroller` class.
@@ -243,0 +245,0 @@ <!-- * `shouldUpdateLayoutOnWindowResize(event)`  — (optional) The `shouldUpdateLayoutOnWindowResize` option of `VirtualScroller` class. -->

source/DOMVirtualScroller.js

@@ -9,3 +9,8 @@ import VirtualScroller from './VirtualScroller'
     this.renderItem = renderItem
-    const { onMount, ...restOptions } = options
+    const {
+      onMount,
+      onItemUnmount,
+      ...restOptions
+    } = options
+    this.onItemUnmount = onItemUnmount
     this.virtualScroller = new VirtualScroller(
@@ -19,2 +24,4 @@ () => this.container,
     )
+    // `onMount()` option is deprecated due to no longer being used.
+    // If someone thinks there's a valid use case for it, create an issue.
     if (onMount) {
@@ -54,4 +61,3 @@ onMount()
           // The item is no longer visible so remove it from the DOM.
-          const item = this.container.childNodes[i - prevState.firstShownItemIndex]
-          this.container.removeChild(item)
+          this.unmountItem(this.container.childNodes[i - prevState.firstShownItemIndex])
         }
@@ -63,3 +69,3 @@ i--
       while (this.container.firstChild) {
-        this.container.removeChild(this.container.firstChild)
+        this.unmountItem(this.container.firstChild)
       }
@@ -98,2 +104,9 @@ }
 
+  unmountItem(itemElement) {
+    this.container.removeChild(itemElement)
+    if (this.onItemUnmount) {
+      this.onItemUnmount(itemElement)
+    }
+  }
+
   onItemHeightChange(i) {
@@ -100,0 +113,0 @@ this.virtualScroller.onItemHeightChange(i)

source/ReactVirtualScroller.js

@@ -260,5 +260,4 @@ import React from 'react'
 		const { onMount } = this.props
-		// `onMount()` should be called before `VirtualScroller`'s
-		// in order for it to be able to be used for restoring
-		// page scroll Y position.
+		// `onMount()` option is deprecated due to no longer being used.
+		// If someone thinks there's a valid use case for it, create an issue.
 		if (onMount) {
@@ -265,0 +264,0 @@ onMount()

No alert changes

Improved metrics

Total package byte prevSize

1130307

increased by0.28%

Lines of code

7206

increased by0.4%

Number of lines in readme file

392

increased by0.51%

No dependency changes