virtual-scroller - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

bundle/virtual-scroller-react.js

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

commonjs/ReactVirtualScroller.js

@@ -151,2 +151,4 @@ "use strict";
     value: function updateItem(i) {
+      var _this2 = this;
+
       if (!this.shouldUseRefs()) {
@@ -165,3 +167,18 @@ return console.error('[virtual-scroller] `.updateItem(i)` has been called but the `component` doesn\'t allow `ref`s. Only `component`s that\'re `React.Component`s support this feature.');
       if (this.itemRefs[i] && this.itemRefs[i].current) {
-        this.itemRefs[i].current.forceUpdate();
+        // Stores `item` here because the `i` index
+        // might have changed when the callback is called,
+        // or the item even may have been removed.
+        var item = items[i];
+        this.itemRefs[i].current.forceUpdate(function () {
+          if (_this2._isMounted) {
+            // Recalculates the `i` index here because it
+            // might have changed when the callback is called,
+            // or the item even may have been removed.
+            var _i = items.indexOf(item);
+
+            if (_i >= 0) {
+              _this2.virtualScroller.onItemHeightChange(_i);
+            }
+          }
+        });
       }
@@ -185,7 +202,7 @@ } // Functional components can't have a `ref` assigned to them.
     value: function getOnItemStateChange(i) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (!this.onItemStateChange[i]) {
         this.onItemStateChange[i] = function (itemState) {
-          return _this2.virtualScroller.onItemStateChange(i, itemState);
+          return _this3.virtualScroller.onItemStateChange(i, itemState);
         };
@@ -199,7 +216,7 @@ }
     value: function getOnItemHeightChange(i) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (!this.onItemHeightChange[i]) {
         this.onItemHeightChange[i] = function () {
-          return _this3.virtualScroller.onItemHeightChange(i);
+          return _this4.virtualScroller.onItemHeightChange(i);
         };
@@ -234,2 +251,3 @@ }
       this.virtualScroller.onMount();
+      this._isMounted = true;
     }
@@ -263,2 +281,3 @@ }, {
       this.virtualScroller.onUnmount();
+      this._isMounted = false;
     }
@@ -268,3 +287,3 @@ }, {
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -370,7 +389,7 @@ var _this$props2 = this.props,
           return _react["default"].createElement(Component, _extends({}, itemComponentProps, {
-            ref: _this4.shouldUseRefs() ? _this4.getItemRef(i) : undefined,
-            key: "".concat(_this4.uniquePrefix, ":").concat(i),
+            ref: _this5.shouldUseRefs() ? _this5.getItemRef(i) : undefined,
+            key: "".concat(_this5.uniquePrefix, ":").concat(i),
             state: itemStates && itemStates[i],
-            onStateChange: _this4.getOnItemStateChange(i),
-            onHeightChange: _this4.getOnItemHeightChange(i)
+            onStateChange: _this5.getOnItemStateChange(i),
+            onHeightChange: _this5.getOnItemHeightChange(i)
           }), item);
@@ -377,0 +396,0 @@ }

modules/ReactVirtualScroller.js

@@ -136,2 +136,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
     value: function updateItem(i) {
+      var _this2 = this;
+
       if (!this.shouldUseRefs()) {
@@ -150,3 +152,18 @@ return console.error('[virtual-scroller] `.updateItem(i)` has been called but the `component` doesn\'t allow `ref`s. Only `component`s that\'re `React.Component`s support this feature.');
       if (this.itemRefs[i] && this.itemRefs[i].current) {
-        this.itemRefs[i].current.forceUpdate();
+        // Stores `item` here because the `i` index
+        // might have changed when the callback is called,
+        // or the item even may have been removed.
+        var item = items[i];
+        this.itemRefs[i].current.forceUpdate(function () {
+          if (_this2._isMounted) {
+            // Recalculates the `i` index here because it
+            // might have changed when the callback is called,
+            // or the item even may have been removed.
+            var _i = items.indexOf(item);
+
+            if (_i >= 0) {
+              _this2.virtualScroller.onItemHeightChange(_i);
+            }
+          }
+        });
       }
@@ -170,7 +187,7 @@ } // Functional components can't have a `ref` assigned to them.
     value: function getOnItemStateChange(i) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (!this.onItemStateChange[i]) {
         this.onItemStateChange[i] = function (itemState) {
-          return _this2.virtualScroller.onItemStateChange(i, itemState);
+          return _this3.virtualScroller.onItemStateChange(i, itemState);
         };
@@ -184,7 +201,7 @@ }
     value: function getOnItemHeightChange(i) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (!this.onItemHeightChange[i]) {
         this.onItemHeightChange[i] = function () {
-          return _this3.virtualScroller.onItemHeightChange(i);
+          return _this4.virtualScroller.onItemHeightChange(i);
         };
@@ -219,2 +236,3 @@ }
       this.virtualScroller.onMount();
+      this._isMounted = true;
     }
