@xuzhanhh/react-scroll - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/react-scroll.min.js

@@ -1,2 +0,2 @@
-!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r();else if("function"==typeof define&&define.amd)define([],r);else{var t=r();for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(window,function(){return function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(r){return e[r]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r.p="",r(r.s=0)}([function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function i(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r}function l(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}Object.defineProperty(r,"__esModule",{value:!0});var c=function(){function e(e,r){var t=[],n=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(n=(i=l.next()).done)&&(t.push(i.value),!r||t.length!==r);n=!0);}catch(e){o=!0,a=e}finally{try{!n&&l.return&&l.return()}finally{if(o)throw a}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),s=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),u=t(1),f=n(u);t(6),t(8);var p=t(9),d=n(p),h=t(10),y=n(h),v=t(16),m=n(v),g=t(18);window.requestAnimationFrame=window.requestAnimationFrame||function(e){return setTimeout(e,1e3/60)},window.cancelAnimationFrame=window.cancelAnimationFrame||clearTimeout;var b=!1,w=function(e){function r(e){a(this,r);var t=i(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t._initCanvas=function(e){var r=t.state,n=(r.mouseIn,r.horizontal),o=r.vertical,a=t.scroll.current.getBoundingClientRect(),i=a.height,l=a.width,s=t.showArea.current.scrollHeight-17,u=t.showArea.current.scrollWidth-17;if(s<=i&&t.state.showYslider){t.setState(function(){return{showYslider:!1}});var f=t._getPixelFromTransform(t.showArea.current),p=c(f,2),d=p[0];p[1];t.showArea.current.style.transform="translate3d("+d+"px,0px, 0px)"}else s>i&&!t.state.showYslider&&t.setState(function(){return{showYslider:!0}});if(u<=l&&t.state.showXslider){t.setState(function(){return{showXslider:!1}});var h=t._getPixelFromTransform(t.showArea.current),y=c(h,2),v=(y[0],y[1]);t.showArea.current.style.transform="translate3d(0px,"+v+"px, 0px)"}else u>l&&!t.state.showXslider?t.setState(function(){return{showXslider:!0}}):(o&&t.state.showYslider&&(t.verticalScrollBar.current.style.height=i+"px",t.verticalSlider.current.style.height=i*(i/s)+"px",t.sliderHeight=i-i*(i/s),t.sliderScrollableHeight=i-t.sliderHeight,t.contentScrollableHeight=s-i,t.scaleY=t.contentScrollableHeight/t.sliderHeight,t.scrollHeight=i,t.showAreaHeight=s),n&&t.state.showXslider&&(t.horizontalScrollBar.current.style.width=l+"px",t.horizontalSlider.current.style.width=l*(l/u)+"px",t.sliderWidth=l-l*(l/u),t.sliderScrollableWidth=l-t.sliderWidth,t.contentScrollableWidth=u-l,t.scaleX=t.contentScrollableWidth/t.sliderWidth,t.scrollWidth=l,t.showAreaWidth=u))},t.scrollTop=function(e){if(t.state.showYslider&&0!==e){e<0&&(e=0),e>t.showAreaHeight-t.scrollHeight&&(e=t.showAreaHeight-t.scrollHeight);var r=e;t.showArea.current.scrollTop=r,t._changeElementTransform(t.verticalSlider,0,r/t.scaleY)}},t.scrollLeft=function(e){if(t.state.showXslider&&0!==e){e<0?e=0:e>t.showAreaWidth-t.scrollWidth&&(e=t.showAreaWidth-t.scrollWidth);var r=e;t.showArea.current.scrollLeft=r,t._changeElementTransform(t.horizontalSlider,r/t.scaleX,0)}},t._closeTransiton=function(){setTimeout(function(){t.setState({clickScrollBar:!1})},200)},t._handleHorizontalScrollBarMouseDown=function(e,r){e.preventDefault();var n=(e.target,e.clientX),o=t.horizontalScrollBar.current.getBoundingClientRect(),a=o.left;t.setState({clickScrollBar:!0},function(){var e=t._getPixelFromTransform(t.horizontalSlider)[0],o=(t._getPixelFromTransform(t.showArea),n-a);o<=e?t._UpdateSlider(o*t.scaleX,"horizontal",r):t._UpdateSlider((o-parseFloat(t.horizontalSlider.current.style.width))*t.scaleX,"horizontal",r),t._closeTransiton()})},t._handleVerticalScrollBarMouseDown=function(e,r){e.preventDefault();var n=(e.target,e.clientY),o=t.verticalScrollBar.current.getBoundingClientRect(),a=o.top;t.setState({clickScrollBar:!0},function(){var e=t._getPixelFromTransform(t.verticalSlider)[1],o=(t._getPixelFromTransform(t.showArea),n-a);o<=e?t._UpdateSlider(o*t.scaleY,"vertical",r):t._UpdateSlider((o-parseFloat(t.verticalSlider.current.style.height))*t.scaleY,"vertical",r),t._closeTransiton()})},t._handleVerticalSliderMouseDown=function(e){t.setState({draggingY:!0}),e.preventDefault(),e.stopPropagation(),t._handleDragStart(e);var r=e.target,n=e.clientY,o=r.offsetHeight,a=r.getBoundingClientRect(),i=a.top;t.prevPageY=o-(n-i)},t._handleHorizontalSliderMouseDown=function(e){t.setState({draggingX:!0}),e.preventDefault(),e.stopPropagation(),t._handleDragStart(e);var r=e.target,n=e.clientX,o=r.offsetWidth,a=r.getBoundingClientRect(),i=a.left;t.prevPageX=o-(n-i)},t._handleDragStart=function(e){t._setupDragging()},t._setupDragging=function(){(0,y.default)(document.body,{userSelect:"none"}),document.addEventListener("mousemove",t._handleDrag),document.addEventListener("mouseup",t._handleDragEnd),document.onselectstart=function(){return!1}},t._teardownDragging=function(){(0,y.default)(document.body,{userSelect:""}),document.removeEventListener("mousemove",t._handleDrag),document.removeEventListener("mouseup",t._handleDragEnd),document.onselectstart=void 0},t._handleDrag=function(e){if(t.prevPageX){var r=e.clientX,n=t.horizontalScrollBar.current.getBoundingClientRect(),o=n.left,a=t._getPixelFromTransform(t.horizontalSlider.current),i=(t._getPixelFromTransform(t.showArea),a[0]),l=parseFloat(t.horizontalSlider.current.style.width),c=l-t.prevPageX,s=-i+r-c-o,u=i;u+s>=0&&l+u+s<t.scrollWidth&&(t._changeElementTransform(t.horizontalSlider,u+s,0),t.showArea.current.scrollLeft=u*t.scaleX),u+s<0&&(t._changeElementTransform(t.horizontalSlider,0,0),t.showArea.current.scrollLeft=0),l+u+s>=t.scrollWidth&&(t._changeElementTransform(t.horizontalSlider,t.scrollWidth-l,0),t.showArea.current.scrollLeft=(t.scrollWidth-l)*t.scaleX)}if(t.prevPageY){var f=e.clientY,p=t.verticalScrollBar.current.getBoundingClientRect(),d=p.top,h=t._getPixelFromTransform(t.verticalSlider.current),y=(t._getPixelFromTransform(t.showArea),h[1]),v=parseFloat(t.verticalSlider.current.style.height),m=v-t.prevPageY,g=-y+f-m-d,b=y;b+g>=0&&v+b+g<t.scrollHeight&&(t._changeElementTransform(t.verticalSlider,0,b+g),t.showArea.current.scrollTop=b*t.scaleY),b+g<0&&(t._changeElementTransform(t.verticalSlider,0,0),t.showArea.current.scrollTop=0),v+b+g>=t.scrollHeight&&(t._changeElementTransform(t.verticalSlider,0,t.scrollHeight-v),t.showArea.current.scrollTop=(t.scrollHeight-v)*t.scaleY)}return!1},t._changeElementTransform=function(e,r,t){(e.current?e.current:e).style.transform=(0,g.getTransformString)(r,t)},t._handleDragEnd=function(){t.setState({draggingY:!1,draggingX:!1}),t.prevPageX=t.prevPageY=0,t._teardownDragging()},t._controlScrollOrigin=function(e){var r=t.state,n=r.showYslider,o=r.showXslider,a=r.horizontal,i=r.vertical,l=r.draggingY,c=r.draggingX,s=t.showArea.current,u=s.scrollTop,f=s.scrollLeft;if(i&&!l&&n){t._getPixelFromTransform(t.verticalSlider)[1]!==parseInt(u/t.scaleY)&&(b||window.requestAnimationFrame(function(){t._changeElementTransform(t.verticalSlider,0,u/t.scaleY),b=!1}),b=!0)}if(a&&!c&&o){t._getPixelFromTransform(t.horizontalSlider)[0]!==parseInt(f/t.scaleX)&&window.requestAnimationFrame(function(){return t._changeElementTransform(t.horizontalSlider,f/t.scaleX,0)})}},t._getPixelFromTransform=function(e){var r=e.current?e.current:e;return t.getComputedTranslateXY(r)},t.getComputedTranslateXY=function(e){var r=[];if(window.getComputedStyle){var t=getComputedStyle(e),n=t.transform||t.webkitTransform||t.mozTransform,o=n.match(/^matrix3d\((.+)\)$/);return o?parseFloat(o[1].split(", ")[13]):(o=n.match(/^matrix\((.+)\)$/),o&&r.push(parseFloat(o[1].split(", ")[4])),o&&r.push(parseFloat(o[1].split(", ")[5])),r)}},t.scroll=f.default.createRef(),t.showArea=f.default.createRef(),t.verticalSlider=f.default.createRef(),t.verticalScrollBar=f.default.createRef(),t.horizontalSlider=f.default.createRef(),t.horizontalScrollBar=f.default.createRef(),t.state={mouseIn:!1,showYslider:!0,showXslider:!0,mouseInYSlider:!1,mouseInXSlider:!1,clickScrollBar:!1,horizontal:"boolean"!=typeof e.horizontal||e.horizontal,vertical:"boolean"!=typeof e.vertical||e.vertical},t.innerSystemScrollElement=[],t.innerDontSystemScrollElement=[],t}return l(r,e),s(r,[{key:"componentDidMount",value:function(){this._initCanvas(),this._addListeners()}},{key:"componentDidUpdate",value:function(){this.props.allowNesting&&(this.innerSystemScrollElement=[],this.innerDontSystemScrollElement=[]),this._initCanvas()}},{key:"render",value:function(){var e,r,t,n,a=this,i=this.state,l=i.mouseIn,c=i.showYslider,s=i.showXslider,u=i.mouseInYSlider,p=i.mouseInXSlider,h=i.draggingX,v=i.draggingY,m=i.clickScrollBar,g=i.horizontal,b=i.vertical,w=this.props,_=w.height,S=w.width,x=w.style,k=w.className,O=(0,d.default)((e={},o(e,"vertical-scroll",!0),o(e,"invisible",!l||!v),o(e,"visible",l&&!h),o(e,"mousein",u||v),o(e,"scrollbar__click",m),e)),j=(0,d.default)((r={},o(r,"horizontal-scroll",!0),o(r,"invisible",!l||!h),o(r,"visible",l&&!v),o(r,"mousein",p||h),o(r,"scrollbar__click",m),r)),P=(0,d.default)((t={},o(t,"inner__origin",!0),o(t,k,k),t)),A=(0,d.default)((n={},o(n,"showArea",!0),o(n,"showArea__origin",!0),o(n,"scrollbar__click",m),o(n,"showArea__disable--x",!g),o(n,"showArea__disable--y",!b),n));return this.scroll.current&&(0,y.default)(this.scroll.current,{height:_,width:S}),f.default.createElement("div",{style:x,className:P,ref:this.scroll,onMouseEnter:function(){a.setState({mouseIn:!0})},onMouseLeave:function(){a.setState({mouseIn:!1})},onScroll:this._controlScrollOrigin},f.default.createElement("div",{className:A,ref:this.showArea},this.props.children),b&&c&&f.default.createElement("div",{className:O,ref:this.verticalScrollBar,onMouseEnter:function(){a.setState({mouseInYSlider:!0})},onMouseLeave:function(){a.setState({mouseInYSlider:!1})},onMouseDown:function(e){return a._handleVerticalScrollBarMouseDown(e,a)}},f.default.createElement("div",{className:"slider__vertical",ref:this.verticalSlider,onMouseDown:this._handleVerticalSliderMouseDown})),g&&s&&f.default.createElement("div",{className:j,ref:this.horizontalScrollBar,onMouseEnter:function(){a.setState({mouseInXSlider:!0})},onMouseLeave:function(){a.setState({mouseInXSlider:!1})},onMouseDown:function(e){return a._handleHorizontalScrollBarMouseDown(e,a)}},f.default.createElement("div",{className:"slider__horizontal",ref:this.horizontalSlider,onMouseDown:this._handleHorizontalSliderMouseDown})))}},{key:"_UpdateSlider",value:function(e,r,t,n){var o=null;switch(r){case"vertical":o=t.showArea.current.scrollTop;break;case"horizontal":o=t.showArea.current.scrollLeft}var a=o,i=Math.abs((n||a)-e)/7>15?Math.abs((n||a)-e)/7:15;if(Math.abs(a-e)>i)switch(t.globalID=window.requestAnimationFrame(function(){return t._UpdateSlider(e,r,t,n||a)}),r){case"vertical":t.showArea.current.scrollTop=a+(e>a?i:-i);break;case"horizontal":t.showArea.current.scrollLeft=a+(e>a?i:-i)}else switch(window.cancelAnimationFrame(t.globalID),r){case"vertical":t.showArea.current.scrollTop=e;break;case"horizontal":t.showArea.current.scrollLeft=e}}}]),r}(u.Component);r.default=w,w.propTypes={horizontal:m.default.bool,vertical:m.default.bool,className:m.default.string,style:m.default.object,allowNesting:m.default.bool}},function(e,r,t){"use strict";e.exports=t(2)},function(e,r,t){"use strict";!function(){function r(e){if(null===e||"object"!=typeof e)return null;var r=ce&&e[ce]||e[se];return"function"==typeof r?r:null}function n(e,r,t,n,o,a,i,l){if(ue(r),!e){var c=void 0;if(void 0===r)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[t,n,o,a,i,l],u=0;c=new Error(r.replace(/%s/g,function(){return s[u++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}function o(e,r){var t=e.constructor,n=t&&(t.displayName||t.name)||"ReactClass",o=n+"."+r;ve[o]||(ye(!1,"Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the %s component.",r,n),ve[o]=!0)}function a(e,r,t){this.props=e,this.context=r,this.refs=ge,this.updater=t||me}function i(){}function l(e,r,t){this.props=e,this.context=r,this.refs=ge,this.updater=t||me}function c(){var e={current:null};return Object.seal(e),e}function s(e){return e._reactStatus===Oe?e._reactResult:null}function u(e){if(null==e)return null;if("number"==typeof e.tag&&ye(!1,"Received an unexpected object in getComponentName(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case ae:return"AsyncMode";case ee:return"Fragment";case Q:return"Portal";case te:return"Profiler";case re:return"StrictMode";case le:return"Placeholder"}if("object"==typeof e){switch(e.$$typeof){case oe:return"Context.Consumer";case ne:return"Context.Provider";case ie:var r=e.render,t=r.displayName||r.name||"";return e.displayName||(""!==t?"ForwardRef("+t+")":"ForwardRef")}if("function"==typeof e.then){var n=e,o=s(n);if(o)return u(o)}}return null}function f(e){Pe=e}function p(e){if(Re.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return void 0!==e.ref}function d(e){if(Re.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}function h(e,r){var t=function(){Ie||(Ie=!0,ye(!1,"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function y(e,r){var t=function(){De||(De=!0,ye(!1,"%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}function v(e,r,t){var n=void 0,o={},a=null,i=null,l=null,c=null;if(null!=r){p(r)&&(i=r.ref),d(r)&&(a=""+r.key),l=void 0===r.__self?null:r.__self,c=void 0===r.__source?null:r.__source;for(n in r)Re.call(r,n)&&!Ce.hasOwnProperty(n)&&(o[n]=r[n])}var s=arguments.length-2;if(1===s)o.children=t;else if(s>1){for(var u=Array(s),f=0;f<s;f++)u[f]=arguments[f+2];Object.freeze&&Object.freeze(u),o.children=u}if(e&&e.defaultProps){var v=e.defaultProps;for(n in v)void 0===o[n]&&(o[n]=v[n])}if(a||i){var m="function"==typeof e?e.displayName||e.name||"Unknown":e;a&&h(o,m),i&&y(o,m)}return ze(e,a,i,l,c,Se.current,o)}function m(e,r){return ze(e.type,r,e.ref,e._self,e._source,e._owner,e.props)}function g(e,r,t){(null===e||void 0===e)&&n(!1,"React.cloneElement(...): The argument must be a React element, but you passed %s.",e);var o=void 0,a=J({},e.props),i=e.key,l=e.ref,c=e._self,s=e._source,u=e._owner;if(null!=r){p(r)&&(l=r.ref,u=Se.current),d(r)&&(i=""+r.key);var f=void 0;e.type&&e.type.defaultProps&&(f=e.type.defaultProps);for(o in r)Re.call(r,o)&&!Ce.hasOwnProperty(o)&&(void 0===r[o]&&void 0!==f?a[o]=f[o]:a[o]=r[o])}var h=arguments.length-2;if(1===h)a.children=t;else if(h>1){for(var y=Array(h),v=0;v<h;v++)y[v]=arguments[v+2];a.children=y}return ze(e.type,i,l,c,s,u,a)}function b(e){return"object"==typeof e&&null!==e&&e.$$typeof===K}function w(e){var r={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return r[e]})}function _(e){return(""+e).replace(We,"$&/")}function S(e,r,t,n){if(Xe.length){var o=Xe.pop();return o.result=e,o.keyPrefix=r,o.func=t,o.context=n,o.count=0,o}return{result:e,keyPrefix:r,func:t,context:n,count:0}}function x(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,Xe.length<Ne&&Xe.push(e)}function k(e,t,o,a){var i=typeof e;"undefined"!==i&&"boolean"!==i||(e=null);var l=!1;if(null===e)l=!0;else switch(i){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case K:case Q:l=!0}}if(l)return o(a,e,""===t?Fe+j(e,0):t),1;var c=void 0,s=void 0,u=0,f=""===t?Fe:t+Me;if(Array.isArray(e))for(var p=0;p<e.length;p++)c=e[p],s=f+j(c,p),u+=k(c,s,o,a);else{var d=r(e);if("function"==typeof d){d===e.entries&&(Ye||Ee(!1,"Using Maps as children is unsupported and will likely yield unexpected results. Convert it to a sequence/iterable of keyed ReactElements instead."),Ye=!0);for(var h=d.call(e),y=void 0,v=0;!(y=h.next()).done;)c=y.value,s=f+j(c,v++),u+=k(c,s,o,a)}else if("object"===i){var m="";m=" If you meant to render a collection of children, use an array instead."+je.getStackAddendum();var g=""+e;n(!1,"Objects are not valid as a React child (found: %s).%s","[object Object]"===g?"object with keys {"+Object.keys(e).join(", ")+"}":g,m)}}return u}function O(e,r,t){return null==e?0:k(e,"",r,t)}function j(e,r){return"object"==typeof e&&null!==e&&null!=e.key?w(e.key):r.toString(36)}function P(e,r,t){var n=e.func,o=e.context;n.call(o,r,e.count++)}function A(e,r,t){if(null==e)return e;var n=S(null,null,r,t);O(e,P,n),x(n)}function T(e,r,t){var n=e.result,o=e.keyPrefix,a=e.func,i=e.context,l=a.call(i,r,e.count++);Array.isArray(l)?E(l,n,t,function(e){return e}):null!=l&&(b(l)&&(l=m(l,o+(!l.key||r&&r.key===l.key?"":_(l.key)+"/")+t)),n.push(l))}function E(e,r,t,n,o){var a="";null!=t&&(a=_(t)+"/");var i=S(r,a,n,o);O(e,T,i),x(i)}function R(e,r,t){if(null==e)return e;var n=[];return E(e,n,null,r,t),n}function C(e){return O(e,function(){return null},null)}function I(e){var r=[];return E(e,r,null,function(e){return e}),r}function D(e){return b(e)||n(!1,"React.Children.only expected to receive a single React element child."),e}function z(e,r){var t=Se.currentDispatcher;return null===t&&n(!1,"Context.unstable_read(): Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps."),t.readContext(e,r)}function F(e,r){void 0===r?r=null:null!==r&&"function"!=typeof r&&ye(!1,"createContext: Expected the optional second argument to be a function. Instead received: %s",r);var t={$$typeof:oe,_calculateChangedBits:r,_currentValue:e,_currentValue2:e,Provider:null,Consumer:null,unstable_read:null};return t.Provider={$$typeof:ne,_context:t},t.Consumer=t,t.unstable_read=z.bind(null,t),t._currentRenderer=null,t._currentRenderer2=null,t}function M(e){return"function"!=typeof e?ye(!1,"forwardRef requires a render function but was given %s.",null===e?"null":typeof e):0!==e.length&&2!==e.length&&ye(!1,"forwardRef render functions accept exactly two parameters: props and ref. %s",1===e.length?"Did you forget to use the ref parameter?":"Any additional parameter will be undefined."),null!=e&&(null!=e.defaultProps||null!=e.propTypes)&&ye(!1,"forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?"),{$$typeof:ie,render:e}}function Y(e){return"string"==typeof e||"function"==typeof e||e===ee||e===ae||e===te||e===re||e===le||"object"==typeof e&&null!==e&&("function"==typeof e.then||e.$$typeof===ne||e.$$typeof===oe||e.$$typeof===ie)}function W(){if(Se.current){var e=u(Se.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}function N(e){if(null!==e&&void 0!==e&&void 0!==e.__source){var r=e.__source;return"\n\nCheck your code at "+r.fileName.replace(/^.*[\\\/]/,"")+":"+r.lineNumber+"."}return""}function X(e){var r=W();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.")}return r}function $(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=X(r);if(!Be[t]){Be[t]=!0;var n="";e&&e._owner&&e._owner!==Se.current&&(n=" It was passed a child from "+u(e._owner.type)+"."),f(e),Ee(!1,'Each child in an array or iterator should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.',t,n),f(null)}}}function B(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n<e.length;n++){var o=e[n];b(o)&&$(o,t)}else if(b(e))e._store&&(e._store.validated=!0);else if(e){var a=r(e);if("function"==typeof a&&a!==e.entries)for(var i=a.call(e),l=void 0;!(l=i.next()).done;)b(l.value)&&$(l.value,t)}}function L(e){var r=e.type,t=void 0,n=void 0;if("function"==typeof r)t=r.displayName||r.name,n=r.propTypes;else{if("object"!=typeof r||null===r||r.$$typeof!==ie)return;var o=r.render.displayName||r.render.name||"";t=r.displayName||(""!==o?"ForwardRef("+o+")":"ForwardRef"),n=r.propTypes}n?(f(e),G(n,e.props,"prop",t,je.getStackAddendum),f(null)):void 0===r.PropTypes||$e||($e=!0,ye(!1,"Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",t||"Unknown")),"function"==typeof r.getDefaultProps&&(r.getDefaultProps.isReactClassApproved||ye(!1,"getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."))}function U(e){f(e);for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){Ee(!1,"Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n);break}}null!==e.ref&&Ee(!1,"Invalid attribute `ref` supplied to `React.Fragment`."),f(null)}function H(e,r,t){var n=Y(e);if(!n){var o="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(o+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var a=N(r);o+=a||W();var i=void 0;null===e?i="null":Array.isArray(e)?i="array":void 0!==e&&e.$$typeof===K?(i="<"+(u(e.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):i=typeof e,Ee(!1,"React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",i,o)}var l=v.apply(this,arguments);if(null==l)return l;if(n)for(var c=2;c<arguments.length;c++)B(arguments[c],e);return e===ee?U(l):L(l),l}function q(e){var r=H.bind(null,e);return r.type=e,Object.defineProperty(r,"type",{enumerable:!1,get:function(){return de(!1,"Factory.type is deprecated. Access the class directly before passing it to createFactory."),Object.defineProperty(this,"type",{value:e}),e}}),r}function V(e,r,t){for(var n=g.apply(this,arguments),o=2;o<arguments.length;o++)B(arguments[o],n.type);return L(n),n}var J=t(3),G=t(4),Z="function"==typeof Symbol&&Symbol.for,K=Z?Symbol.for("react.element"):60103,Q=Z?Symbol.for("react.portal"):60106,ee=Z?Symbol.for("react.fragment"):60107,re=Z?Symbol.for("react.strict_mode"):60108,te=Z?Symbol.for("react.profiler"):60114,ne=Z?Symbol.for("react.provider"):60109,oe=Z?Symbol.for("react.context"):60110,ae=Z?Symbol.for("react.async_mode"):60111,ie=Z?Symbol.for("react.forward_ref"):60112,le=Z?Symbol.for("react.placeholder"):60113,ce="function"==typeof Symbol&&Symbol.iterator,se="@@iterator",ue=function(){};ue=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")};var fe=function(){},pe=function(e){for(var r=arguments.length,t=Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];var o=0,a="Warning: "+e.replace(/%s/g,function(){return t[o++]});"undefined"!=typeof console&&console.warn(a);try{throw new Error(a)}catch(e){}};fe=function(e,r){if(void 0===r)throw new Error("`lowPriorityWarning(condition, format, ...args)` requires a warning message argument");if(!e){for(var t=arguments.length,n=Array(t>2?t-2:0),o=2;o<t;o++)n[o-2]=arguments[o];pe.apply(void 0,[r].concat(n))}};var de=fe,he=function(){};he=function(e,r){for(var t=arguments.length,n=Array(t>2?t-2:0),o=2;o<t;o++)n[o-2]=arguments[o];if(void 0===r)throw new Error("`warningWithoutStack(condition, format, ...args)` requires a warning message argument");if(n.length>8)throw new Error("warningWithoutStack() currently supports at most 8 arguments.");if(!e){if("undefined"!=typeof console){var a=n.map(function(e){return""+e}),i=a[0],l=a[1],c=a[2],s=a[3],u=a[4],f=a[5],p=a[6],d=a[7],h="Warning: "+r;switch(n.length){case 0:console.error(h);break;case 1:console.error(h,i);break;case 2:console.error(h,i,l);break;case 3:console.error(h,i,l,c);break;case 4:console.error(h,i,l,c,s);break;case 5:console.error(h,i,l,c,s,u);break;case 6:console.error(h,i,l,c,s,u,f);break;case 7:console.error(h,i,l,c,s,u,f,p);break;case 8:console.error(h,i,l,c,s,u,f,p,d);break;default:throw new Error("warningWithoutStack() currently supports at most 8 arguments.")}}try{var y=0,v="Warning: "+r.replace(/%s/g,function(){return n[y++]});throw new Error(v)}catch(e){}}};var ye=he,ve={},me={isMounted:function(e){return!1},enqueueForceUpdate:function(e,r,t){o(e,"forceUpdate")},enqueueReplaceState:function(e,r,t,n){o(e,"replaceState")},enqueueSetState:function(e,r,t,n){o(e,"setState")}},ge={};Object.freeze(ge),a.prototype.isReactComponent={},a.prototype.setState=function(e,r){"object"!=typeof e&&"function"!=typeof e&&null!=e&&n(!1,"setState(...): takes an object of state variables to update or a function which returns an object of state variables."),this.updater.enqueueSetState(this,e,r,"setState")},a.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};var be={isMounted:["isMounted","Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."],replaceState:["replaceState","Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236)."]};for(var we in be)be.hasOwnProperty(we)&&function(e,r){Object.defineProperty(a.prototype,e,{get:function(){de(!1,"%s(...) is deprecated in plain JavaScript React classes. %s",r[0],r[1])}})}(we,be[we]);i.prototype=a.prototype;var _e=l.prototype=new i;_e.constructor=l,J(_e,a.prototype),_e.isPureReactComponent=!0;var Se={current:null,currentDispatcher:null},xe=/^(.*)[\\\/]/,ke=function(e,r,t){var n="";if(r){var o=r.fileName,a=o.replace(xe,"");if(/^index\./.test(a)){var i=o.match(xe);if(i){var l=i[1];if(l){a=l.replace(xe,"")+"/"+a}}}n=" (at "+a+":"+r.lineNumber+")"}else t&&(n=" (created by "+t+")");return"\n    in "+(e||"Unknown")+n},Oe=1,je={},Pe=null;je.getCurrentStack=null,je.getStackAddendum=function(){var e="";if(Pe){var r=u(Pe.type),t=Pe._owner;e+=ke(r,Pe._source,t&&u(t.type))}var n=je.getCurrentStack;return n&&(e+=n()||""),e};var Ae={ReactCurrentOwner:Se,assign:J};J(Ae,{ReactDebugCurrentFrame:je,ReactComponentTreeHook:{}});var Te=ye;Te=function(e,r){if(!e){for(var t=Ae.ReactDebugCurrentFrame,n=t.getStackAddendum(),o=arguments.length,a=Array(o>2?o-2:0),i=2;i<o;i++)a[i-2]=arguments[i];ye.apply(void 0,[!1,r+"%s"].concat(a,[n]))}};var Ee=Te,Re=Object.prototype.hasOwnProperty,Ce={key:!0,ref:!0,__self:!0,__source:!0},Ie=void 0,De=void 0,ze=function(e,r,t,n,o,a,i){var l={$$typeof:K,type:e,key:r,ref:t,props:i,_owner:a};return l._store={},Object.defineProperty(l._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(l,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(l,"_source",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.freeze&&(Object.freeze(l.props),Object.freeze(l)),l},Fe=".",Me=":",Ye=!1,We=/\/+/g,Ne=10,Xe=[],$e=void 0;$e=!1;var Be={},Le={Children:{map:R,forEach:A,count:C,toArray:I,only:D},createRef:c,Component:a,PureComponent:l,createContext:F,forwardRef:M,Fragment:ee,StrictMode:re,unstable_AsyncMode:ae,unstable_Profiler:te,createElement:H,cloneElement:V,createFactory:q,isValidElement:b,version:"16.5.2",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Ae},Ue=Object.freeze({default:Le}),He=Ue&&Le||Ue,qe=He.default||He;e.exports=qe}()},function(e,r,t){"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/*
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r();else if("function"==typeof define&&define.amd)define([],r);else{var t=r();for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(window,function(){return function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(r){return e[r]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r.p="",r(r.s=0)}([function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function i(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r}function l(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}Object.defineProperty(r,"__esModule",{value:!0});var c=function(){function e(e,r){var t=[],n=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(n=(i=l.next()).done)&&(t.push(i.value),!r||t.length!==r);n=!0);}catch(e){o=!0,a=e}finally{try{!n&&l.return&&l.return()}finally{if(o)throw a}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),s=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),u=t(1),f=n(u);t(6),t(8);var p=t(9),d=n(p),h=t(10),y=n(h),v=t(16),m=n(v),g=t(18);window.requestAnimationFrame=window.requestAnimationFrame||function(e){return setTimeout(e,1e3/60)},window.cancelAnimationFrame=window.cancelAnimationFrame||clearTimeout;var b=!1,w=function(e){function r(e){a(this,r);var t=i(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t._initCanvas=function(e){var r=t.state,n=(r.mouseIn,r.horizontal),o=r.vertical,a=t.scroll.current.getBoundingClientRect(),i=a.height,l=a.width,s=t.showArea.current.scrollHeight-17,u=t.showArea.current.scrollWidth-17;if(s<=i&&t.state.showYslider){t.setState(function(){return{showYslider:!1}});var f=t._getPixelFromTransform(t.showArea.current),p=c(f,2),d=p[0];p[1];t.showArea.current.style.transform="translate3d("+d+"px,0px, 0px)"}else s>i&&!t.state.showYslider&&t.setState(function(){return{showYslider:!0}});if(u<=l&&t.state.showXslider){t.setState(function(){return{showXslider:!1}});var h=t._getPixelFromTransform(t.showArea.current),y=c(h,2),v=(y[0],y[1]);t.showArea.current.style.transform="translate3d(0px,"+v+"px, 0px)"}else u>l&&!t.state.showXslider?t.setState(function(){return{showXslider:!0}}):(o&&t.state.showYslider&&(t.verticalScrollBar.current.style.height=i+"px",t.verticalSlider.current.style.height=i*(i/s)+"px",t.sliderHeight=i-i*(i/s),t.sliderScrollableHeight=i-t.sliderHeight,t.contentScrollableHeight=s-i,t.scaleY=t.contentScrollableHeight/t.sliderHeight,t.scrollHeight=i,t.showAreaHeight=s),n&&t.state.showXslider&&(t.horizontalScrollBar.current.style.width=l+"px",t.horizontalSlider.current.style.width=l*(l/u)+"px",t.sliderWidth=l-l*(l/u),t.sliderScrollableWidth=l-t.sliderWidth,t.contentScrollableWidth=u-l,t.scaleX=t.contentScrollableWidth/t.sliderWidth,t.scrollWidth=l,t.showAreaWidth=u))},t.scrollTop=function(e){if(t.state.showYslider&&0!==e){e<0&&(e=0),e>t.showAreaHeight-t.scrollHeight&&(e=t.showAreaHeight-t.scrollHeight);var r=e;t.showArea.current.scrollTop=r,t._changeElementTransform(t.verticalSlider,0,r/t.scaleY)}},t.scrollLeft=function(e){if(t.state.showXslider&&0!==e){e<0?e=0:e>t.showAreaWidth-t.scrollWidth&&(e=t.showAreaWidth-t.scrollWidth);var r=e;t.showArea.current.scrollLeft=r,t._changeElementTransform(t.horizontalSlider,r/t.scaleX,0)}},t._closeTransiton=function(){setTimeout(function(){t.setState({clickScrollBar:!1})},200)},t._handleHorizontalScrollBarMouseDown=function(e,r){e.preventDefault();var n=(e.target,e.clientX),o=t.horizontalScrollBar.current.getBoundingClientRect(),a=o.left;t.setState({clickScrollBar:!0},function(){var e=t._getPixelFromTransform(t.horizontalSlider)[0],o=(t._getPixelFromTransform(t.showArea),n-a);o<=e?t._UpdateSlider(o*t.scaleX,"horizontal",r):t._UpdateSlider((o-parseFloat(t.horizontalSlider.current.style.width))*t.scaleX,"horizontal",r),t._closeTransiton()})},t._handleVerticalScrollBarMouseDown=function(e,r){e.preventDefault();var n=(e.target,e.clientY),o=t.verticalScrollBar.current.getBoundingClientRect(),a=o.top;t.setState({clickScrollBar:!0},function(){var e=t._getPixelFromTransform(t.verticalSlider)[1],o=(t._getPixelFromTransform(t.showArea),n-a);o<=e?t._UpdateSlider(o*t.scaleY,"vertical",r):t._UpdateSlider((o-parseFloat(t.verticalSlider.current.style.height))*t.scaleY,"vertical",r),t._closeTransiton()})},t._handleVerticalSliderMouseDown=function(e){t.setState({draggingY:!0}),e.preventDefault(),e.stopPropagation(),t._handleDragStart(e);var r=e.target,n=e.clientY,o=r.offsetHeight,a=r.getBoundingClientRect(),i=a.top;t.prevPageY=o-(n-i)},t._handleHorizontalSliderMouseDown=function(e){t.setState({draggingX:!0}),e.preventDefault(),e.stopPropagation(),t._handleDragStart(e);var r=e.target,n=e.clientX,o=r.offsetWidth,a=r.getBoundingClientRect(),i=a.left;t.prevPageX=o-(n-i)},t._handleDragStart=function(e){t._setupDragging()},t._setupDragging=function(){(0,y.default)(document.body,{userSelect:"none"}),document.addEventListener("mousemove",t._handleDrag),document.addEventListener("mouseup",t._handleDragEnd),document.onselectstart=function(){return!1}},t._teardownDragging=function(){(0,y.default)(document.body,{userSelect:""}),document.removeEventListener("mousemove",t._handleDrag),document.removeEventListener("mouseup",t._handleDragEnd),document.onselectstart=void 0},t._handleDrag=function(e){if(t.prevPageX){var r=e.clientX,n=t.horizontalScrollBar.current.getBoundingClientRect(),o=n.left,a=t._getPixelFromTransform(t.horizontalSlider.current),i=(t._getPixelFromTransform(t.showArea),a[0]),l=parseFloat(t.horizontalSlider.current.style.width),c=l-t.prevPageX,s=-i+r-c-o,u=i;u+s>=0&&l+u+s<t.scrollWidth&&(t._changeElementTransform(t.horizontalSlider,u+s,0),t.showArea.current.scrollLeft=u*t.scaleX),u+s<0&&(t._changeElementTransform(t.horizontalSlider,0,0),t.showArea.current.scrollLeft=0),l+u+s>=t.scrollWidth&&(t._changeElementTransform(t.horizontalSlider,t.scrollWidth-l,0),t.showArea.current.scrollLeft=(t.scrollWidth-l)*t.scaleX)}if(t.prevPageY){var f=e.clientY,p=t.verticalScrollBar.current.getBoundingClientRect(),d=p.top,h=t._getPixelFromTransform(t.verticalSlider.current),y=(t._getPixelFromTransform(t.showArea),h[1]),v=parseFloat(t.verticalSlider.current.style.height),m=v-t.prevPageY,g=-y+f-m-d,b=y;b+g>=0&&v+b+g<t.scrollHeight&&(t._changeElementTransform(t.verticalSlider,0,b+g),t.showArea.current.scrollTop=b*t.scaleY),b+g<0&&(t._changeElementTransform(t.verticalSlider,0,0),t.showArea.current.scrollTop=0),v+b+g>=t.scrollHeight&&(t._changeElementTransform(t.verticalSlider,0,t.scrollHeight-v),t.showArea.current.scrollTop=(t.scrollHeight-v)*t.scaleY)}return!1},t._changeElementTransform=function(e,r,t){(e.current?e.current:e).style.transform=(0,g.getTransformString)(r,t)},t._handleDragEnd=function(){t.setState({draggingY:!1,draggingX:!1}),t.prevPageX=t.prevPageY=0,t._teardownDragging()},t._controlScrollOrigin=function(e){var r=t.state,n=r.showYslider,o=r.showXslider,a=r.horizontal,i=r.vertical,l=r.draggingY,c=r.draggingX,s=t.showArea.current,u=s.scrollTop,f=s.scrollLeft;if(i&&!l&&n){t._getPixelFromTransform(t.verticalSlider)[1]!==parseInt(u/t.scaleY)&&(b||window.requestAnimationFrame(function(){t._changeElementTransform(t.verticalSlider,0,u/t.scaleY),b=!1}),b=!0)}if(a&&!c&&o){t._getPixelFromTransform(t.horizontalSlider)[0]!==parseInt(f/t.scaleX)&&window.requestAnimationFrame(function(){return t._changeElementTransform(t.horizontalSlider,f/t.scaleX,0)})}},t._getPixelFromTransform=function(e){var r=e.current?e.current:e;return t.getComputedTranslateXY(r)},t.getComputedTranslateXY=function(e){var r=[];if(window.getComputedStyle){var t=getComputedStyle(e),n=t.transform||t.webkitTransform||t.mozTransform,o=n.match(/^matrix3d\((.+)\)$/);return o?parseFloat(o[1].split(", ")[13]):(o=n.match(/^matrix\((.+)\)$/),o&&r.push(parseFloat(o[1].split(", ")[4])),o&&r.push(parseFloat(o[1].split(", ")[5])),r)}},t.scroll=f.default.createRef(),t.showArea=f.default.createRef(),t.verticalSlider=f.default.createRef(),t.verticalScrollBar=f.default.createRef(),t.horizontalSlider=f.default.createRef(),t.horizontalScrollBar=f.default.createRef(),t.state={mouseIn:!1,showYslider:!0,showXslider:!0,mouseInYSlider:!1,mouseInXSlider:!1,clickScrollBar:!1,horizontal:"boolean"!=typeof e.horizontal||e.horizontal,vertical:"boolean"!=typeof e.vertical||e.vertical},t.innerSystemScrollElement=[],t.innerDontSystemScrollElement=[],t}return l(r,e),s(r,[{key:"componentDidMount",value:function(){this._initCanvas()}},{key:"componentDidUpdate",value:function(){this.props.allowNesting&&(this.innerSystemScrollElement=[],this.innerDontSystemScrollElement=[]),this._initCanvas()}},{key:"render",value:function(){var e,r,t,n,a=this,i=this.state,l=i.mouseIn,c=i.showYslider,s=i.showXslider,u=i.mouseInYSlider,p=i.mouseInXSlider,h=i.draggingX,v=i.draggingY,m=i.clickScrollBar,g=i.horizontal,b=i.vertical,w=this.props,_=w.height,S=w.width,x=w.style,k=w.className,O=(0,d.default)((e={},o(e,"vertical-scroll",!0),o(e,"invisible",!l||!v),o(e,"visible",l&&!h),o(e,"mousein",u||v),o(e,"scrollbar__click",m),e)),j=(0,d.default)((r={},o(r,"horizontal-scroll",!0),o(r,"invisible",!l||!h),o(r,"visible",l&&!v),o(r,"mousein",p||h),o(r,"scrollbar__click",m),r)),P=(0,d.default)((t={},o(t,"inner__origin",!0),o(t,k,k),t)),A=(0,d.default)((n={},o(n,"showArea",!0),o(n,"showArea__origin",!0),o(n,"scrollbar__click",m),o(n,"showArea__disable--x",!g),o(n,"showArea__disable--y",!b),n));return this.scroll.current&&(0,y.default)(this.scroll.current,{height:_,width:S}),f.default.createElement("div",{style:x,className:P,ref:this.scroll,onMouseEnter:function(){a.setState({mouseIn:!0})},onMouseLeave:function(){a.setState({mouseIn:!1})},onScroll:this._controlScrollOrigin},f.default.createElement("div",{className:A,ref:this.showArea},this.props.children),b&&c&&f.default.createElement("div",{className:O,ref:this.verticalScrollBar,onMouseEnter:function(){a.setState({mouseInYSlider:!0})},onMouseLeave:function(){a.setState({mouseInYSlider:!1})},onMouseDown:function(e){return a._handleVerticalScrollBarMouseDown(e,a)}},f.default.createElement("div",{className:"slider__vertical",ref:this.verticalSlider,onMouseDown:this._handleVerticalSliderMouseDown})),g&&s&&f.default.createElement("div",{className:j,ref:this.horizontalScrollBar,onMouseEnter:function(){a.setState({mouseInXSlider:!0})},onMouseLeave:function(){a.setState({mouseInXSlider:!1})},onMouseDown:function(e){return a._handleHorizontalScrollBarMouseDown(e,a)}},f.default.createElement("div",{className:"slider__horizontal",ref:this.horizontalSlider,onMouseDown:this._handleHorizontalSliderMouseDown})))}},{key:"_UpdateSlider",value:function(e,r,t,n){var o=null;switch(r){case"vertical":o=t.showArea.current.scrollTop;break;case"horizontal":o=t.showArea.current.scrollLeft}var a=o,i=Math.abs((n||a)-e)/7>15?Math.abs((n||a)-e)/7:15;if(Math.abs(a-e)>i)switch(t.globalID=window.requestAnimationFrame(function(){return t._UpdateSlider(e,r,t,n||a)}),r){case"vertical":t.showArea.current.scrollTop=a+(e>a?i:-i);break;case"horizontal":t.showArea.current.scrollLeft=a+(e>a?i:-i)}else switch(window.cancelAnimationFrame(t.globalID),r){case"vertical":t.showArea.current.scrollTop=e;break;case"horizontal":t.showArea.current.scrollLeft=e}}}]),r}(u.Component);r.default=w,w.propTypes={horizontal:m.default.bool,vertical:m.default.bool,className:m.default.string,style:m.default.object,allowNesting:m.default.bool}},function(e,r,t){"use strict";e.exports=t(2)},function(e,r,t){"use strict";!function(){function r(e){if(null===e||"object"!=typeof e)return null;var r=ce&&e[ce]||e[se];return"function"==typeof r?r:null}function n(e,r,t,n,o,a,i,l){if(ue(r),!e){var c=void 0;if(void 0===r)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[t,n,o,a,i,l],u=0;c=new Error(r.replace(/%s/g,function(){return s[u++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}function o(e,r){var t=e.constructor,n=t&&(t.displayName||t.name)||"ReactClass",o=n+"."+r;ve[o]||(ye(!1,"Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the %s component.",r,n),ve[o]=!0)}function a(e,r,t){this.props=e,this.context=r,this.refs=ge,this.updater=t||me}function i(){}function l(e,r,t){this.props=e,this.context=r,this.refs=ge,this.updater=t||me}function c(){var e={current:null};return Object.seal(e),e}function s(e){return e._reactStatus===Oe?e._reactResult:null}function u(e){if(null==e)return null;if("number"==typeof e.tag&&ye(!1,"Received an unexpected object in getComponentName(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case ae:return"AsyncMode";case ee:return"Fragment";case Q:return"Portal";case te:return"Profiler";case re:return"StrictMode";case le:return"Placeholder"}if("object"==typeof e){switch(e.$$typeof){case oe:return"Context.Consumer";case ne:return"Context.Provider";case ie:var r=e.render,t=r.displayName||r.name||"";return e.displayName||(""!==t?"ForwardRef("+t+")":"ForwardRef")}if("function"==typeof e.then){var n=e,o=s(n);if(o)return u(o)}}return null}function f(e){Pe=e}function p(e){if(Re.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return void 0!==e.ref}function d(e){if(Re.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}function h(e,r){var t=function(){Ie||(Ie=!0,ye(!1,"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function y(e,r){var t=function(){De||(De=!0,ye(!1,"%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}function v(e,r,t){var n=void 0,o={},a=null,i=null,l=null,c=null;if(null!=r){p(r)&&(i=r.ref),d(r)&&(a=""+r.key),l=void 0===r.__self?null:r.__self,c=void 0===r.__source?null:r.__source;for(n in r)Re.call(r,n)&&!Ce.hasOwnProperty(n)&&(o[n]=r[n])}var s=arguments.length-2;if(1===s)o.children=t;else if(s>1){for(var u=Array(s),f=0;f<s;f++)u[f]=arguments[f+2];Object.freeze&&Object.freeze(u),o.children=u}if(e&&e.defaultProps){var v=e.defaultProps;for(n in v)void 0===o[n]&&(o[n]=v[n])}if(a||i){var m="function"==typeof e?e.displayName||e.name||"Unknown":e;a&&h(o,m),i&&y(o,m)}return ze(e,a,i,l,c,Se.current,o)}function m(e,r){return ze(e.type,r,e.ref,e._self,e._source,e._owner,e.props)}function g(e,r,t){(null===e||void 0===e)&&n(!1,"React.cloneElement(...): The argument must be a React element, but you passed %s.",e);var o=void 0,a=J({},e.props),i=e.key,l=e.ref,c=e._self,s=e._source,u=e._owner;if(null!=r){p(r)&&(l=r.ref,u=Se.current),d(r)&&(i=""+r.key);var f=void 0;e.type&&e.type.defaultProps&&(f=e.type.defaultProps);for(o in r)Re.call(r,o)&&!Ce.hasOwnProperty(o)&&(void 0===r[o]&&void 0!==f?a[o]=f[o]:a[o]=r[o])}var h=arguments.length-2;if(1===h)a.children=t;else if(h>1){for(var y=Array(h),v=0;v<h;v++)y[v]=arguments[v+2];a.children=y}return ze(e.type,i,l,c,s,u,a)}function b(e){return"object"==typeof e&&null!==e&&e.$$typeof===K}function w(e){var r={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return r[e]})}function _(e){return(""+e).replace(We,"$&/")}function S(e,r,t,n){if(Xe.length){var o=Xe.pop();return o.result=e,o.keyPrefix=r,o.func=t,o.context=n,o.count=0,o}return{result:e,keyPrefix:r,func:t,context:n,count:0}}function x(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,Xe.length<Ne&&Xe.push(e)}function k(e,t,o,a){var i=typeof e;"undefined"!==i&&"boolean"!==i||(e=null);var l=!1;if(null===e)l=!0;else switch(i){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case K:case Q:l=!0}}if(l)return o(a,e,""===t?Fe+j(e,0):t),1;var c=void 0,s=void 0,u=0,f=""===t?Fe:t+Me;if(Array.isArray(e))for(var p=0;p<e.length;p++)c=e[p],s=f+j(c,p),u+=k(c,s,o,a);else{var d=r(e);if("function"==typeof d){d===e.entries&&(Ye||Ee(!1,"Using Maps as children is unsupported and will likely yield unexpected results. Convert it to a sequence/iterable of keyed ReactElements instead."),Ye=!0);for(var h=d.call(e),y=void 0,v=0;!(y=h.next()).done;)c=y.value,s=f+j(c,v++),u+=k(c,s,o,a)}else if("object"===i){var m="";m=" If you meant to render a collection of children, use an array instead."+je.getStackAddendum();var g=""+e;n(!1,"Objects are not valid as a React child (found: %s).%s","[object Object]"===g?"object with keys {"+Object.keys(e).join(", ")+"}":g,m)}}return u}function O(e,r,t){return null==e?0:k(e,"",r,t)}function j(e,r){return"object"==typeof e&&null!==e&&null!=e.key?w(e.key):r.toString(36)}function P(e,r,t){var n=e.func,o=e.context;n.call(o,r,e.count++)}function A(e,r,t){if(null==e)return e;var n=S(null,null,r,t);O(e,P,n),x(n)}function T(e,r,t){var n=e.result,o=e.keyPrefix,a=e.func,i=e.context,l=a.call(i,r,e.count++);Array.isArray(l)?E(l,n,t,function(e){return e}):null!=l&&(b(l)&&(l=m(l,o+(!l.key||r&&r.key===l.key?"":_(l.key)+"/")+t)),n.push(l))}function E(e,r,t,n,o){var a="";null!=t&&(a=_(t)+"/");var i=S(r,a,n,o);O(e,T,i),x(i)}function R(e,r,t){if(null==e)return e;var n=[];return E(e,n,null,r,t),n}function C(e){return O(e,function(){return null},null)}function I(e){var r=[];return E(e,r,null,function(e){return e}),r}function D(e){return b(e)||n(!1,"React.Children.only expected to receive a single React element child."),e}function z(e,r){var t=Se.currentDispatcher;return null===t&&n(!1,"Context.unstable_read(): Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps."),t.readContext(e,r)}function F(e,r){void 0===r?r=null:null!==r&&"function"!=typeof r&&ye(!1,"createContext: Expected the optional second argument to be a function. Instead received: %s",r);var t={$$typeof:oe,_calculateChangedBits:r,_currentValue:e,_currentValue2:e,Provider:null,Consumer:null,unstable_read:null};return t.Provider={$$typeof:ne,_context:t},t.Consumer=t,t.unstable_read=z.bind(null,t),t._currentRenderer=null,t._currentRenderer2=null,t}function M(e){return"function"!=typeof e?ye(!1,"forwardRef requires a render function but was given %s.",null===e?"null":typeof e):0!==e.length&&2!==e.length&&ye(!1,"forwardRef render functions accept exactly two parameters: props and ref. %s",1===e.length?"Did you forget to use the ref parameter?":"Any additional parameter will be undefined."),null!=e&&(null!=e.defaultProps||null!=e.propTypes)&&ye(!1,"forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?"),{$$typeof:ie,render:e}}function Y(e){return"string"==typeof e||"function"==typeof e||e===ee||e===ae||e===te||e===re||e===le||"object"==typeof e&&null!==e&&("function"==typeof e.then||e.$$typeof===ne||e.$$typeof===oe||e.$$typeof===ie)}function W(){if(Se.current){var e=u(Se.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}function N(e){if(null!==e&&void 0!==e&&void 0!==e.__source){var r=e.__source;return"\n\nCheck your code at "+r.fileName.replace(/^.*[\\\/]/,"")+":"+r.lineNumber+"."}return""}function X(e){var r=W();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.")}return r}function $(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=X(r);if(!Be[t]){Be[t]=!0;var n="";e&&e._owner&&e._owner!==Se.current&&(n=" It was passed a child from "+u(e._owner.type)+"."),f(e),Ee(!1,'Each child in an array or iterator should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.',t,n),f(null)}}}function B(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n<e.length;n++){var o=e[n];b(o)&&$(o,t)}else if(b(e))e._store&&(e._store.validated=!0);else if(e){var a=r(e);if("function"==typeof a&&a!==e.entries)for(var i=a.call(e),l=void 0;!(l=i.next()).done;)b(l.value)&&$(l.value,t)}}function L(e){var r=e.type,t=void 0,n=void 0;if("function"==typeof r)t=r.displayName||r.name,n=r.propTypes;else{if("object"!=typeof r||null===r||r.$$typeof!==ie)return;var o=r.render.displayName||r.render.name||"";t=r.displayName||(""!==o?"ForwardRef("+o+")":"ForwardRef"),n=r.propTypes}n?(f(e),G(n,e.props,"prop",t,je.getStackAddendum),f(null)):void 0===r.PropTypes||$e||($e=!0,ye(!1,"Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",t||"Unknown")),"function"==typeof r.getDefaultProps&&(r.getDefaultProps.isReactClassApproved||ye(!1,"getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."))}function U(e){f(e);for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){Ee(!1,"Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n);break}}null!==e.ref&&Ee(!1,"Invalid attribute `ref` supplied to `React.Fragment`."),f(null)}function H(e,r,t){var n=Y(e);if(!n){var o="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(o+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var a=N(r);o+=a||W();var i=void 0;null===e?i="null":Array.isArray(e)?i="array":void 0!==e&&e.$$typeof===K?(i="<"+(u(e.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):i=typeof e,Ee(!1,"React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",i,o)}var l=v.apply(this,arguments);if(null==l)return l;if(n)for(var c=2;c<arguments.length;c++)B(arguments[c],e);return e===ee?U(l):L(l),l}function q(e){var r=H.bind(null,e);return r.type=e,Object.defineProperty(r,"type",{enumerable:!1,get:function(){return de(!1,"Factory.type is deprecated. Access the class directly before passing it to createFactory."),Object.defineProperty(this,"type",{value:e}),e}}),r}function V(e,r,t){for(var n=g.apply(this,arguments),o=2;o<arguments.length;o++)B(arguments[o],n.type);return L(n),n}var J=t(3),G=t(4),Z="function"==typeof Symbol&&Symbol.for,K=Z?Symbol.for("react.element"):60103,Q=Z?Symbol.for("react.portal"):60106,ee=Z?Symbol.for("react.fragment"):60107,re=Z?Symbol.for("react.strict_mode"):60108,te=Z?Symbol.for("react.profiler"):60114,ne=Z?Symbol.for("react.provider"):60109,oe=Z?Symbol.for("react.context"):60110,ae=Z?Symbol.for("react.async_mode"):60111,ie=Z?Symbol.for("react.forward_ref"):60112,le=Z?Symbol.for("react.placeholder"):60113,ce="function"==typeof Symbol&&Symbol.iterator,se="@@iterator",ue=function(){};ue=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")};var fe=function(){},pe=function(e){for(var r=arguments.length,t=Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];var o=0,a="Warning: "+e.replace(/%s/g,function(){return t[o++]});"undefined"!=typeof console&&console.warn(a);try{throw new Error(a)}catch(e){}};fe=function(e,r){if(void 0===r)throw new Error("`lowPriorityWarning(condition, format, ...args)` requires a warning message argument");if(!e){for(var t=arguments.length,n=Array(t>2?t-2:0),o=2;o<t;o++)n[o-2]=arguments[o];pe.apply(void 0,[r].concat(n))}};var de=fe,he=function(){};he=function(e,r){for(var t=arguments.length,n=Array(t>2?t-2:0),o=2;o<t;o++)n[o-2]=arguments[o];if(void 0===r)throw new Error("`warningWithoutStack(condition, format, ...args)` requires a warning message argument");if(n.length>8)throw new Error("warningWithoutStack() currently supports at most 8 arguments.");if(!e){if("undefined"!=typeof console){var a=n.map(function(e){return""+e}),i=a[0],l=a[1],c=a[2],s=a[3],u=a[4],f=a[5],p=a[6],d=a[7],h="Warning: "+r;switch(n.length){case 0:console.error(h);break;case 1:console.error(h,i);break;case 2:console.error(h,i,l);break;case 3:console.error(h,i,l,c);break;case 4:console.error(h,i,l,c,s);break;case 5:console.error(h,i,l,c,s,u);break;case 6:console.error(h,i,l,c,s,u,f);break;case 7:console.error(h,i,l,c,s,u,f,p);break;case 8:console.error(h,i,l,c,s,u,f,p,d);break;default:throw new Error("warningWithoutStack() currently supports at most 8 arguments.")}}try{var y=0,v="Warning: "+r.replace(/%s/g,function(){return n[y++]});throw new Error(v)}catch(e){}}};var ye=he,ve={},me={isMounted:function(e){return!1},enqueueForceUpdate:function(e,r,t){o(e,"forceUpdate")},enqueueReplaceState:function(e,r,t,n){o(e,"replaceState")},enqueueSetState:function(e,r,t,n){o(e,"setState")}},ge={};Object.freeze(ge),a.prototype.isReactComponent={},a.prototype.setState=function(e,r){"object"!=typeof e&&"function"!=typeof e&&null!=e&&n(!1,"setState(...): takes an object of state variables to update or a function which returns an object of state variables."),this.updater.enqueueSetState(this,e,r,"setState")},a.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};var be={isMounted:["isMounted","Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."],replaceState:["replaceState","Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236)."]};for(var we in be)be.hasOwnProperty(we)&&function(e,r){Object.defineProperty(a.prototype,e,{get:function(){de(!1,"%s(...) is deprecated in plain JavaScript React classes. %s",r[0],r[1])}})}(we,be[we]);i.prototype=a.prototype;var _e=l.prototype=new i;_e.constructor=l,J(_e,a.prototype),_e.isPureReactComponent=!0;var Se={current:null,currentDispatcher:null},xe=/^(.*)[\\\/]/,ke=function(e,r,t){var n="";if(r){var o=r.fileName,a=o.replace(xe,"");if(/^index\./.test(a)){var i=o.match(xe);if(i){var l=i[1];if(l){a=l.replace(xe,"")+"/"+a}}}n=" (at "+a+":"+r.lineNumber+")"}else t&&(n=" (created by "+t+")");return"\n    in "+(e||"Unknown")+n},Oe=1,je={},Pe=null;je.getCurrentStack=null,je.getStackAddendum=function(){var e="";if(Pe){var r=u(Pe.type),t=Pe._owner;e+=ke(r,Pe._source,t&&u(t.type))}var n=je.getCurrentStack;return n&&(e+=n()||""),e};var Ae={ReactCurrentOwner:Se,assign:J};J(Ae,{ReactDebugCurrentFrame:je,ReactComponentTreeHook:{}});var Te=ye;Te=function(e,r){if(!e){for(var t=Ae.ReactDebugCurrentFrame,n=t.getStackAddendum(),o=arguments.length,a=Array(o>2?o-2:0),i=2;i<o;i++)a[i-2]=arguments[i];ye.apply(void 0,[!1,r+"%s"].concat(a,[n]))}};var Ee=Te,Re=Object.prototype.hasOwnProperty,Ce={key:!0,ref:!0,__self:!0,__source:!0},Ie=void 0,De=void 0,ze=function(e,r,t,n,o,a,i){var l={$$typeof:K,type:e,key:r,ref:t,props:i,_owner:a};return l._store={},Object.defineProperty(l._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(l,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(l,"_source",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.freeze&&(Object.freeze(l.props),Object.freeze(l)),l},Fe=".",Me=":",Ye=!1,We=/\/+/g,Ne=10,Xe=[],$e=void 0;$e=!1;var Be={},Le={Children:{map:R,forEach:A,count:C,toArray:I,only:D},createRef:c,Component:a,PureComponent:l,createContext:F,forwardRef:M,Fragment:ee,StrictMode:re,unstable_AsyncMode:ae,unstable_Profiler:te,createElement:H,cloneElement:V,createFactory:q,isValidElement:b,version:"16.5.2",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Ae},Ue=Object.freeze({default:Le}),He=Ue&&Le||Ue,qe=He.default||He;e.exports=qe}()},function(e,r,t){"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/*
 object-assign
@@ -3,0 +3,0 @@ (c) Sindre Sorhus

package.json

 {
   "name": "@xuzhanhh/react-scroll",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "dependencies": {
@@ -5,0 +5,0 @@ "classnames": "^2.2.6",

src/ScrollBarOrigin.jsx

@@ -44,3 +44,2 @@ import React, { Component } from 'react'
         this._initCanvas()
-        this._addListeners()
     }
@@ -47,0 +46,0 @@ componentDidUpdate() {

No alert changes

Worsened metrics

Total package byte prevSize

856121

decreased by-0.03%

Lines of code

8527

decreased by-0.04%

No dependency changes