@hffxx/react-overflow-box/build/index.js

Implements mobile-like drag

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("clsx"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(t),o=function(){return o=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},o.apply(this,arguments)};!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".wrapper {\r\n  overflow: auto;\r\n  cursor: grab;\r\n}\r\n\r\n.wrapper img {\r\n  display: block;\r\n}\r\n\r\n.hide-scroll {\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.hide-scroll::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.is-dragging {\r\n  cursor: grabbing;\r\n  scroll-behavior: auto !important;\r\n}\r\n\r\n.disabled {\r\n  cursor: inherit;\r\n}\r\n");exports.Overflowbox=function(r){var l=r.x,u=void 0===l?0:l,c=r.y,a=void 0===c?0:c,i=r.onDragStart,s=r.onDragEnd,f=r.smoothScrolling,d=r.disable,h=r.disableX,p=r.disableY,v=r.reactRef,g=r.setY,b=r.setX,m=r.showScrollbar,w=r.disableScrollWheel,S=r.className,y=r.width,E=r.height,T=r.children,C=r.grabCursor,M=r.cursor,L=r.style,k=r.wrapper||"div",x=t.useState(!1),D=x[0],O=x[1],X=t.useRef(null),Y=v||X,j=t.useState(!1),B=j[0],N=j[1],P=t.useState(!1),R=P[0],q=P[1],A=t.useState(!1),_=A[0],U=A[1],W=t.useState(!1),z=W[0],F=W[1],G=t.useState(0),H=G[0],I=G[1],J=t.useState(0),K=J[0],Q=J[1],V=t.useState(0),Z=V[0],$=V[1],ee=t.useState(0),te=ee[0],re=ee[1],ne=t.useState(!1),oe=ne[0],le=ne[1],ue=t.useState(null),ce=ue[0],ae=ue[1],ie=t.useCallback((function(e){if(Y.current){var t=Y.current.getBoundingClientRect(),r=t.width,n=t.height,o=Math.ceil(r),l=Math.ceil(n);Y.current.scrollLeft===u-o/2&&Y.current.scrollTop===a-l/2||Y.current.scrollTo({left:u-o/2,top:a-l/2,behavior:e?"smooth":"auto"})}}),[u,a,Y]);t.useEffect((function(){if(Y.current){var e=Array.from(Y.current.querySelectorAll("img"));e.length&&!D&&Promise.all(e.map((function(e){return new Promise((function(t){e.complete?t(null):e.onload=t}))}))).then((function(){ie(!1),O(!0)})),D&&ie(!!f)}}),[u,a,ie,Y,D,f]),t.useEffect((function(){var e=function(e){e.preventDefault()};return w&&oe?document.addEventListener("wheel",e,{passive:!1}):document.removeEventListener("wheel",e),function(){document.removeEventListener("wheel",e)}}),[w,oe]);var se=t.useCallback((function(){le(!1),B&&N(!1)}),[B]),fe=t.useCallback((function(){B&&N(!1)}),[B]),de=t.useCallback((function(e){if(e.preventDefault(),!(!Y.current||d||h&&p)){var t=Y.current,r=t.offsetLeft,n=t.offsetTop,o=t.scrollLeft,l=t.scrollTop,u=e.pageX-r,c=e.pageY-n;I(u),Q(c),$(o),re(l),N(!0)}}),[Y,h,p,d]),he=t.useCallback((function(){if(Y.current){var e=Y.current.getBoundingClientRect(),t=e.width,r=e.height,n=Math.ceil(t),o=Math.ceil(r);h||null==b||b(Y.current.scrollLeft+n/2),p||null==g||g(Y.current.scrollTop+o/2)}}),[Y,h,p,b,g]),pe=t.useCallback((function(){d||z||(null==i||i(),F(!0))}),[d,z,i]),ve=t.useCallback((function(e){if(e.preventDefault(),B&&Y.current&&!d){z||(null==i||i(),F(!0));var t=e.pageX-Y.current.offsetLeft,r=e.pageY-Y.current.offsetTop,n=t-H,o=r-K;h||(Y.current.scrollLeft=Z-n),p||(Y.current.scrollTop=te-o)}}),[i,z,B,H,K,Z,te,Y,p,h,d]);return t.useEffect((function(){B&&_&&he()}),[_,he,B]),t.useEffect((function(){R&&_&&he()}),[_,he,R]),t.useEffect((function(){B&&R||F(!1)}),[B,R]),t.useEffect((function(){z&&(B||R||null==s||s())}),[z,s,B,R]),n.default.createElement(k,{className:e.clsx("wrapper",!m&&"hide-scroll",B&&"is-dragging",S,d&&"disabled",h&&p&&"disabled"),ref:Y,onMouseDown:de,onMouseUp:fe,onMouseMove:ve,onMouseLeave:se,onTouchMove:pe,onMouseEnter:function(){return le(!0)},onTouchStart:function(){return q(!0)},onTouchEnd:function(){return q(!1)},onScroll:function(){if(R||B){U(!0),null!==ce&&clearTimeout(ce);var e=setTimeout((function(){U(!1)}),100);ae(e)}},style:o({width:y,height:E,cursor:B?C:M,overflowX:h||d?"hidden":"auto",overflowY:p||d?"hidden":"auto"},L)},T)};