react-custom-scroll - npm Package Compare versions

Comparing version 4.2.2 to 4.2.3

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,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"}}])}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(function(){try{return require("prop-types")}catch(e){}}(),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","react-dom"],t):"object"==typeof exports?exports.ReactCustomScroll=t(function(){try{return require("prop-types")}catch(e){}}(),require("react"),require("react-dom")):e.ReactCustomScroll=t(e["prop-types"],e.react,e["react-dom"])}("undefined"!=typeof self?self:this,(function(e,t,o){return(()=>{"use strict";var r={229:t=>{if(void 0===e){var o=new Error("Cannot find module 'prop-types'");throw o.code="MODULE_NOT_FOUND",o}t.exports=e},297:e=>{e.exports=t},268:e=>{e.exports=o}},n={};function l(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,l),o.exports}l.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return l.d(t,{a:t}),t},l.d=(e,t)=>{for(var o in t)l.o(t,o)&&!l.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{l.r(i),l.d(i,{default:()=>S});var e=l(297),t=l.n(e),o=l(268),r=l.n(o);const n={"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 c(e){return(c="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 s(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 a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e,t){return!t||"object"!==c(t)&&"function"!=typeof t?p(e):t}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}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 d=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 g(e,t){return e.clientX>t.left&&e.clientX<t.right&&e.clientY>t.top&&e.clientY<t.top+t.height}var m=function(o){!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&&a(e,t)}(S,o);var l,i,c,m,v=(c=S,m=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=f(c);if(m){var o=f(this).constructor;e=Reflect.construct(t,arguments,o)}else e=t.apply(this,arguments);return u(this,e)});function S(t){var o;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,S),h(p(o=v.call(this,t)),"innerContainerRef",(0,e.createRef)()),h(p(o),"customScrollbarRef",(0,e.createRef)()),h(p(o),"scrollHandleRef",(0,e.createRef)()),h(p(o),"contentWrapperRef",(0,e.createRef)()),h(p(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(p(o),"toggleScrollIfNeeded",(function(){var e=o.contentHeight-o.visibleHeight>1;o.hasScroll!==e&&(o.hasScroll=e,o.forceUpdate())})),h(p(o),"updateScrollPosition",(function(e){var t=o.getScrolledElement(),r=d(e,0,o.contentHeight-o.visibleHeight);t.scrollTop=r,o.setState({scrollPos:r})})),h(p(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(p(o),"isMouseEventOnCustomScrollbar",(function(e){if(!o.customScrollbarRef.current)return!1;var t=r().findDOMNode(p(o)).getBoundingClientRect(),n=o.customScrollbarRef.current.getBoundingClientRect(),l=o.props.rtl?{left:t.left,right:n.right}:{left:n.left,width:t.right};return g(e,Object.assign({},{left:t.left,right:t.right,top:t.top,height:t.height},l))})),h(p(o),"isMouseEventOnScrollHandle",(function(e){return!!o.scrollHandleRef.current&&function(e,t){return g(e,t.getBoundingClientRect())}(e,r().findDOMNode(o.scrollHandleRef.current))})),h(p(o),"calculateNewScrollHandleTop",(function(e){var t=r().findDOMNode(p(o)).getBoundingClientRect().top+window.pageYOffset,n=e.pageY-t,l=o.getScrollHandleStyle().top;return n>l+o.scrollHandleHeight?l+Math.min(o.scrollHandleHeight,o.visibleHeight-o.scrollHandleHeight):l-Math.max(o.scrollHandleHeight,0)})),h(p(o),"getScrollValueFromHandlePosition",(function(e){return e/o.scrollRatio})),h(p(o),"getScrollHandleStyle",(function(){var e=o.state.scrollPos*o.scrollRatio;return o.scrollHandleHeight=o.visibleHeight*o.scrollRatio,{height:o.scrollHandleHeight,top:e}})),h(p(o),"adjustCustomScrollPosToContentPos",(function(e){o.setState({scrollPos:e})})),h(p(o),"onScroll",(function(e){o.props.freezePosition||(o.hideScrollThumb(),o.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),o.props.onScroll&&o.props.onScroll(e))})),h(p(o),"getScrolledElement",(function(){return o.innerContainerRef.current})),h(p(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(p(o),"onTouchStart",(function(){o.setState({onDrag:!0})})),h(p(o),"onHandleDrag",(function(e){e.preventDefault();var t=e.pageY-o.startDragMousePos,r=d(o.startDragHandlePos+t,0,o.visibleHeight-o.scrollHandleHeight),n=o.getScrollValueFromHandlePosition(r);o.updateScrollPosition(n)})),h(p(o),"onHandleDragEnd",(function(e){o.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",o.onHandleDrag),document.removeEventListener("mouseup",o.onHandleDragEnd)})),h(p(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(p(o),"getInnerContainerClasses",(function(){return o.state.scrollPos&&o.props.addScrolledClass?"".concat(n.innerContainer," ").concat(n.contentScrolled):n.innerContainer})),h(p(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(p(o),"getOuterContainerStyle",(function(){return{height:o.props.heightRelativeToParent||o.props.flex?"100%":""}})),h(p(o),"getRootStyles",(function(){var e={};return o.props.heightRelativeToParent?e.height=o.props.heightRelativeToParent:o.props.flex&&(e.flex=o.props.flex),e})),h(p(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 r;function n(){clearTimeout(r)}function l(){n(),r=setTimeout((function(){o.setState({onDrag:!1})}),500)}return l.cancel=n,l}(),o}return l=S,(i=[{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(),o=this.getRootStyles(),r=this.enforceMinHandleHeight(this.getScrollHandleStyle()),l=[this.props.className||"",n.customScroll,this.state.onDrag?n.scrollHandleDragged:""].join(" ");return t().createElement("div",{className:l,style:o},t().createElement("div",{className:n.outerContainer,style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onClick:this.onClick},this.hasScroll?t().createElement("div",{className:n.positioning},t().createElement("div",{ref:this.customScrollbarRef,className:"".concat(n.customScrollbar," ").concat(this.props.rtl?n.customScrollbarRtl:""),key:"scrollbar"},t().createElement("div",{ref:this.scrollHandleRef,className:n.customScrollHandle,style:r},t().createElement("div",{className:this.props.handleClass})))):null,t().createElement("div",{ref:this.innerContainerRef,className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll},t().createElement("div",{className:n.contentWrapper,ref:this.contentWrapperRef,style:e.contentWrapper},this.props.children))))}}])&&s(l.prototype,i),S}(e.Component);try{var v=l(229);m.propTypes={children:v.any,allowOuterScroll:v.bool,heightRelativeToParent:v.string,onScroll:v.func,addScrolledClass:v.bool,freezePosition:v.bool,handleClass:v.string,minScrollHandleHeight:v.number,flex:v.string,rtl:v.bool,scrollTo:v.number,keepAtBottom:v.bool,className:v.string}}catch(e){}m.defaultProps={handleClass:n.innerHandle,minScrollHandleHeight:38};const S=m})(),i})()}));

example/firstComp/firstComp.js

@@ -32,3 +32,3 @@ import React, { Component, Fragment } from 'react'
   getDynamicContent() {
-    return times(index => `Content #${index}`, this.state.dynamicContentCounter)
+    return times((index) => `Content #${index}`, this.state.dynamicContentCounter)
   }
@@ -134,3 +134,3 @@ addContent = () => {
                     {map(
-                      content => (
+                      (content) => (
                         <div className="dynamic-content" key={content}>
@@ -137,0 +137,0 @@ {content}

karma.conf.js

 const path = require('path')
+const KarmaWebpack = require('karma-webpack')
 
-module.exports = config => {
+module.exports = (config) => {
   config.set({
@@ -11,3 +12,3 @@ browsers: ['ChromeHeadless', 'FirefoxHeadless'],
     files: [
-      {pattern: 'src/test/*.spec.js', watched: false}
+      { pattern: 'src/test/*.spec.js', watched: false }
       // each file acts as entry point for the webpack configuration
@@ -37,11 +38,13 @@ ],
                 loader: 'style-loader'
-              }, {
+              },
+              {
                 loader: 'css-loader',
                 options: {
                   modules: {
-                    localIdentName: 'rcs-[local]'
-                  },
-                  localsConvention: 'dashes'
+                    localIdentName: 'rcs-[local]',
+                    exportLocalsConvention: 'dashes'
+                  }
                 }
-              }, {
+              },
+              {
                 loader: 'sass-loader'
@@ -54,3 +57,3 @@ }
       resolve: {
-        modules: [path.resolve(__dirname, "src/main"), "node_modules"]
+        modules: [path.resolve(__dirname, 'src/main'), 'node_modules']
       }
@@ -57,0 +60,0 @@ },

package.json

 {
   "name": "react-custom-scroll",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -24,3 +24,2 @@ "main": "index",
   "homepage": "https://github.com/rommguy/react-custom-scroll#readme",
-  "dependencies": {},
   "devDependencies": {
@@ -36,26 +35,26 @@ "@babel/core": "^7.8.4",
     "babel-loader": "^8.0.6",
-    "css-loader": "^3.4.2",
+    "css-loader": "^5.2.4",
     "eslint": "^6.8.0",
     "eslint-plugin-lodash": "^6.0.0",
     "eslint-plugin-react": "^7.18.3",
-    "extract-text-webpack-plugin": "4.0.0-beta.0",
     "jasmine": "^3.5.0",
     "jasmine-core": "^3.5.0",
-    "karma": "^5.1.0",
+    "karma": "^6.2.3",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^1.3.0",
+    "karma-firefox-launcher": "^2.1.0",
     "karma-jasmine": "^3.1.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
-    "lodash": "^4.17.15",
+    "karma-webpack": "^5.0.0",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^1.6.0",
     "node-sass": "^4.13.1",
     "postcss-cli": "^7.1.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.3.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.1.3",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
+    "sass-loader": "^11.1.1",
+    "style-loader": "^1.3.0",
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0"
   },
@@ -76,3 +75,4 @@ "peerDependencies": {
     "component"
-  ]
+  ],
+  "dependencies": {}
 }

README.md

@@ -27,4 +27,4 @@ [![NPM version][npm-image]][npm-url]
 **From unpkg cdn:**      
-* [Js file](https://unpkg.com/react-custom-scroll@4.2.2/dist/reactCustomScroll)
-* [css file](https://unpkg.com/react-custom-scroll@4.2.2/dist/customScroll.css) 
+* [Js file](https://unpkg.com/react-custom-scroll@4.2.3/dist/reactCustomScroll)
+* [css file](https://unpkg.com/react-custom-scroll@4.2.3/dist/customScroll.css) 
 
@@ -31,0 +31,0 @@ Wrap your content with the custom scroll component

src/main/customScroll.js

@@ -91,3 +91,3 @@ import React, { Component, createRef } from 'react'
     document.removeEventListener('mouseup', this.onHandleDragEnd)
-    
+
     if (this.innerContainerRef.current) {
@@ -103,3 +103,3 @@ this.innerContainerRef.current.removeEventListener('wheel', this.blockOuterScroll)
 
-  adjustFreezePosition = prevProps => {
+  adjustFreezePosition = (prevProps) => {
     if (!this.contentWrapperRef.current) {
@@ -128,3 +128,3 @@ return
 
-  updateScrollPosition = scrollValue => {
+  updateScrollPosition = (scrollValue) => {
     const innerContainer = this.getScrolledElement()
@@ -138,3 +138,3 @@ const updatedScrollTop = ensureWithinLimits(scrollValue, 0, this.contentHeight - this.visibleHeight)
 
-  onClick = event => {
+  onClick = (event) => {
     if (!this.hasScroll || !this.isMouseEventOnCustomScrollbar(event) || this.isMouseEventOnScrollHandle(event)) {
@@ -149,3 +149,3 @@ return
 
-  isMouseEventOnCustomScrollbar = event => {
+  isMouseEventOnCustomScrollbar = (event) => {
     if (!this.customScrollbarRef.current) {
@@ -179,3 +179,3 @@ return false
 
-  isMouseEventOnScrollHandle = event => {
+  isMouseEventOnScrollHandle = (event) => {
     if (!this.scrollHandleRef.current) {
@@ -188,3 +188,3 @@ return false
 
-  calculateNewScrollHandleTop = clickEvent => {
+  calculateNewScrollHandleTop = (clickEvent) => {
     const domNode = reactDOM.findDOMNode(this)
@@ -206,3 +206,3 @@ const boundingRect = domNode.getBoundingClientRect()
 
-  getScrollValueFromHandlePosition = handlePosition => handlePosition / this.scrollRatio
+  getScrollValueFromHandlePosition = (handlePosition) => handlePosition / this.scrollRatio
 
@@ -218,3 +218,3 @@ getScrollHandleStyle = () => {
 
-  adjustCustomScrollPosToContentPos = scrollPosition => {
+  adjustCustomScrollPosToContentPos = (scrollPosition) => {
     this.setState({
@@ -225,3 +225,3 @@ scrollPos: scrollPosition
 
-  onScroll = event => {
+  onScroll = (event) => {
     if (this.props.freezePosition) {
@@ -239,3 +239,3 @@ return
 
-  onMouseDown = event => {
+  onMouseDown = (event) => {
     if (!this.hasScroll || !this.isMouseEventOnScrollHandle(event)) {
@@ -260,3 +260,3 @@ return
 
-  onHandleDrag = event => {
+  onHandleDrag = (event) => {
     event.preventDefault()
@@ -273,3 +273,3 @@ const mouseDeltaY = event.pageY - this.startDragMousePos
 
-  onHandleDragEnd = e => {
+  onHandleDragEnd = (e) => {
     this.setState({
@@ -283,3 +283,3 @@ onDrag: false
 
-  blockOuterScroll = e => {
+  blockOuterScroll = (e) => {
     if (this.props.allowOuterScroll) {
@@ -344,3 +344,3 @@ return
 
-  enforceMinHandleHeight = calculatedStyle => {
+  enforceMinHandleHeight = (calculatedStyle) => {
     const minHeight = this.props.minScrollHandleHeight
@@ -367,8 +367,10 @@ if (calculatedStyle.height >= minHeight) {
     const scrollHandleStyle = this.enforceMinHandleHeight(this.getScrollHandleStyle())
+    const className = [
+      this.props.className || '',
+      styles.customScroll,
+      this.state.onDrag ? styles.scrollHandleDragged : ''
+    ].join(' ')
 
     return (
-      <div
-        className={`${styles.customScroll} ${this.state.onDrag ? styles.scrollHandleDragged : ''}`}
-        style={rootStyle}
-      >
+      <div className={className} style={rootStyle}>
         <div
@@ -388,7 +390,3 @@ className={styles.outerContainer}
               >
-                <div
-                  ref={this.scrollHandleRef}
-                  className={styles.customScrollHandle}
-                  style={scrollHandleStyle}
-                >
+                <div ref={this.scrollHandleRef} className={styles.customScrollHandle} style={scrollHandleStyle}>
                   <div className={this.props.handleClass} />
@@ -405,7 +403,3 @@ </div>
           >
-            <div
-              className={styles.contentWrapper}
-              ref={this.contentWrapperRef}
-              style={scrollStyles.contentWrapper}
-            >
+            <div className={styles.contentWrapper} ref={this.contentWrapperRef} style={scrollStyles.contentWrapper}>
               {this.props.children}
@@ -434,3 +428,4 @@ </div>
     scrollTo: PropTypes.number,
-    keepAtBottom: PropTypes.bool
+    keepAtBottom: PropTypes.bool,
+    className: PropTypes.string
   }
@@ -437,0 +432,0 @@ } catch (e) {} //eslint-disable-line no-empty

src/test/customScroll.spec.js

@@ -7,6 +7,6 @@ import React from 'react'
 
-describe('custom scroll', function() {
+describe('custom scroll', function () {
   let customScrollContainer, visibleHeight, totalScrollHeight
 
-  beforeEach(function() {
+  beforeEach(function () {
     customScrollContainer = document.createElement('div')
@@ -21,3 +21,3 @@ customScrollContainer.id = 'testScrollContainer'
 
-  afterEach(function() {
+  afterEach(function () {
     reactDOM.unmountComponentAtNode(customScrollContainer)
@@ -50,3 +50,3 @@ document.body.removeChild(customScrollContainer)
   function renderCustomScrollWithRepeatedContent(container, props, visibleHeightArg, contentArr) {
-    const scrolledContent = contentArr.map(item =>
+    const scrolledContent = contentArr.map((item) =>
       React.createElement('div', {
@@ -75,6 +75,6 @@ style: {
 
-  describe('general functionality', function() {
-    describe('getScrollStyles', function() {
-      describe('when native scrollbar exists', function() {
-        beforeEach(function() {
+  describe('general functionality', function () {
+    describe('getScrollStyles', function () {
+      describe('when native scrollbar exists', function () {
+        beforeEach(function () {
           this.nativeScrollWidth = 15
@@ -93,3 +93,3 @@ const innerContainer = {
 
-        it('should position the inner container to the right with minus the size of the scrollbar', function() {
+        it('should position the inner container to the right with minus the size of the scrollbar', function () {
           const innerContainerStyle = this.customScroll.innerContainerRef.current.style
@@ -101,4 +101,4 @@
 
-      describe('when there is no native scrollbar (mac floating scrollbar)', function() {
-        beforeEach(function() {
+      describe('when there is no native scrollbar (mac floating scrollbar)', function () {
+        beforeEach(function () {
           const innerContainer = {
@@ -116,3 +116,3 @@ scrollTop: 0,
 
-        it('should position the inner container to the right with minus 20 pixels', function() {
+        it('should position the inner container to the right with minus 20 pixels', function () {
           const innerContainerStyle = this.customScroll.innerContainerRef.current.style
@@ -125,4 +125,4 @@
 
-    describe('when scrolling content', function() {
-      it('should update scroll handle position', function() {
+    describe('when scrolling content', function () {
+      it('should update scroll handle position', function () {
         const initialHandlePos = this.customScroll.getScrollHandleStyle().top
@@ -139,3 +139,3 @@ const contentContainerNode = this.customScroll.innerContainerRef.current
 
-      it('should call onScroll callback from props if defined', function() {
+      it('should call onScroll callback from props if defined', function () {
         const propsOnScroll = jasmine.createSpy('onScroll')
@@ -158,8 +158,8 @@ this.customScroll = renderCustomScroll(
 
-      describe('allow outer scroll', function() {
-        it('should block wheel event from reaching outer container if allow outer scroll is falsy', function() {
+      describe('allow outer scroll', function () {
+        it('should block wheel event from reaching outer container if allow outer scroll is falsy', function () {
           expect(true).toEqual(true)
         })
 
-        it('should not block wheel event if allow outer scroll is truthy', function() {
+        it('should not block wheel event if allow outer scroll is truthy', function () {
           expect(true).toEqual(true)
@@ -170,4 +170,4 @@ })
 
-    describe('scroll handle size', function() {
-      it('should set the size of the handle relative to the visible area, in the same ratio as the visible area to the content size', function() {
+    describe('scroll handle size', function () {
+      it('should set the size of the handle relative to the visible area, in the same ratio as the visible area to the content size', function () {
         const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
@@ -180,4 +180,4 @@ const handleHeight = parseInt(scrollHandle.style.height, 10)
 
-      describe('when the calculated handle height is less than minimum height', function() {
-        beforeEach(function() {
+      describe('when the calculated handle height is less than minimum height', function () {
+        beforeEach(function () {
           totalScrollHeight = 2000
@@ -188,3 +188,3 @@ visibleHeight = 200
 
-        it('should set the handle size to minimum default height', function() {
+        it('should set the handle size to minimum default height', function () {
           const defaultMinHeight = 38
@@ -198,3 +198,3 @@ const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
 
-        it('should set the handle size to minimum height from props', function() {
+        it('should set the handle size to minimum height from props', function () {
           this.customScroll = renderCustomScroll(
@@ -218,4 +218,4 @@ customScrollContainer,
 
-  describe('freeze position', function() {
-    beforeEach(function() {
+  describe('freeze position', function () {
+    beforeEach(function () {
       totalScrollHeight = 200
@@ -233,3 +233,3 @@ visibleHeight = 100
 
-    it('should not scroll', function() {
+    it('should not scroll', function () {
       const contentContainerNode = this.customScroll.innerContainerRef.current
@@ -244,5 +244,5 @@
 
-  describe('heightRelativeToParent', function() {
-    describe('when defined', function() {
-      beforeEach(function() {
+  describe('heightRelativeToParent', function () {
+    describe('when defined', function () {
+      beforeEach(function () {
         this.customScroll = renderCustomScroll(
@@ -258,3 +258,3 @@ customScrollContainer,
 
-      it('should set value passed as heightRelativeToParent on the root element, and 100% on other containers', function() {
+      it('should set value passed as heightRelativeToParent on the root element, and 100% on other containers', function () {
         const rootStyle = reactDOM.findDOMNode(this.customScroll).style
@@ -270,8 +270,8 @@ const innerContainerStyle = this.customScroll.innerContainerRef.current.style
 
-    describe('when not defined', function() {
-      beforeEach(function() {
+    describe('when not defined', function () {
+      beforeEach(function () {
         this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
       })
 
-      it('should set value passed as heightRelativeToParent on the root element, and 100% on other containers', function() {
+      it('should set value passed as heightRelativeToParent on the root element, and 100% on other containers', function () {
         const rootStyle = reactDOM.findDOMNode(this.customScroll).style
@@ -288,4 +288,4 @@ const innerContainerStyle = this.customScroll.innerContainerRef.current.style
 
-  describe('flex size', function() {
-    beforeEach(function() {
+  describe('flex size', function () {
+    beforeEach(function () {
       this.customScroll = renderCustomScroll(
@@ -301,3 +301,3 @@ customScrollContainer,
 
-    it('should set value passed as flex on the root element, and 100% on other containers', function() {
+    it('should set value passed as flex on the root element, and 100% on other containers', function () {
       const rootStyle = reactDOM.findDOMNode(this.customScroll).style
@@ -313,5 +313,5 @@ const innerContainerStyle = this.customScroll.innerContainerRef.current.style
 
-  describe('Right to left support', function() {
+  describe('Right to left support', function () {
     let customScroll
-    beforeEach(function() {
+    beforeEach(function () {
       customScroll = renderCustomScroll(
@@ -327,3 +327,3 @@ customScrollContainer,
 
-    it('should position the custom scrollbar on the left side of the content', function() {
+    it('should position the custom scrollbar on the left side of the content', function () {
       const customScrollbarStyle = window.getComputedStyle(customScroll.customScrollbarRef.current)
@@ -342,3 +342,3 @@ const innerContainerStyle = customScroll.innerContainerRef.current.style
 
-    describe('respond to click', function() {
+    describe('respond to click', function () {
       it('should respond to click on the custom scroll bar and change scroll pos', () => {
@@ -391,4 +391,4 @@ const initialHandlePos = customScroll.getScrollHandleStyle().top
 
-  describe('custom inner handle css class', function() {
-    it('should replace the default class', function() {
+  describe('custom inner handle css class', function () {
+    it('should replace the default class', function () {
       this.customScroll = renderCustomScroll(
@@ -417,4 +417,4 @@ customScrollContainer,
 
-  describe('on click events', function() {
-    beforeEach(function() {
+  describe('on click events', function () {
+    beforeEach(function () {
       this.initialHandlePos = this.customScroll.getScrollHandleStyle().top
@@ -428,3 +428,3 @@ this.outerContainer = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.outerContainer)
 
-    it('should do nothing if the click is out of the custom scrollbar area', function() {
+    it('should do nothing if the click is out of the custom scrollbar area', function () {
       const yUnderHandle = this.scrollHandleLayout.top + this.scrollHandleLayout.height + 20
@@ -444,3 +444,3 @@ const clickPosition = {
 
-    it('should do nothing if the click is on the custom scroll handle element', function() {
+    it('should do nothing if the click is on the custom scroll handle element', function () {
       const yOnHandle = this.scrollHandleLayout.top + this.scrollHandleLayout.height / 2
@@ -461,3 +461,3 @@ const xInCustomScrollbar = this.scrollHandleLayout.left + this.scrollHandleLayout.width / 2
 
-    it('should do nothing if there is no scroll', function() {
+    it('should do nothing if there is no scroll', function () {
       const contentHeight = 100
@@ -482,4 +482,4 @@ const visibleHeight = contentHeight + 100
 
-    describe('when click is on the custom scrollbar area, and not on the handle itself', function() {
-      it('should scroll downwards and update handle position, if click is below the handle', function() {
+    describe('when click is on the custom scrollbar area, and not on the handle itself', function () {
+      it('should scroll downwards and update handle position, if click is below the handle', function () {
         const yBelowHandle = this.scrollHandleLayout.top + this.scrollHandleLayout.height + 20
@@ -502,3 +502,3 @@ const xInCustomScrollbar = this.scrollHandleLayout.left + this.scrollHandleLayout.width / 2
 
-      it('should scroll upwards and update handle position, if click is above the handle', function() {
+      it('should scroll upwards and update handle position, if click is above the handle', function () {
         const yBelowHandle = this.scrollHandleLayout.top + this.scrollHandleLayout.height + 20
@@ -533,5 +533,5 @@ const xInCustomScrollbar = this.scrollHandleLayout.left + this.scrollHandleLayout.width / 2
 
-  describe('scrollTo', function() {
+  describe('scrollTo', function () {
     let customScroll, scrollToValue, outerContainer
-    beforeEach(function() {
+    beforeEach(function () {
       scrollToValue = 10
@@ -553,3 +553,3 @@ customScroll = renderCustomScroll(
 
-    it('should work on first render', function() {
+    it('should work on first render', function () {
       reactDOM.unmountComponentAtNode(customScrollContainer)
@@ -608,5 +608,5 @@
 
-  describe('keepAtBottom', function() {
-    describe('when false', function() {
-      it('should not scroll to bottom if the scroll is at the bottom', function() {
+  describe('keepAtBottom', function () {
+    describe('when false', function () {
+      it('should not scroll to bottom if the scroll is at the bottom', function () {
         const contentContainerNode = this.customScroll.innerContainerRef.current
@@ -627,5 +627,5 @@ const expectedScrollTop = totalScrollHeight - visibleHeight
 
-    describe('when true', function() {
-      describe('when content is added', function() {
-        it('should automatically scroll to bottom if the scroll is at the bottom', function() {
+    describe('when true', function () {
+      describe('when content is added', function () {
+        it('should automatically scroll to bottom if the scroll is at the bottom', function () {
           const addedContentHeight = 500
@@ -651,3 +651,3 @@ const contentContainerNode = this.customScroll.innerContainerRef.current
 
-        it('should not scroll to bottom if the scroll was not at the bottom', function() {
+        it('should not scroll to bottom if the scroll was not at the bottom', function () {
           const addedContentHeight = 50
@@ -670,8 +670,8 @@ const contentContainerNode = this.customScroll.innerContainerRef.current
       describe('when content is replaced, with the same size', () => {
-        it('should keep scroll at bottom', function() {
+        it('should keep scroll at bottom', function () {
           const contentContainerNode = this.customScroll.innerContainerRef.current
 
           const content = [1, 2, 3, 4, 5, 6, 7, 8]
-          const contentItems = content.map(index => ({ key: index, height: 40 }))
-          const newContentItems = content.map(index => ({ key: index + 1, height: 40 }))
+          const contentItems = content.map((index) => ({ key: index, height: 40 }))
+          const newContentItems = content.map((index) => ({ key: index + 1, height: 40 }))
 
@@ -697,4 +697,4 @@ // scroll to bottom
 
-      describe('when content is the same', function() {
-        it('should not scroll to bottom if the scroll is at the bottom', function() {
+      describe('when content is the same', function () {
+        it('should not scroll to bottom if the scroll is at the bottom', function () {
           const contentContainerNode = this.customScroll.innerContainerRef.current
@@ -713,3 +713,3 @@ const expectedScrollTop = totalScrollHeight - visibleHeight
 
-        it('should allow regular scroll', function() {
+        it('should allow regular scroll', function () {
           this.customScroll = renderCustomScroll(
@@ -716,0 +716,0 @@ customScrollContainer,

webpack.config.js

 const path = require('path')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
@@ -26,17 +26,15 @@ module.exports = [
           test: /\.scss$/,
-          use: ExtractTextPlugin.extract({
-            fallback: 'style-loader',
-            use: [
-              {
-                loader: 'css-loader',
-                options: {
-                  modules: {
-                    localIdentName: 'rcs-[local]'
-                  },
-                  localsConvention: 'dashes'
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  localIdentName: 'rcs-[local]',
+                  exportLocalsConvention: 'dashes'
                 }
-              },
-              { loader: 'sass-loader' }
-            ]
-          })
+              }
+            },
+            { loader: 'sass-loader' }
+          ]
         }
@@ -50,3 +48,3 @@ ]
       // new BundleAnalyzerPlugin(),
-      new ExtractTextPlugin('customScroll.css')
+      new MiniCssExtractPlugin({ filename: 'customScroll.css' })
     ],
@@ -75,2 +73,18 @@ externals: {
           }
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  localIdentName: 'rcs-[local]',
+                  exportLocalsConvention: 'dashes'
+                }
+              }
+            },
+            { loader: 'sass-loader' }
+          ]
         }
@@ -77,0 +91,0 @@ ]

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

346454

increased by31.88%

Number of package files

40

increased by2.56%

Lines of code

3347

increased by31.62%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

No dependency changes