@@ -248,2 +266,3 @@ }, {
       this.virtualScroller.onUnmount();
+      this._isMounted = false;
     }
@@ -253,3 +272,3 @@ }, {
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -355,7 +374,7 @@ var _this$props2 = this.props,
           return React.createElement(Component, _extends({}, itemComponentProps, {
-            ref: _this4.shouldUseRefs() ? _this4.getItemRef(i) : undefined,
-            key: "".concat(_this4.uniquePrefix, ":").concat(i),
+            ref: _this5.shouldUseRefs() ? _this5.getItemRef(i) : undefined,
+            key: "".concat(_this5.uniquePrefix, ":").concat(i),
             state: itemStates && itemStates[i],
-            onStateChange: _this4.getOnItemStateChange(i),
-            onHeightChange: _this4.getOnItemHeightChange(i)
+            onStateChange: _this5.getOnItemStateChange(i),
+            onHeightChange: _this5.getOnItemHeightChange(i)
           }), item);
@@ -362,0 +381,0 @@ }

package.json

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

README.md

@@ -221,3 +221,3 @@ # VirtualScroller
 * `items` — The items list.
-* `itemComponent` — List item component. Receives the list item as the `children` property. Can optionally receive `state` and `onSaveState()` properties for saving list item state before unmounting it and then restoring that state after the item is re-mounted (for example, this supports "Show more" buttons, "Expand YouTube video" buttons, etc).
+* `itemComponent` — List item component. Receives the list item as the `children` property. Can optionally receive `state` and `onSaveState()` properties for saving list item state before unmounting it and then restoring that state after the item is re-mounted (for example, this supports "Show more" buttons, "Expand YouTube video" buttons, etc). For best performance, make sure it's a `React.PureComponent` or a `React.memo()`, otherwise it'll be re-rendering as the user scrolls.
 * `itemComponentProps` — (optional) The props passed to `itemComponent`.
@@ -364,4 +364,8 @@ * `estimatedItemHeight` — (optional) The `estimatedItemHeight` option of `VirtualScroller` class.
 
+## Possible enhancements
+
+* Currently React `<VirtualScroller/>` passes `onHeightChange()` property and provides `.updateItem(i)` instance method. Both these features could be replaced with doing it internally in `VirtualScroller`'s `.updateItems(newItems)` method: it could detect the items that have changed (`prevItems[i] !== newItems[i]`) and recalculate heights for such items, while the changed `item` properties would also cause the relevant React elements to be rerendered.
+
 ## License
 
 [MIT](LICENSE)

source/ReactVirtualScroller.js

@@ -145,3 +145,17 @@ import React from 'react'
 		if (this.itemRefs[i] && this.itemRefs[i].current) {
-			this.itemRefs[i].current.forceUpdate()
+			// Stores `item` here because the `i` index
+			// might have changed when the callback is called,
+			// or the item even may have been removed.
+			const item = items[i]
+			this.itemRefs[i].current.forceUpdate(() => {
+				if (this._isMounted) {
+					// Recalculates the `i` index here because it
+					// might have changed when the callback is called,
+					// or the item even may have been removed.
+					const i = items.indexOf(item)
+					if (i >= 0) {
+						this.virtualScroller.onItemHeightChange(i)
+					}
+				}
+			})
 		}
@@ -193,2 +207,3 @@ }
 		this.virtualScroller.onMount()
+		this._isMounted = true
 	}
@@ -218,2 +233,3 @@
 		this.virtualScroller.onUnmount()
+		this._isMounted = false
 	}
@@ -220,0 +236,0 @@

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

929524

increased by0.61%

Lines of code

5825

increased by0.88%

Number of lines in readme file

369

increased by1.1%

No dependency changes