UNPKG

react-nano-scrollbar

Version:

<h1 align="center"> react-nano-scrollbar </h1>

3 lines (2 loc) 3.6 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;exports.ScrollArea=function(e){var o=e.className,r=e.children,a=e.hideScrollbarX,c=e.hideScrollbarY,l=e.autohide,s=void 0===l||l,i=e.horizontal,u=void 0!==i&&i,d=t.useRef(null),v=t.useRef(null),m=t.useRef(null),f=t.useRef(null),h=t.useRef(null),p=t.useRef(null);return t.useEffect((function(){var e=d.current,t=v.current,n=m.current,o=f.current,r=h.current,l=p.current;if(e&&t&&n&&o&&r&&l){var s=void 0,i=function(){var i,u;e.classList.add("react-nano-scrollbar-moving"),clearTimeout(s),s=setTimeout((function(){e.classList.remove("react-nano-scrollbar-moving")}),1e3),i=e.getBoundingClientRect(),u=Math.min(1,i.width/t.scrollWidth),n.style.width=100*u+"%",n.style.left=t.scrollLeft/t.scrollWidth*100+"%",o.style.display=a||u>=1?"none":"block",function(){var n=e.getBoundingClientRect(),o=Math.min(1,n.height/t.scrollHeight);r.style.height=100*o+"%",r.style.top=t.scrollTop/t.scrollHeight*100+"%",l.style.display=c||o>=1?"none":"block"}()},L=void 0,E=0,b=0,g=0,y=0,w=function(e,n,r){L=e,E=n,b=r,g=t.scrollTop,y=t.scrollLeft,"x"===e?o.classList.add("react-nano-scrollbar-active"):l.classList.add("react-nano-scrollbar-active")},R=function(n,o){if(L){var r=e.getBoundingClientRect();"x"===L?t.scrollLeft=y+(n-E)/r.width*t.scrollWidth:t.scrollTop=g+(o-b)/r.height*t.scrollHeight}},Y=function(){L=void 0,o.classList.remove("react-nano-scrollbar-active"),l.classList.remove("react-nano-scrollbar-active")},x=function(e){L&&(e.preventDefault(),e.stopPropagation(),R(e.clientX,e.clientY))},D=function(e){if(L){e.preventDefault(),e.stopPropagation();var t=e.touches[0];t&&R(t.clientX,t.clientY)}},N=function(e){e.preventDefault(),e.stopPropagation(),w("x",e.clientX,e.clientY)},P=function(e){e.preventDefault(),e.stopPropagation();var t=e.touches[0];t&&w("x",t.clientX,t.clientY)},X=function(e){e.preventDefault(),e.stopPropagation(),w("y",e.clientX,e.clientY)},T=function(e){e.preventDefault(),e.stopPropagation();var t=e.touches[0];t&&w("y",t.clientX,t.clientY)};return i(),t.addEventListener("scroll",i),t.addEventListener("wheel",(function(e){u&&(e.preventDefault(),t.scrollBy(e.shiftKey?{behavior:"auto",top:e.deltaY}:{behavior:"auto",left:e.deltaY}))})),n.addEventListener("mousedown",N),n.addEventListener("touchstart",P),r.addEventListener("mousedown",X),r.addEventListener("touchstart",T),document.addEventListener("mousemove",x),document.addEventListener("mouseup",Y),document.addEventListener("touchmove",D),document.addEventListener("touchend",Y),document.addEventListener("touchcancel",Y),function(){t.removeEventListener("scroll",i),n.removeEventListener("mousedown",N),n.removeEventListener("touchstart",P),r.addEventListener("mousedown",X),r.addEventListener("touchstart",T),document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",Y),document.removeEventListener("touchmove",D),document.removeEventListener("touchend",Y),document.removeEventListener("touchcancel",Y)}}})),n.createElement("div",{className:"react-nano-scrollbar-wrapper "+(s?"react-nano-scrollbar-autohide ":"")+(o||""),ref:d},n.createElement("div",{className:"react-nano-scrollbar-content",ref:v},r),n.createElement("div",{className:"react-nano-scrollbar-track-x",ref:f},n.createElement("div",{className:"react-nano-scrollbar-x",ref:m})),n.createElement("div",{className:"react-nano-scrollbar-track-y",ref:p},n.createElement("div",{className:"react-nano-scrollbar-y",ref:h})))}; //# sourceMappingURL=react-nano-scrollbar.cjs.production.min.js.map