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.76 kB
JavaScript
import*as e from"react";import{PrimeReactContext as r,localeOption as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as o}from"primereact/componentbase";import{useMergeProps as l,useMountEffect as a,useUpdateEffect as c,useUnmountEffect as u}from"primereact/hooks";import{classNames as i,ObjectUtils as s}from"primereact/utils";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},f.apply(this,arguments)}function d(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 d(e)}function p(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function y(e,r){if(e){if("string"==typeof e)return d(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)?d(e,r):void 0}}function h(){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 v(e){return m(e)||p(e)||y(e)||h()}function g(e){if(Array.isArray(e))return e}function b(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,l,a,c=[],u=!0,i=!1;try{if(l=(t=t.call(e)).next,0===r){if(Object(t)!==t)return;u=!1}else for(;!(u=(n=l.call(t)).done)&&(c.push(n.value),c.length!==r);u=!0);}catch(e){i=!0,o=e}finally{try{if(!u&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(i)throw o}}return c}}function w(){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 E=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}}}}}),S=e.memo(e.forwardRef((function(n,d){var m,p,h=l(),S=e.useContext(r),x=E.getProps(n,S),H=e.useState([]),L=(p=2,g(m=H)||b(m,p)||y(m,p)||w()),O=L[0],j=L[1],A=E.setMetaData({props:x}),N=A.ptm,T=A.cx,z=A.sx;o(E.css.styles,A.isUnstyled,{name:"datascroller"});var M=e.useRef(null),R=e.useRef(null),I=e.useRef(x.value),P=e.useRef([]),C=e.useRef(0),D=e.useRef(null),_=function(){if(x.lazy)x.onLazyLoad&&x.onLazyLoad(U()),C.current=C.current+x.rows;else if(I.current){for(var e=C.current;e<C.current+x.rows&&!(e>=I.current.length);e++)P.current.push(I.current[e]);0!==I.current.length&&(C.current=C.current+x.rows),j(v(P.current))}},k=function(){C.current=0,P.current=[],j(v(P.current)),_()},U=function(){return{first:C.current,rows:x.rows}},Y=function(){D.current&&(x.inline&&R.current?R.current.removeEventListener("scroll",D.current):x.loader||window.removeEventListener("scroll",D.current)),D.current=null};a((function(){_(),x.loader||(x.inline?(D.current=function(){R.current.scrollTop>=R.current.scrollHeight*x.buffer-R.current.clientHeight&&_()},R.current.addEventListener("scroll",D.current)):(D.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)*x.buffer-n&&_()},window.addEventListener("scroll",D.current)))})),c((function(){x.value&&(I.current=x.value,x.lazy||(C.current=0),P.current=[],x.lazy?(P.current=I.current,j(v(P.current))):_())}),[x.value]),c((function(){x.loader&&Y()}),[x.loader]),u((function(){D.current&&Y()})),e.useImperativeHandle(d,(function(){return{props:x,load:_,reset:k,getElement:function(){return M.current},getContent:function(){return R.current}}}));var J,X,$=function(r,t){var n=N("item"),o=x.itemTemplate?x.itemTemplate(r):r;return e.createElement("li",f({},n,{key:t+"_datascrollitem"}),o)},q=function(){var r=h(N("emptyMessage")),n=s.getJSXElement(x.emptyMessage,x)||t("emptyMessage");return e.createElement("li",r,n)},B=(J=h({className:T("header")},N("header")),x.header?e.createElement("div",J,x.header):null),F=(X=h({className:T("footer")},N("footer")),x.footer?e.createElement("div",X,x.footer):null),G=function(){var r=h({ref:R,className:T("content"),style:z("content")},N("content")),t=h({className:T("list")},N("list")),n=s.isNotEmpty(O)?O.map($):q();return e.createElement("div",r,e.createElement("ul",t,n))}(),K=h({id:x.id,ref:M,className:i(x.className,T("root"))},E.getOtherProps(x),N("root"));return e.createElement("div",K,B,G,F)})));S.displayName="DataScroller";export{S as DataScroller};