UNPKG

react-use-draggable-scroll

Version:

[![NPM Version](https://img.shields.io/npm/v/react-use-draggable-scroll)](https://www.npmjs.com/package/react-use-draggable-scroll)

3 lines (2 loc) 4.52 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;exports.useDraggable=function(t,n){var o,c,s,i,l=void 0===n?{}:n,u=l.decayRate,a=void 0===u?.95:u,d=l.safeDisplacement,f=void 0===d?10:d,g=l.applyRubberBandEffect,p=void 0!==g&&g,v=l.activeMouseButton,M=void 0===v?"Left":v,h=l.isMounted,w=void 0===h||h,m=e.useRef({isMouseDown:!1,isDraggingX:!1,isDraggingY:!1,initialMouseX:0,initialMouseY:0,lastMouseX:0,lastMouseY:0,scrollSpeedX:0,scrollSpeedY:0,lastScrollX:0,lastScrollY:0}),X=!1,Y=!1,S=0,y=0,D=1/60*1e3;r((function(){w&&(X="scroll"===window.getComputedStyle(t.current).overflowX,Y="scroll"===window.getComputedStyle(t.current).overflowY,S=t.current.scrollWidth-t.current.clientWidth,y=t.current.scrollHeight-t.current.clientHeight,o=window.getComputedStyle(t.current).cursor,c=[],s=[],i=[],t.current.childNodes.forEach((function(e){c.push(window.getComputedStyle(e).cursor),s.push("none"===window.getComputedStyle(e).transform?"":window.getComputedStyle(e).transform),i.push("none"===window.getComputedStyle(e).transition?"":window.getComputedStyle(e).transition)})))}),[w]);var E,b,L,x=function(){var e=t.current.scrollLeft+m.current.scrollSpeedX*D,r=t.current.scrollTop+m.current.scrollSpeedY*D;t.current.scrollLeft=e,t.current.scrollTop=r,m.current.lastScrollX=e,m.current.lastScrollY=r},C=function(){t.current.childNodes.forEach((function(e,r){e.style.transform=s[r],e.style.transition=i[r]}))},T=function(e){e.preventDefault(),e.stopImmediatePropagation()},I=function(e){var r=m.current.isDraggingX||m.current.isDraggingY,n=m.current.initialMouseY-e.clientY,s=Math.abs(m.current.initialMouseX-e.clientX)>f||Math.abs(n)>f,i=r&&s;t.current.childNodes.forEach(i?function(e){e.addEventListener("click",T)}:function(e){e.removeEventListener("click",T)}),m.current.isMouseDown=!1,m.current.lastMouseX=0,m.current.lastMouseY=0,t.current.style.cursor=o,t.current.childNodes.forEach((function(e,r){e.style.cursor=c[r]})),i&&(b=setInterval((function(){var e=m.current.scrollSpeedX*a;m.current.scrollSpeedX=e;var r=t.current.scrollLeft<=0||t.current.scrollLeft>=S;x(),(Math.abs(e)<.05||m.current.isMouseDown||r)&&(m.current.scrollSpeedX=0,clearInterval(b))}),D),L=setInterval((function(){var e=m.current.scrollSpeedY*a;m.current.scrollSpeedY=e;var r=t.current.scrollTop<=0||t.current.scrollTop>=y;x(),(Math.abs(e)<.05||m.current.isMouseDown||r)&&(m.current.scrollSpeedY=0,clearInterval(L))}),D),m.current.isDraggingX=!1,m.current.isDraggingY=!1,p&&(t.current.childNodes.forEach((function(e){e.style.transform="translate3d(0px, 0px, 0px)",e.style.transition="transform 250ms"})),E=setTimeout(C,250)))},N=function(e){if(m.current.isMouseDown){e.preventDefault();var r=m.current.lastMouseX-e.clientX;m.current.lastMouseX=e.clientX,m.current.scrollSpeedX=r/D,m.current.isDraggingX=!0;var n=m.current.lastMouseY-e.clientY;m.current.lastMouseY=e.clientY,m.current.scrollSpeedY=n/D,m.current.isDraggingY=!0,t.current.style.cursor="grabbing",t.current.childNodes.forEach((function(e){e.style.cursor="grabbing"})),(t.current.scrollLeft<=0&&X||t.current.scrollLeft>=S&&X||t.current.scrollTop<=0&&Y||t.current.scrollTop>=y&&Y)&&p&&function(e){var r=e.clientX-m.current.initialMouseX,n=e.clientY-m.current.initialMouseY,o=t.current,c=o.clientWidth,s=o.clientHeight,i=0,l=0;X&&Y?(i=.3*c*Math.sign(r)*Math.log10(1+.5*Math.abs(r)/c),l=.3*s*Math.sign(n)*Math.log10(1+.5*Math.abs(n)/s)):X?i=.3*c*Math.sign(r)*Math.log10(1+.5*Math.abs(r)/c):Y&&(l=.3*s*Math.sign(n)*Math.log10(1+.5*Math.abs(n)/s)),t.current.childNodes.forEach((function(e){e.style.transform="translate3d("+i+"px, "+l+"px, 0px)",e.style.transition="transform 0ms"}))}(e),x()}},H=function(){S=t.current.scrollWidth-t.current.clientWidth,y=t.current.scrollHeight-t.current.clientHeight};return e.useEffect((function(){return w&&(window.addEventListener("mouseup",I),window.addEventListener("mousemove",N),window.addEventListener("resize",H)),function(){window.removeEventListener("mouseup",I),window.removeEventListener("mousemove",N),window.removeEventListener("resize",H),clearInterval(b),clearInterval(L),clearTimeout(E)}}),[w]),{events:{onMouseDown:function(e){var r;r=e.buttons,("Left"===M&&1===r||"Middle"===M&&4===r||"Right"===M&&2===r)&&(m.current.isMouseDown=!0,m.current.lastMouseX=e.clientX,m.current.lastMouseY=e.clientY,m.current.initialMouseX=e.clientX,m.current.initialMouseY=e.clientY)}}}}; //# sourceMappingURL=react-use-draggable-scroll.cjs.production.min.js.map