virtual-scroller - npm Package Compare versions

Comparing version 1.6.4 to 1.6.5

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";e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var n="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};for(var i,r=(function(e){(function(){var t,n,i,r,o,s;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(e.exports=function(){return(t()-o)/1e6},n=process.hrtime,r=(t=function(){var e;return 1e9*(e=n())[0]+e[1]})(),s=1e9*process.uptime(),o=r-s):Date.now?(e.exports=function(){return Date.now()-i},i=Date.now()):(e.exports=function(){return(new Date).getTime()-i},i=(new Date).getTime())}).call(n)}(i={exports:{}},i.exports),i.exports),o="undefined"==typeof window?n:window,s=["moz","webkit"],a="AnimationFrame",l=o["request"+a],u=o["cancel"+a]||o["cancelRequest"+a],h=0;!l&&h<s.length;h++)l=o[s[h]+"Request"+a],u=o[s[h]+"Cancel"+a]||o[s[h]+"CancelRequest"+a];if(!l||!u){var d=0,c=0,m=[];l=function(e){if(0===m.length){var t=r(),n=Math.max(0,1e3/60-(t-d));d=n+t,setTimeout(function(){var e=m.slice(0);m.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(d)}catch(e){setTimeout(function(){throw e},0)}},Math.round(n))}return m.push({handle:++c,callback:e,cancelled:!1}),c},u=function(e){for(var t=0;t<m.length;t++)m[t].handle===e&&(m[t].cancelled=!0)}}var f=function(e){return l.call(o,e)};f.cancel=function(){u.apply(o,arguments)},f.polyfill=function(e){e||(e=o),e.requestAnimationFrame=l,e.cancelAnimationFrame=u};var g=f.cancel;function p(e,t){var n=Date.now(),i=f(function r(){Date.now()-n>=t?e():i=f(r)});return{clear:function(){return g(i)}}}function I(e){e&&e.clear()}function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function S(e,t){return!t||"object"!==v(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function y(e){return(y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function b(e,t){return(b=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function w(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}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 x(e,t,n){return t&&C(e.prototype,t),n&&C(e,n),e}var O=function(){function e(t){w(this,e),this.element=t}return x(e,[{key:"getScrollY",value:function(){return this.element.scrollTop}},{key:"scrollTo",value:function(e,t){this.element.scrollTo(e,t)}},{key:"getWidth",value:function(){return this.element.offsetWidth}},{key:"getHeight",value:function(){return this.element.offsetHeight}},{key:"getContentHeight",value:function(){return this.element.scrollHeight}},{key:"getTopOffset",value:function(e){var t=this.element.getBoundingClientRect().top,n=this.element.clientTop;return e.getBoundingClientRect().top-t+this.getScrollY()-n}},{key:"addScrollListener",value:function(e){var t=this;return this.element.addEventListener("scroll",e),function(){return t.element.removeEventListener("scroll",e)}}},{key:"onResize",value:function(e){var t,n=this;if("undefined"!=typeof ResizeObserver){var i=new ResizeObserver(function(t){var n=t,i=Array.isArray(n),r=0;for(n=i?n:n[Symbol.iterator]();;){if(i){if(r>=n.length)break;n[r++]}else{if((r=n.next()).done)break;r.value}return e()}});i.observe(this.element),t=function(){return i.unobserve(n.element)}}var r=(new R).onResize(e);return function(){t&&t(),r()}}}]),e}(),R=function(e){function t(){return w(this,t),S(this,y(t).call(this,window))}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&&b(e,t)}(t,O),x(t,[{key:"getScrollY",value:function(){return window.pageYOffset}},{key:"getWidth",value:function(){return window.innerWidth}},{key:"getHeight",value:function(){return window.innerHeight}},{key:"getContentHeight",value:function(){return document.documentElement.scrollHeight}},{key:"getTopOffset",value:function(e){var t=document.clientTop||document.body.clientTop||0;return e.getBoundingClientRect().top+this.getScrollY()-t}},{key:"onResize",value:function(e){return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}}]),t}();function H(e){return e.toFixed(2)+"px"}var P="[virtual-scroller] It looks like you're using Internet Explorer which doesn't support CSS variables required for a <tbody/> container. VirtualScroller has been switched into \"bypass\" mode (render all items). See: https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1";function k(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(A()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,k(["[virtual-scroller]"].concat(n)))}}function A(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function T(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.getContainerElement=t,this.getState=n,this.initialize()}var t,n,i;return t=e,(n=[{key:"initialize",value:function(){this.reset(),this.getState()&&this.onStateUpdate()}},{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onStateUpdate",value:function(){for(var e=0;e<this.getState().itemHeights.length;){if(void 0===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.getContainerElement();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"update",value:function(e,t,n){void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,r=this.lastMeasuredItemIndex,o=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this._set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,o||(this.firstMeasuredItemIndex=s,o=!0)),(void 0===r||s>r)&&(void 0!==r&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{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)}}])&&T(t.prototype,n),i&&T(t,i),e}();function E(e){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})(e)}var U=Object.prototype.hasOwnProperty;function B(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function z(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){j(e,t,n[t])})}return e}function _(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 j(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var V=250,W=100,q=function(){function e(t,n){var i,r,o,s=this,a=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),j(this,"updateLayout",function(){return s.onUpdateShownItemIndexes({reason:"manual"})}),j(this,"onScroll",function(){return s.onUpdateShownItemIndexes({reason:"scroll"})}),j(this,"restoreScrollPosition",function(){var e=s.getState().scrollY;void 0!==e&&s.scrollTo(0,e)}),j(this,"updateScrollPosition",function(){return s.getState().scrollY=s.getScrollY()}),j(this,"layout",function(){return s.updateLayout()}),j(this,"onResize",(i=function(e){if(s.isRendered){var t=s.shouldUpdateLayoutOnScrollableContainerResize(e);if("UPDATE_LAYOUT"===t){M("~ Scrollable container size changed, re-measure item heights. ~"),s.resized=!0;var n=s.getInitialLayoutState();M("Reset state to",n),s.setState(n)}else"UPDATE_SHOWN_ITEM_INDEXES"===t&&s.onUpdateShownItemIndexes({reason:"resize"})}},r=V,function(){for(var e=this,t=arguments.length,n=new Array(t),s=0;s<t;s++)n[s]=arguments[s];clearTimeout(o),o=setTimeout(function(){return i.apply(e,n)},r)})),j(this,"willUpdateState",function(e,t){if(t&&s.preserveScrollPositionOnPrependItems){s.preserveScrollPositionOnPrependItems=void 0;var n=t.items,i=e.items,r=N(n,i);r&&s.captureScroll(n,i,r.prependedItemsCount)}}),j(this,"didUpdateState",function(e){var t=s.getState();if(s.onStateChange&&(function(e,t){if(B(e,t))return!0;if("object"!==E(e)||null===e||"object"!==E(t)||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var r=0;r<n.length;r++)if(!U.call(t,n[r])||!B(e[n[r]],t[n[r]]))return!1;return!0}(t,e)||s.onStateChange(t,e)),e&&s.isRendered){M("~ Rendered ~"),t.firstShownItemIndex===e.firstShownItemIndex&&t.lastShownItemIndex===e.lastShownItemIndex&&t.items===e.items||s.onRendered();var n=e.items,i=t.items;if(i!==n){var r=N(n,i);if(r){var o=r.prependedItemsCount;r.appendedItemsCount;o>0&&(s.itemHeights.onPrepend(o),void 0!==s.firstSeenItemIndex&&(s.firstSeenItemIndex+=o,s.lastSeenItemIndex+=o))}else s.itemHeights.initialize(),s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0;return s.updateSeenItemIndexes(),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"update items",force:!0})}return s.resized?(s.resized=void 0,M("~ Rendered (resize) ~"),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"resize"})):s.multiRenderLayout?s.onMultiRenderLayoutRendered():void 0}}),j(this,"updateShownItemIndexes",function(){var e=s.getShownItemIndexes(),t=e.firstShownItemIndex,n=e.lastShownItemIndex,i=e.redoLayoutAfterRender,r=s.getState().itemHeights,o=s.getBeforeItemsHeight(t,n,r),a=s.getAfterItemsHeight(t,n,r);s.updateWillBeHiddenItemHeightsAndState(t,n),M("~ Layout results "+(s.bypass?"(bypass) ":"")+"~"),s._getColumnsCount&&M("Columns count",s.getColumnsCount()),M("First shown item index",t),M("Last shown item index",n),M("Before items height",o),M("After items height (actual or estimated)",a),M("Average item height (calculated on previous render)",s.itemHeights.getAverage()),A()&&(M("Item heights",s.getState().itemHeights.slice()),M("Item states",s.getState().itemStates.slice())),i&&(M("Schedule a re-layout after the upcoming rerender"),s.redoLayoutAfterRender=!0),void 0!==s.firstSeenItemIndex&&(t>s.lastSeenItemIndex+1||n<s.firstSeenItemIndex-1)&&(s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.onBeforeShowItems(s.getState().items,t,n,s.firstSeenItemIndex,s.lastSeenItemIndex),s.setState({firstShownItemIndex:t,lastShownItemIndex:n,beforeItemsHeight:o,afterItemsHeight:a})}),j(this,"updateShownItemIndexesRecursive",function(){s.multiRenderLayout=!0,s.updateShownItemIndexes()}),j(this,"restoreScroll",function(){var e=s.restoreScrollAfterPrepend,t=e.index,n=e.visibleAreaTop;s.restoreScrollAfterPrepend=void 0;var i=s.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(M("Restore scroll position: scroll by",i),s.scrollTo(0,s.getScrollY()+i))}),j(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==s.getItemsCount()&&!s.multiRenderLayout){if(I(s.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getScrollY()<s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getState().firstShownItemIndex>0||void 0!==s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getScrollY()+s.scrollableContainer.getHeight()>s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getState().lastShownItemIndex<s.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 s.onUserStopsScrollingTimeout=p(s.onUserStoppedScrolling,W)}M("~ Update layout (on ".concat(t,") ~")),s.updateShownItemIndexesRecursive()}}),j(this,"onUserStoppedScrolling",function(){s.isRendered&&s.updateLayout("stopped scrolling")});var l=a.getState,u=a.setState,h=a.onStateChange,d=a.customState,c=a.preserveScrollPositionAtBottomOnMount,m=a.shouldUpdateLayoutOnWindowResize,f=a.measureItemsBatchSize,g=a.getScrollableContainer,v=a.getColumnsCount,S=a.tbody,y=a.bypass,b=a.estimatedItemHeight,w=a.onItemInitialRender,C=a.onItemFirstRender,x=a.scrollableContainer,H=a.preserveScrollPositionOfTheBottomOfTheListOnMount,k=a.state;M("~ Initialize ~"),k&&(n=k.items),!x&&g&&(x=g()),x?this.scrollableContainer=new O(x):"undefined"!=typeof window&&(this.scrollableContainer=new R),S&&(M("~ <tbody/> detected ~"),this.tbody=!0,"undefined"!=typeof window&&window.document.documentMode&&(M("~ <tbody/> not supported ~"),"undefined"!=typeof window?setTimeout(function(){throw new Error(P)},0):console.error(P),y=!0)),y&&M('~ "bypass" mode ~'),this.bypass=y,this.initialItems=n,this.estimatedItemHeight=b,this.onStateChange=h,this._shouldUpdateLayoutOnWindowResize=m,this.measureItemsBatchSize=void 0===f?50:f,this._getColumnsCount=v,w?this.onItemFirstRender=w:C&&(this.onItemFirstRender=function(e){console.warn("[virtual-scroller] `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.");var t=s.getState().items.indexOf(e);t>=0&&C(t)}),u?(this.getState=l,this.setState=function(e){return u(e,{willUpdateState:s.willUpdateState,didUpdateState:s.didUpdateState})}):(this.getState=function(){return s.state},this.setState=function(e){var t=s.getState(),n=z({},t,e);s.willUpdateState(n,t),s.state=n,s.didUpdateState(t)}),k&&M("Initial state (passed)",k),this.getContainerElement=t,t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),this.itemHeights=new L(this.getContainerElement,this.getState),this.scrollableContainer&&(c&&(console.warn("[virtual-scroller] `preserveScrollPositionAtBottomOnMount` option/property has been renamed to `preserveScrollPositionOfTheBottomOfTheListOnMount`"),H=c),H&&(this.preserveScrollPositionOfTheBottomOfTheListOnMount={scrollableContainerContentHeight:this.scrollableContainer.getContentHeight()})),this.setState(k||this.getInitialState(d)),M("Items count",n.length),b&&M("Estimated item height",b)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=z({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return M("Initial state (autogenerated)",n),M("First shown item index",n.firstShownItemIndex),M("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems,i=n.length,r=this._getColumnsCount?this._getColumnsCount(this.scrollableContainer):void 0;return i>0&&(e=0,t=this.getLastShownItemIndex(e,i,r||1)),this.preserveScrollPositionOfTheBottomOfTheListOnMount&&(e=0,t=i-1),this.onBeforeShowItems(n,e,t,this.firstSeenItemIndex,this.lastSeenItemIndex),{itemHeights:new Array(i),columnsCount:r,verticalSpacing: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:"getVerticalSpacing",value:function(){return this.getState()&&this.getState().verticalSpacing||0}},{key:"getColumnsCount",value:function(){return this.getState()&&this.getState().columnsCount||1}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedRowsCount(e)*this.getColumnsCount()}},{key:"getEstimatedRowsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getVerticalSpacing())/(this.getEstimatedItemHeight()+this.getVerticalSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(e){return this.getEstimatedRowsCountOnScreen()*e}},{key:"getEstimatedRowsCountOnScreen",value:function(){return this.scrollableContainer?this.getEstimatedRowsCount(2*this.getMargin()+this.scrollableContainer.getHeight()):1}},{key:"getLastShownItemIndex",value:function(e,t,n){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen(n)-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return 1*this.scrollableContainer.getHeight()}},{key:"onBeforeShowItems",value:function(e,t,n,i,r){var o=this.onItemFirstRender;if(o)if(void 0===i)for(var s=t;s<=n;)o(e[s]),s++;else{if(t<i)for(var a=t,l=Math.min(n,i-1),u=a;u<=l;)o(e[u]),u++;if(n>r)for(var h=n,d=Math.max(t,r+1);d<=h;)o(e[d]),d++}}},{key:"updateSeenItemIndexes",value:function(){var e=this.firstSeenItemIndex,t=this.lastSeenItemIndex,n=this.getState(),i=n.firstShownItemIndex,r=n.lastShownItemIndex;void 0===e?(e=i,t=r):(i<e&&(e=i),r>t&&(t=r)),this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}},{key:"onMount",value:function(){console.warn("[virtual-scroller] `.onMount()` instance method name is deprecated, use `.listen()` instance method name instead."),this.listen()}},{key:"render",value:function(){console.warn("[virtual-scroller] `.render()` instance method name is deprecated, use `.listen()` instance method name instead."),this.listen()}},{key:"listen",value:function(){if(!1===this.isRendered)throw new Error("[virtual-scroller] Can't restart a `VirtualScroller` after it has been stopped");M("~ Rendered (initial) ~"),this.isRendered=!0,this.onRendered(),this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.restoreScrollPosition(),this.updateScrollPosition(),this.removeScrollPositionListener=this.scrollableContainer.addScrollListener(this.updateScrollPosition),this.bypass||(this.removeScrollListener=this.scrollableContainer.addScrollListener(this.onScroll),this.scrollableContainerUnlistenResize=this.scrollableContainer.onResize(this.onResize)),this.tbody&&function(e){e.classList.add("VirtualScroller");var t=document.getElementById("VirtualScrollerStyle");t||((t=document.createElement("style")).id="VirtualScrollerStyle",t.innerText="\n\t\t\ttbody.VirtualScroller:before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingTop);\n\t\t\t}\n\t\t\ttbody.VirtualScroller:after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingBottom);\n\t\t\t}\n\t\t".replace(/[\n\t]/g,""),document.head.appendChild(t))}(this.getContainerElement()),this.preserveScrollPositionOfTheBottomOfTheListOnMount?this.scrollTo(0,this.getScrollY()+(this.scrollableContainer.getContentHeight()-this.preserveScrollPositionOfTheBottomOfTheListOnMount.scrollableContainerContentHeight)):this.onUpdateShownItemIndexes({reason:"mount"})}},{key:"onRendered",value:function(){if(void 0===this.getState().verticalSpacing){M("~ Measure item vertical spacing ~");var e=this.measureVerticalSpacing();void 0===e?M("Not enough items rendered"):(M("Item vertical spacing",e),this.setState({verticalSpacing:e}))}this.updateItemHeights(),this.tbody&&this.updateTbodyPadding()}},{key:"scrollTo",value:function(e,t){this.scrollableContainer.scrollTo(e,t)}},{key:"getScrollY",value:function(){return this.scrollableContainer.getScrollY()}},{key:"getVisibleAreaBounds",value:function(){var e=this.getScrollY();return{top:e,bottom:e+this.scrollableContainer.getHeight()}}},{key:"getHeight",value:function(){return this.getContainerElement().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerElement())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerElement().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!1===this._shouldUpdateLayoutOnWindowResize(e))return!1}var t=this.scrollableContainerWidth,n=this.scrollableContainerHeight;return this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.scrollableContainerWidth===t?this.scrollableContainerHeight!==n&&"UPDATE_SHOWN_ITEM_INDEXES":"UPDATE_LAYOUT"}},{key:"onUnmount",value:function(){console.warn("[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.stop()` instance method name instead."),this.stop()}},{key:"destroy",value:function(){console.warn("[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead."),this.stop()}},{key:"stop",value:function(){this.isRendered=!1,this.removeScrollPositionListener(),this.bypass||(this.removeScrollListener(),this.scrollableContainerUnlistenResize(),I(this.onUserStopsScrollingTimeout),I(this.watchContainerElementCoordinatesTimer))}},{key:"updateTbodyPadding",value:function(){var e=this.getState(),t=e.beforeItemsHeight,n=e.afterItemsHeight;!function(e,t,n){e.style.setProperty("--VirtualScroller-paddingTop",H(t)),e.style.setProperty("--VirtualScroller-paddingBottom",H(n))}(this.getContainerElement(),t,n)}},{key:"measureVerticalSpacing",value:function(){var e=this.getContainerElement();if(e&&e.childNodes.length>1)for(var t=e.childNodes[0].getBoundingClientRect(),n=t.top,i=t.height,r=1;r<e.childNodes.length;){var o=e.childNodes[r].getBoundingClientRect(),s=o.top,a=o.height;if(s!==n)return s-(n+i);i=Math.max(i,a),r++}}},{key:"updateItemHeights",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;void 0!==t&&(M("~ Measure item heights ~"),this.itemHeights.update(t,n,t),A()&&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){A()&&(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:"getItemCoordinates",value:function(e){for(var t=this.getState().itemHeights,n=this.getColumnsCount(),i=this.getTopOffset(),r=Math.floor(e/n),o=0;o<r;){for(var s=0,a=0;a<n;)s=Math.max(s,t[o*n+a]),a++;i+=s,i+=this.getVerticalSpacing(),o++}return{top:i,bottom:i+t[e],height:t[e]}}},{key:"_getVisibleItemIndexes",value:function(e,t,n){for(var i,r,o=0,s=this.getItemsCount(),a=this.getColumnsCount(),l=Math.ceil(s/a),u=0;u<l;){for(var h=s>(u+1)*a?this.getVerticalSpacing():0,d=0,c=0,m=void 0;c<a&&(m=u*a+c)<s;){var f=this.getState().itemHeights[m];if(void 0===f){M("Item index ".concat(m,' lies within the visible area or its "margins", but its height hasn\'t been measured yet. Mark the item as "shown", render the list, measure the item\'s height and redo the layout.')),void 0===i&&(i=u*a);var g=t-(n+o);return{firstNonMeasuredItemIndex:m,firstShownItemIndex:i,lastShownItemIndex:r=Math.min((u+this.getEstimatedRowsCount(g))*a-1,s-1)}}if(d=Math.max(d,f),void 0===i&&n+o+d>e&&(M("First visible row index",u),i=u*a),n+o+d+h>t)return M("Last visible row index",u),void 0!==i&&(r=Math.min((u+1)*a-1,s-1)),{firstShownItemIndex:i,lastShownItemIndex:r};c++}o+=d,o+=h,u++}return void 0!==i&&void 0===r&&M("Last item index (is fully visible)",r=s-1),{firstShownItemIndex:i,lastShownItemIndex:r}}},{key:"getVisibleItemIndexes",value:function(e,t,n){var i=this._getVisibleItemIndexes(e,t,n),r=i.firstNonMeasuredItemIndex,o=i.firstShownItemIndex,s=i.lastShownItemIndex,a=void 0!==r;if(this.restoreScrollAfterPrepend&&(s<this.restoreScrollAfterPrepend.index&&(s=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize){var l=this.getColumnsCount(),u=r+this.measureItemsBatchSize-1;s=Math.min(s,Math.ceil(u/l)*l-1)}return{firstShownItemIndex:o,lastShownItemIndex:s,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.getState().itemHeights[0]}}},{key:"getItemIndexes",value:function(e,t,n,i){if(n+i>e&&n<t){var r=this.getVisibleItemIndexes(e,t,n);if(void 0!==r.firstShownItemIndex)return r;M("Off-screen")}else M("Off-screen")}},{key:"getBeforeItemsHeight",value:function(e,t,n){for(var i=this.getColumnsCount(),r=Math.floor(e/i),o=0,s=0;s<r;){for(var a=0,l=0;l<i;)a=Math.max(a,n[s*i+l]||this.itemHeights.getAverage()),l++;o+=a,o+=this.getVerticalSpacing(),s++}return o}},{key:"getAfterItemsHeight",value:function(e,t,n){for(var i=this.getItemsCount(),r=this.getColumnsCount(),o=Math.ceil(i/r),s=0,a=Math.floor(t/r)+1;a<o;){for(var l=0,u=0,h=void 0;u<r&&(h=a*r+u)<i;)l=Math.max(l,n[h]||this.itemHeights.getAverage()),u++;s+=this.getVerticalSpacing(),s+=l,a++}return s}},{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:"watchContainerElementCoordinates",value:function(){var e=this,t=Date.now();!function n(){e.isRendered&&(void 0!==e.topOffset&&e.getTopOffset()!==e.topOffset&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementCoordinatesTimer=p(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=this.getTopOffset();void 0===this.topOffset&&this.watchContainerElementCoordinates(),this.topOffset=e;var t=this.getVisibleAreaBounds(),n=t.top,i=t.bottom;return this.latestLayoutVisibleAreaTopAfterIncludingMargin=n-this.getMargin(),this.latestLayoutVisibleAreaBottomAfterIncludingMargin=i+this.getMargin(),this.getItemIndexes(n-this.getMargin(),i+this.getMargin(),e,this.getHeight())||this.getOffscreenListShownItemIndexes()}},{key:"onMultiRenderLayoutRendered",value:function(){var e=this;if(this.redoLayoutAfterRender)return this.redoLayoutAfterRender=void 0,p(function(){e.isRendered&&e.updateShownItemIndexesRecursive()},0);this.stopMultiRenderLayout()}},{key:"stopMultiRenderLayout",value:function(){this.multiRenderLayout=void 0,this.redoLayoutAfterRender||this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,visibleAreaTop:this.getItemElement(0).getBoundingClientRect().top}))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,o=i.lastShownItemIndex,s=i.beforeItemsHeight,a=i.afterItemsHeight,l=i.itemStates,u=i.itemHeights,h=this.firstSeenItemIndex,d=this.lastSeenItemIndex;M("~ Update items ~");var c=N(n,e);if(c){var m=c.prependedItemsCount,f=c.appendedItemsCount;m>0&&(M("Prepend",m,"items"),u=new Array(m).concat(u),l&&(l=new Array(m).concat(l))),f>0&&(M("Append",f,"items"),u=u.concat(new Array(f)),l&&(l=l.concat(new Array(f)))),r+=m,o+=m,void 0!==h&&(h+=m,d+=m);this.getVerticalSpacing();var g=this.getColumnsCount();if(m%g==0){var p=m/g,I=Math.ceil(f/g);s+=p*(this.itemHeights.getAverage()+this.getVerticalSpacing()),a+=I*(this.getVerticalSpacing()+this.itemHeights.getAverage())}else s=this.getBeforeItemsHeight(r,o,u),a=this.getAfterItemsHeight(r,o,u)}else M("Items have changed, and it's not a simple append and/or prepend: rerender the entire list from scratch."),M("Previous items",n),M("New items",e),h=void 0,d=void 0,u=new Array(e.length),l=new Array(e.length),0===e.length?(r=void 0,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length,this.getColumnsCount())),s=0,a=0;M("First shown item index",r),M("Last shown item index",o),M("Before items height",s),M("After items height (actual or estimated)",a),this.onBeforeShowItems(e,r,o,h,d),this.preserveScrollPositionOnPrependItems=t.preserveScrollPositionOnPrependItems||t.preserveScrollPosition,this.setState({items:e,itemStates:l,itemHeights:u,firstShownItemIndex:r,lastShownItemIndex:o,beforeItemsHeight:s,afterItemsHeight:a})}},{key:"getItemElement",value:function(e){return this.getContainerElement().childNodes[e]}}])&&_(t.prototype,n),i&&_(t,i),e}();function N(e,t){var n=-1,i=-1;if(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)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}}function F(e){return(F="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 D(){return(D=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function Y(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function J(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 G(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function K(e,t){return(K=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function Q(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Z=t.elementType||t.oneOfType([t.string,t.func,t.object]),$=function(t){function n(t){var i,r,o;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,o=X(n).call(this,t),i=!o||"object"!==F(o)&&"function"!=typeof o?G(r):o,Q(G(i),"container",e.createRef()),Q(G(i),"onItemStateChange",new Array(i.props.items.length)),Q(G(i),"onItemHeightChange",new Array(i.props.items.length)),Q(G(i),"itemRefs",new Array(i.props.items.length)),Q(G(i),"uniquePrefixes",[]),Q(G(i),"updateLayout",function(){return i.virtualScroller.updateLayout()}),Q(G(i),"layout",function(){return i.updateLayout()}),Q(G(i),"onItemInitialRender",function(){var e=i.props.onItemInitialRender;e&&e.apply(void 0,arguments)}),Q(G(i),"onItemFirstRender",function(){var e=i.props.onItemFirstRender;e&&e.apply(void 0,arguments)}),Q(G(i),"shouldUpdateLayoutOnWindowResize",function(){var e=i.props.shouldUpdateLayoutOnWindowResize;if(e)return e.apply(void 0,arguments)}),i.previousItemsProperty=t.items,i.generateUniquePrefix(),i.createVirtualScroller(),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&&K(e,t)}(n,e.Component),i=n,(r=[{key:"createVirtualScroller",value:function(){var e=this,t=this.props,n=t.as,i=t.items,r=t.initialState,o=t.initialCustomState,s=t.onStateChange,a=t.estimatedItemHeight,l=t.preserveScrollPositionOfTheBottomOfTheListOnMount,u=t.preserveScrollPositionAtBottomOnMount,h=t.measureItemsBatchSize,d=t.scrollableContainer,c=t.getScrollableContainer,m=t.getColumnsCount,f=t.bypass;this.virtualScroller=new q(function(){return e.container.current},i,{estimatedItemHeight:a,bypass:f,onItemInitialRender:this.onItemInitialRender,onItemFirstRender:this.onItemFirstRender,preserveScrollPositionOfTheBottomOfTheListOnMount:l,preserveScrollPositionAtBottomOnMount:u,shouldUpdateLayoutOnWindowResize:this.shouldUpdateLayoutOnWindowResize,measureItemsBatchSize:h,scrollableContainer:d,getScrollableContainer:c,getColumnsCount:m,tbody:"tbody"===n,state:r,customState:o,onStateChange:s,getState:function(){return e.state},setState:function(t,n){var i=n.willUpdateState,r=n.didUpdateState;e.willUpdateState=i,e.didUpdateState=r,e.state?e.setState(t):(i(t),e.state=t,r())}})}},{key:"shouldUseRefs",value:function(){var e,t=this.props.itemComponent;return(e=t).prototype&&e.prototype.isReactComponent}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}},{key:"updateItem",value:function(e){return this.renderItem(e)}},{key:"renderItem",value:function(e){var t=this;if(!this.shouldUseRefs())return console.error("[virtual-scroller] `.renderItem(i)` has been called but the `component` doesn't allow `ref`s. Only `component`s that're `React.Component`s support this feature.");if(this.itemRefs[e]&&this.itemRefs[e].current){var n=this.props.items,i=n[e];this.itemRefs[e].current.forceUpdate(function(){if(t._isMounted){var e=n.indexOf(i);e>=0&&t.virtualScroller.onItemHeightChange(e)}})}}},{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._isMounted=!0,this.virtualScroller.listen()}},{key:"getSnapshotBeforeUpdate",value:function(e,t){return this.state!==t&&this.willUpdateState(this.state,t),null}},{key:"componentDidUpdate",value:function(e,t){this.state!==t&&this.didUpdateState(t);var n=this.props,i=n.items,r=n.preserveScrollPosition,o=n.preserveScrollPositionOnPrependItems;i!==e.items&&this.virtualScroller.setItems(i,{preserveScrollPositionOnPrependItems:o||r})}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.virtualScroller.stop()}},{key:"render",value:function(){var t=this,n=this.props,i=n.as,r=n.itemComponent,o=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.preserveScrollPositionOnPrependItems),a=n.preserveScrollPosition,l=(n.preserveScrollPositionOfTheBottomOfTheListOnMount,n.preserveScrollPositionAtBottomOnMount,n.shouldUpdateLayoutOnWindowResize,n.measureItemsBatchSize,n.scrollableContainer,n.getScrollableContainer,n.getColumnsCount,n.initialState,n.initialCustomState,n.onStateChange,n.onItemInitialRender,n.onItemFirstRender,n.onMount,n.className),u=Y(n,["as","itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","preserveScrollPositionOnPrependItems","preserveScrollPosition","preserveScrollPositionOfTheBottomOfTheListOnMount","preserveScrollPositionAtBottomOnMount","shouldUpdateLayoutOnWindowResize","measureItemsBatchSize","scrollableContainer","getScrollableContainer","getColumnsCount","initialState","initialCustomState","onStateChange","onItemInitialRender","onItemFirstRender","onMount","className"]),h=this.virtualScroller.getState(),d=h.items,c=h.itemStates,m=h.firstShownItemIndex,f=h.lastShownItemIndex,g=h.beforeItemsHeight,p=h.afterItemsHeight,I=this.props.items,v=d;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&I!==v){var S=N(v,I);S&&0===S.prependedItemsCount&&S.appendedItemsCount>0||(S&&(s||a)&&this.virtualScroller.captureScroll(v,I,S.prependedItemsCount),this.generateUniquePrefix(),this.onItemStateChange=new Array(I.length),this.onItemHeightChange=new Array(I.length),this.itemRefs=new Array(I.length))}var y=this.virtualScroller.tbody;return e.createElement(i,D({},u,{ref:this.container,className:y?l?l+" VirtualScroller":"VirtualScroller":l,style:{paddingTop:y?void 0:H(g),paddingBottom:y?void 0:H(p)}}),d.map(function(n,i){return i>=m&&i<=f?e.createElement(r,D({},o,{ref:t.shouldUseRefs()?t.getItemRef(i):void 0,key:"".concat(t.uniquePrefix,":").concat(i),state:c&&c[i],onStateChange:t.getOnItemStateChange(i),onHeightChange:t.getOnItemHeightChange(i)}),n):null}))}}])&&J(i.prototype,r),o&&J(i,o),n}();return Q($,"propTypes",{as:Z,items:t.arrayOf(t.object).isRequired,itemComponent:Z.isRequired,itemComponentProps:t.object,estimatedItemHeight:t.number,bypass:t.bool,preserveScrollPositionOnPrependItems:t.bool,preserveScrollPosition:t.bool,preserveScrollPositionOfTheBottomOfTheListOnMount:t.bool,preserveScrollPositionAtBottomOnMount:t.bool,shouldUpdateLayoutOnWindowResize:t.func,measureItemsBatchSize:t.number,scrollableContainer:t.any,getScrollableContainer:t.func,getColumnsCount:t.func,className:t.string,onMount:t.func,onItemInitialRender:t.func,onItemFirstRender:t.func,onStateChange:t.func,initialCustomState:t.object,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,columnsCount:t.number,verticalSpacing:t.number})}),Q($,"defaultProps",{as:"div"}),$});
+!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";e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var n="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};for(var i,r=(function(e){(function(){var t,n,i,r,o,s;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(e.exports=function(){return(t()-o)/1e6},n=process.hrtime,r=(t=function(){var e;return 1e9*(e=n())[0]+e[1]})(),s=1e9*process.uptime(),o=r-s):Date.now?(e.exports=function(){return Date.now()-i},i=Date.now()):(e.exports=function(){return(new Date).getTime()-i},i=(new Date).getTime())}).call(n)}(i={exports:{}},i.exports),i.exports),o="undefined"==typeof window?n:window,s=["moz","webkit"],a="AnimationFrame",l=o["request"+a],u=o["cancel"+a]||o["cancelRequest"+a],h=0;!l&&h<s.length;h++)l=o[s[h]+"Request"+a],u=o[s[h]+"Cancel"+a]||o[s[h]+"CancelRequest"+a];if(!l||!u){var d=0,c=0,m=[];l=function(e){if(0===m.length){var t=r(),n=Math.max(0,1e3/60-(t-d));d=n+t,setTimeout(function(){var e=m.slice(0);m.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(d)}catch(e){setTimeout(function(){throw e},0)}},Math.round(n))}return m.push({handle:++c,callback:e,cancelled:!1}),c},u=function(e){for(var t=0;t<m.length;t++)m[t].handle===e&&(m[t].cancelled=!0)}}var f=function(e){return l.call(o,e)};f.cancel=function(){u.apply(o,arguments)},f.polyfill=function(e){e||(e=o),e.requestAnimationFrame=l,e.cancelAnimationFrame=u};var g=f.cancel;function p(e,t){var n=Date.now(),i=f(function r(){Date.now()-n>=t?e():i=f(r)});return{clear:function(){return g(i)}}}function I(e){e&&e.clear()}function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function S(e,t){return!t||"object"!==v(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function y(e){return(y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function b(e,t){return(b=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function w(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}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 x(e,t,n){return t&&C(e.prototype,t),n&&C(e,n),e}var O=function(){function e(t){w(this,e),this.element=t}return x(e,[{key:"getScrollY",value:function(){return this.element.scrollTop}},{key:"scrollTo",value:function(e,t){this.element.scrollTo(e,t)}},{key:"getWidth",value:function(){return this.element.offsetWidth}},{key:"getHeight",value:function(){return this.element.offsetHeight}},{key:"getContentHeight",value:function(){return this.element.scrollHeight}},{key:"getTopOffset",value:function(e){var t=this.element.getBoundingClientRect().top,n=this.element.clientTop;return e.getBoundingClientRect().top-t+this.getScrollY()-n}},{key:"addScrollListener",value:function(e){var t=this;return this.element.addEventListener("scroll",e),function(){return t.element.removeEventListener("scroll",e)}}},{key:"onResize",value:function(e){var t,n=this;if("undefined"!=typeof ResizeObserver){var i=new ResizeObserver(function(t){var n=t,i=Array.isArray(n),r=0;for(n=i?n:n[Symbol.iterator]();;){if(i){if(r>=n.length)break;n[r++]}else{if((r=n.next()).done)break;r.value}return e()}});i.observe(this.element),t=function(){return i.unobserve(n.element)}}var r=(new R).onResize(e);return function(){t&&t(),r()}}}]),e}(),R=function(e){function t(){return w(this,t),S(this,y(t).call(this,window))}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&&b(e,t)}(t,O),x(t,[{key:"getScrollY",value:function(){return window.pageYOffset}},{key:"getWidth",value:function(){return window.innerWidth}},{key:"getHeight",value:function(){return window.innerHeight}},{key:"getContentHeight",value:function(){return document.documentElement.scrollHeight}},{key:"getTopOffset",value:function(e){var t=document.clientTop||document.body.clientTop||0;return e.getBoundingClientRect().top+this.getScrollY()-t}},{key:"onResize",value:function(e){return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}}]),t}();function H(e){return e.toFixed(2)+"px"}var P="[virtual-scroller] It looks like you're using Internet Explorer which doesn't support CSS variables required for a <tbody/> container. VirtualScroller has been switched into \"bypass\" mode (render all items). See: https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1";function k(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(A()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,k(["[virtual-scroller]"].concat(n)))}}function A(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function T(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.getContainerElement=t,this.getState=n,this.initialize()}var t,n,i;return t=e,(n=[{key:"initialize",value:function(){this.reset(),this.getState()&&this.onStateUpdate()}},{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onStateUpdate",value:function(){for(var e=0;e<this.getState().itemHeights.length;){if(void 0===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.getContainerElement();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"update",value:function(e,t,n){void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,r=this.lastMeasuredItemIndex,o=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this._set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,o||(this.firstMeasuredItemIndex=s,o=!0)),(void 0===r||s>r)&&(void 0!==r&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{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)}}])&&T(t.prototype,n),i&&T(t,i),e}();function E(e){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})(e)}var U=Object.prototype.hasOwnProperty;function B(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function z(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){j(e,t,n[t])})}return e}function _(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 j(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var V=250,W=100,N=function(){function e(t,n){var i,r,o,s=this,a=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),j(this,"updateLayout",function(){return s.onUpdateShownItemIndexes({reason:"manual"})}),j(this,"onScroll",function(){return s.onUpdateShownItemIndexes({reason:"scroll"})}),j(this,"restoreScrollPosition",function(){var e=s.getState().scrollY;void 0!==e&&s.scrollTo(0,e)}),j(this,"updateScrollPosition",function(){return s.getState().scrollY=s.getScrollY()}),j(this,"layout",function(){return s.updateLayout()}),j(this,"onResize",(i=function(e){if(s.isRendered){var t=s.shouldUpdateLayoutOnScrollableContainerResize(e);if("UPDATE_LAYOUT"===t){M("~ Scrollable container size changed, re-measure item heights. ~"),s.resized=!0;var n=s.getInitialLayoutState();M("Reset state to",n),s.setState(n)}else"UPDATE_SHOWN_ITEM_INDEXES"===t&&s.onUpdateShownItemIndexes({reason:"resize"})}},r=V,function(){for(var e=this,t=arguments.length,n=new Array(t),s=0;s<t;s++)n[s]=arguments[s];clearTimeout(o),o=setTimeout(function(){return i.apply(e,n)},r)})),j(this,"willUpdateState",function(e,t){if(t&&s.preserveScrollPositionOnPrependItems){s.preserveScrollPositionOnPrependItems=void 0;var n=t.items,i=e.items,r=F(n,i);r&&s.captureScroll(n,i,r.prependedItemsCount)}}),j(this,"didUpdateState",function(e){var t=s.getState();if(s.onStateChange&&(function(e,t){if(B(e,t))return!0;if("object"!==E(e)||null===e||"object"!==E(t)||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var r=0;r<n.length;r++)if(!U.call(t,n[r])||!B(e[n[r]],t[n[r]]))return!1;return!0}(t,e)||s.onStateChange(t,e)),e&&s.isRendered){M("~ Rendered ~"),t.firstShownItemIndex===e.firstShownItemIndex&&t.lastShownItemIndex===e.lastShownItemIndex&&t.items===e.items||s.onRendered();var n=e.items,i=t.items;if(i!==n){var r=F(n,i);if(r){var o=r.prependedItemsCount;r.appendedItemsCount;o>0&&(s.itemHeights.onPrepend(o),void 0!==s.firstSeenItemIndex&&(s.firstSeenItemIndex+=o,s.lastSeenItemIndex+=o))}else s.itemHeights.initialize(),s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0;return s.updateSeenItemIndexes(),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"update items",force:!0})}return s.resized?(s.resized=void 0,M("~ Rendered (resize) ~"),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"resize"})):s.multiRenderLayout?s.onMultiRenderLayoutRendered():void 0}}),j(this,"updateShownItemIndexes",function(){var e=s.getShownItemIndexes(),t=e.firstShownItemIndex,n=e.lastShownItemIndex,i=e.redoLayoutAfterRender,r=s.getState().itemHeights,o=s.getBeforeItemsHeight(t,n,r),a=s.getAfterItemsHeight(t,n,r);s.updateWillBeHiddenItemHeightsAndState(t,n),M("~ Layout results "+(s.bypass?"(bypass) ":"")+"~"),s._getColumnsCount&&M("Columns count",s.getColumnsCount()),M("First shown item index",t),M("Last shown item index",n),M("Before items height",o),M("After items height (actual or estimated)",a),M("Average item height (calculated on previous render)",s.itemHeights.getAverage()),A()&&(M("Item heights",s.getState().itemHeights.slice()),M("Item states",s.getState().itemStates.slice())),i&&(M("Schedule a re-layout after the upcoming rerender"),s.redoLayoutAfterRender=!0),void 0!==s.firstSeenItemIndex&&(t>s.lastSeenItemIndex+1||n<s.firstSeenItemIndex-1)&&(s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.onBeforeShowItems(s.getState().items,t,n,s.firstSeenItemIndex,s.lastSeenItemIndex),s.setState({firstShownItemIndex:t,lastShownItemIndex:n,beforeItemsHeight:o,afterItemsHeight:a})}),j(this,"updateShownItemIndexesRecursive",function(){s.multiRenderLayout=!0,s.updateShownItemIndexes()}),j(this,"restoreScroll",function(){var e=s.restoreScrollAfterPrepend,t=e.index,n=e.visibleAreaTop;s.restoreScrollAfterPrepend=void 0;var i=s.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(M("Restore scroll position: scroll by",i),s.scrollTo(0,s.getScrollY()+i))}),j(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==s.getItemsCount()&&!s.multiRenderLayout){if(I(s.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getScrollY()<s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getState().firstShownItemIndex>0||void 0!==s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getScrollY()+s.scrollableContainer.getHeight()>s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getState().lastShownItemIndex<s.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 s.onUserStopsScrollingTimeout=p(s.onUserStoppedScrolling,W)}M("~ Update layout (on ".concat(t,") ~")),s.updateShownItemIndexesRecursive()}}),j(this,"onUserStoppedScrolling",function(){s.isRendered&&s.updateLayout("stopped scrolling")});var l=a.getState,u=a.setState,h=a.onStateChange,d=a.customState,c=a.preserveScrollPositionAtBottomOnMount,m=a.shouldUpdateLayoutOnWindowResize,f=a.measureItemsBatchSize,g=a.getScrollableContainer,v=a.getColumnsCount,S=a.tbody,y=a.bypass,b=a.estimatedItemHeight,w=a.onItemInitialRender,C=a.onItemFirstRender,x=a.scrollableContainer,H=a.preserveScrollPositionOfTheBottomOfTheListOnMount,k=a.state;M("~ Initialize ~"),k&&(n=k.items),!x&&g&&(x=g()),x?this.scrollableContainer=new O(x):"undefined"!=typeof window&&(this.scrollableContainer=new R),S&&(M("~ <tbody/> detected ~"),this.tbody=!0,"undefined"!=typeof window&&window.document.documentMode&&(M("~ <tbody/> not supported ~"),"undefined"!=typeof window?setTimeout(function(){throw new Error(P)},0):console.error(P),y=!0)),y&&M('~ "bypass" mode ~'),this.bypass=y,this.initialItems=n,this.estimatedItemHeight=b,this.onStateChange=h,this._shouldUpdateLayoutOnWindowResize=m,this.measureItemsBatchSize=void 0===f?50:f,this._getColumnsCount=v,w?this.onItemFirstRender=w:C&&(this.onItemFirstRender=function(e){console.warn("[virtual-scroller] `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.");var t=s.getState().items.indexOf(e);t>=0&&C(t)}),u?(this.getState=l,this.setState=function(e){return u(e,{willUpdateState:s.willUpdateState,didUpdateState:s.didUpdateState})}):(this.getState=function(){return s.state},this.setState=function(e){var t=s.getState(),n=z({},t,e);s.willUpdateState(n,t),s.state=n,s.didUpdateState(t)}),k&&M("Initial state (passed)",k),this.getContainerElement=t,t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),this.itemHeights=new L(this.getContainerElement,this.getState),this.scrollableContainer&&(c&&(console.warn("[virtual-scroller] `preserveScrollPositionAtBottomOnMount` option/property has been renamed to `preserveScrollPositionOfTheBottomOfTheListOnMount`"),H=c),H&&(this.preserveScrollPositionOfTheBottomOfTheListOnMount={scrollableContainerContentHeight:this.scrollableContainer.getContentHeight()})),this.setState(k||this.getInitialState(d)),M("Items count",n.length),b&&M("Estimated item height",b)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=z({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return M("Initial state (autogenerated)",n),M("First shown item index",n.firstShownItemIndex),M("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems,i=n.length,r=this._getColumnsCount?this._getColumnsCount(this.scrollableContainer):void 0;return i>0&&(e=0,t=this.getLastShownItemIndex(e,i,r||1)),this.preserveScrollPositionOfTheBottomOfTheListOnMount&&(e=0,t=i-1),this.onBeforeShowItems(n,e,t,this.firstSeenItemIndex,this.lastSeenItemIndex),{itemHeights:new Array(i),columnsCount:r,verticalSpacing: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:"getVerticalSpacing",value:function(){return this.getState()&&this.getState().verticalSpacing||0}},{key:"getColumnsCount",value:function(){return this.getState()&&this.getState().columnsCount||1}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedRowsCount(e)*this.getColumnsCount()}},{key:"getEstimatedRowsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getVerticalSpacing())/(this.getEstimatedItemHeight()+this.getVerticalSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(e){return this.getEstimatedRowsCountOnScreen()*e}},{key:"getEstimatedRowsCountOnScreen",value:function(){return this.scrollableContainer?this.getEstimatedRowsCount(2*this.getMargin()+this.scrollableContainer.getHeight()):1}},{key:"getLastShownItemIndex",value:function(e,t,n){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen(n)-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return 1*this.scrollableContainer.getHeight()}},{key:"onBeforeShowItems",value:function(e,t,n,i,r){var o=this.onItemFirstRender;if(o)if(void 0===i)for(var s=t;s<=n;)o(e[s]),s++;else{if(t<i)for(var a=t,l=Math.min(n,i-1),u=a;u<=l;)o(e[u]),u++;if(n>r)for(var h=n,d=Math.max(t,r+1);d<=h;)o(e[d]),d++}}},{key:"updateSeenItemIndexes",value:function(){var e=this.firstSeenItemIndex,t=this.lastSeenItemIndex,n=this.getState(),i=n.firstShownItemIndex,r=n.lastShownItemIndex;void 0===e?(e=i,t=r):(i<e&&(e=i),r>t&&(t=r)),this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}},{key:"onMount",value:function(){console.warn("[virtual-scroller] `.onMount()` instance method name is deprecated, use `.listen()` instance method name instead."),this.listen()}},{key:"render",value:function(){console.warn("[virtual-scroller] `.render()` instance method name is deprecated, use `.listen()` instance method name instead."),this.listen()}},{key:"listen",value:function(){if(!1===this.isRendered)throw new Error("[virtual-scroller] Can't restart a `VirtualScroller` after it has been stopped");M("~ Rendered (initial) ~"),this.isRendered=!0,this.onRendered(),this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.restoreScrollPosition(),this.updateScrollPosition(),this.removeScrollPositionListener=this.scrollableContainer.addScrollListener(this.updateScrollPosition),this.bypass||(this.removeScrollListener=this.scrollableContainer.addScrollListener(this.onScroll),this.scrollableContainerUnlistenResize=this.scrollableContainer.onResize(this.onResize)),this.tbody&&function(e){e.classList.add("VirtualScroller");var t=document.getElementById("VirtualScrollerStyle");t||((t=document.createElement("style")).id="VirtualScrollerStyle",t.innerText="\n\t\t\ttbody.VirtualScroller:before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingTop);\n\t\t\t}\n\t\t\ttbody.VirtualScroller:after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingBottom);\n\t\t\t}\n\t\t".replace(/[\n\t]/g,""),document.head.appendChild(t))}(this.getContainerElement()),this.preserveScrollPositionOfTheBottomOfTheListOnMount?this.scrollTo(0,this.getScrollY()+(this.scrollableContainer.getContentHeight()-this.preserveScrollPositionOfTheBottomOfTheListOnMount.scrollableContainerContentHeight)):this.onUpdateShownItemIndexes({reason:"mount"})}},{key:"onRendered",value:function(){if(void 0===this.getState().verticalSpacing){M("~ Measure item vertical spacing ~");var e=this.measureVerticalSpacing();void 0===e?M("Not enough items rendered"):(M("Item vertical spacing",e),this.setState({verticalSpacing:e}))}this.updateItemHeights(),this.tbody&&this.updateTbodyPadding()}},{key:"scrollTo",value:function(e,t){this.scrollableContainer.scrollTo(e,t)}},{key:"getScrollY",value:function(){return this.scrollableContainer.getScrollY()}},{key:"getVisibleAreaBounds",value:function(){var e=this.getScrollY();return{top:e,bottom:e+this.scrollableContainer.getHeight()}}},{key:"getHeight",value:function(){return this.getContainerElement().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerElement())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerElement().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!1===this._shouldUpdateLayoutOnWindowResize(e))return!1}var t=this.scrollableContainerWidth,n=this.scrollableContainerHeight;return this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.scrollableContainerWidth===t?this.scrollableContainerHeight!==n&&"UPDATE_SHOWN_ITEM_INDEXES":"UPDATE_LAYOUT"}},{key:"onUnmount",value:function(){console.warn("[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.stop()` instance method name instead."),this.stop()}},{key:"destroy",value:function(){console.warn("[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead."),this.stop()}},{key:"stop",value:function(){this.isRendered=!1,this.removeScrollPositionListener(),this.bypass||(this.removeScrollListener(),this.scrollableContainerUnlistenResize(),I(this.onUserStopsScrollingTimeout),I(this.watchContainerElementCoordinatesTimer))}},{key:"updateTbodyPadding",value:function(){var e=this.getState(),t=e.beforeItemsHeight,n=e.afterItemsHeight;!function(e,t,n){e.style.setProperty("--VirtualScroller-paddingTop",H(t)),e.style.setProperty("--VirtualScroller-paddingBottom",H(n))}(this.getContainerElement(),t,n)}},{key:"measureVerticalSpacing",value:function(){var e=this.getContainerElement();if(e&&e.childNodes.length>1)for(var t=e.childNodes[0].getBoundingClientRect(),n=t.top,i=t.height,r=1;r<e.childNodes.length;){var o=e.childNodes[r].getBoundingClientRect(),s=o.top,a=o.height;if(s!==n)return s-(n+i);i=Math.max(i,a),r++}}},{key:"updateItemHeights",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;void 0!==t&&(M("~ Measure item heights ~"),this.itemHeights.update(t,n,t),A()&&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){A()&&(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:"getItemCoordinates",value:function(e){for(var t=this.getState().itemHeights,n=this.getColumnsCount(),i=this.getTopOffset(),r=Math.floor(e/n),o=0;o<r;){for(var s=0,a=0;a<n;)s=Math.max(s,t[o*n+a]),a++;i+=s,i+=this.getVerticalSpacing(),o++}return{top:i,bottom:i+t[e],height:t[e]}}},{key:"_getVisibleItemIndexes",value:function(e,t,n){for(var i,r,o=0,s=this.getItemsCount(),a=this.getColumnsCount(),l=Math.ceil(s/a),u=0;u<l;){for(var h=s>(u+1)*a?this.getVerticalSpacing():0,d=0,c=0,m=void 0;c<a&&(m=u*a+c)<s;){var f=this.getState().itemHeights[m];if(void 0===f){M("Item index ".concat(m,' lies within the visible area or its "margins", but its height hasn\'t been measured yet. Mark the item as "shown", render the list, measure the item\'s height and redo the layout.')),void 0===i&&(i=u*a);var g=t-(n+o);return{firstNonMeasuredItemIndex:m,firstShownItemIndex:i,lastShownItemIndex:r=Math.min((u+this.getEstimatedRowsCount(g))*a-1,s-1)}}if(d=Math.max(d,f),void 0===i&&n+o+d>e&&(M("First visible row index",u),i=u*a),n+o+d+h>t)return M("Last visible row index",u),void 0!==i&&(r=Math.min((u+1)*a-1,s-1)),{firstShownItemIndex:i,lastShownItemIndex:r};c++}o+=d,o+=h,u++}return void 0!==i&&void 0===r&&M("Last item index (is fully visible)",r=s-1),{firstShownItemIndex:i,lastShownItemIndex:r}}},{key:"getVisibleItemIndexes",value:function(e,t,n){var i=this._getVisibleItemIndexes(e,t,n),r=i.firstNonMeasuredItemIndex,o=i.firstShownItemIndex,s=i.lastShownItemIndex,a=void 0!==r;if(this.restoreScrollAfterPrepend&&(s<this.restoreScrollAfterPrepend.index&&(s=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize){var l=this.getColumnsCount(),u=r+this.measureItemsBatchSize-1;s=Math.min(s,Math.ceil(u/l)*l-1)}return{firstShownItemIndex:o,lastShownItemIndex:s,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.getState().itemHeights[0]}}},{key:"getItemIndexes",value:function(e,t,n,i){if(n+i>e&&n<t){var r=this.getVisibleItemIndexes(e,t,n);if(void 0!==r.firstShownItemIndex)return r;M("Off-screen")}else M("Off-screen")}},{key:"getBeforeItemsHeight",value:function(e,t,n){for(var i=this.getColumnsCount(),r=Math.floor(e/i),o=0,s=0;s<r;){for(var a=0,l=0;l<i;)a=Math.max(a,n[s*i+l]||this.itemHeights.getAverage()),l++;o+=a,o+=this.getVerticalSpacing(),s++}return o}},{key:"getAfterItemsHeight",value:function(e,t,n){for(var i=this.getItemsCount(),r=this.getColumnsCount(),o=Math.ceil(i/r),s=0,a=Math.floor(t/r)+1;a<o;){for(var l=0,u=0,h=void 0;u<r&&(h=a*r+u)<i;)l=Math.max(l,n[h]||this.itemHeights.getAverage()),u++;s+=this.getVerticalSpacing(),s+=l,a++}return s}},{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:"watchContainerElementCoordinates",value:function(){var e=this,t=Date.now();!function n(){e.isRendered&&(void 0!==e.topOffset&&e.getTopOffset()!==e.topOffset&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementCoordinatesTimer=p(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=this.getTopOffset();void 0===this.topOffset&&this.watchContainerElementCoordinates(),this.topOffset=e;var t=this.getVisibleAreaBounds(),n=t.top,i=t.bottom;return this.latestLayoutVisibleAreaTopAfterIncludingMargin=n-this.getMargin(),this.latestLayoutVisibleAreaBottomAfterIncludingMargin=i+this.getMargin(),this.getItemIndexes(n-this.getMargin(),i+this.getMargin(),e,this.getHeight())||this.getOffscreenListShownItemIndexes()}},{key:"onMultiRenderLayoutRendered",value:function(){var e=this;if(this.redoLayoutAfterRender)return this.redoLayoutAfterRender=void 0,p(function(){e.isRendered&&e.updateShownItemIndexesRecursive()},0);this.stopMultiRenderLayout()}},{key:"stopMultiRenderLayout",value:function(){this.multiRenderLayout=void 0,this.redoLayoutAfterRender||this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,visibleAreaTop:this.getItemElement(0).getBoundingClientRect().top}))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,o=i.lastShownItemIndex,s=i.beforeItemsHeight,a=i.afterItemsHeight,l=i.itemStates,u=i.itemHeights,h=this.firstSeenItemIndex,d=this.lastSeenItemIndex;M("~ Update items ~");var c=F(n,e);if(c){var m=c.prependedItemsCount,f=c.appendedItemsCount;m>0&&(M("Prepend",m,"items"),u=new Array(m).concat(u),l&&(l=new Array(m).concat(l))),f>0&&(M("Append",f,"items"),u=u.concat(new Array(f)),l&&(l=l.concat(new Array(f)))),r+=m,o+=m,void 0!==h&&(h+=m,d+=m);this.getVerticalSpacing();var g=this.getColumnsCount();if(m%g==0){var p=m/g,I=Math.ceil(f/g);s+=p*(this.itemHeights.getAverage()+this.getVerticalSpacing()),a+=I*(this.getVerticalSpacing()+this.itemHeights.getAverage())}else s=this.getBeforeItemsHeight(r,o,u),a=this.getAfterItemsHeight(r,o,u)}else M("Items have changed, and it's not a simple append and/or prepend: rerender the entire list from scratch."),M("Previous items",n),M("New items",e),h=void 0,d=void 0,u=new Array(e.length),l=new Array(e.length),0===e.length?(r=void 0,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length,this.getColumnsCount())),s=0,a=0;M("First shown item index",r),M("Last shown item index",o),M("Before items height",s),M("After items height (actual or estimated)",a),this.onBeforeShowItems(e,r,o,h,d),this.preserveScrollPositionOnPrependItems=t.preserveScrollPositionOnPrependItems||t.preserveScrollPosition,this.setState({items:e,itemStates:l,itemHeights:u,firstShownItemIndex:r,lastShownItemIndex:o,beforeItemsHeight:s,afterItemsHeight:a})}},{key:"getItemElement",value:function(e){return this.getContainerElement().childNodes[e]}}])&&_(t.prototype,n),i&&_(t,i),e}();function F(e,t){var n=-1,i=-1;if(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)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}}function D(e){return(D="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 q(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function K(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 J(e){return(J=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function X(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function G(e,t){return(G=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function Q(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Z=t.elementType||t.oneOfType([t.string,t.func,t.object]),$=function(t){function n(t){var i,r,o;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,o=J(n).call(this,t),i=!o||"object"!==D(o)&&"function"!=typeof o?X(r):o,Q(X(i),"container",e.createRef()),Q(X(i),"onItemStateChange",new Array(i.props.items.length)),Q(X(i),"onItemHeightChange",new Array(i.props.items.length)),Q(X(i),"itemRefs",new Array(i.props.items.length)),Q(X(i),"itemKeyPrefixes",[]),Q(X(i),"updateLayout",function(){return i.virtualScroller.updateLayout()}),Q(X(i),"layout",function(){return i.updateLayout()}),Q(X(i),"onItemInitialRender",function(){var e=i.props.onItemInitialRender;e&&e.apply(void 0,arguments)}),Q(X(i),"onItemFirstRender",function(){var e=i.props.onItemFirstRender;e&&e.apply(void 0,arguments)}),Q(X(i),"shouldUpdateLayoutOnWindowResize",function(){var e=i.props.shouldUpdateLayoutOnWindowResize;if(e)return e.apply(void 0,arguments)}),i.previousItemsProperty=t.items,i.generateItemKeyPrefix(),i.createVirtualScroller(),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&&G(e,t)}(n,e.Component),i=n,(r=[{key:"createVirtualScroller",value:function(){var e=this,t=this.props,n=t.as,i=t.items,r=t.initialState,o=t.initialCustomState,s=t.onStateChange,a=t.estimatedItemHeight,l=t.preserveScrollPositionOfTheBottomOfTheListOnMount,u=t.preserveScrollPositionAtBottomOnMount,h=t.measureItemsBatchSize,d=t.scrollableContainer,c=t.getScrollableContainer,m=t.getColumnsCount,f=t.bypass;this.virtualScroller=new N(function(){return e.container.current},i,{estimatedItemHeight:a,bypass:f,onItemInitialRender:this.onItemInitialRender,onItemFirstRender:this.onItemFirstRender,preserveScrollPositionOfTheBottomOfTheListOnMount:l,preserveScrollPositionAtBottomOnMount:u,shouldUpdateLayoutOnWindowResize:this.shouldUpdateLayoutOnWindowResize,measureItemsBatchSize:h,scrollableContainer:d,getScrollableContainer:c,getColumnsCount:m,tbody:"tbody"===n,state:r,customState:o,onStateChange:s,getState:function(){return e.state},setState:function(t,n){var i=n.willUpdateState,r=n.didUpdateState;e.willUpdateState=i,e.didUpdateState=r,e.state?e.setState(t):(i(t),e.state=t,r())}})}},{key:"shouldUseRefs",value:function(){var e,t=this.props.itemComponent;return(e=t).prototype&&e.prototype.isReactComponent}},{key:"getItemKey",value:function(e,t){var n=this.props.getItemKey;return n?n(e):"".concat(this.itemKeyPrefix,":").concat(t)}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}},{key:"updateItem",value:function(e){return this.renderItem(e)}},{key:"renderItem",value:function(e){var t=this;if(!this.shouldUseRefs())return console.error("[virtual-scroller] `.renderItem(i)` has been called but the `component` doesn't allow `ref`s. Only `component`s that're `React.Component`s support this feature.");if(this.itemRefs[e]&&this.itemRefs[e].current){var n=this.props.items,i=n[e];this.itemRefs[e].current.forceUpdate(function(){if(t._isMounted){var e=n.indexOf(i);e>=0&&t.virtualScroller.onItemHeightChange(e)}})}}},{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:"generateItemKeyPrefix",value:function(){var e=String(Math.random()).slice(2);if(this.itemKeyPrefixes.indexOf(e)>=0)return this.generateItemKeyPrefix();this.itemKeyPrefixes.push(e),this.itemKeyPrefix=e}},{key:"componentDidMount",value:function(){var e=this.props.onMount;e&&e(),this._isMounted=!0,this.virtualScroller.listen()}},{key:"getSnapshotBeforeUpdate",value:function(e,t){return this.state!==t&&this.willUpdateState(this.state,t),null}},{key:"componentDidUpdate",value:function(e,t){this.state!==t&&this.didUpdateState(t);var n=this.props,i=n.items,r=n.preserveScrollPosition,o=n.preserveScrollPositionOnPrependItems;i!==e.items&&this.virtualScroller.setItems(i,{preserveScrollPositionOnPrependItems:o||r})}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.virtualScroller.stop()}},{key:"render",value:function(){var t=this,n=this.props,i=n.as,r=n.itemComponent,o=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.preserveScrollPositionOnPrependItems),a=n.preserveScrollPosition,l=(n.preserveScrollPositionOfTheBottomOfTheListOnMount,n.preserveScrollPositionAtBottomOnMount,n.shouldUpdateLayoutOnWindowResize,n.measureItemsBatchSize,n.scrollableContainer,n.getScrollableContainer,n.getColumnsCount,n.initialState,n.initialCustomState,n.onStateChange,n.onItemInitialRender,n.onItemFirstRender,n.getItemKey),u=(n.onMount,n.className),h=q(n,["as","itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","preserveScrollPositionOnPrependItems","preserveScrollPosition","preserveScrollPositionOfTheBottomOfTheListOnMount","preserveScrollPositionAtBottomOnMount","shouldUpdateLayoutOnWindowResize","measureItemsBatchSize","scrollableContainer","getScrollableContainer","getColumnsCount","initialState","initialCustomState","onStateChange","onItemInitialRender","onItemFirstRender","getItemKey","onMount","className"]),d=this.virtualScroller.getState(),c=d.items,m=d.itemStates,f=d.firstShownItemIndex,g=d.lastShownItemIndex,p=d.beforeItemsHeight,I=d.afterItemsHeight,v=this.props.items,S=c;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&v!==S){var y=F(S,v);y&&0===y.prependedItemsCount&&y.appendedItemsCount>0||(y&&(s||a)&&this.virtualScroller.captureScroll(S,v,y.prependedItemsCount),l||this.generateItemKeyPrefix(),this.itemRefs=new Array(v.length))}var b=this.virtualScroller.tbody;return e.createElement(i,Y({},h,{ref:this.container,className:b?u?u+" VirtualScroller":"VirtualScroller":u,style:{paddingTop:b?void 0:H(p),paddingBottom:b?void 0:H(I)}}),c.map(function(n,i){return i>=f&&i<=g?e.createElement(r,Y({},o,{ref:t.shouldUseRefs()?t.getItemRef(i):void 0,key:t.getItemKey(n,i),state:m&&m[i],onStateChange:t.getOnItemStateChange(i),onHeightChange:t.getOnItemHeightChange(i)}),n):null}))}}])&&K(i.prototype,r),o&&K(i,o),n}();return Q($,"propTypes",{as:Z,items:t.arrayOf(t.object).isRequired,itemComponent:Z.isRequired,itemComponentProps:t.object,estimatedItemHeight:t.number,bypass:t.bool,preserveScrollPositionOnPrependItems:t.bool,preserveScrollPosition:t.bool,preserveScrollPositionOfTheBottomOfTheListOnMount:t.bool,preserveScrollPositionAtBottomOnMount:t.bool,shouldUpdateLayoutOnWindowResize:t.func,measureItemsBatchSize:t.number,scrollableContainer:t.any,getScrollableContainer:t.func,getColumnsCount:t.func,getItemKey:t.func,className:t.string,onMount:t.func,onItemInitialRender:t.func,onItemFirstRender:t.func,onStateChange:t.func,initialCustomState:t.object,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,columnsCount:t.number,verticalSpacing:t.number})}),Q($,"defaultProps",{as:"div"}),$});
 //# sourceMappingURL=virtual-scroller-react.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.6.5 / 17.12.2020
+==================
+
+* Added `getItemKey(item)` property of React `<VirtualScroller/>`: that fixes forced re-rendering of all visible items whenever `items` property changes.
+
 1.6.4 / 12.12.2020
@@ -4,0 +9,0 @@ ==================

commonjs/ReactVirtualScroller.js

@@ -79,3 +79,3 @@ "use strict";
 
-    _defineProperty(_assertThisInitialized(_this), "uniquePrefixes", []);
+    _defineProperty(_assertThisInitialized(_this), "itemKeyPrefixes", []);
 
@@ -116,3 +116,3 @@ _defineProperty(_assertThisInitialized(_this), "updateLayout", function () {
 
-    _this.generateUniquePrefix(); // Create `VirtualScroller` instance.
+    _this.generateItemKeyPrefix(); // Create `VirtualScroller` instance.
 
@@ -180,2 +180,10 @@
             // Update existing state.
+            // In case of hypothetically rewriting this in React hooks,
+            // it wouldn't simply be `setState({ ...prevState, ...newState })`.
+            // The reason is that `setState()` would be "asynchronous" (not immediate),
+            // and `...prevState` would be stale in cases when more than a single
+            // `setState()` call is made before the state actually updates,
+            // making `prevState` stale, and, as a consequence, losing some
+            // of the state updates.
+            // But as long as it uses `this.setState()`, it's fine.
             _this2.setState(newState);
@@ -202,2 +210,20 @@ } else {
     /**
+     * Returns a `key` for an `item`'s element.
+     * @param  {object} item
+     * @param  {number} i
+     * @return {any}
+     */
+
+  }, {
+    key: "getItemKey",
+    value: function getItemKey(item, i) {
+      var getItemKey = this.props.getItemKey;
+
+      if (getItemKey) {
+        return getItemKey(item);
+      }
+
+      return "".concat(this.itemKeyPrefix, ":").concat(i);
+    }
+    /**
      * A proxy to `VirtualScroller.getItemCoordinates(i)`.
@@ -305,12 +331,12 @@ * @param  {number} i
   }, {
-    key: "generateUniquePrefix",
-    value: function generateUniquePrefix() {
+    key: "generateItemKeyPrefix",
+    value: function generateItemKeyPrefix() {
       var prefix = String(Math.random()).slice(2);
 
-      if (this.uniquePrefixes.indexOf(prefix) >= 0) {
-        return this.generateUniquePrefix();
+      if (this.itemKeyPrefixes.indexOf(prefix) >= 0) {
+        return this.generateItemKeyPrefix();
       }
 
-      this.uniquePrefixes.push(prefix);
-      this.uniquePrefix = prefix;
+      this.itemKeyPrefixes.push(prefix);
+      this.itemKeyPrefix = prefix;
     }
@@ -402,5 +428,6 @@ }, {
           onItemFirstRender = _this$props3.onItemFirstRender,
+          getItemKey = _this$props3.getItemKey,
           onMount = _this$props3.onMount,
           className = _this$props3.className,
-          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionOfTheBottomOfTheListOnMount", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "getColumnsCount", "initialState", "initialCustomState", "onStateChange", "onItemInitialRender", "onItemFirstRender", "onMount", "className"]);
+          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionOfTheBottomOfTheListOnMount", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "getColumnsCount", "initialState", "initialCustomState", "onStateChange", "onItemInitialRender", "onItemFirstRender", "getItemKey", "onMount", "className"]);
 
@@ -489,6 +516,6 @@ var _this$virtualScroller = this.virtualScroller.getState(),
 
-          this.generateUniquePrefix(); // Reset handler function caches.
+          if (!getItemKey) {
+            this.generateItemKeyPrefix();
+          } // Reset item refs.
 
-          this.onItemStateChange = new Array(newItems.length);
-          this.onItemHeightChange = new Array(newItems.length); // Reset item refs.
 
@@ -511,3 +538,3 @@ this.itemRefs = new Array(newItems.length);
             ref: _this6.shouldUseRefs() ? _this6.getItemRef(i) : undefined,
-            key: "".concat(_this6.uniquePrefix, ":").concat(i),
+            key: _this6.getItemKey(item, i),
             state: itemStates && itemStates[i],
@@ -559,2 +586,3 @@ onStateChange: _this6.getOnItemStateChange(i),
   getColumnsCount: _propTypes["default"].func,
+  getItemKey: _propTypes["default"].func,
   className: _propTypes["default"].string,
@@ -561,0 +589,0 @@ onMount: _propTypes["default"].func,

modules/ReactVirtualScroller.js

@@ -64,3 +64,3 @@ 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), "uniquePrefixes", []);
+    _defineProperty(_assertThisInitialized(_this), "itemKeyPrefixes", []);
 
@@ -101,3 +101,3 @@ _defineProperty(_assertThisInitialized(_this), "updateLayout", function () {
 
-    _this.generateUniquePrefix(); // Create `VirtualScroller` instance.
+    _this.generateItemKeyPrefix(); // Create `VirtualScroller` instance.
 
@@ -165,2 +165,10 @@
             // Update existing state.
+            // In case of hypothetically rewriting this in React hooks,
+            // it wouldn't simply be `setState({ ...prevState, ...newState })`.
+            // The reason is that `setState()` would be "asynchronous" (not immediate),
+            // and `...prevState` would be stale in cases when more than a single
+            // `setState()` call is made before the state actually updates,
+            // making `prevState` stale, and, as a consequence, losing some
+            // of the state updates.
+            // But as long as it uses `this.setState()`, it's fine.
             _this2.setState(newState);
@@ -187,2 +195,20 @@ } else {
     /**
+     * Returns a `key` for an `item`'s element.
+     * @param  {object} item
+     * @param  {number} i
+     * @return {any}
+     */
+
+  }, {
+    key: "getItemKey",
+    value: function getItemKey(item, i) {
+      var getItemKey = this.props.getItemKey;
+
+      if (getItemKey) {
+        return getItemKey(item);
+      }
+
+      return "".concat(this.itemKeyPrefix, ":").concat(i);
+    }
+    /**
      * A proxy to `VirtualScroller.getItemCoordinates(i)`.
@@ -290,12 +316,12 @@ * @param  {number} i
   }, {
-    key: "generateUniquePrefix",
-    value: function generateUniquePrefix() {
+    key: "generateItemKeyPrefix",
+    value: function generateItemKeyPrefix() {
       var prefix = String(Math.random()).slice(2);
 
-      if (this.uniquePrefixes.indexOf(prefix) >= 0) {
-        return this.generateUniquePrefix();
+      if (this.itemKeyPrefixes.indexOf(prefix) >= 0) {
+        return this.generateItemKeyPrefix();
       }
 
-      this.uniquePrefixes.push(prefix);
-      this.uniquePrefix = prefix;
+      this.itemKeyPrefixes.push(prefix);
+      this.itemKeyPrefix = prefix;
     }
@@ -387,5 +413,6 @@ }, {
           onItemFirstRender = _this$props3.onItemFirstRender,
+          getItemKey = _this$props3.getItemKey,
           onMount = _this$props3.onMount,
           className = _this$props3.className,
-          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionOfTheBottomOfTheListOnMount", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "getColumnsCount", "initialState", "initialCustomState", "onStateChange", "onItemInitialRender", "onItemFirstRender", "onMount", "className"]);
+          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionOfTheBottomOfTheListOnMount", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "getColumnsCount", "initialState", "initialCustomState", "onStateChange", "onItemInitialRender", "onItemFirstRender", "getItemKey", "onMount", "className"]);
 
@@ -474,6 +501,6 @@ var _this$virtualScroller = this.virtualScroller.getState(),
 
-          this.generateUniquePrefix(); // Reset handler function caches.
+          if (!getItemKey) {
+            this.generateItemKeyPrefix();
+          } // Reset item refs.
 
-          this.onItemStateChange = new Array(newItems.length);
-          this.onItemHeightChange = new Array(newItems.length); // Reset item refs.
 
@@ -496,3 +523,3 @@ this.itemRefs = new Array(newItems.length);
             ref: _this6.shouldUseRefs() ? _this6.getItemRef(i) : undefined,
-            key: "".concat(_this6.uniquePrefix, ":").concat(i),
+            key: _this6.getItemKey(item, i),
             state: itemStates && itemStates[i],
@@ -542,2 +569,3 @@ onStateChange: _this6.getOnItemStateChange(i),
   getColumnsCount: PropTypes.func,
+  getItemKey: PropTypes.func,
   className: PropTypes.string,
@@ -544,0 +572,0 @@ onMount: PropTypes.func,

package.json

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

README.md

@@ -373,2 +373,3 @@ # VirtualScroller
 * `itemComponentProps: object` — (optional) The props passed to `itemComponent`.
+* `getItemKey(item): any` — (optional) Returns a React `key` for rendering an `item`. If `getItemKey()` is not supplied, then item `key`s are autogenerated from a random-generated prefix (that changes every time `items` are updated) and an `item` index. Can be used to prevent `<VirtualScroller/>` from re-rendering all visible items every time `items` property is updated.
 * `as` — A component used as a container for the list items. Is `"div"` by default.
@@ -375,0 +376,0 @@ * `estimatedItemHeight: number` — (optional) The `estimatedItemHeight` option of `VirtualScroller` class.

source/ReactVirtualScroller.js

@@ -39,2 +39,3 @@ import React from 'react'
 		getColumnsCount: PropTypes.func,
+		getItemKey: PropTypes.func,
 		className: PropTypes.string,
@@ -88,3 +89,3 @@ onMount: PropTypes.func,
 	// in cases when `items` are changed.
-	uniquePrefixes = []
+	itemKeyPrefixes = []
 
@@ -97,3 +98,3 @@ constructor(props) {
 		// Generate unique `key` prefix for list item components.
-		this.generateUniquePrefix()
+		this.generateItemKeyPrefix()
 		// Create `VirtualScroller` instance.
@@ -156,2 +157,10 @@ this.createVirtualScroller()
 						// Update existing state.
+						// In case of hypothetically rewriting this in React hooks,
+						// it wouldn't simply be `setState({ ...prevState, ...newState })`.
+						// The reason is that `setState()` would be "asynchronous" (not immediate),
+						// and `...prevState` would be stale in cases when more than a single
+						// `setState()` call is made before the state actually updates,
+						// making `prevState` stale, and, as a consequence, losing some
+						// of the state updates.
+						// But as long as it uses `this.setState()`, it's fine.
 						this.setState(newState)
@@ -224,2 +233,16 @@ } else {
 	/**
+	 * Returns a `key` for an `item`'s element.
+	 * @param  {object} item
+	 * @param  {number} i
+	 * @return {any}
+	 */
+	getItemKey(item, i) {
+		const { getItemKey } = this.props
+		if (getItemKey) {
+			return getItemKey(item)
+		}
+		return `${this.itemKeyPrefix}:${i}`
+	}
+
+	/**
 	 * A proxy to `VirtualScroller.getItemCoordinates(i)`.
@@ -302,9 +325,9 @@ * @param  {number} i
 
-	generateUniquePrefix() {
+	generateItemKeyPrefix() {
 		const prefix = String(Math.random()).slice(2)
-		if (this.uniquePrefixes.indexOf(prefix) >= 0) {
-			return this.generateUniquePrefix()
+		if (this.itemKeyPrefixes.indexOf(prefix) >= 0) {
+			return this.generateItemKeyPrefix()
 		}
-		this.uniquePrefixes.push(prefix)
-		this.uniquePrefix = prefix
+		this.itemKeyPrefixes.push(prefix)
+		this.itemKeyPrefix = prefix
 	}
@@ -395,2 +418,3 @@
 			onItemFirstRender,
+			getItemKey,
 			onMount,
@@ -482,6 +506,5 @@ className,
 				// Reset the unique `key` prefix for item component keys.
-				this.generateUniquePrefix()
-				// Reset handler function caches.
-				this.onItemStateChange = new Array(newItems.length)
-				this.onItemHeightChange = new Array(newItems.length)
+				if (!getItemKey) {
+					this.generateItemKeyPrefix()
+				}
 				// Reset item refs.
@@ -507,3 +530,3 @@ this.itemRefs = new Array(newItems.length)
 								ref={this.shouldUseRefs() ? this.getItemRef(i) : undefined}
-								key={`${this.uniquePrefix}:${i}`}
+								key={this.getItemKey(item, i)}
 								state={itemStates && itemStates[i]}
@@ -510,0 +533,0 @@ onStateChange={this.getOnItemStateChange(i)}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1660555

increased by0.62%

Lines of code

10005

increased by0.9%

Number of lines in readme file

589

increased by0.17%

No dependency changes