primereact/scrollpanel/scrollpanel.min.js

PrimeReact is an open source UI library for React featuring a rich set of 80+ 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,t,n){"use strict";function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=l(r);function a(){return a=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},a.apply(this,arguments)}var u=c.forwardRef((function(e,r){var l=c.useRef(null),o=c.useRef(null),s=c.useRef(null),i=c.useRef(null),d=c.useRef(!1),p=c.useRef(!1),m=c.useRef(null),f=c.useRef(null),h=c.useRef(null),g=c.useRef(null),v=c.useRef(null),b=c.useRef(!1),y=function(){var e=o.current.scrollWidth,r=-1*(l.current.clientHeight-s.current.clientHeight);h.current=o.current.clientWidth/e;var t=o.current.scrollHeight,c=-1*(l.current.clientWidth-i.current.clientWidth);g.current=o.current.clientHeight/t,v.current=window.requestAnimationFrame((function(){h.current>=1?n.DomHandler.addClass(s.current,"p-scrollpanel-hidden"):(n.DomHandler.removeClass(s.current,"p-scrollpanel-hidden"),s.current.style.cssText="width:"+Math.max(100*h.current,10)+"%; left:"+o.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),g.current>=1?n.DomHandler.addClass(i.current,"p-scrollpanel-hidden"):(n.DomHandler.removeClass(i.current,"p-scrollpanel-hidden"),i.current.style.cssText="height:"+Math.max(100*g.current,10)+"%; top: calc("+o.current.scrollTop/t*100+"% - "+s.current.clientHeight+"px);right:"+c+"px;")}))},H=function(e){d.current?w(e):(p.current||w(e),E(e))},w=function(e){var r=e.pageX-m.current;m.current=e.pageX,v.current=window.requestAnimationFrame((function(){o.current.scrollLeft+=r/h.current}))},E=function(e){var r=e.pageY-f.current;f.current=e.pageY,v.current=window.requestAnimationFrame((function(){o.current.scrollTop+=r/g.current}))},D=function e(r){n.DomHandler.removeClass(i.current,"p-scrollpanel-grabbed"),n.DomHandler.removeClass(s.current,"p-scrollpanel-grabbed"),n.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",H),document.removeEventListener("mouseup",e),d.current=!1,p.current=!1},C=function(){y()};t.useMountEffect((function(){var e,r,t;y(),window.addEventListener("resize",y),e=getComputedStyle(l.current),r=getComputedStyle(s.current),t=n.DomHandler.getHeight(l.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===t&&(l.current.style.height=o.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:o.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),b.current=!0})),t.useUnmountEffect((function(){b.current&&window.removeEventListener("resize",y),v.current&&window.cancelAnimationFrame(v.current)})),c.useImperativeHandle(r,(function(){return{props:e,refresh:C,getElement:function(){return l.current},getContent:function(){return o.current},getXBar:function(){return s.current},getYBar:function(){return i.current}}}));var R=n.ObjectUtils.findDiffKeys(e,u.defaultProps),x=n.classNames("p-scrollpanel p-component",e.className);return c.createElement("div",a({ref:l,id:e.id,className:x,style:e.style},R),c.createElement("div",{className:"p-scrollpanel-wrapper"},c.createElement("div",{ref:o,className:"p-scrollpanel-content",onScroll:y,onMouseEnter:y},e.children)),c.createElement("div",{ref:s,className:"p-scrollpanel-bar p-scrollpanel-bar-x",onMouseDown:function(e){d.current=!0,m.current=e.pageX,n.DomHandler.addClass(s.current,"p-scrollpanel-grabbed"),n.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",H),document.addEventListener("mouseup",D),e.preventDefault()}}),c.createElement("div",{ref:i,className:"p-scrollpanel-bar p-scrollpanel-bar-y",onMouseDown:function(e){p.current=!0,f.current=e.pageY,n.DomHandler.addClass(i.current,"p-scrollpanel-grabbed"),n.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",H),document.addEventListener("mouseup",D),e.preventDefault()}}))}));return u.displayName="ScrollPanel",u.defaultProps={__TYPE:"ScrollPanel",id:null,style:null,className:null},e.ScrollPanel=u,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.utils);