cm-react-indiana-drag-scroll/dist/index.js

Implements scroll on drag

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e),n=function(){return(n=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}).apply(this,arguments)};function o(e,t,r,n,o){var c=r>0?Math.max(0,Math.min(r,-t)):Math.min(0,Math.max(r,-t)),l=Math.min(Math.max(e+r-c,n),o)-Math.min(Math.max(e,n),o);return[l,r-l]}function c(e,t,r){return 0===Math.abs(t)&&Math.abs(r)>0||Math.sign(t)===Math.sign(r)?.3*e*Math.sign(r)*Math.log10(1+.5*Math.abs(r)/e):r}function l(e){return!!e&&e.scrollWidth>e.clientWidth}function i(e){return!!e&&e.scrollHeight>e.clientHeight}var u;function s(e){return"function"==typeof e}function a(e,t){var r,n,o=function(){for(var c=[],l=0;l<arguments.length;l++)c[l]=arguments[l];var i=Date.now()-r,u=s(t)?t():t||0;i<u&&i>=0?n=setTimeout((function(){return o.apply(void 0,c)}),u-i):e.apply(void 0,c)},c=function(){for(var e=[],c=0;c<arguments.length;c++)e[c]=arguments[c];r=Date.now(),n=setTimeout((function(){return o.apply(void 0,e)}),s(t)?t():t||0)};return c.clear=function(){clearTimeout(n)},c}function f(t){var r=e.useRef(t);return e.useEffect((function(){r.current=t}),[t]),r}exports.MouseButton=void 0,(u=exports.MouseButton||(exports.MouseButton={}))[u.Left=1]="Left",u[u.Middle=4]="Middle",u[u.Right=2]="Right";var p=function(){function e(e,t){var r,n,o,c,l=this;this.getScrollMode=function(e){if(l.getOptions().overscroll&&l.reference.current&&e){var t=l.reference.current,r=t.scrollLeft,n=t.scrollTop,o=t.clientHeight,c=t.clientWidth,i=t.scrollHeight,u=t.scrollWidth;return e.left<0&&r>0||e.left>0&&r<u-c||e.top<0&&n>0||e.top>0&&n<i-o?"local":"global"}return"local"},this.clearStyles=function(){l.reference.current&&l.reference.current.childNodes.forEach((function(e,t){e.style.transition=l.originalStyles.transition[t],e.style.transform=l.originalStyles.transform[t],e.style.pointerEvents=l.originalStyles.pointerEvents[t]})),l.overflow.left=0,l.overflow.top=0,l.overflow.prevent=!1},this.inertia=function(e,t){var r=l.calculateScroll({left:l.inertiaSpeed.left*e,top:l.inertiaSpeed.top*e});l.inertiaSpeed.left=(r.left.local+r.left.overflow)/e*.95,l.inertiaSpeed.top=(r.top.local+r.top.overflow)/e*.95,l.applyScroll(r),Math.abs(l.inertiaSpeed.left)<.05&&Math.abs(l.inertiaSpeed.top)<.05&&(null==t||t())},this.reference=e,this.options=t,this.originalStyles={transform:[],transition:[],pointerEvents:[]},this.overflow={left:0,top:0,prevent:!1},this.inertiaSpeed={left:0,top:0},this.mode=null,this.active=!1,this.loopedInertia=(r=this.inertia,o=!1,c={run:function(e){o=!1;var t=performance.now(),l=function(){c.cancel(),null==e||e()},i=function(e){o||(r(e-t,l),t=e,n=window.requestAnimationFrame((function(e){return i(e)})))};n=window.requestAnimationFrame((function(e){return i(e)}))},cancel:function(){o=!0,window.cancelAnimationFrame(n)}}),this.debouncedClearStyles=a(this.clearStyles,300)}return e.prototype.getOptions=function(){return n({inertia:!0,rubberBand:!0},this.options.current)},e.prototype.start=function(e){var t=this;this.active&&this.cancel(),this.mode=this.getScrollMode(e),this.reference.current&&this.reference.current.childNodes.forEach((function(e){e.addEventListener("click",t.preventEvent);var r=window.getComputedStyle(e),n=r.transform,o=r.transition,c=r.pointerEvents;t.originalStyles.transition.push(o),t.originalStyles.transform.push(n),t.originalStyles.pointerEvents.push(c),e.style.pointerEvents="none"})),this.active=!0},e.prototype.scroll=function(e){this.applyScroll(this.calculateScroll(e))},e.prototype.end=function(e,t){var r=this,n=this.getOptions().inertia,o=function(){r.cancel(),null==t||t()};this.inertiaSpeed.left=e?e.left:0,this.inertiaSpeed.top=e?e.top:0,n?this.loopedInertia.run(o):o()},e.prototype.cancel=function(){var e,t=this;null===(e=this.reference.current)||void 0===e||e.childNodes.forEach((function(e){e.removeEventListener("click",t.preventEvent)})),this.resetOverflow(),this.loopedInertia.cancel(),this.mode=null,this.active=!1},e.prototype.resetOverflow=function(){var e,t=this.overflow.left||this.overflow.top;t&&(this.overflow.prevent=!0,(null===(e=this.reference.current)||void 0===e?void 0:e.childNodes).forEach((function(e){e.style.transform="translate3d(0px, 0px, 0px)",e.style.transition="300ms"}))),t?this.debouncedClearStyles():this.clearStyles()},e.prototype.preventEvent=function(e){e.preventDefault(),e.stopImmediatePropagation()},e.prototype.applyScroll=function(e){var t=this,r=e.left,n=e.top;(r.global||n.global)&&window.scrollTo({left:window.scrollX+r.global,top:window.scrollY+n.global,behavior:"auto"}),this.reference.current&&(this.reference.current.scrollLeft+=r.local,this.reference.current.scrollTop+=n.local,this.overflow.prevent||!r.overflow&&!n.overflow||(this.overflow.left+=r.overflow,this.overflow.top+=n.overflow,this.reference.current.childNodes.forEach((function(e){e.style.transform="translate3d("+-t.overflow.left+"px, "+-t.overflow.top+"px, 0px)",e.style.transition="0ms"}))))},e.prototype.calculateScroll=function(e){var t=this.getOptions().rubberBand,r={local:0,global:0,overflow:0},n={local:0,global:0,overflow:0};if("global"===this.mode)r.global=e.left,n.global=e.top;else if(this.reference.current){var u=this.reference.current,s=u.scrollLeft,a=u.scrollTop,f=u.scrollWidth,p=u.clientWidth,d=u.scrollHeight,v=u.clientHeight;if(l(this.reference.current)){var h=o(s,this.overflow.left,e.left,0,f-p),m=h[0],S=h[1];r.local=m,t&&(r.overflow=c(p,this.overflow.left,S))}if(i(this.reference.current)){var w=o(a,this.overflow.top,e.top,0,d-v);m=w[0],S=w[1];n.local=m,t&&(n.overflow=c(p,this.overflow.top,S))}}return{left:r,top:n}},e}();function d(t){void 0===t&&(t={mouseScroll:!0});var r,o,c,u,s=e.useRef(null),d=1/60*1e3,v=e.useRef({scrolling:!1,started:!1,pressed:!1,artificial:!1,mouse:!1}),h=e.useRef({active:{left:!1,top:!1},initialClick:{left:0,top:0},speedX:0,speedY:0,clientX:0,clientY:0}),m=e.useRef({body:{},reference:{}}),S=f(t),w=f(n({activationDistance:20,cursor:!0,buttons:[exports.MouseButton.Left]},null!==(r=S.current.mouseScroll)&&"object"==typeof r?S.current.mouseScroll:{})),y=e.useState("mouseScrollImplementation"in t&&t.mouseScrollImplementation?t.mouseScrollImplementation(s,w):function(e,t){return new p(e,t)}(s,w))[0],g=function(){var e=function(){window.requestAnimationFrame((function(){var e,t;null===(t=(e=S.current).onEndScroll)||void 0===t||t.call(e),v.current.started=!1,v.current.scrolling=!1,v.current.artificial=!1}))};v.current.artificial?y.end({left:h.current.speedX,top:h.current.speedY},e):e()},b=function(e){var t,r,n=w.current.ignoreElements;S.current.mouseScroll&&(function(e,t,r){if(r&&e&&t){var n=e.closest(r);return null===n||n.contains(t)}return Boolean(e&&t)}(e.target,s.current,n)&&(l(s.current)||i(s.current))&&-1!==w.current.buttons.indexOf(e.buttons)&&(t=e.clientX,r=e.clientY,h.current.speedY=0,h.current.speedX=0,h.current.clientX=t,h.current.clientY=r,h.current.active.left=!1,h.current.active.top=!1,h.current.initialClick.top=r,h.current.initialClick.left=t,v.current.mouse=!0,v.current.pressed=!0,y.cancel()))},E=function(e){S.current.mouseScroll&&v.current.pressed&&v.current.mouse&&(!function(e,t){var r=w.current,n=r.activationDistance,o=r.cursor;Math.abs(e-h.current.initialClick.left)>n&&(h.current.active.left=!0),Math.abs(t-h.current.initialClick.top)>n&&(h.current.active.top=!0);var c={left:h.current.active.left?h.current.clientX-e:0,top:h.current.active.top?h.current.clientY-t:0};y.active?v.current.pressed&&(h.current.speedX=c.left/d,h.current.speedY=c.top/d,h.current.clientX=e,h.current.clientY=t,y.scroll(c),window.requestAnimationFrame((function(){h.current.speedX=0,h.current.speedY=0}))):(h.current.active.top||h.current.active.left)&&(y.start(c),h.current.clientX=e,h.current.clientY=t,v.current.artificial=!0,o&&(m.current.body.cursor=document.body.style.cursor,document.body.style.cursor="grabbing",s.current&&(m.current.reference.cursor=s.current.style.cursor,s.current.style.cursor="grabbing")),s.current&&(m.current.reference.userSelect=s.current.style.userSelect,s.current.style.userSelect="none"))}(e.clientX,e.clientY),e.preventDefault(),e.stopPropagation())},M=function(){v.current.pressed&&(y.active&&g(),v.current.pressed=!1,v.current.mouse=!1,x())},x=function(){w.current.cursor&&(document.body.style.cursor=m.current.body.cursor||"",s.current&&(s.current.style.cursor=m.current.reference.cursor||"")),s.current&&(s.current.style.userSelect=m.current.reference.userSelect||"")},L=function(){v.current.artificial=!1,v.current.pressed=!0},O=function(){v.current.pressed&&(v.current.started&&!v.current.scrolling&&g(),v.current.pressed=!1)},X=function(){var e,t;v.current.scrolling=!0,v.current.started?null===(t=(e=S.current).onScroll)||void 0===t||t.call(e):function(){var e,t;v.current.started=!0,null===(t=(e=S.current).onStartScroll)||void 0===t||t.call(e)}(),Y()},Y=(o=250,c=f((function(){var e=v.current,t=e.pressed,r=e.started,n=e.artificial;t||!r||n||g(),v.current.scrolling=!1})),u=f(o),e.useRef(a((function(){var e;null===(e=c.current)||void 0===e||e.call(c)}),(function(){return u.current}))).current),I=e.useCallback((function(e){s.current!==e&&(s.current&&(s.current.removeEventListener("mousedown",b),s.current.removeEventListener("scroll",X),s.current.removeEventListener("touchstart",L)),s.current=e,s.current&&(s.current.addEventListener("mousedown",b,{passive:!1}),s.current.addEventListener("scroll",X,{passive:!1}),s.current.addEventListener("touchstart",L)))}),[X]);return e.useEffect((function(){return window.addEventListener("mouseup",M),window.addEventListener("mousemove",E),window.addEventListener("touchend",O),function(){window.removeEventListener("mouseup",M),window.removeEventListener("mousemove",E),window.removeEventListener("touchend",O),x()}}),[]),{ref:I}}var v=e.forwardRef((function(e,t){var o,c,l=n({mouseScrollImplementation:void 0},e),i=l.children,u=l.className,s=l.component,a=l.hideScrollbars,f=void 0===a||a,p=l.mouseScroll,v=void 0===p||p,h=l.mouseScrollImplementation,m=l.onStartScroll,S=l.onEndScroll,w=l.onScroll,y=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(l,["children","className","component","hideScrollbars","mouseScroll","mouseScrollImplementation","onStartScroll","onEndScroll","onScroll"]),g=s||"div",b=d({mouseScroll:v,mouseScrollImplementation:h,onStartScroll:m,onEndScroll:S,onScroll:w});return r.default.createElement(g,n({className:(c=[u,"indiana-scroll-container",f&&"indiana-scroll-container--hide-scrollbars"],c.filter((function(e){return e})).join(" ")),ref:(o=[t,b.ref],function(e){o.forEach((function(t){"function"==typeof t?t(e):null!=t&&(t.current=e)}))})},y),i)}));exports.ScrollContainer=v,exports.default=v,exports.useScrollContainer=d;
//# sourceMappingURL=index.js.map