react-custom-scroll - npm Package Compare versions

Comparing version 4.2.0 to 4.2.1

dist/reactCustomScroll.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):"function"==typeof define&&define.amd?define(["react","react-dom","prop-types"],t):"object"==typeof exports?exports.ReactCustomScroll=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):e.ReactCustomScroll=t(e.react,e["react-dom"],e["prop-types"])}("undefined"!=typeof self?self:this,(function(e,t,o){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(r,n,function(t){return e[t]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=2)}([function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t,o){e.exports=o(4)},function(e,t){if(void 0===o){var r=new Error("Cannot find module 'prop-types'");throw r.code="MODULE_NOT_FOUND",r}e.exports=o},function(e,t,o){"use strict";o.r(t);var r=o(0),n=o.n(r),l=o(1),i=o.n(l),c=o(5),s=o.n(c);function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function p(e){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(e,t){return(d=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function h(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}var g=function(e,t,o){return(t=t||0===t?t:e)>(o=o||0===o?o:e)?(console.error("min limit is greater than max limit"),e):e<t?t:e>o?o:e};function m(e,t){return e.clientX>t.left&&e.clientX<t.right&&e.clientY>t.top&&e.clientY<t.top+t.height}var v=function(e){function t(e){var o;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),o=function(e,t){return!t||"object"!==a(t)&&"function"!=typeof t?f(e):t}(this,p(t).call(this,e)),h(f(o),"innerContainerRef",Object(r.createRef)()),h(f(o),"customScrollbarRef",Object(r.createRef)()),h(f(o),"scrollHandleRef",Object(r.createRef)()),h(f(o),"contentWrapperRef",Object(r.createRef)()),h(f(o),"adjustFreezePosition",(function(e){if(o.contentWrapperRef.current){var t=o.getScrolledElement(),r=o.contentWrapperRef.current;o.props.freezePosition&&(r.scrollTop=o.state.scrollPos),e.freezePosition&&(t.scrollTop=o.state.scrollPos)}})),h(f(o),"toggleScrollIfNeeded",(function(){var e=o.contentHeight-o.visibleHeight>1;o.hasScroll!==e&&(o.hasScroll=e,o.forceUpdate())})),h(f(o),"updateScrollPosition",(function(e){var t=o.getScrolledElement(),r=g(e,0,o.contentHeight-o.visibleHeight);t.scrollTop=r,o.setState({scrollPos:r})})),h(f(o),"onClick",(function(e){if(o.hasScroll&&o.isMouseEventOnCustomScrollbar(e)&&!o.isMouseEventOnScrollHandle(e)){var t=o.calculateNewScrollHandleTop(e),r=o.getScrollValueFromHandlePosition(t);o.updateScrollPosition(r)}})),h(f(o),"isMouseEventOnCustomScrollbar",(function(e){if(!o.customScrollbarRef.current)return!1;var t=i.a.findDOMNode(f(o)).getBoundingClientRect(),r=o.customScrollbarRef.current.getBoundingClientRect(),n=o.props.rtl?{left:t.left,right:r.right}:{left:r.left,width:t.right};return m(e,Object.assign({},{left:t.left,right:t.right,top:t.top,height:t.height},n))})),h(f(o),"isMouseEventOnScrollHandle",(function(e){return!!o.scrollHandleRef.current&&function(e,t){return m(e,t.getBoundingClientRect())}(e,i.a.findDOMNode(o.scrollHandleRef.current))})),h(f(o),"calculateNewScrollHandleTop",(function(e){var t=i.a.findDOMNode(f(o)).getBoundingClientRect().top+window.pageYOffset,r=e.pageY-t,n=o.getScrollHandleStyle().top;return r>n+o.scrollHandleHeight?n+Math.min(o.scrollHandleHeight,o.visibleHeight-o.scrollHandleHeight):n-Math.max(o.scrollHandleHeight,0)})),h(f(o),"getScrollValueFromHandlePosition",(function(e){return e/o.scrollRatio})),h(f(o),"getScrollHandleStyle",(function(){var e=o.state.scrollPos*o.scrollRatio;return o.scrollHandleHeight=o.visibleHeight*o.scrollRatio,{height:o.scrollHandleHeight,top:e}})),h(f(o),"adjustCustomScrollPosToContentPos",(function(e){o.setState({scrollPos:e})})),h(f(o),"onScroll",(function(e){o.props.freezePosition||(o.hideScrollThumb(),o.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),o.props.onScroll&&o.props.onScroll(e))})),h(f(o),"getScrolledElement",(function(){return o.innerContainerRef.current})),h(f(o),"onMouseDown",(function(e){o.hasScroll&&o.isMouseEventOnScrollHandle(e)&&(o.startDragHandlePos=o.getScrollHandleStyle().top,o.startDragMousePos=e.pageY,o.setState({onDrag:!0}),document.addEventListener("mousemove",o.onHandleDrag,{passive:!1}),document.addEventListener("mouseup",o.onHandleDragEnd,{passive:!1}))})),h(f(o),"onTouchStart",(function(){o.setState({onDrag:!0})})),h(f(o),"onHandleDrag",(function(e){e.preventDefault();var t=e.pageY-o.startDragMousePos,r=g(o.startDragHandlePos+t,0,o.visibleHeight-o.scrollHandleHeight),n=o.getScrollValueFromHandlePosition(r);o.updateScrollPosition(n)})),h(f(o),"onHandleDragEnd",(function(e){o.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",o.onHandleDrag),document.removeEventListener("mouseup",o.onHandleDragEnd)})),h(f(o),"blockOuterScroll",(function(e){if(!o.props.allowOuterScroll){var t=e.currentTarget,r=e.currentTarget.scrollHeight-e.currentTarget.offsetHeight,n=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+n<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+n>=r&&(t.scrollTop=r,e.preventDefault()),e.stopPropagation()}})),h(f(o),"getInnerContainerClasses",(function(){return o.state.scrollPos&&o.props.addScrolledClass?"".concat(s.a.innerContainer," ").concat(s.a.contentScrolled):s.a.innerContainer})),h(f(o),"getScrollStyles",(function(){var e=o.scrollbarYWidth||20,t=o.props.rtl?"marginLeft":"marginRight",r={height:o.props.heightRelativeToParent||o.props.flex?"100%":""};r[t]=-1*e;var n={height:o.props.heightRelativeToParent||o.props.flex?"100%":"",overflowY:o.props.freezePosition?"hidden":"visible"};return n[t]=o.scrollbarYWidth?0:e,{innerContainer:r,contentWrapper:n}})),h(f(o),"getOuterContainerStyle",(function(){return{height:o.props.heightRelativeToParent||o.props.flex?"100%":""}})),h(f(o),"getRootStyles",(function(){var e={};return o.props.heightRelativeToParent?e.height=o.props.heightRelativeToParent:o.props.flex&&(e.flex=o.props.flex),e})),h(f(o),"enforceMinHandleHeight",(function(e){var t=o.props.minScrollHandleHeight;if(e.height>=t)return e;var r=(t-e.height)*(o.state.scrollPos/(o.contentHeight-o.visibleHeight));return{height:t,top:e.top-r}})),o.scrollbarYWidth=0,o.state={scrollPos:0,onDrag:!1},o.hideScrollThumb=function(e,t){var o;function r(){clearTimeout(o)}function n(){r(),o=setTimeout((function(){e()}),t)}return n.cancel=r,n}((function(){o.setState({onDrag:!1})}),500),o}var o,l,c;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&d(e,t)}(t,e),o=t,(l=[{key:"componentDidMount",value:function(){void 0!==this.props.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.forceUpdate(),this.innerContainerRef.current&&this.innerContainerRef.current.addEventListener("wheel",this.blockOuterScroll,{passive:!1})}},{key:"componentDidUpdate",value:function(e,t){var o=this.contentHeight,r=this.visibleHeight,n=this.getScrolledElement(),l=t.scrollPos>=o-r;this.contentHeight=n.scrollHeight,this.scrollbarYWidth=n.offsetWidth-n.clientWidth,this.visibleHeight=n.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1,this.toggleScrollIfNeeded();var i=this.state===t;(this.props.freezePosition||e.freezePosition)&&this.adjustFreezePosition(e),void 0!==this.props.scrollTo&&this.props.scrollTo!==e.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&i&&l&&this.updateScrollPosition(this.contentHeight-this.visibleHeight)}},{key:"componentWillUnmount",value:function(){this.hideScrollThumb.cancel(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd),this.innerContainerRef.current&&this.innerContainerRef.current.removeEventListener("wheel",this.blockOuterScroll)}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),o=this.enforceMinHandleHeight(this.getScrollHandleStyle());return n.a.createElement("div",{className:"".concat(s.a.customScroll," ").concat(this.state.onDrag?s.a.scrollHandleDragged:""),style:t},n.a.createElement("div",{className:s.a.outerContainer,style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onClick:this.onClick},this.hasScroll?n.a.createElement("div",{className:s.a.positioning},n.a.createElement("div",{ref:this.customScrollbarRef,className:"".concat(s.a.customScrollbar," ").concat(this.props.rtl?s.a.customScrollbarRtl:""),key:"scrollbar"},n.a.createElement("div",{ref:this.scrollHandleRef,className:s.a.customScrollHandle,style:o},n.a.createElement("div",{className:this.props.handleClass})))):null,n.a.createElement("div",{ref:this.innerContainerRef,className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll},n.a.createElement("div",{className:s.a.contentWrapper,ref:this.contentWrapperRef,style:e.contentWrapper},this.props.children))))}}])&&u(o.prototype,l),c&&u(o,c),t}(r.Component);try{var S=o(3);v.propTypes={children:S.any,allowOuterScroll:S.bool,heightRelativeToParent:S.string,onScroll:S.func,addScrolledClass:S.bool,freezePosition:S.bool,handleClass:S.string,minScrollHandleHeight:S.number,flex:S.string,rtl:S.bool,scrollTo:S.number,keepAtBottom:S.bool}}catch(e){}v.defaultProps={handleClass:s.a.innerHandle,minScrollHandleHeight:38};t.default=v},function(e,t){e.exports={"custom-scroll":"rcs-custom-scroll",customScroll:"rcs-custom-scroll","outer-container":"rcs-outer-container",outerContainer:"rcs-outer-container",positioning:"rcs-positioning","custom-scrollbar":"rcs-custom-scrollbar",customScrollbar:"rcs-custom-scrollbar","inner-container":"rcs-inner-container",innerContainer:"rcs-inner-container","content-scrolled":"rcs-content-scrolled",contentScrolled:"rcs-content-scrolled","scroll-handle-dragged":"rcs-scroll-handle-dragged",scrollHandleDragged:"rcs-scroll-handle-dragged","custom-scrollbar-rtl":"rcs-custom-scrollbar-rtl",customScrollbarRtl:"rcs-custom-scrollbar-rtl","custom-scroll-handle":"rcs-custom-scroll-handle",customScrollHandle:"rcs-custom-scroll-handle","inner-handle":"rcs-inner-handle",innerHandle:"rcs-inner-handle"}}])}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):"function"==typeof define&&define.amd?define(["react","react-dom","prop-types"],t):"object"==typeof exports?exports.ReactCustomScroll=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):e.ReactCustomScroll=t(e.react,e["react-dom"],e["prop-types"])}("undefined"!=typeof self?self:this,(function(e,t,r){return function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},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 o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},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,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){e.exports=r(4)},function(e,t){if(void 0===r){var o=new Error("Cannot find module 'prop-types'");throw o.code="MODULE_NOT_FOUND",o}e.exports=r},function(e,t,r){"use strict";r.r(t);var o=r(0),n=r.n(o),l=r(1),i=r.n(l),c=r(5),s=r.n(c);function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=g(e);if(t){var n=g(this).constructor;r=Reflect.construct(o,arguments,n)}else r=o.apply(this,arguments);return d(this,r)}}function d(e,t){return!t||"object"!==a(t)&&"function"!=typeof t?h(e):t}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var v=function(e,t,r){return(t=t||0===t?t:e)>(r=r||0===r?r:e)?(console.error("min limit is greater than max limit"),e):e<t?t:e>r?r:e};function S(e,t){return e.clientX>t.left&&e.clientX<t.right&&e.clientY>t.top&&e.clientY<t.top+t.height}var b=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&f(e,t)}(a,e);var t,r,l,c=p(a);function a(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),m(h(t=c.call(this,e)),"innerContainerRef",Object(o.createRef)()),m(h(t),"customScrollbarRef",Object(o.createRef)()),m(h(t),"scrollHandleRef",Object(o.createRef)()),m(h(t),"contentWrapperRef",Object(o.createRef)()),m(h(t),"adjustFreezePosition",(function(e){if(t.contentWrapperRef.current){var r=t.getScrolledElement(),o=t.contentWrapperRef.current;t.props.freezePosition&&(o.scrollTop=t.state.scrollPos),e.freezePosition&&(r.scrollTop=t.state.scrollPos)}})),m(h(t),"toggleScrollIfNeeded",(function(){var e=t.contentHeight-t.visibleHeight>1;t.hasScroll!==e&&(t.hasScroll=e,t.forceUpdate())})),m(h(t),"updateScrollPosition",(function(e){var r=t.getScrolledElement(),o=v(e,0,t.contentHeight-t.visibleHeight);r.scrollTop=o,t.setState({scrollPos:o})})),m(h(t),"onClick",(function(e){if(t.hasScroll&&t.isMouseEventOnCustomScrollbar(e)&&!t.isMouseEventOnScrollHandle(e)){var r=t.calculateNewScrollHandleTop(e),o=t.getScrollValueFromHandlePosition(r);t.updateScrollPosition(o)}})),m(h(t),"isMouseEventOnCustomScrollbar",(function(e){if(!t.customScrollbarRef.current)return!1;var r=i.a.findDOMNode(h(t)).getBoundingClientRect(),o=t.customScrollbarRef.current.getBoundingClientRect(),n=t.props.rtl?{left:r.left,right:o.right}:{left:o.left,width:r.right};return S(e,Object.assign({},{left:r.left,right:r.right,top:r.top,height:r.height},n))})),m(h(t),"isMouseEventOnScrollHandle",(function(e){return!!t.scrollHandleRef.current&&function(e,t){return S(e,t.getBoundingClientRect())}(e,i.a.findDOMNode(t.scrollHandleRef.current))})),m(h(t),"calculateNewScrollHandleTop",(function(e){var r=i.a.findDOMNode(h(t)).getBoundingClientRect().top+window.pageYOffset,o=e.pageY-r,n=t.getScrollHandleStyle().top;return o>n+t.scrollHandleHeight?n+Math.min(t.scrollHandleHeight,t.visibleHeight-t.scrollHandleHeight):n-Math.max(t.scrollHandleHeight,0)})),m(h(t),"getScrollValueFromHandlePosition",(function(e){return e/t.scrollRatio})),m(h(t),"getScrollHandleStyle",(function(){var e=t.state.scrollPos*t.scrollRatio;return t.scrollHandleHeight=t.visibleHeight*t.scrollRatio,{height:t.scrollHandleHeight,top:e}})),m(h(t),"adjustCustomScrollPosToContentPos",(function(e){t.setState({scrollPos:e})})),m(h(t),"onScroll",(function(e){t.props.freezePosition||(t.hideScrollThumb(),t.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),t.props.onScroll&&t.props.onScroll(e))})),m(h(t),"getScrolledElement",(function(){return t.innerContainerRef.current})),m(h(t),"onMouseDown",(function(e){t.hasScroll&&t.isMouseEventOnScrollHandle(e)&&(t.startDragHandlePos=t.getScrollHandleStyle().top,t.startDragMousePos=e.pageY,t.setState({onDrag:!0}),document.addEventListener("mousemove",t.onHandleDrag,{passive:!1}),document.addEventListener("mouseup",t.onHandleDragEnd,{passive:!1}))})),m(h(t),"onTouchStart",(function(){t.setState({onDrag:!0})})),m(h(t),"onHandleDrag",(function(e){e.preventDefault();var r=e.pageY-t.startDragMousePos,o=v(t.startDragHandlePos+r,0,t.visibleHeight-t.scrollHandleHeight),n=t.getScrollValueFromHandlePosition(o);t.updateScrollPosition(n)})),m(h(t),"onHandleDragEnd",(function(e){t.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",t.onHandleDrag),document.removeEventListener("mouseup",t.onHandleDragEnd)})),m(h(t),"blockOuterScroll",(function(e){if(!t.props.allowOuterScroll){var r=e.currentTarget,o=e.currentTarget.scrollHeight-e.currentTarget.offsetHeight,n=e.deltaY%3?e.deltaY:10*e.deltaY;r.scrollTop+n<=0?(r.scrollTop=0,e.preventDefault()):r.scrollTop+n>=o&&(r.scrollTop=o,e.preventDefault()),e.stopPropagation()}})),m(h(t),"getInnerContainerClasses",(function(){return t.state.scrollPos&&t.props.addScrolledClass?"".concat(s.a.innerContainer," ").concat(s.a.contentScrolled):s.a.innerContainer})),m(h(t),"getScrollStyles",(function(){var e=t.scrollbarYWidth||20,r=t.props.rtl?"marginLeft":"marginRight",o={height:t.props.heightRelativeToParent||t.props.flex?"100%":""};o[r]=-1*e;var n={height:t.props.heightRelativeToParent||t.props.flex?"100%":"",overflowY:t.props.freezePosition?"hidden":"visible"};return n[r]=t.scrollbarYWidth?0:e,{innerContainer:o,contentWrapper:n}})),m(h(t),"getOuterContainerStyle",(function(){return{height:t.props.heightRelativeToParent||t.props.flex?"100%":""}})),m(h(t),"getRootStyles",(function(){var e={};return t.props.heightRelativeToParent?e.height=t.props.heightRelativeToParent:t.props.flex&&(e.flex=t.props.flex),e})),m(h(t),"enforceMinHandleHeight",(function(e){var r=t.props.minScrollHandleHeight;if(e.height>=r)return e;var o=(r-e.height)*(t.state.scrollPos/(t.contentHeight-t.visibleHeight));return{height:r,top:e.top-o}})),t.scrollbarYWidth=0,t.state={scrollPos:0,onDrag:!1},t.hideScrollThumb=function(e,t){var r;function o(){clearTimeout(r)}function n(){o(),r=setTimeout((function(){e()}),t)}return n.cancel=o,n}((function(){t.setState({onDrag:!1})}),500),t}return t=a,(r=[{key:"componentDidMount",value:function(){void 0!==this.props.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.forceUpdate(),this.innerContainerRef.current&&this.innerContainerRef.current.addEventListener("wheel",this.blockOuterScroll,{passive:!1})}},{key:"componentDidUpdate",value:function(e,t){var r=this.contentHeight,o=this.visibleHeight,n=this.getScrolledElement(),l=t.scrollPos>=r-o;this.contentHeight=n.scrollHeight,this.scrollbarYWidth=n.offsetWidth-n.clientWidth,this.visibleHeight=n.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1,this.toggleScrollIfNeeded();var i=this.state===t;(this.props.freezePosition||e.freezePosition)&&this.adjustFreezePosition(e),void 0!==this.props.scrollTo&&this.props.scrollTo!==e.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&i&&l&&this.updateScrollPosition(this.contentHeight-this.visibleHeight)}},{key:"componentWillUnmount",value:function(){this.hideScrollThumb.cancel(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd),this.innerContainerRef.current&&this.innerContainerRef.current.removeEventListener("wheel",this.blockOuterScroll)}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),r=this.enforceMinHandleHeight(this.getScrollHandleStyle());return n.a.createElement("div",{className:"".concat(s.a.customScroll," ").concat(this.state.onDrag?s.a.scrollHandleDragged:""),style:t},n.a.createElement("div",{className:s.a.outerContainer,style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onClick:this.onClick},this.hasScroll?n.a.createElement("div",{className:s.a.positioning},n.a.createElement("div",{ref:this.customScrollbarRef,className:"".concat(s.a.customScrollbar," ").concat(this.props.rtl?s.a.customScrollbarRtl:""),key:"scrollbar"},n.a.createElement("div",{ref:this.scrollHandleRef,className:s.a.customScrollHandle,style:r},n.a.createElement("div",{className:this.props.handleClass})))):null,n.a.createElement("div",{ref:this.innerContainerRef,className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll},n.a.createElement("div",{className:s.a.contentWrapper,ref:this.contentWrapperRef,style:e.contentWrapper},this.props.children))))}}])&&u(t.prototype,r),l&&u(t,l),a}(o.Component);try{var y=r(3);b.propTypes={children:y.any,allowOuterScroll:y.bool,heightRelativeToParent:y.string,onScroll:y.func,addScrolledClass:y.bool,freezePosition:y.bool,handleClass:y.string,minScrollHandleHeight:y.number,flex:y.string,rtl:y.bool,scrollTo:y.number,keepAtBottom:y.bool}}catch(e){}b.defaultProps={handleClass:s.a.innerHandle,minScrollHandleHeight:38};t.default=b},function(e,t){e.exports={"custom-scroll":"rcs-custom-scroll",customScroll:"rcs-custom-scroll","outer-container":"rcs-outer-container",outerContainer:"rcs-outer-container",positioning:"rcs-positioning","custom-scrollbar":"rcs-custom-scrollbar",customScrollbar:"rcs-custom-scrollbar","inner-container":"rcs-inner-container",innerContainer:"rcs-inner-container","content-scrolled":"rcs-content-scrolled",contentScrolled:"rcs-content-scrolled","scroll-handle-dragged":"rcs-scroll-handle-dragged",scrollHandleDragged:"rcs-scroll-handle-dragged","custom-scrollbar-rtl":"rcs-custom-scrollbar-rtl",customScrollbarRtl:"rcs-custom-scrollbar-rtl","custom-scroll-handle":"rcs-custom-scroll-handle",customScrollHandle:"rcs-custom-scroll-handle","inner-handle":"rcs-inner-handle",innerHandle:"rcs-inner-handle"}}])}));

