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.75 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(){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)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},f.apply(null,arguments)}function d(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=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={}.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 v(){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)||p(e)||y(e)||v()}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,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 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,v=o(),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()),A=L[0],N=L[1],O=E.setMetaData({props:x}),T=O.ptm,j=O.cx,z=O.sx;l(E.css.styles,O.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),N(h(P.current))}},k=function(){C.current=0,P.current=[],N(h(P.current)),_()},U=function(){return{first:C.current,rows:x.rows}},Y=function(){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))},J=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||Y()})),c((function(){x.value&&(I.current=x.value,x.lazy||(C.current=0),P.current=[],x.lazy?(P.current=I.current,N(h(P.current))):_())}),[x.value]),c((function(){x.loader?J():Y()}),[x.loader]),u((function(){D.current&&J()})),e.useImperativeHandle(d,(function(){return{props:x,load:_,reset:k,getElement:function(){return M.current},getContent:function(){return R.current}}}));var X,$,q=function(r,t){var n=T("item"),l=x.itemTemplate?x.itemTemplate(r):r;return e.createElement("li",f({},n,{key:t+"_datascrollitem"}),l)},B=function(){var r=v(T("emptyMessage")),n=s.getJSXElement(x.emptyMessage,x)||t("emptyMessage");return e.createElement("li",r,n)},F=(X=v({className:j("header")},T("header")),x.header?e.createElement("div",X,x.header):null),G=($=v({className:j("footer")},T("footer")),x.footer?e.createElement("div",$,x.footer):null),K=function(){var r=v({ref:R,className:j("content"),style:z("content")},T("content")),t=v({className:j("list")},T("list")),n=s.isNotEmpty(A)?A.map(q):B();return e.createElement("div",r,e.createElement("ul",t,n))}(),Q=v({id:x.id,ref:M,className:i(x.className,j("root"))},E.getOtherProps(x),T("root"));return e.createElement("div",Q,F,K,G)})));S.displayName="DataScroller";export{S as DataScroller};