react-delightful-scroller/dist/react-delightful-scroller.js

Delightful, virtualized modern infinite scroller 🎉

"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React),useWindowSize=_interopDefault(require("@rehooks/window-size")),useComponentSize=_interopDefault(require("@rehooks/component-size")),PropTypes=_interopDefault(require("prop-types")),Measure=_interopDefault(require("react-measure")),throttle=_interopDefault(require("lodash.throttle"));function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_nonIterableRest()}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_nonIterableSpread()}function _arrayWithoutHoles(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}function _arrayWithHoles(e){if(Array.isArray(e))return e}function _iterableToArray(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}function _iterableToArrayLimit(e,t){var r=[],n=!0,i=!1,a=void 0;try{for(var o,l=e[Symbol.iterator]();!(n=(o=l.next()).done)&&(r.push(o.value),!t||r.length!==t);n=!0);}catch(e){i=!0,a=e}finally{try{n||null==l.return||l.return()}finally{if(i)throw a}}return r}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}var getBatchedItems=function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=[],n=0;n<e.length;n+=t){var i=e.slice(n,n+t);r.push(i)}return r},Wrapper=React__default.forwardRef(function(e,t){var r=e.as,n=void 0===r?"div":r,i=e.style,a=e.children;return React__default.createElement(n,{ref:t,style:i},a)});Wrapper.displayName="Wrapper";var RenderItemWrapper=React__default.memo(function(e){var t=e.item,r=e.index,n=e.RenderItem;return React__default.createElement(n,{item:t,index:r})});RenderItemWrapper.displayName="RenderItemWrapper";var BatchRenderer=React__default.memo(function(e){var t=e.batch,r=e.index,n=e.getItemKey,i=e.batchSize,a=e.wrapperElement,o=e.removeFromDOM,l=e.dimensions,c=e.setDimension,u=e.RenderItem,s=e.visible,f=!!e.itemHeight,d=null;if(s||!o){var m=t.map(function(e,t){var a=i*r+t,o=n(e,a);return React__default.createElement(RenderItemWrapper,{key:o,item:e,index:a,RenderItem:u})}),h=React__default.createElement(Wrapper,{"data-iscroller-batch":r,as:a,style:o?{}:{visibility:s?"visible":"hidden"}},m);d=f?h:React__default.createElement(Measure,{scroll:!0,onResize:function(e){c(r,e)}},function(e){var t=e.measureRef;return React__default.cloneElement(h,{ref:t})})}else d=React__default.createElement("div",{style:{height:l.height}});return d});BatchRenderer.displayName="BatchRenderer";var NoRemoveFromDOMBatcher=React__default.memo(function(e){return React__default.createElement(BatchRenderer,e)},function(e,t){var r=e.batch,n=e.visible,i=t.batch,a=t.visible;return!!t.removeFromDOM||r.length===i.length&&r.every(function(e,t){return e===i[t]})&&n===a&&!1===n&&!1===a});NoRemoveFromDOMBatcher.displayName="NoRemoveFromDOMBatcher";var useDimensions=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=React.useState(e),r=_slicedToArray(t,2),n=r[0],i=r[1],a=React.useRef(null),o=function(e,t){var r=_toConsumableArray(a&&a.current||n),o=t.scroll,l=o.width,c=o.height;r[e]={width:l,height:c},a.current=r,i(r)};return[n,o]};function initializeDimensions(e){var t=e.axis,r=e.itemHeight,n=e.averageItemHeight,i=e.batchSize,a=e.itemsCount;return function(){for(var e=Math.ceil(a/i),o="y"===t?Math.ceil((r||n)*i):0,l=[],c=0;c<e;c+=1)l[c]={height:o,width:null};return l}}function useVisibility(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=_slicedToArray(React.useState(e),2),r=t[0],n=t[1];return[r,function(e){n(e)}]}function initializeInitialVisibility(e){var t=e.axis,r=e.containerHeight,n=e.itemHeight,i=e.averageItemHeight,a=e.batchSize,o=e.itemsCount;return function(){for(var e=Math.ceil(o/a),l="y"===t?Math.ceil(r/((n||i)*a)):0,c=[],u=0;u<e;u+=1)c[u]=u<l;return c}}var getScrollOffset=function(e,t){var r=e.scrollTop,n=e.scrollY;return"y"===t?void 0!==r?r:n:0},useScroll=function(e){var t=e.root,r=e.axis,n=React.useRef(null),i=_slicedToArray(React.useState(0),2),a=i[0],o=i[1];return React.useEffect(function(){var e=t?t():window,i=throttle(function(){n.current&&window.cancelAnimationFrame(n.current),n.current=window.requestAnimationFrame(function(){return o(getScrollOffset(e,r))})},100);return e.addEventListener("scroll",i,{capture:!1,passive:!0}),function(){i.cancel&&i.cancel(),window.cancelAnimationFrame(n.current),e.removeEventListener("scroll",i)}},[r,t]),a};function areOverlapping(e,t){return t[0]<e[0]?t[1]>e[0]:t[0]<e[1]}var useVisibilityAndDimension=function(e){var t=e.root,r=e.axis,n=e.containerHeight,i=e.itemsCount,a=e.itemHeight,o=e.averageItemHeight,l=e.batchSize,c=e.batchBufferDistance,u=_slicedToArray(useDimensions(initializeDimensions({itemsCount:i,axis:r,itemHeight:a,averageItemHeight:o,batchSize:l})),2),s=u[0],f=u[1],d=_slicedToArray(useVisibility(initializeInitialVisibility({itemsCount:i,axis:r,containerHeight:n,itemHeight:a,averageItemHeight:o,batchSize:l})),2),m=d[0],h=d[1],p=useScroll({root:t,axis:r});return React.useEffect(function(){for(var e=[p-c,p+n+c],t=Math.ceil(i/l),r=0,a=[],o=0;o<t;o+=1){var u=r,f=r+s[o].height;a[o]=areOverlapping(e,[u,f]),r=f}a.some(function(e,t){return e!==m[t]})&&h(a)},[l,n,h,s,i,p,m,c]),[s,m,f]},getVisibleIndexes=function(e){for(var t,r,n=0;n<e.length;n+=1){var i=e[n];if(void 0!==t&&void 0!==r&&!i)break;void 0===t&&i&&(t=n),void 0!==t&&i&&(r=n)}return[t,r]},Sentinel=function(e){var t=e.fetchMoreBufferDistance,r=e.onFetchMore,n=e.RenderLoader,i=e.wrapperElement,a=e.items,o=e.itemsCount,l=e.batchSize,c=e.root,u=e.axis,s=React.useRef(null);return React.useEffect(function(){var e=s.current,n={root:c?c():null,rootMargin:"y"===u?"0px 0px ".concat(t,"px 0px"):"0px",threshold:0},i=new IntersectionObserver(function(e){_slicedToArray(e,1)[0].isIntersecting&&r({size:a.length,itemsCount:o,batchSize:l})},n);return e&&i.observe(e),function(){i.disconnect()}},[u,t,l,a,r,c,o]),React__default.createElement(i,{ref:s},React__default.createElement(n,{size:a.length,itemsCount:o,batchSize:l}))},DefaultRenderContainer=function(e){var t=e.children,r=e.forwardRef;return React__default.createElement("div",{ref:r},t)};DefaultRenderContainer.displayName="DefaultRenderContainer";var DefaultRenderItem=function(e){var t=e.item;e.index;return t};DefaultRenderItem.displayName="DefaultRenderItem";var DefaultRenderLoader=function(e){e.items,e.itemsCount,e.batchSize;return null};DefaultRenderLoader.displayName="DefaultRenderLoader";var BaseRenderer=function(e){var t,r,n=e.containerHeight,i=e.items,a=e.RenderItem,o=e.getItemKey,l=e.wrapperElement,c=e.forwardRef,u=e.RenderContainer,s=e.removeFromDOM,f=e.root,d=e.batch,m=e.batchSize,h=e.axis,p=e.averageItemHeight,v=e.itemHeight,y=e.itemsCount,R=e.batchBufferDistance,g=e.onFetchMore,_=e.RenderLoader,b=e.fetchMoreBufferDistance,D=_slicedToArray(useVisibilityAndDimension({root:f,axis:h,containerHeight:n,itemsCount:y,itemHeight:v,averageItemHeight:p,batchSize:m,batchBufferDistance:R}),3),S=D[0],I=D[1],w=D[2],T=getBatchedItems(i,m),E=s?BatchRenderer:NoRemoveFromDOMBatcher,x=T,C=[],H=[];if(s&&d){var z=_slicedToArray(getVisibleIndexes(I),2),A=z[0],M=z[1];C=T.slice(0,A),x=T.slice(A,M+1),H=T.slice(M+1,T.length),t=C.reduce(function(e,t,r){return e+S[r].height},0),r=H.reduce(function(e,t,r){var n=C.length+x.length+r;return e+S[n].height},0)}var B=x.map(function(e,t){var r=C.length+t;return React__default.createElement(E,{key:"".concat(r),batch:e,index:r,getItemKey:o,batchSize:m,wrapperElement:l,removeFromDOM:s,setDimension:w,RenderItem:a,dimensions:S[r],visible:I[r],itemHeight:v})});return React__default.createElement(u,{forwardRef:c},t?React__default.createElement("div",{style:{height:t,visibility:"hidden"}}):null,B,r?React__default.createElement("div",{style:{height:r,visibility:"hidden"}}):null,"y"===h&&i.length<y?React__default.createElement(Sentinel,{onFetchMore:g,fetchMoreBufferDistance:b,RenderLoader:_,wrapperElement:l,items:i,itemsCount:y,batchSize:m,root:f,axis:h}):null)};BaseRenderer.displayName="BaseRenderer";var WindowContainer=function(e){var t=useWindowSize(),r=t.innerWidth,n=t.innerHeight;return React__default.createElement(BaseRenderer,_extends({},e,{containerWidth:r,containerHeight:n}))},CustomScrollContainer=function(e){var t=e.root,r=useComponentSize({current:t()}),n=r.width,i=r.height;return React__default.createElement(BaseRenderer,_extends({},e,{containerWidth:n,containerHeight:i}))},Entry=function(e,t){var r=_slicedToArray(React.useState(!e.root),2),n=r[0],i=r[1];return React.useEffect(function(){n||i(!0)},[]),n?e.root?React__default.createElement(CustomScrollContainer,_extends({},e,{forwardRef:t})):React__default.createElement(WindowContainer,_extends({},e,{forwardRef:t})):null},DelightfulScroller=React.memo(React__default.forwardRef(Entry));DelightfulScroller.defaultProps={items:[],itemsCount:0,RenderItem:DefaultRenderItem,getItemKey:function(e,t){return"string"==typeof e?e:t},wrapperElement:"div",RenderContainer:DefaultRenderContainer,removeFromDOM:!0,root:null,averageItemHeight:10,itemHeight:null,axis:"y",batch:!0,batchSize:10,batchBufferDistance:500,fetchMoreBufferDistance:500,RenderLoader:DefaultRenderLoader,onFetchMore:function(e){e.items,e.itemsCount,e.batchSize}},DelightfulScroller.propTypes={items:PropTypes.arrayOf(PropTypes.any),itemsCount:PropTypes.number,RenderItem:PropTypes.elementType,getItemKey:PropTypes.func,wrapperElement:PropTypes.string,RenderContainer:PropTypes.elementType,removeFromDOM:PropTypes.bool,root:PropTypes.func,averageItemHeight:PropTypes.number,itemHeight:PropTypes.number,axis:PropTypes.oneOf(["y"]),batch:PropTypes.bool,batchSize:PropTypes.number,batchBufferDistance:PropTypes.number,fetchMoreBufferDistance:PropTypes.number,RenderLoader:PropTypes.elementType,onFetchMore:PropTypes.func},DelightfulScroller.displayName="DelightfulScroller",module.exports=DelightfulScroller;
//# sourceMappingURL=react-delightful-scroller.js.map