primereact/virtualscroller/virtualscroller.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import*as e from"react";import{usePrevious as t,useResizeListener as r,useEventListener as n,useMountEffect as o,useUpdateEffect as l}from"primereact/hooks";import{DomHandler as i,ObjectUtils as s,classNames as c}from"primereact/utils";function a(){return a=Object.assign?Object.assign.bind():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},a.apply(this,arguments)}function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e){if(Array.isArray(e))return e}function m(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l=[],i=!0,s=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);i=!0);}catch(e){s=!0,o=e}finally{try{i||null==r.return||r.return()}finally{if(s)throw o}}return l}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function p(e,t){if(e){if("string"==typeof e)return d(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?d(e,t):void 0}}function g(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e,t){return f(e)||m(e,t)||p(e,t)||g()}function v(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function w(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?v(Object(r),!0).forEach((function(t){u(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):v(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var y=e.memo(e.forwardRef((function(u,f){var m="vertical"===u.orientation,d="horizontal"===u.orientation,p="both"===u.orientation,g=h(e.useState(p?{rows:0,cols:0}:0),2),v=g[0],S=g[1],z=h(e.useState(p?{rows:0,cols:0}:0),2),b=z[0],T=z[1],I=h(e.useState(p?{rows:0,cols:0}:0),2),x=I[0],O=I[1],R=h(e.useState(u.numToleratedItems),2),E=R[0],L=R[1],j=h(e.useState(u.loading||!1),2),P=j[0],H=j[1],D=h(e.useState([]),2),M=D[0],N=D[1],W=e.useRef(null),A=e.useRef(null),C=e.useRef(null),k=e.useRef(null),J=e.useRef(p?{top:0,left:0}:0),V=e.useRef(null),X=e.useRef(null),F=e.useRef(null),_=e.useRef(null),B=t(u.items),K=t(u.loading),U=h(r({listener:function(e){return ae()}}),1)[0],Y=h(n({target:"window",type:"orientationchange",listener:function(e){return ae()}}),1)[0],$=function(){return W},q=function(e){J.current=p?{top:0,left:0}:0,W.current&&W.current.scrollTo(e)},G=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"auto",r=ee(),n=r.numToleratedItems,o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1?arguments[1]:void 0;return e<=t?0:e},l=function(e,t){return e*t},i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return q({left:e,top:r,behavior:t})};if(p){var s={rows:o(e[0],n[0]),cols:o(e[1],n[1])};s.rows===v.rows&&s.cols===v.cols||i(l(s.cols,u.itemSize[1]),l(s.rows,u.itemSize[0]))}else{var c=o(e,n);c!==v&&(d?i(l(c,u.itemSize),0):i(0,l(c,u.itemSize)))}},Q=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"auto";if(t){var n=Z(),o=n.first,l=n.viewport,i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return q({left:e,top:t,behavior:r})},s="to-start"===t,c="to-end"===t;if(s){if(p)l.first.rows-o.rows>e[0]?i(l.first.cols*u.itemSize[1],(l.first.rows-1)*u.itemSize[0]):l.first.cols-o.cols>e[1]&&i((l.first.cols-1)*u.itemSize[1],l.first.rows*u.itemSize[0]);else if(l.first-o>e){var a=(l.first-1)*u.itemSize;d?i(a,0):i(0,a)}}else if(c)if(p)l.last.rows-o.rows<=e[0]+1?i(l.first.cols*u.itemSize[1],(l.first.rows+1)*u.itemSize[0]):l.last.cols-o.cols<=e[1]+1&&i((l.first.cols+1)*u.itemSize[1],l.first.rows*u.itemSize[0]);else if(l.last-o<=e+1){var f=(l.first+1)*u.itemSize;d?i(f,0):i(0,f)}}else G(e,r)},Z=function(){var e=function(e,t){return Math.floor(e/(t||e))},t=v,r=0;if(W.current){var n=W.current,o=n.scrollTop,l=n.scrollLeft;if(p)r={rows:(t={rows:e(o,u.itemSize[0]),cols:e(l,u.itemSize[1])}).rows+x.rows,cols:t.cols+x.cols};else r=(t=e(d?l:o,u.itemSize))+x}return{first:v,last:b,viewport:{first:t,last:r}}},ee=function(){var e=ne(),t=W.current?W.current.offsetWidth-e.left:0,r=W.current?W.current.offsetHeight-e.top:0,n=function(e,t){return Math.ceil(e/(t||e))},o=function(e){return Math.ceil(e/2)},l=p?{rows:n(r,u.itemSize[0]),cols:n(t,u.itemSize[1])}:n(d?t:r,u.itemSize);return{numItemsInViewport:l,numToleratedItems:E||(p?[o(l.rows),o(l.cols)]:o(l))}},te=function(e){u.autoSize&&!e&&Promise.resolve().then((function(){if(A.current){A.current.style.minHeight=A.current.style.minWidth="auto";var e=A.current,t=e.offsetWidth,r=e.offsetHeight;(p||d)&&(W.current.style.width=(t<F.current?t:F.current)+"px"),(p||m)&&(W.current.style.height=(r<_.current?r:_.current)+"px"),A.current.style.minHeight=A.current.style.minWidth=""}}))},re=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1?arguments[1]:void 0;return u.items?Math.min(t?(u.columns||u.items[0]).length:u.items.length,e):0},ne=function(){if(A.current){var e=getComputedStyle(A.current),t=parseInt(e.paddingLeft,10)+Math.max(parseInt(e.left,10),0),r=parseInt(e.paddingRight,10)+Math.max(parseInt(e.right,10),0),n=parseInt(e.paddingTop,10)+Math.max(parseInt(e.top,10),0),o=parseInt(e.paddingBottom,10)+Math.max(parseInt(e.bottom,10),0);return{left:t,right:r,top:n,bottom:o,x:t+r,y:n+o}}return{left:0,right:0,top:0,bottom:0,x:0,y:0}},oe=function(){if(W.current){var e=W.current.parentElement,t=u.scrollWidth||"".concat(W.current.offsetWidth||e.offsetWidth,"px"),r=u.scrollHeight||"".concat(W.current.offsetHeight||e.offsetHeight,"px"),n=function(e,t){return W.current.style[e]=t};p||d?(n("height",r),n("width",t)):n("height",r)}},le=function(){var e=u.items;if(C.current&&e){var t=ne(),r=function(e,t,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;return C.current.style[e]=(t||[]).length*r+n+"px"};p?(r("height",e,u.itemSize[0],t.y),r("width",u.columns||e[1],u.itemSize[1],t.x)):d?r("width",u.columns||e,u.itemSize,t.x):r("height",e,u.itemSize,t.y)}},ie=function(e){if(A.current){var t=e?e.first:v,r=function(e,t){return e*t},n=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;k.current&&(k.current.style.top="-".concat(t,"px")),A.current.style.transform="translate3d(".concat(e,"px, ").concat(t,"px, 0)")};if(p)n(r(t.cols,u.itemSize[1]),r(t.rows,u.itemSize[0]));else{var o=r(t,u.itemSize);d?n(o,0):n(0,o)}}},se=function(e){var t=e.target,r=ne(),n=function(e,t){return e?e>t?e-t:e:0},o=function(e,t){return Math.floor(e/(t||e))},l=function(e,t,r,n,o,l){return e<=o?o:l?r-n-o:t+o-1},i=function(e,t,r,n,o,l,i){return e<=l?0:Math.max(0,i?e<t?r:e-l:e>t?r:e-2*l)},s=function(e,t,r,n,o,l){var i=t+n+2*o;return e>=o&&(i+=o+1),re(i,l)},c=n(t.scrollTop,r.top),a=n(t.scrollLeft,r.left),f=p?{rows:0,cols:0}:0,m=b,g=!1,h=J.current;if(p){var w=J.current.top<=c,y=J.current.left<=a,S={rows:o(c,u.itemSize[0]),cols:o(a,u.itemSize[1])},z={rows:l(S.rows,v.rows,b.rows,x.rows,E[0],w),cols:l(S.cols,v.cols,b.cols,x.cols,E[1],y)};f={rows:i(S.rows,z.rows,v.rows,0,0,E[0],w),cols:i(S.cols,z.cols,v.cols,0,0,E[1],y)},m={rows:s(S.rows,f.rows,0,x.rows,E[0]),cols:s(S.cols,f.cols,0,x.cols,E[1],!0)},g=f.rows!==v.rows||m.rows!==b.rows||f.cols!==v.cols||m.cols!==b.cols,h={top:c,left:a}}else{var T=d?a:c,I=J.current<=T,O=o(T,u.itemSize);m=s(O,f=i(O,l(O,v,b,x,E,I),v,0,0,E,I),0,x,E),g=f!==v||m!==b,h=T}return{first:f,last:m,isRangeChanged:g,scrollPos:h}},ce=function(e){var t=se(e),r=t.first,n=t.last,o=t.scrollPos;if(t.isRangeChanged){var l={first:r,last:n};ie(l),S(r),T(n),J.current=o,u.onScrollIndexChange&&u.onScrollIndexChange(l),u.lazy&&u.onLazyLoad&&u.onLazyLoad(l)}},ae=function(){X.current&&clearTimeout(X.current),X.current=setTimeout((function(){if(W.current){var e=[i.getWidth(W.current),i.getHeight(W.current)],t=e[0],r=e[1],n=t!==F.current,o=r!==_.current;(p?n||o:d?n:!!m&&o)&&(L(u.numToleratedItems),F.current=t,_.current=r)}}),u.resizeDelay)},ue=function(e){var t=(u.items||[]).length,r=p?v.rows+e:v+e;return{index:r,count:t,first:0===r,last:r===t-1,even:r%2==0,odd:r%2!=0,props:u}},fe=function(e,t){var r=M.length;return w({index:e,count:r,first:0===e,last:e===r-1,even:e%2==0,odd:e%2!=0,props:u},t)},me=function(){var e=u.items;return e&&!P?p?e.slice(v.rows,b.rows).map((function(e){return u.columns?e:e.slice(v.cols,b.cols)})):d&&u.columns?e:e.slice(v,b):[]},de=function(){var e,t,r,n,o;u.disabled||(oe(),e=ee(),t=e.numItemsInViewport,r=e.numToleratedItems,n=function(e,t,r,n){return re(e+t+(e<r?2:3)*r,n)},o=p?{rows:n(v.rows,t.rows,r[0]),cols:n(v.cols,t.cols,r[1],!0)}:n(v,t,r),O(t),L(r),T(o),u.showLoader&&N(p?Array.from({length:t.rows}).map((function(){return Array.from({length:t.cols})})):Array.from({length:t})),u.lazy&&u.onLazyLoad&&u.onLazyLoad({first:v,last:o}),le())};o((function(){u.disabled||(de(),U(),Y(),F.current=i.getWidth(W.current),_.current=i.getHeight(W.current))})),l((function(){de()}),[u.itemSize,u.scrollHeight]),l((function(){u.numToleratedItems!==E&&L(u.numToleratedItems)}),[u.numToleratedItems]),l((function(){u.numToleratedItems===E&&de()}),[E]),l((function(){B&&B.length===(u.items||[]).length||de();var e=P;u.lazy&&K!==u.loading&&u.loading!==P&&(H(u.loading),e=u.loading),te(e)})),l((function(){J.current=p?{top:0,left:0}:0}),[u.orientation]),e.useImperativeHandle(f,(function(){return{props:u,getElementRef:$,scrollTo:q,scrollToIndex:G,scrollInView:Q,getRenderedRange:Z}}));var pe=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=fe(t,r),o=s.getJSXElement(u.loadingTemplate,n);return e.createElement(e.Fragment,{key:t},o)},ge=function(t,r){var n=ue(r),o=s.getJSXElement(u.itemTemplate,t,n);return e.createElement(e.Fragment,{key:n.index},o)};if(u.disabled){var he=s.getJSXElement(u.contentTemplate,{items:u.items,rows:u.items,columns:u.columns});return e.createElement(e.Fragment,null,u.children,he)}var ve=s.findDiffKeys(u,y.defaultProps),we=c("p-virtualscroller",{"p-both-scroll":p,"p-horizontal-scroll":d},u.className),ye=function(){if(!u.loaderDisabled&&u.showLoader&&P){var t=c("p-virtualscroller-loader",{"p-component-overlay":!u.loadingTemplate}),r=e.createElement("i",{className:"p-virtualscroller-loading-icon pi pi-spinner pi-spin"});return u.loadingTemplate?r=M.map((function(e,t){return pe(t,p&&{numCols:x.cols})})):u.loaderIconTemplate&&(r=s.getJSXElement(u.loaderIconTemplate,{className:"p-virtualscroller-loading-icon",element:r,props:u})),e.createElement("div",{className:t},r)}return null}(),Se=function(){var t=me().map(ge),r=c("p-virtualscroller-content",{"p-virtualscroller-loading":P}),n=e.createElement("div",{ref:A,className:r},t);if(u.contentTemplate){var o={className:r,contentRef:function(e){return A.current=s.getRefElement(e)},spacerRef:function(e){return C.current=s.getRefElement(e)},stickyRef:function(e){return k.current=s.getRefElement(e)},items:me(),getItemOptions:function(e){return ue(e)},children:t,element:n,props:u,loading:P,getLoaderOptions:function(e,t){return fe(e,t)},loadingTemplate:u.loadingTemplate,itemSize:u.itemSize,rows:P?u.loaderDisabled?M:[]:me(),columns:u.columns&&p||d?P&&u.loaderDisabled?p?M[0]:M:u.columns.slice(p?v.cols:v,p?b.cols:b):u.columns,vertical:m,horizontal:d,both:p};return s.getJSXElement(u.contentTemplate,o)}return n}(),ze=u.showSpacer?e.createElement("div",{ref:C,className:"p-virtualscroller-spacer"}):null;return e.createElement("div",a({ref:W,className:we,tabIndex:0,style:u.style},ve,{onScroll:function(e){u.onScroll&&u.onScroll(e),u.delay?(V.current&&clearTimeout(V.current),!P&&u.showLoader&&se(e).isRangeChanged&&H(!0),V.current=setTimeout((function(){ce(e),!P||!u.showLoader||u.lazy&&void 0!==u.loading||H(!1)}),u.delay)):ce(e)}}),Se,ze,ye)})));y.displayName="VirtualScroller",y.defaultProps={__TYPE:"VirtualScroller",id:null,style:null,className:null,items:null,itemSize:0,scrollHeight:null,scrollWidth:null,orientation:"vertical",numToleratedItems:null,delay:0,resizeDelay:10,lazy:!1,disabled:!1,loaderDisabled:!1,columns:null,loading:void 0,autoSize:!1,showSpacer:!0,showLoader:!1,loadingTemplate:null,loaderIconTemplate:null,itemTemplate:null,contentTemplate:null,onScroll:null,onScrollIndexChange:null,onLazyLoad:null};export{y as VirtualScroller};