react-indiana-drag-scroll
Version:
Implements scroll on drag
23 lines (20 loc) • 8.64 kB
JavaScript
"use strict";var t=require("react");function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t),o=function(t,e){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */var r=function(t,e,n){return t(n={path:e,exports:{},require:function(t,e){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==e&&n.path)}},n.exports),n.exports}((function(t){
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
!function(){var e={}.hasOwnProperty;function n(){for(var t=[],o=0;o<arguments.length;o++){var r=arguments[o];if(r){var i=typeof r;if("string"===i||"number"===i)t.push(r);else if(Array.isArray(r)&&r.length){var s=n.apply(null,r);s&&t.push(s)}else if("object"===i)for(var l in r)e.call(r,l)&&r[l]&&t.push(l)}}return t.join(" ")}t.exports?(n.default=n,t.exports=n):window.classNames=n}()}));function i(t,e,n){var o,r,i,s,l;function a(){var c=Date.now()-s;c<e&&c>=0?o=setTimeout(a,e-c):(o=null,n||(l=t.apply(i,r),i=r=null))}null==e&&(e=100);var c=function(){i=this,r=arguments,s=Date.now();var c=n&&!o;return o||(o=setTimeout(a,e)),c&&(l=t.apply(i,r),i=r=null),l};return c.clear=function(){o&&(clearTimeout(o),o=null)},c.flush=function(){o&&(l=t.apply(i,r),i=r=null,clearTimeout(o),o=null)},c}i.debounce=i;var s=i;!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}(".indiana-scroll-container {\n overflow: auto;\n}\n.indiana-scroll-container--dragging {\n scroll-behavior: auto !important;\n}\n.indiana-scroll-container--dragging > * {\n pointer-events: none;\n cursor: -webkit-grab;\n cursor: grab;\n}\n.indiana-scroll-container--hide-scrollbars {\n overflow: hidden;\n overflow: -moz-scrollbars-none;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.indiana-scroll-container--hide-scrollbars::-webkit-scrollbar {\n display: none !important;\n height: 0 !important;\n width: 0 !important;\n background: transparent !important;\n -webkit-appearance: none !important;\n}\n.indiana-scroll-container--native-scroll {\n overflow: auto;\n}\n\n.indiana-dragging {\n cursor: -webkit-grab;\n cursor: grab;\n}");var l,a=(l="indiana-scroll-container",function(t,e){if(!t)return l;var n;"string"==typeof t?n=t:e=t;var o=l;return n&&(o+="__"+n),o+(e?Object.keys(e).reduce((function(t,n){var r=e[n];return r&&(t+=" "+("boolean"==typeof r?o+"--"+n:o+"--"+n+"_"+r)),t}),""):"")}),c=function(t){function e(e){var o=t.call(this,e)||this;return o.onEndScroll=function(){o.scrolling=!1,!o.pressed&&o.started&&o.processEnd()},o.onScroll=function(t){var e=o.container.current;e.scrollLeft===o.scrollLeft&&e.scrollTop===o.scrollTop||(o.scrolling=!0,o.processScroll(t),o.onEndScroll())},o.onTouchStart=function(t){var e=o.props.nativeMobileScroll;if(o.isDraggable(t.target))if(o.internal=!0,e&&o.scrolling)o.pressed=!0;else{var n=t.touches[0];o.processClick(t,n.clientX,n.clientY),!e&&o.props.stopPropagation&&t.stopPropagation()}},o.onTouchEnd=function(t){var e=o.props.nativeMobileScroll;o.pressed&&(!o.started||o.scrolling&&e?o.pressed=!1:o.processEnd(),o.forceUpdate())},o.onTouchMove=function(t){var e=o.props.nativeMobileScroll;if(o.pressed&&(!e||!o.isMobile)){var n=t.touches[0];n&&o.processMove(t,n.clientX,n.clientY),t.preventDefault(),o.props.stopPropagation&&t.stopPropagation()}},o.onMouseDown=function(t){o.isDraggable(t.target)&&o.isScrollable()&&(o.internal=!0,-1!==o.props.buttons.indexOf(t.button)&&(o.processClick(t,t.clientX,t.clientY),t.preventDefault(),o.props.stopPropagation&&t.stopPropagation()))},o.onMouseMove=function(t){o.pressed&&(o.processMove(t,t.clientX,t.clientY),t.preventDefault(),o.props.stopPropagation&&t.stopPropagation())},o.onMouseUp=function(t){o.pressed&&(o.started?o.processEnd():(o.internal=!1,o.pressed=!1,o.forceUpdate(),o.props.onClick&&o.props.onClick(t)),t.preventDefault(),o.props.stopPropagation&&t.stopPropagation())},o.container=n.default.createRef(),o.onEndScroll=s(o.onEndScroll,300),o.scrolling=!1,o.started=!1,o.pressed=!1,o.internal=!1,o.getRef=o.getRef.bind(o),o}return function(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(e,t),e.prototype.componentDidMount=function(){var t=this.props.nativeMobileScroll,e=this.container.current;window.addEventListener("mouseup",this.onMouseUp),window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("touchmove",this.onTouchMove,{passive:!1}),window.addEventListener("touchend",this.onTouchEnd),e.addEventListener("touchstart",this.onTouchStart,{passive:!1}),e.addEventListener("mousedown",this.onMouseDown,{passive:!1}),t&&(this.isMobile=this.isMobileDevice(),this.isMobile&&this.forceUpdate())},e.prototype.componentWillUnmount=function(){window.removeEventListener("mouseup",this.onMouseUp),window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("touchend",this.onTouchEnd)},e.prototype.getElement=function(){return this.container.current},e.prototype.isMobileDevice=function(){return void 0!==window.orientation||-1!==navigator.userAgent.indexOf("IEMobile")},e.prototype.isDraggable=function(t){var e=this.props.ignoreElements;if(e){var n=t.closest(e);return null===n||n.contains(this.getElement())}return!0},e.prototype.isScrollable=function(){var t=this.container.current;return t&&(t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight)},e.prototype.processClick=function(t,e,n){var o=this.container.current;this.scrollLeft=o.scrollLeft,this.scrollTop=o.scrollTop,this.clientX=e,this.clientY=n,this.pressed=!0},e.prototype.processStart=function(t){void 0===t&&(t=!0);var e=this.props.onStartScroll;this.started=!0,t&&document.body.classList.add("indiana-dragging"),e&&e({external:!this.internal}),this.forceUpdate()},e.prototype.processScroll=function(t){if(this.started){var e=this.props.onScroll;e&&e({external:!this.internal})}else this.processStart(!1)},e.prototype.processMove=function(t,e,n){var o=this.props,r=o.horizontal,i=o.vertical,s=o.activationDistance,l=o.onScroll,a=this.container.current;this.started?(r&&(a.scrollLeft-=e-this.clientX),i&&(a.scrollTop-=n-this.clientY),l&&l({external:!this.internal}),this.clientX=e,this.clientY=n,this.scrollLeft=a.scrollLeft,this.scrollTop=a.scrollTop):(r&&Math.abs(e-this.clientX)>s||i&&Math.abs(n-this.clientY)>s)&&(this.clientX=e,this.clientY=n,this.processStart())},e.prototype.processEnd=function(){var t=this.props.onEndScroll;this.container.current&&t&&t({external:!this.internal}),this.pressed=!1,this.started=!1,this.scrolling=!1,this.internal=!1,document.body.classList.remove("indiana-dragging"),this.forceUpdate()},e.prototype.getRef=function(t){[this.container,this.props.innerRef].forEach((function(e){e&&("function"==typeof e?e(t):e.current=t)}))},e.prototype.render=function(){var t=this.props,e=t.children,o=t.draggingClassName,i=t.className,s=t.style,l=t.hideScrollbars,c=t.component;return n.default.createElement(c,{className:r(i,this.pressed&&o,a({dragging:this.pressed,"hide-scrollbars":l,"native-scroll":this.isMobile})),style:s,ref:this.getRef,onScroll:this.onScroll},e)},e.defaultProps={nativeMobileScroll:!0,hideScrollbars:!0,activationDistance:10,vertical:!0,horizontal:!0,stopPropagation:!1,style:{},component:"div",buttons:[0]},e}(t.PureComponent);module.exports=c;
//# sourceMappingURL=index.js.map