karma.conf.js

@@ -5,3 +5,4 @@ const path = require('path')
   config.set({
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless', 'FirefoxHeadless'],
+    // browsers: ['Chrome'],
     frameworks: ['jasmine'],
@@ -62,2 +63,2 @@ singleRun: false,
   })
-}
+}

package.json

 {
   "name": "react-custom-scroll",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -42,4 +42,5 @@ "main": "index",
     "jasmine-core": "^3.5.0",
-    "karma": "^4.4.1",
+    "karma": "^5.1.0",
     "karma-chrome-launcher": "^3.1.0",
+    "karma-firefox-launcher": "^1.3.0",
     "karma-jasmine": "^3.1.0",
@@ -60,5 +61,2 @@ "karma-sourcemap-loader": "^0.3.7",
   },
-  "resolutions": {
-    "**/**/fsevents": "^1.2.9"
-  },
   "peerDependencies": {
@@ -65,0 +63,0 @@ "prop-types": "*",

README.md

 [![NPM version][npm-image]][npm-url]
+![](https://github.com/rommguy/react-custom-scroll/workflows/build/badge.svg)
 
+
 # React-Custom-Scroll
@@ -24,4 +26,4 @@ An easily designable, cross browser (!!), custom scroll with ReactJS
 **From unpkg cdn:**      
-* [Js file](https://unpkg.com/react-custom-scroll@4.2.0/dist/reactCustomScroll)
-* [css file](https://unpkg.com/react-custom-scroll@4.2.0/dist/customScroll.css) 
+* [Js file](https://unpkg.com/react-custom-scroll@4.2.1/dist/reactCustomScroll)
+* [css file](https://unpkg.com/react-custom-scroll@4.2.1/dist/customScroll.css) 
 
@@ -138,3 +140,3 @@ Wrap your content with the custom scroll component
 # Or for continuous run
-karma start
+npx karma start
 ```
@@ -141,0 +143,0 @@

src/test/customScroll.spec.js

@@ -310,5 +310,9 @@ import React from 'react'
 
+      const expectedInnerContainerMargin = customScroll.scrollbarYWidth || 20
+      const expectedContentWrapperMargin = customScroll.scrollbarYWidth ? 0 : expectedInnerContainerMargin
+
       expect(customScrollbarStyle.left).toEqual('3px')
-      expect(innerContainerStyle.marginLeft).toEqual('-20px')
-      expect(contentWrapperStyle.marginLeft).toEqual('20px')
+      // expect(innerContainerStyle.marginLeft).toEqual('-20px')
+      expect(innerContainerStyle.marginLeft).toEqual(`${-1 * expectedInnerContainerMargin}px`)
+      expect(contentWrapperStyle.marginLeft).toEqual(`${expectedContentWrapperMargin}px`)
     })
@@ -315,0 +319,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

263810

increased by0.73%

Number of package files

39

increased by2.63%

Lines of code

2539

increased by0.28%

Number of lines in readme file

150

increased by1.35%

Worsened metrics

Dev dependency count

33

increased by3.13%

No dependency changes