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{useMountEffect as r,useUnmountEffect as t}from"primereact/hooks";import{ObjectUtils as n,classNames as l,DomHandler as c}from"primereact/utils";function o(){return o=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},o.apply(this,arguments)}var u={defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0},getProps:function(e){return n.getMergedProps(e,u.defaultProps)},getOtherProps:function(e){return n.getDiffProps(e,u.defaultProps)}},a=e.forwardRef((function(n,a){var s=u.getProps(n),i=e.useRef(null),p=e.useRef(null),d=e.useRef(null),m=e.useRef(null),f=e.useRef(!1),g=e.useRef(!1),h=e.useRef(null),v=e.useRef(null),b=e.useRef(null),w=e.useRef(null),y=e.useRef(null),E=e.useRef(!1),C=function(){var e=p.current.scrollWidth,r=-1*(i.current.clientHeight-d.current.clientHeight);b.current=p.current.clientWidth/e;var t=p.current.scrollHeight,n=-1*(i.current.clientWidth-m.current.clientWidth);w.current=p.current.clientHeight/t,y.current=window.requestAnimationFrame((function(){b.current>=1?c.addClass(d.current,"p-scrollpanel-hidden"):(c.removeClass(d.current,"p-scrollpanel-hidden"),d.current.style.cssText="width:"+Math.max(100*b.current,10)+"%; left:"+p.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),w.current>=1?c.addClass(m.current,"p-scrollpanel-hidden"):(c.removeClass(m.current,"p-scrollpanel-hidden"),m.current.style.cssText="height:"+Math.max(100*w.current,10)+"%; top: calc("+p.current.scrollTop/t*100+"% - "+d.current.clientHeight+"px);right:"+n+"px;")}))},x=function(e){f.current?P(e):(g.current||P(e),R(e))},P=function(e){var r=e.pageX-h.current;h.current=e.pageX,y.current=window.requestAnimationFrame((function(){p.current.scrollLeft+=r/b.current}))},R=function(e){var r=e.pageY-v.current;v.current=e.pageY,y.current=window.requestAnimationFrame((function(){p.current.scrollTop+=r/w.current}))},L=function e(r){c.removeClass(m.current,"p-scrollpanel-grabbed"),c.removeClass(d.current,"p-scrollpanel-grabbed"),c.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",e),f.current=!1,g.current=!1},H=function(){C()};r((function(){var e,r,t;C(),window.addEventListener("resize",C),e=getComputedStyle(i.current),r=getComputedStyle(d.current),t=c.getHeight(i.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===t&&(i.current.style.height=p.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:p.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),E.current=!0})),t((function(){E.current&&window.removeEventListener("resize",C),y.current&&window.cancelAnimationFrame(y.current)})),e.useImperativeHandle(a,(function(){return{props:s,refresh:H,getElement:function(){return i.current},getContent:function(){return p.current},getXBar:function(){return d.current},getYBar:function(){return m.current}}}));var F=u.getOtherProps(s),N=l("p-scrollpanel p-component",s.className);return e.createElement("div",o({ref:i,id:s.id,className:N,style:s.style},F),e.createElement("div",{className:"p-scrollpanel-wrapper"},e.createElement("div",{ref:p,className:"p-scrollpanel-content",onScroll:C,onMouseEnter:C},s.children)),e.createElement("div",{ref:d,className:"p-scrollpanel-bar p-scrollpanel-bar-x",onMouseDown:function(e){f.current=!0,h.current=e.pageX,c.addClass(d.current,"p-scrollpanel-grabbed"),c.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",x),document.addEventListener("mouseup",L),e.preventDefault()}}),e.createElement("div",{ref:m,className:"p-scrollpanel-bar p-scrollpanel-bar-y",onMouseDown:function(e){g.current=!0,v.current=e.pageY,c.addClass(m.current,"p-scrollpanel-grabbed"),c.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",x),document.addEventListener("mouseup",L),e.preventDefault()}}))}));a.displayName="ScrollPanel";export{a as ScrollPanel};