primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 5.53 kB
JavaScript
import*as e from"react";import{PrimeReactContext as r,localeOption as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as l}from"primereact/componentbase";import{useMergeProps as o,useMountEffect as a,useUpdateEffect as c,useUnmountEffect as u}from"primereact/hooks";import{classNames as i,ObjectUtils as s}from"primereact/utils";function f(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function m(e){if(Array.isArray(e))return f(e)}function d(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function p(e,r){if(e){if("string"==typeof e)return f(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?f(e,r):void 0}}function y(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e){return m(e)||d(e)||p(e)||y()}function v(e){if(Array.isArray(e))return e}function g(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,l,o,a,c=[],u=!0,i=!1;try{if(o=(t=t.call(e)).next,0===r){if(Object(t)!==t)return;u=!1}else for(;!(u=(n=o.call(t)).done)&&(c.push(n.value),c.length!==r);u=!0);}catch(e){i=!0,l=e}finally{try{if(!u&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(i)throw l}}return c}}function b(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var w=n.extend({defaultProps:{__TYPE:"DataScroller",id:null,value:null,rows:0,inline:!1,scrollHeight:null,loader:!1,buffer:.9,style:null,className:null,onLazyLoad:null,emptyMessage:null,itemTemplate:null,header:null,footer:null,lazy:!1,children:void 0},css:{classes:{header:"p-datascroller-header",footer:"p-datascroller-footer",content:"p-datascroller-content",list:"p-datascroller-list",root:function(e){return i("p-datascroller p-component",{"p-datascroller-inline":e.props.inline})}},styles:"\n@layer primereact {\n .p-datascroller .p-datascroller-header {\n text-align: center;\n padding: .5em .75em;\n border-bottom: 0 none;\n }\n \n .p-datascroller .p-datascroller-footer {\n text-align: center;\n padding: .25em .625em;\n border-top: 0px none;\n }\n \n .p-datascroller .p-datascroller-content {\n padding: .25em .625em;\n }\n \n .p-datascroller-inline .p-datascroller-content {\n overflow: auto;\n }\n \n .p-datascroller .p-datascroller-list {\n list-style-type: none; \n margin: 0;\n padding: 0;\n }\n}\n",inlineStyles:{content:function(e){return{maxHeight:e.props.scrollHeight}}}}}),E=e.memo(e.forwardRef((function(n,f){var m,d,y=o(),E=e.useContext(r),S=w.getProps(n,E),x=e.useState([]),H=(d=2,v(m=x)||g(m,d)||p(m,d)||b()),L=H[0],A=H[1],N=w.setMetaData({props:S}),T=N.ptm,z=N.cx,M=N.sx;l(w.css.styles,N.isUnstyled,{name:"datascroller"});var R=e.useRef(null),j=e.useRef(null),I=e.useRef(S.value),O=e.useRef([]),P=e.useRef(0),C=e.useRef(null),D=function(){if(S.lazy)S.onLazyLoad&&S.onLazyLoad(k()),P.current=P.current+S.rows;else if(I.current){for(var e=P.current;e<P.current+S.rows&&!(e>=I.current.length);e++)O.current.push(I.current[e]);0!==I.current.length&&(P.current=P.current+S.rows),A(h(O.current))}},_=function(){P.current=0,O.current=[],A(h(O.current)),D()},k=function(){return{first:P.current,rows:S.rows}},U=function(){C.current&&(S.inline&&j.current?j.current.removeEventListener("scroll",C.current):S.loader||window.removeEventListener("scroll",C.current)),C.current=null};a((function(){D(),S.loader||(S.inline?(C.current=function(){j.current.scrollTop>=j.current.scrollHeight*S.buffer-j.current.clientHeight&&D()},j.current.addEventListener("scroll",C.current)):(C.current=function(){var e=document.body,r=document.documentElement,t=window.pageYOffset||document.documentElement.scrollTop,n=r.clientHeight;t>=Math.max(e.scrollHeight,e.offsetHeight,n,r.scrollHeight,r.offsetHeight)*S.buffer-n&&D()},window.addEventListener("scroll",C.current)))})),c((function(){S.value&&(I.current=S.value,S.lazy||(P.current=0),O.current=[],S.lazy?(O.current=I.current,A(h(O.current))):D())}),[S.value]),c((function(){S.loader&&U()}),[S.loader]),u((function(){C.current&&U()})),e.useImperativeHandle(f,(function(){return{props:S,load:D,reset:_,getElement:function(){return R.current},getContent:function(){return j.current}}}));var Y,J,X=function(r,t){var n=y({key:t+"_datascrollitem"},T("item")),l=S.itemTemplate?S.itemTemplate(r):r;return e.createElement("li",n,l)},$=function(){var r=y(T("emptyMessage")),n=s.getJSXElement(S.emptyMessage,S)||t("emptyMessage");return e.createElement("li",r,n)},q=(Y=y({className:z("header")},T("header")),S.header?e.createElement("div",Y,S.header):null),B=(J=y({className:z("footer")},T("footer")),S.footer?e.createElement("div",J,S.footer):null),F=function(){var r=y({ref:j,className:z("content"),style:M("content")},T("content")),t=y({className:z("list")},T("list")),n=s.isNotEmpty(L)?L.map(X):$();return e.createElement("div",r,e.createElement("ul",t,n))}(),G=y({id:S.id,ref:R,className:i(S.className,z("root"))},w.getOtherProps(S),T("root"));return e.createElement("div",G,q,F,B)})));E.displayName="DataScroller";export{E as DataScroller};