primereact/scrollpanel/scrollpanel.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

this.primereact=this.primereact||{},this.primereact.scrollpanel=function(e,r,n,t,o,l){"use strict";function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}var c=a(r);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},u.apply(this,arguments)}function i(e){if(Array.isArray(e))return e}function s(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var t,o,l,a,c=[],u=!0,i=!1;try{if(l=(n=n.call(e)).next,0===r){if(Object(n)!==n)return;u=!1}else for(;!(u=(t=l.call(n)).done)&&(c.push(t.value),c.length!==r);u=!0);}catch(e){i=!0,o=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(i)throw o}}return c}}function p(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}function d(e,r){if(e){if("string"==typeof e)return p(e,r);var n=Object.prototype.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)?p(e,r):void 0}}function f(){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 m(e,r){return i(e)||s(e,r)||d(e,r)||f()}var h=t.ComponentBase.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        "}}),b=c.forwardRef((function(e,r){var a=o.useMergeProps(),i=c.useContext(n.PrimeReactContext),s=h.getProps(e,i),p=m(c.useState(s.id),2),d=p[0],f=p[1],b=m(c.useState("vertical"),2),v=b[0],g=b[1],y=h.setMetaData({props:s}),w=y.ptm,x=y.cx;t.useHandleStyle(h.css.styles,y.isUnstyled,{name:"scrollpanel"});var D=c.useRef(null),H=c.useRef(null),E=c.useRef(null),S=c.useRef(null),C=m(c.useState(0),2),A=C[0],R=C[1],L=m(c.useState(0),2),O=L[0],j=L[1],P=c.useRef(!1),T=c.useRef(!1),z=c.useRef(null),M=c.useRef(null),N=c.useRef(null),F=c.useRef(null),I=c.useRef(null),U=c.useRef(!1),k=c.useRef(null),B=d+"_content",_=function(){var e=H.current.scrollWidth,r=-1*(D.current.clientHeight-E.current.clientHeight);N.current=H.current.clientWidth/e;var n=H.current.scrollHeight,t=-1*(D.current.clientWidth-S.current.clientWidth);F.current=H.current.clientHeight/n,I.current=window.requestAnimationFrame((function(){N.current>=1?l.DomHandler.addClass(E.current,"p-scrollpanel-hidden"):(l.DomHandler.removeClass(E.current,"p-scrollpanel-hidden"),l.DomHandler.applyStyle(E.current,{width:Math.max(100*N.current,10)+"%",left:H.current.scrollLeft/e*100+"%",bottom:r+"px"})),F.current>=1?l.DomHandler.addClass(S.current,"p-scrollpanel-hidden"):(l.DomHandler.removeClass(S.current,"p-scrollpanel-hidden"),l.DomHandler.applyStyle(S.current,{height:Math.max(100*F.current,10)+"%",top:"calc("+H.current.scrollTop/n*100+"% - "+E.current.clientHeight+"px)",right:t+"px"}))}))},W=function(e){E.current.isSameNode(e.target)?g("horizontal"):S.current.isSameNode(e.target)&&g("vertical")},Y=function(){"horizontal"===v&&g("vertical")},q=function(e){P.current?K(e):(T.current||K(e),X(e))},K=function(e){var r=e.pageX-z.current;z.current=e.pageX,I.current=window.requestAnimationFrame((function(){H.current.scrollLeft+=r/N.current}))},X=function(e){var r=e.pageY-M.current;M.current=e.pageY,I.current=window.requestAnimationFrame((function(){H.current.scrollTop+=r/F.current}))},$=function(e){l.DomHandler.removeClass(S.current,"p-scrollpanel-grabbed"),l.DomHandler.removeClass(E.current,"p-scrollpanel-grabbed"),l.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",q),document.removeEventListener("mouseup",$),P.current=!1,T.current=!1},G=function(e){if("vertical"===v)switch(e.code){case"ArrowDown":V("scrollTop",s.step),e.preventDefault();break;case"ArrowUp":V("scrollTop",-1*s.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===v)switch(e.code){case"ArrowRight":V("scrollLeft",s.step),e.preventDefault();break;case"ArrowLeft":V("scrollLeft",-1*s.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},J=function(){Z()},Q=function(e,r){H.current[e]+=r,_()},V=function(e,r){Z(),k.current=setTimeout((function(){Q(e,r)}),40)},Z=function(){k.current&&clearTimeout(k.current)},ee=function(){_()};o.useMountEffect((function(){var e,r,n;s.id||f(l.UniqueComponentId()),_(),window.addEventListener("resize",_),e=getComputedStyle(D.current),r=getComputedStyle(E.current),n=l.DomHandler.getHeight(D.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(D.current.style.height=H.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:H.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),U.current=!0})),o.useUnmountEffect((function(){U.current&&window.removeEventListener("resize",_),I.current&&window.cancelAnimationFrame(I.current)})),c.useImperativeHandle(r,(function(){return{props:s,refresh:ee,getElement:function(){return D.current},getContent:function(){return H.current},getXBar:function(){return E.current},getYBar:function(){return S.current}}}));var re=a({id:s.id,ref:D,style:s.style,className:l.classNames(s.className,x("root"))},h.getOtherProps(s),w("root")),ne=a({className:x("wrapper")},w("wrapper")),te=a({className:x("content"),onScroll:function(e){A!==e.target.scrollLeft?(R(e.target.scrollLeft),g("horizontal")):O!==e.target.scrollTop&&(j(e.target.scrollTop),g("vertical")),_()},onMouseEnter:_},w("content")),oe=a({ref:E,role:"scrollbar",className:x("barx"),tabIndex:0,"aria-valuenow":O,"aria-controls":B,"aria-orientation":"horizontal",onFocus:W,onBlur:Y,onKeyDown:G,onKeyUp:J,onMouseDown:function(e){P.current=!0,z.current=e.pageX,l.DomHandler.addClass(E.current,"p-scrollpanel-grabbed"),l.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",q),document.addEventListener("mouseup",$),e.preventDefault()}},w("barx")),le=a({ref:S,role:"scrollbar",className:x("bary"),tabIndex:0,"aria-valuenow":A,"aria-controls":B,"aria-orientation":"vertical",onFocus:W,onBlur:Y,onKeyDown:G,onKeyUp:J,onMouseDown:function(e){T.current=!0,M.current=e.pageY,l.DomHandler.addClass(S.current,"p-scrollpanel-grabbed"),l.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",q),document.addEventListener("mouseup",$),e.preventDefault()}},w("bary"));return c.createElement("div",re,c.createElement("div",ne,c.createElement("div",u({ref:H},te),s.children)),c.createElement("div",oe),c.createElement("div",le))}));return b.displayName="ScrollPanel",e.ScrollPanel=b,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);