virtual-scroller
Advanced tools
virtual-scroller - npm Package Compare versions
Comparing version 1.0.5 to 1.0.6
@@ -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 g(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var l=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)}}])&&g(t.prototype,n),i&&g(t,i),e}();function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){I(e,t,n[t])})}return e}function f(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function I(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var p=function(){function e(t,n){var i=this,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),I(this,"onScroll",function(){return i.onUpdateShownItemIndexes({reason:"scroll"})}),I(this,"onResize",function(){return i.onUpdateShownItemIndexes({reason:"resize"})}),I(this,"updateShownItemIndexes",function(e){var t=i.getShownItemIndexes(),n=t.firstShownItemIndex,r=t.lastShownItemIndex,s=t.redoLayoutAfterRender,o=i.getBeforeItemsHeight(n,r),a=i.getAfterItemsHeight(n,r);i.updateWillBeHiddenItemHeightsAndState(n,r),m("~ Layout results "+(i.bypass?"(bypass) ":"")+"~"),m("First shown item index",n),m("Last shown item index",r),m("Before items height",o),m("After items height",a),m("Average item height (calculated on previous render)",i.itemHeights.getAverage()),s&&m("Redo layout after render"),i.onShowItems(n,r),i.setState({firstShownItemIndex:n,lastShownItemIndex:r,beforeItemsHeight:o,afterItemsHeight:a},function(){return e(s)})}),I(this,"updateShownItemIndexesRecursive",function(){i.updateShownItemIndexes(function(e){e?setTimeout(function(){i.isMounted?i.updateShownItemIndexesRecursive():i.onDoneUpdatingItemIndexes()},0):i.onDoneUpdatingItemIndexes()})}),I(this,"restoreScroll",function(){var e=i.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;i.restoreScrollAfterPrepend=void 0;var r=i.getItemElement(t).getBoundingClientRect().top-n;0!==r&&(m("Restore scroll position: scroll by",r),window.scrollTo(0,a()+r))}),I(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==i.getItemsCount()&&!i.isUpdatingItemIndexes){if(clearTimeout(i.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==i.latestLayoutScreenTopAfterMargin&&a()<i.latestLayoutScreenTopAfterMargin&&i.getState().firstShownItemIndex>0||void 0!==i.latestLayoutScreenBottomAfterMargin&&a()+h()>i.latestLayoutScreenBottomAfterMargin&&i.getState().lastShownItemIndex<i.getItemsCount()-1;if(m(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return i.onUserStopsScrollingTimeout=setTimeout(i.onUserStoppedScrolling,100)}i.updateLayout(t)}}),I(this,"onUserStoppedScrolling",function(){i.isMounted&&i.updateLayout("stopped scrolling")});var o=r.getState,u=r.setState,d=r.onStateChange,g=r.bypass,f=r.bypassBatchSize,p=r.estimatedItemHeight,S=r.onLastSeenItemIndexChange,v=r.state;m("~ Initialize ~"),v&&(n=v.items),this.bypass=g,this.bypassBatchSize=f||10,this.initialItems=n,this.estimatedItemHeight=p,S&&(this.onLastSeenItemIndexChange=S,this.lastSeenItemIndex=-1),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),u?(this.getState=o,this.setState=u):(this.getState=function(){return i.state},this.setState=function(e,t){var n=i.state;i.state=c({},n,e),s(i.state,n)||(d&&d(i.state,n),i.isMounted&&i.onUpdate(n)),t&&t()}),v&&m("Initial state (passed)",v),this.setState(v||this.getInitialState()),this.getContainerNode=t,this.itemHeights=new l(t,n.length,this.getState),m("Items count",n.length),p&&m("Estimated item height",p)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var r=c({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return m("Initial state (created)",r),m("First shown item index",t),m("Last shown item index",n),r}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onUnmount",value:function(){this.isMounted=!1,this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,r=t.lastShownItemIndex;i===e.firstShownItemIndex&&r===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,r)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&this.itemHeights.update(e,t,n)}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){d()&&(m("Item",e,"state changed"),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",e,"height changed from",n,"to",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,s=0,o=!1,a=0;a<this.getItemsCount();){var h=this.itemHeights.get(a);if(void 0===h){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=S(n,e),g=d.prependedItemsCount,f=d.appendedItemsCount;g>0||f>0?(g>0&&(m("Prepended items count",g),u=new Array(g).concat(u),this.itemHeights.onPrepend(g),h&&(h=new Array(g).concat(h)),this.captureScroll(n,e,g)),f>0&&(m("Appended items count",f),u=u.concat(new Array(f)),h&&(h=h.concat(new Array(f)))),r+=g,s+=g,o+=this.itemHeights.getAverage()*g,a+=this.itemHeights.getAverage()*f):(m("Non-incremental items update"),m("Previous items",n),m("New items",e),this.itemHeights=new l(this.getContainerNode,e.length,this.getState),u=new Array(e.length),h=new Array(e.length),0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),o=0,a=0),this.setState(c({},void 0,{items:e,itemStates:h,itemHeights:u,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:o,afterItemsHeight:a}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&f(t.prototype,n),i&&f(t,i),e}();function S(e,t){var n=-1,i=-1;return e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1),n>=0&&i>=0?{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}:{prependedItemsCount:-1,appendedItemsCount:-1}}function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(){return(y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function w(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},s=Object.keys(e);for(i=0;i<s.length;i++)n=s[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i<s.length;i++)n=s[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function b(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function x(e){return(x=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function C(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function H(e,t){return(H=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function A(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var O=t.elementType||t.oneOfType([t.func,t.object]),k=function(t){function n(t){var i,r,s;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,s=x(n).call(this,t),i=!s||"object"!==v(s)&&"function"!=typeof s?C(r):s,A(C(i),"container",e.createRef()),A(C(i),"onItemStateChange",new Array(i.props.items.length)),A(C(i),"onItemHeightChange",new Array(i.props.items.length)),A(C(i),"itemRefs",new Array(i.props.items.length)),A(C(i),"uniquePrefixes",[]);var o=i.props,a=o.items,h=o.initialState,u=o.estimatedItemHeight,m=o.onLastSeenItemIndexChange,d=o.onStateChange,g=o.bypass,l=o.bypassBatchSize;return i.previousItemsProperty=a,i.virtualScroller=new p(function(){return i.container.current},a,{estimatedItemHeight:u,bypass:g,bypassBatchSize:l,onLastSeenItemIndexChange:m,state:h,getState:function(){return i.state},setState:function(e,t){i.state?i.setState(e,t):(i.state=e,d&&d(e))}}),i.generateUniquePrefix(),i}var i,r,o;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&H(e,t)}(n,e.Component),i=n,(r=[{key:"updateItem",value:function(e){this.itemRefs[e]&&this.itemRefs[e].current&&this.itemRefs[e].current.forceUpdate()}},{key:"getItemRef",value:function(t){return this.itemRefs[t]||(this.itemRefs[t]=e.createRef()),this.itemRefs[t]}},{key:"getOnItemStateChange",value:function(e){var t=this;return this.onItemStateChange[e]||(this.onItemStateChange[e]=function(n){return t.virtualScroller.onItemStateChange(e,n)}),this.onItemStateChange[e]}},{key:"getOnItemHeightChange",value:function(e){var t=this;return this.onItemHeightChange[e]||(this.onItemHeightChange[e]=function(){return t.virtualScroller.onItemHeightChange(e)}),this.onItemHeightChange[e]}},{key:"generateUniquePrefix",value:function(){var e=String(Math.random()).slice(2);if(this.uniquePrefixes.indexOf(e)>=0)return this.generateUniquePrefix();this.uniquePrefixes.push(e),this.uniquePrefix=e}},{key:"componentDidMount",value:function(){var e=this.props.onMount;e&&e(),this.virtualScroller.onMount()}},{key:"componentDidUpdate",value:function(e,t){var n=this.props.onStateChange;n&&(s(this.state,t)||n(this.state,t)),this.virtualScroller.onUpdate(t);var i=this.props.items;i!==e.items&&this.virtualScroller.updateItems(i)}},{key:"componentWillUnmount",value:function(){this.virtualScroller.onUnmount()}},{key:"render",value:function(){var t=this,n=this.props,i=n.itemComponent,r=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.bypassBatchSize,n.initialState,n.onStateChange,n.onLastSeenItemIndexChange,n.onMount,w(n,["itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","bypassBatchSize","initialState","onStateChange","onLastSeenItemIndexChange","onMount"])),o=this.virtualScroller.getState(),a=o.items,h=o.itemStates,u=o.firstShownItemIndex,m=o.lastShownItemIndex,d=o.beforeItemsHeight,g=o.afterItemsHeight,l=this.props.items,c=a;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&l!==c){var f=S(c,l),I=f.prependedItemsCount,p=f.appendedItemsCount;0===I&&p>0||(this.virtualScroller.captureScroll(c,l),this.generateUniquePrefix(),this.onItemStateChange=new Array(l.length),this.onItemHeightChange=new Array(l.length),this.itemRefs=new Array(l.length))}return e.createElement("div",y({},s,{ref:this.container,style:{paddingTop:d+"px",paddingBottom:g+"px"}}),a.map(function(n,s){return s>=u&&s<=m?e.createElement(i,y({},r,{ref:P(i)?t.getItemRef(s):void 0,key:"".concat(t.uniquePrefix,":").concat(s),state:h&&h[s],onStateChange:t.getOnItemStateChange(s),onHeightChange:t.getOnItemHeightChange(s)}),n):null}))}}])&&b(i.prototype,r),o&&b(i,o),n}();function P(e){return e.prototype.isReactComponent}return A(k,"propTypes",{items:t.arrayOf(t.object).isRequired,itemComponent:O.isRequired,itemComponentProps:t.object,estimatedItemHeight:t.number,bypass:t.bool,bypassBatchSize:t.number,onMount:t.func,onLastSeenItemIndexChange:t.func,onStateChange:t.func,initialState:t.shape({items:t.arrayOf(t.object).isRequired,itemStates:t.arrayOf(t.any),firstShownItemIndex:t.number.isRequired,lastShownItemIndex:t.number.isRequired,beforeItemsHeight:t.number.isRequired,afterItemsHeight:t.number.isRequired,itemHeights:t.arrayOf(t.number).isRequired,itemSpacing:t.number})}),k}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).VirtualScroller=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var i=Object.prototype.hasOwnProperty;function r(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function s(e,t){if(r(e,t))return!0;if("object"!==n(e)||null===e||"object"!==n(t)||null===t)return!1;var s=Object.keys(e),o=Object.keys(t);if(s.length!==o.length)return!1;for(var a=0;a<s.length;a++)if(!i.call(t,s[a])||!r(e[s[a]],t[s[a]]))return!1;return!0}function o(e){var t=e.getBoundingClientRect(),n=document.clientLeft||document.body.clientLeft||0,i=document.clientTop||document.body.clientTop||0,r=window.pageYOffset,s=window.pageXOffset;return{top:t.top+r-i,left:t.left+s-n,width:t.width,height:t.height}}function a(){return window.pageYOffset}function h(){return window.innerHeight}function u(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function m(){if(d()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,u(["[virtual-scroller]"].concat(n)))}}function d(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function l(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var g=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=i,this.measuredItemsHeight=0;for(var r=0;r<i().itemHeights.length;){if(null==i().itemHeights[r]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=r-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=r),this.measuredItemsHeight+=i().itemHeights[r];r++}}var t,n,i;return t=e,(n=[{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),r=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&m("Item spacing",r),r}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&(this.previousAverageItemHeight=this.averageItemHeight,this.previousAverageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0);for(var i=this.firstMeasuredItemIndex,r=this.lastMeasuredItemIndex,s=!1,o=e;o<=t;){var a=this._getItemHeight(o,n);void 0!==a&&(this.set(o,a),(void 0===i||o<i)&&(this.measuredItemsHeight+=a,s||(this.firstMeasuredItemIndex=o,s=!0)),(void 0===r||o>r)&&(void 0!==r&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=o)),o++}this.updateAverageItemHeight()}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"updateAverageItemHeight",value:function(){this.averageItemHeightSamplesCount=this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1,this.averageItemHeight=this.measuredItemsHeight/this.averageItemHeightSamplesCount}},{key:"getAverage",value:function(){return this.previousAverageItemHeight&&this.previousAverageItemHeightSamplesCount>this.averageItemHeightSamplesCount?this.previousAverageItemHeight:this.averageItemHeight||0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&l(t.prototype,n),i&&l(t,i),e}();function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){I(e,t,n[t])})}return e}function f(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function I(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var p=function(){function e(t,n){var i=this,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),I(this,"onScroll",function(){return i.onUpdateShownItemIndexes({reason:"scroll"})}),I(this,"onResize",function(){return i.onUpdateShownItemIndexes({reason:"resize"})}),I(this,"updateShownItemIndexes",function(e){var t=i.getShownItemIndexes(),n=t.firstShownItemIndex,r=t.lastShownItemIndex,s=t.redoLayoutAfterRender,o=i.getBeforeItemsHeight(n,r),a=i.getAfterItemsHeight(n,r);i.updateWillBeHiddenItemHeightsAndState(n,r),m("~ Layout results "+(i.bypass?"(bypass) ":"")+"~"),m("First shown item index",n),m("Last shown item index",r),m("Before items height",o),m("After items height",a),m("Average item height (calculated on previous render)",i.itemHeights.getAverage()),s&&m("Redo layout after render"),i.onShowItems(n,r),i.setState({firstShownItemIndex:n,lastShownItemIndex:r,beforeItemsHeight:o,afterItemsHeight:a},function(){return e(s)})}),I(this,"updateShownItemIndexesRecursive",function(){i.updateShownItemIndexes(function(e){e?setTimeout(function(){i.isMounted?i.updateShownItemIndexesRecursive():i.onDoneUpdatingItemIndexes()},0):i.onDoneUpdatingItemIndexes()})}),I(this,"restoreScroll",function(){var e=i.restoreScrollAfterPrepend,t=e.index,n=e.screenTop;i.restoreScrollAfterPrepend=void 0;var r=i.getItemElement(t).getBoundingClientRect().top-n;0!==r&&(m("Restore scroll position: scroll by",r),window.scrollTo(0,a()+r))}),I(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==i.getItemsCount()&&!i.isUpdatingItemIndexes){if(clearTimeout(i.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==i.latestLayoutScreenTopAfterMargin&&a()<i.latestLayoutScreenTopAfterMargin&&i.getState().firstShownItemIndex>0||void 0!==i.latestLayoutScreenBottomAfterMargin&&a()+h()>i.latestLayoutScreenBottomAfterMargin&&i.getState().lastShownItemIndex<i.getItemsCount()-1;if(m(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return i.onUserStopsScrollingTimeout=setTimeout(i.onUserStoppedScrolling,100)}i.updateLayout(t)}}),I(this,"onUserStoppedScrolling",function(){i.isMounted&&i.updateLayout("stopped scrolling")});var o=r.getState,u=r.setState,d=r.onStateChange,l=r.bypass,f=r.bypassBatchSize,p=r.estimatedItemHeight,S=r.onLastSeenItemIndexChange,v=r.state;m("~ Initialize ~"),v&&(n=v.items),this.bypass=l,this.bypassBatchSize=f||10,this.initialItems=n,this.estimatedItemHeight=p,S&&(this.onLastSeenItemIndexChange=S,this.lastSeenItemIndex=-1),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),u?(this.getState=o,this.setState=u):(this.getState=function(){return i.state},this.setState=function(e,t){var n=i.state;i.state=c({},n,e),s(i.state,n)||(d&&d(i.state,n),i.isMounted&&i.onUpdate(n)),t&&t()}),v&&m("Initial state (passed)",v),this.setState(v||this.getInitialState()),this.getContainerNode=t,this.itemHeights=new g(t,n.length,this.getState),m("Items count",n.length),p&&m("Estimated item height",p)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t,n,i=this.initialItems.length;i>0&&(t=Math.min(0,i-1),n=this.getLastShownItemIndex(t,i)),this.onShowItems(t,n);var r=c({},e,{items:this.initialItems,itemStates:new Array(i),itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:t,lastShownItemIndex:n});return m("Initial state (created)",r),m("First shown item index",t),m("Last shown item index",n),r}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return"undefined"!=typeof window?this.getEstimatedItemsCount(window.innerHeight):1}},{key:"getLastShownItemIndex",value:function(e,t){return Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return window.innerHeight}},{key:"onShowItems",value:function(e,t){if(this.onLastSeenItemIndexChange&&t>this.lastSeenItemIndex){var n=this.lastSeenItemIndex;this.lastSeenItemIndex=t,this.onLastSeenItemIndexChange(this.lastSeenItemIndex,n)}}},{key:"onMount",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex;this.getItemsCount()>0&&this.updateItemHeights(t,n),this.isMounted=!0,this.onUpdateShownItemIndexes({reason:"on mount"}),this.bypass||(window.addEventListener("scroll",this.onScroll),window.addEventListener("resize",this.onResize))}},{key:"onUnmount",value:function(){this.isMounted=!1,this.bypass||(window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),clearTimeout(this.onUserStopsScrollingTimeout),clearTimeout(this.watchContainerElementTopCoordinateTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,r=t.lastShownItemIndex;i===e.firstShownItemIndex&&r===e.lastShownItemIndex&&n===e.items||this.updateItemHeights(i,r)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&this.itemHeights.update(e,t,n)}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){d()&&(m("Item",e,"state changed"),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",e,"height changed from",n,"to",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,s=0,o=!1,a=0;a<this.getItemsCount();){var h=this.itemHeights.get(a);if(void 0===h){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=S(n,e),l=d.prependedItemsCount,f=d.appendedItemsCount;l>0||f>0?(l>0&&(m("Prepended items count",l),u=new Array(l).concat(u),this.itemHeights.onPrepend(l),h&&(h=new Array(l).concat(h)),this.captureScroll(n,e,l)),f>0&&(m("Appended items count",f),u=u.concat(new Array(f)),h&&(h=h.concat(new Array(f)))),r+=l,s+=l,o+=this.itemHeights.getAverage()*l,a+=this.itemHeights.getAverage()*f):(m("Non-incremental items update"),m("Previous items",n),m("New items",e),this.itemHeights=new g(this.getContainerNode,e.length,this.getState),u=new Array(e.length),h=new Array(e.length),0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),o=0,a=0),this.setState(c({},void 0,{items:e,itemStates:h,itemHeights:u,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:o,afterItemsHeight:a}),function(){t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&f(t.prototype,n),i&&f(t,i),e}();function S(e,t){var n=-1,i=-1;return e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1),n>=0&&i>=0?{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}:{prependedItemsCount:-1,appendedItemsCount:-1}}function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(){return(y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function w(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},s=Object.keys(e);for(i=0;i<s.length;i++)n=s[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i<s.length;i++)n=s[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function b(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function x(e){return(x=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function C(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function H(e,t){return(H=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function A(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var O=t.elementType||t.oneOfType([t.func,t.object]),k=function(t){function n(t){var i,r,s;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,s=x(n).call(this,t),i=!s||"object"!==v(s)&&"function"!=typeof s?C(r):s,A(C(i),"container",e.createRef()),A(C(i),"onItemStateChange",new Array(i.props.items.length)),A(C(i),"onItemHeightChange",new Array(i.props.items.length)),A(C(i),"itemRefs",new Array(i.props.items.length)),A(C(i),"uniquePrefixes",[]);var o=i.props,a=o.items,h=o.initialState,u=o.estimatedItemHeight,m=o.onLastSeenItemIndexChange,d=o.onStateChange,l=o.bypass,g=o.bypassBatchSize;return i.previousItemsProperty=a,i.virtualScroller=new p(function(){return i.container.current},a,{estimatedItemHeight:u,bypass:l,bypassBatchSize:g,onLastSeenItemIndexChange:m,state:h,getState:function(){return i.state},setState:function(e,t){i.state?i.setState(e,t):(i.state=e,d&&d(e))}}),i.generateUniquePrefix(),i}var i,r,o;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&H(e,t)}(n,e.Component),i=n,(r=[{key:"shouldUseRefs",value:function(){var e,t=this.props.itemComponent;return(e=t).prototype&&e.prototype.isReactComponent}},{key:"updateItem",value:function(e){if(!this.shouldUseRefs())return console.error("[virtual-scroller] `.updateItem(i)` has been called but the `component` doesn't allow `ref`s. Only `component`s that're `React.Component`s support this feature.");this.itemRefs[e]&&this.itemRefs[e].current&&this.itemRefs[e].current.forceUpdate()}},{key:"getItemRef",value:function(t){return this.itemRefs[t]||(this.itemRefs[t]=e.createRef()),this.itemRefs[t]}},{key:"getOnItemStateChange",value:function(e){var t=this;return this.onItemStateChange[e]||(this.onItemStateChange[e]=function(n){return t.virtualScroller.onItemStateChange(e,n)}),this.onItemStateChange[e]}},{key:"getOnItemHeightChange",value:function(e){var t=this;return this.onItemHeightChange[e]||(this.onItemHeightChange[e]=function(){return t.virtualScroller.onItemHeightChange(e)}),this.onItemHeightChange[e]}},{key:"generateUniquePrefix",value:function(){var e=String(Math.random()).slice(2);if(this.uniquePrefixes.indexOf(e)>=0)return this.generateUniquePrefix();this.uniquePrefixes.push(e),this.uniquePrefix=e}},{key:"componentDidMount",value:function(){var e=this.props.onMount;e&&e(),this.virtualScroller.onMount()}},{key:"componentDidUpdate",value:function(e,t){var n=this.props.onStateChange;n&&(s(this.state,t)||n(this.state,t)),this.virtualScroller.onUpdate(t);var i=this.props.items;i!==e.items&&this.virtualScroller.updateItems(i)}},{key:"componentWillUnmount",value:function(){this.virtualScroller.onUnmount()}},{key:"render",value:function(){var t=this,n=this.props,i=n.itemComponent,r=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.bypassBatchSize,n.initialState,n.onStateChange,n.onLastSeenItemIndexChange,n.onMount,w(n,["itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","bypassBatchSize","initialState","onStateChange","onLastSeenItemIndexChange","onMount"])),o=this.virtualScroller.getState(),a=o.items,h=o.itemStates,u=o.firstShownItemIndex,m=o.lastShownItemIndex,d=o.beforeItemsHeight,l=o.afterItemsHeight,g=this.props.items,c=a;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&g!==c){var f=S(c,g),I=f.prependedItemsCount,p=f.appendedItemsCount;0===I&&p>0||(this.virtualScroller.captureScroll(c,g),this.generateUniquePrefix(),this.onItemStateChange=new Array(g.length),this.onItemHeightChange=new Array(g.length),this.itemRefs=new Array(g.length))}return e.createElement("div",y({},s,{ref:this.container,style:{paddingTop: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,onLastSeenItemIndexChange:t.func,onStateChange:t.func,initialState:t.shape({items:t.arrayOf(t.object).isRequired,itemStates:t.arrayOf(t.any),firstShownItemIndex:t.number.isRequired,lastShownItemIndex:t.number.isRequired,beforeItemsHeight:t.number.isRequired,afterItemsHeight:t.number.isRequired,itemHeights:t.arrayOf(t.number).isRequired,itemSpacing:t.number})}),k}); | ||
| //# sourceMappingURL=virtual-scroller-react.js.map |
@@ -124,4 +124,25 @@ "use strict"; | ||
| _createClass(ReactVirtualScroller, [{ | ||
| key: "shouldUseRefs", | ||
| value: function shouldUseRefs() { | ||
| // There's no way to detect if `ref` can be passed to `component`: | ||
| // https://github.com/facebook/react/issues/16309 | ||
| // So only uses `ref`s for `React.Component`s. | ||
| var itemComponent = this.props.itemComponent; | ||
| return isComponentClass(itemComponent); | ||
| } | ||
| }, { | ||
| key: "updateItem", | ||
| value: function updateItem(i) { | ||
| 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.'); | ||
| } // The item may be non-rendered when `.updateItem(i)` is called on it. | ||
| // For example, when there's a "parent comment" having several "replies" | ||
| // each of which has an autogenerated quote of the "parent comment" | ||
| // and then the "parent comment" is updated (for example, a YouTube video | ||
| // link gets parsed into an embedded video player) and all of its "replies" | ||
| // should be updated too to show the parsed video title instead of the URL, | ||
| // so `.updateItem(i)` is simply called on all of the "parent post"'s replies | ||
| // regardless of some of those replies being rendered or not. | ||
| if (this.itemRefs[i] && this.itemRefs[i].current) { | ||
@@ -327,3 +348,3 @@ this.itemRefs[i].current.forceUpdate(); | ||
| return _react["default"].createElement(Component, _extends({}, itemComponentProps, { | ||
| ref: isComponentClass(Component) ? _this4.getItemRef(i) : undefined, | ||
| ref: _this4.shouldUseRefs() ? _this4.getItemRef(i) : undefined, | ||
| key: "".concat(_this4.uniquePrefix, ":").concat(i), | ||
@@ -344,6 +365,6 @@ state: itemStates && itemStates[i], | ||
| /** | ||
| * Checks if the argument is a React.Component class. | ||
| * Checks if the argument is a `React.Component` class. | ||
| * https://overreacted.io/how-does-react-tell-a-class-from-a-function/ | ||
| * @param {any} Component | ||
| * @return {object} [object] | ||
| * @return {object} [result] Returns `undefined` if it's not a `React.Component`. Returns an empty object if it's a `React.Component` (`.isReactComponent` is an empty object). | ||
| */ | ||
@@ -386,4 +407,5 @@ | ||
| // return Component.prototype instanceof React.Component | ||
| return Component.prototype.isReactComponent; | ||
| // `React.memo()` returns `.prototype === undefined` for some reason. | ||
| return Component.prototype && Component.prototype.isReactComponent; | ||
| } | ||
| //# sourceMappingURL=ReactVirtualScroller.js.map |
@@ -109,4 +109,25 @@ 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); } | ||
| _createClass(ReactVirtualScroller, [{ | ||
| key: "shouldUseRefs", | ||
| value: function shouldUseRefs() { | ||
| // There's no way to detect if `ref` can be passed to `component`: | ||
| // https://github.com/facebook/react/issues/16309 | ||
| // So only uses `ref`s for `React.Component`s. | ||
| var itemComponent = this.props.itemComponent; | ||
| return isComponentClass(itemComponent); | ||
| } | ||
| }, { | ||
| key: "updateItem", | ||
| value: function updateItem(i) { | ||
| 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.'); | ||
| } // The item may be non-rendered when `.updateItem(i)` is called on it. | ||
| // For example, when there's a "parent comment" having several "replies" | ||
| // each of which has an autogenerated quote of the "parent comment" | ||
| // and then the "parent comment" is updated (for example, a YouTube video | ||
| // link gets parsed into an embedded video player) and all of its "replies" | ||
| // should be updated too to show the parsed video title instead of the URL, | ||
| // so `.updateItem(i)` is simply called on all of the "parent post"'s replies | ||
| // regardless of some of those replies being rendered or not. | ||
| if (this.itemRefs[i] && this.itemRefs[i].current) { | ||
@@ -312,3 +333,3 @@ this.itemRefs[i].current.forceUpdate(); | ||
| return React.createElement(Component, _extends({}, itemComponentProps, { | ||
| ref: isComponentClass(Component) ? _this4.getItemRef(i) : undefined, | ||
| ref: _this4.shouldUseRefs() ? _this4.getItemRef(i) : undefined, | ||
| key: "".concat(_this4.uniquePrefix, ":").concat(i), | ||
@@ -329,6 +350,6 @@ state: itemStates && itemStates[i], | ||
| /** | ||
| * Checks if the argument is a React.Component class. | ||
| * Checks if the argument is a `React.Component` class. | ||
| * https://overreacted.io/how-does-react-tell-a-class-from-a-function/ | ||
| * @param {any} Component | ||
| * @return {object} [object] | ||
| * @return {object} [result] Returns `undefined` if it's not a `React.Component`. Returns an empty object if it's a `React.Component` (`.isReactComponent` is an empty object). | ||
| */ | ||
@@ -371,4 +392,5 @@ | ||
| // return Component.prototype instanceof React.Component | ||
| return Component.prototype.isReactComponent; | ||
| // `React.memo()` returns `.prototype === undefined` for some reason. | ||
| return Component.prototype && Component.prototype.isReactComponent; | ||
| } | ||
| //# sourceMappingURL=ReactVirtualScroller.js.map |
| { | ||
| "name": "virtual-scroller", | ||
| "version": "1.0.5", | ||
| "version": "1.0.6", | ||
| "description": "An open-source implementation of Twitter's VirtualScroller component.", | ||
@@ -5,0 +5,0 @@ "main": "index.commonjs.js", |
@@ -264,3 +264,3 @@ # VirtualScroller | ||
| * `updateItem(i)` — Calls `.forceUpdate()` on the `itemComponent` instance for item with index `i`. Does nothing if the item isn't rendered. | ||
| * `updateItem(i)` — Calls `.forceUpdate()` on the `itemComponent` instance for item with index `i`. Does nothing if the item isn't rendered. Is only supported for `component`s that are `React.Component`s. | ||
@@ -267,0 +267,0 @@ ## Dynamically Loaded Lists |
@@ -106,3 +106,22 @@ import React from 'react' | ||
| shouldUseRefs() { | ||
| // There's no way to detect if `ref` can be passed to `component`: | ||
| // https://github.com/facebook/react/issues/16309 | ||
| // So only uses `ref`s for `React.Component`s. | ||
| const { itemComponent } = this.props | ||
| return isComponentClass(itemComponent) | ||
| } | ||
| updateItem(i) { | ||
| 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.') | ||
| } | ||
| // The item may be non-rendered when `.updateItem(i)` is called on it. | ||
| // For example, when there's a "parent comment" having several "replies" | ||
| // each of which has an autogenerated quote of the "parent comment" | ||
| // and then the "parent comment" is updated (for example, a YouTube video | ||
| // link gets parsed into an embedded video player) and all of its "replies" | ||
| // should be updated too to show the parsed video title instead of the URL, | ||
| // so `.updateItem(i)` is simply called on all of the "parent post"'s replies | ||
| // regardless of some of those replies being rendered or not. | ||
| if (this.itemRefs[i] && this.itemRefs[i].current) { | ||
@@ -287,3 +306,3 @@ this.itemRefs[i].current.forceUpdate() | ||
| {...itemComponentProps} | ||
| ref={isComponentClass(Component) ? this.getItemRef(i) : undefined} | ||
| ref={this.shouldUseRefs() ? this.getItemRef(i) : undefined} | ||
| key={`${this.uniquePrefix}:${i}`} | ||
@@ -305,10 +324,11 @@ state={itemStates && itemStates[i]} | ||
| /** | ||
| * Checks if the argument is a React.Component class. | ||
| * Checks if the argument is a `React.Component` class. | ||
| * https://overreacted.io/how-does-react-tell-a-class-from-a-function/ | ||
| * @param {any} Component | ||
| * @return {object} [object] | ||
| * @return {object} [result] Returns `undefined` if it's not a `React.Component`. Returns an empty object if it's a `React.Component` (`.isReactComponent` is an empty object). | ||
| */ | ||
| function isComponentClass(Component) { | ||
| // return Component.prototype instanceof React.Component | ||
| return Component.prototype.isReactComponent | ||
| // `React.memo()` returns `.prototype === undefined` for some reason. | ||
| return Component.prototype && Component.prototype.isReactComponent | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by1.08%
907269
- Lines of code
- increased by1.09%
5638
No dependency changes