primereact/scrollpanel/scrollpanel.esm.min.js

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

import*as e from"react";import{PrimeReactContext as r}from"primereact/api";import{ComponentBase as n,useHandleStyle as t}from"primereact/componentbase";import{useMergeProps as o,useMountEffect as l,useUnmountEffect as a}from"primereact/hooks";import{UniqueComponentId as c,classNames as i,DomHandler as u}from"primereact/utils";function s(){return s=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},s.apply(null,arguments)}function p(e){if(Array.isArray(e))return e}function d(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var t,o,l,a,c=[],i=!0,u=!1;try{if(l=(n=n.call(e)).next,0===r){if(Object(n)!==n)return;i=!1}else for(;!(i=(t=l.call(n)).done)&&(c.push(t.value),c.length!==r);i=!0);}catch(e){u=!0,o=e}finally{try{if(!i&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return c}}function f(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=Array(r);n<r;n++)t[n]=e[n];return t}function m(e,r){if(e){if("string"==typeof e)return f(e,r);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,r):void 0}}function h(){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 v(e,r){return p(e)||d(e,r)||m(e,r)||h()}var b=n.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0,step:5},css:{classes:{root:"p-scrollpanel p-component",wrapper:"p-scrollpanel-wrapper",content:"p-scrollpanel-content",barx:"p-scrollpanel-bar p-scrollpanel-bar-x",bary:"p-scrollpanel-bar p-scrollpanel-bar-y"},styles:"\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "}}),g=e.forwardRef((function(n,p){var d=o(),f=e.useContext(r),m=b.getProps(n,f),h=v(e.useState(m.id),2),g=h[0],y=h[1],w=v(e.useState("vertical"),2),x=w[0],A=w[1],S=b.setMetaData({props:m}),E=S.ptm,C=S.cx;t(b.css.styles,S.isUnstyled,{name:"scrollpanel"});var L=e.useRef(null),R=e.useRef(null),D=e.useRef(null),T=e.useRef(null),z=v(e.useState(0),2),F=z[0],N=z[1],H=v(e.useState(0),2),I=H[0],M=H[1],O=e.useRef(!1),P=e.useRef(!1),j=e.useRef(null),k=e.useRef(null),B=e.useRef(null),U=e.useRef(null),W=e.useRef(null),Y=e.useRef(!1),K=e.useRef(null),X=g+"_content",q=function(){if(R.current){var e=R.current.scrollWidth,r=-1*(L.current.clientHeight-D.current.clientHeight);B.current=R.current.clientWidth/e;var n=R.current.scrollHeight,t=-1*(L.current.clientWidth-T.current.clientWidth);U.current=R.current.clientHeight/n,W.current=window.requestAnimationFrame((function(){B.current>=1?u.addClass(D.current,"p-scrollpanel-hidden"):(u.removeClass(D.current,"p-scrollpanel-hidden"),u.applyStyle(D.current,{width:Math.max(100*B.current,10)+"%",left:R.current.scrollLeft/e*100+"%",bottom:r+"px"})),U.current>=1?u.addClass(T.current,"p-scrollpanel-hidden"):(u.removeClass(T.current,"p-scrollpanel-hidden"),u.applyStyle(T.current,{height:Math.max(100*U.current,10)+"%",top:"calc("+R.current.scrollTop/n*100+"% - "+D.current.clientHeight+"px)",right:t+"px"}))}))}},_=function(e){D.current.isSameNode(e.target)?A("horizontal"):T.current.isSameNode(e.target)&&A("vertical")},$=function(){"horizontal"===x&&A("vertical")},G=function(e){O.current?J(e):(P.current||J(e),Q(e))},J=function(e){var r=e.pageX-j.current;j.current=e.pageX,W.current=window.requestAnimationFrame((function(){R.current.scrollLeft+=r/B.current}))},Q=function(e){var r=e.pageY-k.current;k.current=e.pageY,W.current=window.requestAnimationFrame((function(){R.current.scrollTop+=r/U.current}))},V=function(e){u.removeClass(T.current,"p-scrollpanel-grabbed"),u.removeClass(D.current,"p-scrollpanel-grabbed"),u.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",V),O.current=!1,P.current=!1},Z=function(e){if("vertical"===x)switch(e.code){case"ArrowDown":ne("scrollTop",m.step),e.preventDefault();break;case"ArrowUp":ne("scrollTop",-1*m.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===x)switch(e.code){case"ArrowRight":ne("scrollLeft",m.step),e.preventDefault();break;case"ArrowLeft":ne("scrollLeft",-1*m.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},ee=function(){te()},re=function(e,r){R.current[e]+=r,q()},ne=function(e,r){te(),K.current=setTimeout((function(){re(e,r)}),40)},te=function(){K.current&&clearTimeout(K.current)},oe=function(){q()};l((function(){var e,r,n;m.id||y(c()),q(),window.addEventListener("resize",q),e=getComputedStyle(L.current),r=getComputedStyle(D.current),n=u.getHeight(L.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(L.current.style.height=R.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:R.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),Y.current=!0})),a((function(){Y.current&&window.removeEventListener("resize",q),W.current&&window.cancelAnimationFrame(W.current)})),e.useImperativeHandle(p,(function(){return{props:m,refresh:oe,getElement:function(){return L.current},getContent:function(){return R.current},getXBar:function(){return D.current},getYBar:function(){return T.current}}}));var le=d({id:m.id,ref:L,style:m.style,className:i(m.className,C("root"))},b.getOtherProps(m),E("root")),ae=d({className:C("wrapper")},E("wrapper")),ce=d({className:C("content"),onScroll:function(e){F!==e.target.scrollLeft?(N(e.target.scrollLeft),A("horizontal")):I!==e.target.scrollTop&&(M(e.target.scrollTop),A("vertical")),q()},onMouseEnter:q},E("content")),ie=d({ref:D,role:"scrollbar",className:C("barx"),tabIndex:0,"aria-valuenow":I,"aria-controls":X,"aria-orientation":"horizontal",onFocus:_,onBlur:$,onKeyDown:Z,onKeyUp:ee,onMouseDown:function(e){O.current=!0,j.current=e.pageX,u.addClass(D.current,"p-scrollpanel-grabbed"),u.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",G),document.addEventListener("mouseup",V),e.preventDefault()}},E("barx")),ue=d({ref:T,role:"scrollbar",className:C("bary"),tabIndex:0,"aria-valuenow":F,"aria-controls":X,"aria-orientation":"vertical",onFocus:_,onBlur:$,onKeyDown:Z,onKeyUp:ee,onMouseDown:function(e){P.current=!0,k.current=e.pageY,u.addClass(T.current,"p-scrollpanel-grabbed"),u.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",G),document.addEventListener("mouseup",V),e.preventDefault()}},E("bary"));return e.createElement("div",le,e.createElement("div",ae,e.createElement("div",s({ref:R},ce),m.children)),e.createElement("div",ie),e.createElement("div",ue))}));g.displayName="ScrollPanel";export{g as ScrollPanel};