@segment/react-tiny-virtual-list/build/react-tiny-virtual-list.min.js

A tiny but mighty list virtualization component, with zero dependencies 💪

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e.VirtualList={},e.React,e.PropTypes)}(this,function(T,O,e){"use strict";var i=function(e,t){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(e,t)};var d,t,o,f,r,A=function(){return(A=Object.assign||function(e){for(var t,i=1,o=arguments.length;i<o;i++)for(var r in t=arguments[i])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};(t=d=d||{}).AUTO="auto",t.START="start",t.CENTER="center",t.END="end",(o=T.ScrollDirection||(T.ScrollDirection={})).HORIZONTAL="horizontal",o.VERTICAL="vertical",(r=f=f||{}).OBSERVED="observed",r.REQUESTED="requested";var n,s,l,a,c,u=((n={})[T.ScrollDirection.VERTICAL]="scrollTop",n[T.ScrollDirection.HORIZONTAL]="scrollLeft",n),x=((s={})[T.ScrollDirection.VERTICAL]="height",s[T.ScrollDirection.HORIZONTAL]="width",s),h=((l={})[T.ScrollDirection.VERTICAL]="top",l[T.ScrollDirection.HORIZONTAL]="left",l),p=((a={})[T.ScrollDirection.VERTICAL]="marginTop",a[T.ScrollDirection.HORIZONTAL]="marginLeft",a),m=((c={})[T.ScrollDirection.VERTICAL]="marginBottom",c[T.ScrollDirection.HORIZONTAL]="marginRight",c),S=(I.prototype.updateConfig=function(e){var t=e.itemCount,i=e.itemSizeGetter,o=e.estimatedItemSize;null!=t&&(this.itemCount=t),null!=o&&(this.estimatedItemSize=o),null!=i&&(this.itemSizeGetter=i)},I.prototype.getLastMeasuredIndex=function(){return this.lastMeasuredIndex},I.prototype.getSizeAndPositionForIndex=function(e){if(e<0||e>=this.itemCount)throw Error("Requested index "+e+" is outside of range 0.."+this.itemCount);if(e>this.lastMeasuredIndex){for(var t=this.getSizeAndPositionOfLastMeasuredItem(),i=t.offset+t.size,o=this.lastMeasuredIndex+1;o<=e;o++){var r=this.itemSizeGetter(o);if(null==r||isNaN(r))throw Error("Invalid size returned for index "+o+" of value "+r);this.itemSizeAndPositionData[o]={offset:i,size:r},i+=r}this.lastMeasuredIndex=e}return this.itemSizeAndPositionData[e]},I.prototype.getSizeAndPositionOfLastMeasuredItem=function(){return 0<=this.lastMeasuredIndex?this.itemSizeAndPositionData[this.lastMeasuredIndex]:{offset:0,size:0}},I.prototype.getTotalSize=function(){var e=this.getSizeAndPositionOfLastMeasuredItem();return e.offset+e.size+(this.itemCount-this.lastMeasuredIndex-1)*this.estimatedItemSize},I.prototype.getUpdatedOffsetForIndex=function(e){var t=e.align,i=void 0===t?d.START:t,o=e.containerSize,r=e.currentOffset,n=e.targetIndex;if(o<=0)return 0;var s,l=this.getSizeAndPositionForIndex(n),a=l.offset,c=a-o+l.size;switch(i){case d.END:s=c;break;case d.CENTER:s=a-(o-l.size)/2;break;case d.START:s=a;break;default:s=Math.max(c,Math.min(a,r))}var f=this.getTotalSize();return Math.max(0,Math.min(f-o,s))},I.prototype.getVisibleRange=function(e){var t=e.containerSize,i=e.offset,o=e.overscanCount;if(0===this.getTotalSize())return{};var r=i+t,n=this.findNearestItem(i);if(void 0===n)throw Error("Invalid offset "+i+" specified");var s=this.getSizeAndPositionForIndex(n);i=s.offset+s.size;for(var l=n;i<r&&l<this.itemCount-1;)l++,i+=this.getSizeAndPositionForIndex(l).size;return o&&(n=Math.max(0,n-o),l=Math.min(l+o,this.itemCount-1)),{start:n,stop:l}},I.prototype.resetItem=function(e){this.lastMeasuredIndex=Math.min(this.lastMeasuredIndex,e-1)},I.prototype.findNearestItem=function(e){if(isNaN(e))throw Error("Invalid offset "+e+" specified");e=Math.max(0,e);var t=this.getSizeAndPositionOfLastMeasuredItem(),i=Math.max(0,this.lastMeasuredIndex);return t.offset>=e?this.binarySearch({high:i,low:0,offset:e}):this.exponentialSearch({index:i,offset:e})},I.prototype.binarySearch=function(e){for(var t=e.low,i=e.high,o=e.offset,r=0,n=0;t<=i;){if(r=t+Math.floor((i-t)/2),(n=this.getSizeAndPositionForIndex(r).offset)===o)return r;n<o?t=r+1:o<n&&(i=r-1)}return 0<t?t-1:0},I.prototype.exponentialSearch=function(e){for(var t=e.index,i=e.offset,o=1;t<this.itemCount&&this.getSizeAndPositionForIndex(t).offset<i;)t+=o,o*=2;return this.binarySearch({high:Math.min(t,this.itemCount-1),low:Math.floor(t/2),offset:i})},I);function I(e){var t=e.itemCount,i=e.itemSizeGetter,o=e.estimatedItemSize;this.itemSizeGetter=i,this.itemCount=t,this.estimatedItemSize=o,this.itemSizeAndPositionData={},this.lastMeasuredIndex=-1}var g,z,y,C={overflow:"auto",willChange:"transform",WebkitOverflowScrolling:"touch"},R={position:"relative",width:"100%",minHeight:"100%"},v={position:"absolute",top:0,left:0,width:"100%"},E=A({},v,{position:"sticky"}),D=(y=O.PureComponent,i(g=b,z=y),void(g.prototype=null===z?Object.create(z):(M.prototype=z.prototype,new M)),b.prototype.componentDidMount=function(){var e=this.props,t=e.scrollOffset,i=e.scrollToIndex;this.rootNode.addEventListener("scroll",this.handleScroll,{passive:!0}),null!=t?this.scrollTo(t):null!=i&&this.scrollTo(this.getOffsetForIndex(i))},b.prototype.UNSAFE_componentWillReceiveProps=function(e){var t=this.props,i=t.estimatedItemSize,o=t.itemCount,r=t.itemSize,n=t.scrollOffset,s=t.scrollToAlignment,l=t.scrollToIndex,a=e.scrollToIndex!==l||e.scrollToAlignment!==s,c=e.itemCount!==o||e.itemSize!==r||e.estimatedItemSize!==i;e.itemSize!==r&&this.sizeAndPositionManager.updateConfig({itemSizeGetter:this.itemSizeGetter(e.itemSize)}),e.itemCount===o&&e.estimatedItemSize===i||this.sizeAndPositionManager.updateConfig({itemCount:e.itemCount,estimatedItemSize:this.getEstimatedItemSize(e)}),c&&this.recomputeSizes(),e.scrollOffset!==n?this.setState({offset:e.scrollOffset||0,scrollChangeReason:f.REQUESTED}):"number"==typeof e.scrollToIndex&&(a||c)&&this.setState({offset:this.getOffsetForIndex(e.scrollToIndex,e.scrollToAlignment,e.itemCount),scrollChangeReason:f.REQUESTED})},b.prototype.componentDidUpdate=function(e,t){var i=this.state,o=i.offset,r=i.scrollChangeReason;t.offset!==o&&r===f.REQUESTED&&this.scrollTo(o)},b.prototype.componentWillUnmount=function(){this.rootNode.removeEventListener("scroll",this.handleScroll)},b.prototype.scrollTo=function(e){var t=this.props.scrollDirection,i=void 0===t?T.ScrollDirection.VERTICAL:t;this.rootNode[u[i]]=e},b.prototype.getOffsetForIndex=function(e,t,i){void 0===t&&(t=this.props.scrollToAlignment),void 0===i&&(i=this.props.itemCount);var o=this.props.scrollDirection,r=void 0===o?T.ScrollDirection.VERTICAL:o;return(e<0||i<=e)&&(e=0),this.sizeAndPositionManager.getUpdatedOffsetForIndex({align:t,containerSize:this.props[x[r]],currentOffset:this.state&&this.state.offset||0,targetIndex:e})},b.prototype.recomputeSizes=function(e){void 0===e&&(e=0),this.styleCache={},this.sizeAndPositionManager.resetItem(e)},b.prototype.render=function(){var e,t=this,i=this.props,o=(i.estimatedItemSize,i.height),r=i.overscanCount,n=void 0===r?3:r,s=i.renderItem,l=(i.itemCount,i.itemSize,i.onItemsRendered),a=(i.onScroll,i.scrollDirection),c=void 0===a?T.ScrollDirection.VERTICAL:a,f=(i.scrollOffset,i.scrollToIndex,i.scrollToAlignment,i.stickyIndices),d=i.style,u=i.width,h=function(e,t){var i={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&(i[o[r]]=e[o[r]])}return i}(i,["estimatedItemSize","height","overscanCount","renderItem","itemCount","itemSize","onItemsRendered","onScroll","scrollDirection","scrollOffset","scrollToIndex","scrollToAlignment","stickyIndices","style","width"]),p=this.state.offset,m=this.sizeAndPositionManager.getVisibleRange({containerSize:this.props[x[c]]||0,offset:p,overscanCount:n}),S=m.start,I=m.stop,g=[],z=A({},C,d,{height:o,width:u}),y=A({},R,((e={})[x[c]]=this.sizeAndPositionManager.getTotalSize(),e));if(null!=f&&0!==f.length&&(f.forEach(function(e){return g.push(s({index:e,style:t.getStyle(e,!0)}))}),c===T.ScrollDirection.HORIZONTAL&&(y.display="flex")),void 0!==S&&void 0!==I){for(var v=S;v<=I;v++)null!=f&&f.includes(v)||g.push(s({index:v,style:this.getStyle(v,!1)}));"function"==typeof l&&l({startIndex:S,stopIndex:I})}return O.createElement("div",A({ref:this.getRef},h,{style:z}),O.createElement("div",{style:y},g))},b.prototype.getNodeOffset=function(){var e=this.props.scrollDirection,t=void 0===e?T.ScrollDirection.VERTICAL:e;return this.rootNode[u[t]]},b.prototype.getEstimatedItemSize=function(e){return void 0===e&&(e=this.props),e.estimatedItemSize||"number"==typeof e.itemSize&&e.itemSize||50},b.prototype.getSize=function(e,t){return"function"==typeof t?t(e):Array.isArray(t)?t[e]:t},b.prototype.getStyle=function(e,t){var i=this.styleCache[e];if(i)return i;var o,r,n=this.props.scrollDirection,s=void 0===n?T.ScrollDirection.VERTICAL:n,l=this.sizeAndPositionManager.getSizeAndPositionForIndex(e),a=l.size,c=l.offset;return this.styleCache[e]=t?A({},E,((o={})[x[s]]=a,o[p[s]]=c,o[m[s]]=-(c+a),o.zIndex=1,o)):A({},v,((r={})[x[s]]=a,r[h[s]]=c,r))},b.defaultProps={overscanCount:3,scrollDirection:T.ScrollDirection.VERTICAL,width:"100%"},b.propTypes={estimatedItemSize:e.number,height:e.oneOfType([e.number,e.string]).isRequired,itemCount:e.number.isRequired,itemSize:e.oneOfType([e.number,e.array,e.func]).isRequired,onScroll:e.func,onItemsRendered:e.func,overscanCount:e.number,renderItem:e.func.isRequired,scrollOffset:e.number,scrollToIndex:e.number,scrollToAlignment:e.oneOf([d.AUTO,d.START,d.CENTER,d.END]),scrollDirection:e.oneOf([T.ScrollDirection.HORIZONTAL,T.ScrollDirection.VERTICAL]),stickyIndices:e.arrayOf(e.number),style:e.object,width:e.oneOfType([e.number,e.string])},b);function M(){this.constructor=g}function b(){var o=null!==y&&y.apply(this,arguments)||this;return o.itemSizeGetter=function(t){return function(e){return o.getSize(e,t)}},o.sizeAndPositionManager=new S({itemCount:o.props.itemCount,itemSizeGetter:o.itemSizeGetter(o.props.itemSize),estimatedItemSize:o.getEstimatedItemSize()}),o.state={offset:o.props.scrollOffset||null!=o.props.scrollToIndex&&o.getOffsetForIndex(o.props.scrollToIndex)||0,scrollChangeReason:f.REQUESTED},o.styleCache={},o.getRef=function(e){o.rootNode=e},o.handleScroll=function(e){var t=o.props.onScroll,i=o.getNodeOffset();i<0||o.state.offset===i||e.target!==o.rootNode||(o.setState({offset:i,scrollChangeReason:f.OBSERVED}),"function"==typeof t&&t(i,e))},o}T.default=D,Object.defineProperty(T,"__esModule",{value:!0})});