react-custom-scroll - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

dist/reactCustomScroll.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(function(){try{return require("prop-types")}catch(e){}}(),require("react-dom"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react-dom","react"],t):"object"==typeof exports?exports.ReactCustomScroll=t(function(){try{return require("prop-types")}catch(e){}}(),require("react-dom"),require("react")):e.ReactCustomScroll=t(e["prop-types"],e["react-dom"],e.react)}(window,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,{configurable:!1,enumerable:!0,get:r})},o.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},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=4)}([function(t,o){if(void 0===e){var r=new Error('Cannot find module "prop-types"');throw r.code="MODULE_NOT_FOUND",r}t.exports=e},function(e,o){e.exports=t},function(e,t){e.exports=o},function(e,t,o){"use strict";var r=function(){function e(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)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),n=o(2),l=c(n),i=c(o(1)),s=c(o(9));function c(e){return e&&e.__esModule?e:{default:e}}var a=function(e,t){var o=void 0;return function(){clearTimeout(o),o=setTimeout(function(){e()},t)}},u=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 h(e,t){return e.clientX>t.left&&e.clientX<t.right&&e.clientY>t.top&&e.clientY<t.top+t.height}var d=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return 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)}},o.onScroll=function(e){o.props.freezePosition||(o.hideScrollThumb(),o.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),o.props.onScroll&&o.props.onScroll(e))},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),document.addEventListener("mouseup",o.onHandleDragEnd))},o.onTouchStart=function(){o.setState({onDrag:!0})},o.onHandleDrag=function(e){e.preventDefault();var t=e.pageY-o.startDragMousePos,r=u(o.startDragHandlePos+t,0,o.visibleHeight-o.scrollHandleHeight),n=o.getScrollValueFromHandlePosition(r);o.updateScrollPosition(n)},o.onHandleDragEnd=function(e){o.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",o.onHandleDrag),document.removeEventListener("mouseup",o.onHandleDragEnd)},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()}},o.setCustomScrollbarRef=function(e){e&&!o.customScrollbarRef&&(o.customScrollbarRef=e)},o.scrollbarYWidth=0,o.state={scrollPos:0,onDrag:!1},o.setRefElement=function(e){return function(t){t&&!o[e]&&(o[e]=t)}},o.hideScrollThumb=a(function(){o.setState({onDrag:!1})},500),o}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,n.Component),r(t,[{key:"componentDidMount",value:function(){void 0!==this.props.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.forceUpdate()}},{key:"componentWillReceiveProps",value:function(){this.externalRender=!0}},{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(),(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&&this.externalRender&&l&&this.updateScrollPosition(this.contentHeight-this.visibleHeight),this.externalRender=!1}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"adjustFreezePosition",value:function(e){var t=this.getScrolledElement(),o=this.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),e.freezePosition&&(t.scrollTop=this.state.scrollPos)}},{key:"toggleScrollIfNeeded",value:function(){var e=this.contentHeight-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())}},{key:"getScrollTop",value:function(){return this.getScrolledElement().scrollTop}},{key:"updateScrollPosition",value:function(e){var t=this.getScrolledElement(),o=u(e,0,this.contentHeight-this.visibleHeight);t.scrollTop=o,this.setState({scrollPos:o})}},{key:"isMouseEventOnCustomScrollbar",value:function(e){if(!this.customScrollbarRef)return!1;var t=i.default.findDOMNode(this).getBoundingClientRect(),o=this.customScrollbarRef.getBoundingClientRect(),r=this.props.rtl?{left:t.left,right:o.right}:{left:o.left,width:t.right};return h(e,Object.assign({},{left:t.left,right:t.right,top:t.top,height:t.height},r))}},{key:"isMouseEventOnScrollHandle",value:function(e){return!!this.scrollHandle&&function(e,t){return h(e,t.getBoundingClientRect())}(e,i.default.findDOMNode(this.scrollHandle))}},{key:"calculateNewScrollHandleTop",value:function(e){var t=i.default.findDOMNode(this).getBoundingClientRect().top+window.pageYOffset,o=e.pageY-t,r=this.getScrollHandleStyle().top;return o>r+this.scrollHandleHeight?r+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):r-Math.max(this.scrollHandleHeight,0)}},{key:"getScrollValueFromHandlePosition",value:function(e){return e/this.scrollRatio}},{key:"getScrollHandleStyle",value:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}}},{key:"adjustCustomScrollPosToContentPos",value:function(e){this.setState({scrollPos:e})}},{key:"getScrolledElement",value:function(){return this.innerContainer}},{key:"getInnerContainerClasses",value:function(){return this.state.scrollPos&&this.props.addScrolledClass?s.default.innerContainer+" "+s.default.contentScrolled:s.default.innerContainer}},{key:"getScrollStyles",value:function(){var e=this.scrollbarYWidth||20,t=this.props.rtl?"marginLeft":"marginRight",o={height:this.props.heightRelativeToParent||this.props.flex?"100%":""};o[t]=-1*e;var r={height:this.props.heightRelativeToParent||this.props.flex?"100%":"",overflowY:this.props.freezePosition?"hidden":"visible"};return r[t]=this.scrollbarYWidth?0:e,{innerContainer:o,contentWrapper:r}}},{key:"getOuterContainerStyle",value:function(){return{height:this.props.heightRelativeToParent||this.props.flex?"100%":""}}},{key:"getRootStyles",value:function(){var e={};return this.props.heightRelativeToParent?e.height=this.props.heightRelativeToParent:this.props.flex&&(e.flex=this.props.flex),e}},{key:"enforceMinHandleHeight",value:function(e){var t=this.props.minScrollHandleHeight;if(e.height>=t)return e;var o=(t-e.height)*(this.state.scrollPos/(this.contentHeight-this.visibleHeight));return{height:t,top:e.top-o}}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),o=this.enforceMinHandleHeight(this.getScrollHandleStyle());return l.default.createElement("div",{className:s.default.customScroll+" "+(this.state.onDrag?s.default.scrollHandleDragged:""),style:t},l.default.createElement("div",{className:s.default.outerContainer,style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onClick:this.onClick},this.hasScroll?l.default.createElement("div",{className:s.default.positioning},l.default.createElement("div",{ref:this.setCustomScrollbarRef,className:s.default.customScrollbar+" "+(this.props.rtl?s.default.customScrollbarRtl:""),key:"scrollbar"},l.default.createElement("div",{ref:this.setRefElement("scrollHandle"),className:s.default.customScrollHandle,style:o},l.default.createElement("div",{className:this.props.handleClass})))):null,l.default.createElement("div",{ref:this.setRefElement("innerContainer"),className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},l.default.createElement("div",{className:s.default.contentWrapper,ref:this.setRefElement("contentWrapper"),style:e.contentWrapper},this.props.children))))}}]),t}();try{var p=o(0);d.propTypes={children:p.any,allowOuterScroll:p.bool,heightRelativeToParent:p.string,onScroll:p.func,addScrolledClass:p.bool,freezePosition:p.bool,handleClass:p.string,minScrollHandleHeight:p.number,flex:p.string,rtl:p.bool,scrollTo:p.number,keepAtBottom:p.bool}}catch(e){}d.defaultProps={handleClass:s.default.innerHandle,minScrollHandleHeight:38},e.exports=d},function(e,t,o){e.exports=o(3)},,,,,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-dom"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react-dom","react"],t):"object"==typeof exports?exports.ReactCustomScroll=t(function(){try{return require("prop-types")}catch(e){}}(),require("react-dom"),require("react")):e.ReactCustomScroll=t(e["prop-types"],e["react-dom"],e.react)}("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,{configurable:!1,enumerable:!0,get:r})},o.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},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=4)}([function(t,o){if(void 0===e){var r=new Error('Cannot find module "prop-types"');throw r.code="MODULE_NOT_FOUND",r}t.exports=e},function(e,o){e.exports=t},function(e,t){e.exports=o},function(e,t,o){"use strict";var r=function(){function e(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)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),n=o(2),l=c(n),i=c(o(1)),s=c(o(9));function c(e){return e&&e.__esModule?e:{default:e}}var a=function(e,t){var o=void 0;return function(){clearTimeout(o),o=setTimeout(function(){e()},t)}},u=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 h(e,t){return e.clientX>t.left&&e.clientX<t.right&&e.clientY>t.top&&e.clientY<t.top+t.height}var d=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return 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)}},o.onScroll=function(e){o.props.freezePosition||(o.hideScrollThumb(),o.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),o.props.onScroll&&o.props.onScroll(e))},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),document.addEventListener("mouseup",o.onHandleDragEnd))},o.onTouchStart=function(){o.setState({onDrag:!0})},o.onHandleDrag=function(e){e.preventDefault();var t=e.pageY-o.startDragMousePos,r=u(o.startDragHandlePos+t,0,o.visibleHeight-o.scrollHandleHeight),n=o.getScrollValueFromHandlePosition(r);o.updateScrollPosition(n)},o.onHandleDragEnd=function(e){o.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",o.onHandleDrag),document.removeEventListener("mouseup",o.onHandleDragEnd)},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()}},o.setCustomScrollbarRef=function(e){o.customScrollbarRef=e},o.scrollbarYWidth=0,o.state={scrollPos:0,onDrag:!1},o.setRefElement=function(e){return function(t){t&&!o[e]&&(o[e]=t)}},o.hideScrollThumb=a(function(){o.setState({onDrag:!1})},500),o}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,n.Component),r(t,[{key:"componentDidMount",value:function(){void 0!==this.props.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.forceUpdate()}},{key:"componentWillReceiveProps",value:function(){this.externalRender=!0}},{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(),(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&&this.externalRender&&l&&this.updateScrollPosition(this.contentHeight-this.visibleHeight),this.externalRender=!1}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"adjustFreezePosition",value:function(e){var t=this.getScrolledElement(),o=this.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),e.freezePosition&&(t.scrollTop=this.state.scrollPos)}},{key:"toggleScrollIfNeeded",value:function(){var e=this.contentHeight-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())}},{key:"getScrollTop",value:function(){return this.getScrolledElement().scrollTop}},{key:"updateScrollPosition",value:function(e){var t=this.getScrolledElement(),o=u(e,0,this.contentHeight-this.visibleHeight);t.scrollTop=o,this.setState({scrollPos:o})}},{key:"isMouseEventOnCustomScrollbar",value:function(e){if(!this.customScrollbarRef)return!1;var t=i.default.findDOMNode(this).getBoundingClientRect(),o=this.customScrollbarRef.getBoundingClientRect(),r=this.props.rtl?{left:t.left,right:o.right}:{left:o.left,width:t.right};return h(e,Object.assign({},{left:t.left,right:t.right,top:t.top,height:t.height},r))}},{key:"isMouseEventOnScrollHandle",value:function(e){return!!this.scrollHandle&&function(e,t){return h(e,t.getBoundingClientRect())}(e,i.default.findDOMNode(this.scrollHandle))}},{key:"calculateNewScrollHandleTop",value:function(e){var t=i.default.findDOMNode(this).getBoundingClientRect().top+window.pageYOffset,o=e.pageY-t,r=this.getScrollHandleStyle().top;return o>r+this.scrollHandleHeight?r+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):r-Math.max(this.scrollHandleHeight,0)}},{key:"getScrollValueFromHandlePosition",value:function(e){return e/this.scrollRatio}},{key:"getScrollHandleStyle",value:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}}},{key:"adjustCustomScrollPosToContentPos",value:function(e){this.setState({scrollPos:e})}},{key:"getScrolledElement",value:function(){return this.innerContainer}},{key:"getInnerContainerClasses",value:function(){return this.state.scrollPos&&this.props.addScrolledClass?s.default.innerContainer+" "+s.default.contentScrolled:s.default.innerContainer}},{key:"getScrollStyles",value:function(){var e=this.scrollbarYWidth||20,t=this.props.rtl?"marginLeft":"marginRight",o={height:this.props.heightRelativeToParent||this.props.flex?"100%":""};o[t]=-1*e;var r={height:this.props.heightRelativeToParent||this.props.flex?"100%":"",overflowY:this.props.freezePosition?"hidden":"visible"};return r[t]=this.scrollbarYWidth?0:e,{innerContainer:o,contentWrapper:r}}},{key:"getOuterContainerStyle",value:function(){return{height:this.props.heightRelativeToParent||this.props.flex?"100%":""}}},{key:"getRootStyles",value:function(){var e={};return this.props.heightRelativeToParent?e.height=this.props.heightRelativeToParent:this.props.flex&&(e.flex=this.props.flex),e}},{key:"enforceMinHandleHeight",value:function(e){var t=this.props.minScrollHandleHeight;if(e.height>=t)return e;var o=(t-e.height)*(this.state.scrollPos/(this.contentHeight-this.visibleHeight));return{height:t,top:e.top-o}}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),o=this.enforceMinHandleHeight(this.getScrollHandleStyle());return l.default.createElement("div",{className:s.default.customScroll+" "+(this.state.onDrag?s.default.scrollHandleDragged:""),style:t},l.default.createElement("div",{className:s.default.outerContainer,style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onClick:this.onClick},this.hasScroll?l.default.createElement("div",{className:s.default.positioning},l.default.createElement("div",{ref:this.setCustomScrollbarRef,className:s.default.customScrollbar+" "+(this.props.rtl?s.default.customScrollbarRtl:""),key:"scrollbar"},l.default.createElement("div",{ref:this.setRefElement("scrollHandle"),className:s.default.customScrollHandle,style:o},l.default.createElement("div",{className:this.props.handleClass})))):null,l.default.createElement("div",{ref:this.setRefElement("innerContainer"),className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},l.default.createElement("div",{className:s.default.contentWrapper,ref:this.setRefElement("contentWrapper"),style:e.contentWrapper},this.props.children))))}}]),t}();try{var p=o(0);d.propTypes={children:p.any,allowOuterScroll:p.bool,heightRelativeToParent:p.string,onScroll:p.func,addScrolledClass:p.bool,freezePosition:p.bool,handleClass:p.string,minScrollHandleHeight:p.number,flex:p.string,rtl:p.bool,scrollTo:p.number,keepAtBottom:p.bool}}catch(e){}d.defaultProps={handleClass:s.default.innerHandle,minScrollHandleHeight:38},e.exports=d},function(e,t,o){e.exports=o(3)},,,,,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"}}])});

example/firstComp/firstComp.js

@@ -1,4 +0,4 @@
-import React, {Component, Fragment} from 'react'
-import {times, map} from 'lodash/fp'
-import {demoText} from './demoText'
+import React, { Component, Fragment } from 'react'
+import { times, map } from 'lodash/fp'
+import { demoText } from './demoText'
 import CustomScroll from '../../dist/reactCustomScroll'
@@ -9,3 +9,3 @@
   name = name.replace(/[\[\]]/g, '\\$&')
-  const regex = new RegExp(`[?&]${ name }(=([^&#]*)|&|#|$)`)
+  const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`)
   const results = regex.exec(url)
@@ -33,3 +33,3 @@ if (!results) {
   getDynamicContent() {
-    return times(index => `Content #${ index}`, this.state.dynamicContentCounter)
+    return times(index => `Content #${index}`, this.state.dynamicContentCounter)
   }
@@ -70,3 +70,2 @@ addContent = () => {
           </div>
-
         </div>
@@ -136,3 +135,10 @@ <div key="cool-example" className="container custom-scroll-example">
                   <div className="content-fill">
-                    {map(content => <div className="dynamic-content" key={content}>{content}</div>, this.getDynamicContent())}
+                    {map(
+                      content => (
+                        <div className="dynamic-content" key={content}>
+                          {content}
+                        </div>
+                      ),
+                      this.getDynamicContent()
+                    )}
                   </div>
@@ -143,15 +149,14 @@ </div>
 
-            <button className="dynamic-content-button"
-                    key="addContent"
-                    onClick={this.addContent}>Add Content
+            <button className="dynamic-content-button" key="addContent" onClick={this.addContent}>
+              Add Content
             </button>
-            <button className="dynamic-content-button"
-                    key="removeContent"
-                    onClick={this.removeContent}>Remove Content
+            <button className="dynamic-content-button" key="removeContent" onClick={this.removeContent}>
+              Remove Content
             </button>
           </div>
         )}
-        <div className="scroll-creator"/>
-      </div>)
+        <div className="scroll-creator" />
+      </div>
+    )
   }
 }

example/main.js

 import React from 'react'
 import ReactDOM from 'react-dom'
-import {FirstComp} from './firstComp/firstComp'
+import { FirstComp } from './firstComp/firstComp'
 
 ReactDOM.render(React.createElement(FirstComp), document.getElementById('body'))
-

package.json

 {
   "name": "react-custom-scroll",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -26,2 +26,3 @@ "main": "index",
   "devDependencies": {
+    "@types/react-dom": "^16.8.4",
     "autoprefixer": "6.3.6",
@@ -43,10 +44,11 @@ "babel-core": "^6.26.3",
     "jasmine-core": "^3.1.0",
-    "karma": "^2.0.2",
-    "karma-chrome-launcher": "0.2.2",
-    "karma-jasmine": "^1.1.2",
+    "karma": "^4.1.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-jasmine": "^2.0.1",
     "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "^3.0.0",
+    "karma-webpack": "^4.0.2",
     "lodash": "^4.17.10",
     "node-sass": "4.7.2",
     "postcss-cli": "2.5.1",
+    "prettier": "^1.18.2",
     "prop-types": "15.5.8",
@@ -53,0 +55,0 @@ "react": "^16.3.1",

README.md

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

src/main/customScroll.js

@@ -1,2 +0,2 @@
-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import reactDOM from 'react-dom'
@@ -17,4 +17,4 @@ import styles from './cs.scss'
 const ensureWithinLimits = (value, min, max) => {
-  min = (!min && min !== 0) ? value : min
-  max = (!max && max !== 0) ? value : max
+  min = !min && min !== 0 ? value : min
+  max = !max && max !== 0 ? value : max
   if (min > max) {
@@ -39,6 +39,8 @@ console.error('min limit is greater than max limit')
 function isEventPosOnLayout(event, layout) {
-  return (event.clientX > layout.left &&
+  return (
+    event.clientX > layout.left &&
     event.clientX < layout.right &&
     event.clientY > layout.top &&
-    event.clientY < layout.top + layout.height)
+    event.clientY < layout.top + layout.height
+  )
 }
@@ -64,3 +66,3 @@
       this.setState({
-        onDrag: false,
+        onDrag: false
       })
@@ -100,7 +102,3 @@ }, 500)
       this.updateScrollPosition(this.props.scrollTo)
-    } else if (
-      this.props.keepAtBottom &&
-      this.externalRender &&
-      reachedBottomOnPrevRender
-    ) {
+    } else if (this.props.keepAtBottom && this.externalRender && reachedBottomOnPrevRender) {
       this.updateScrollPosition(this.contentHeight - this.visibleHeight)
@@ -167,15 +165,21 @@ }
     const customScrollbarBoundingRect = this.customScrollbarRef.getBoundingClientRect()
-    const horizontalClickArea = this.props.rtl ? {
-      left: boundingRect.left,
-      right: customScrollbarBoundingRect.right
-    } : {
-      left: customScrollbarBoundingRect.left,
-      width: boundingRect.right
-    }
-    const customScrollbarLayout = Object.assign({}, {
-      left: boundingRect.left,
-      right: boundingRect.right,
-      top: boundingRect.top,
-      height: boundingRect.height
-    }, horizontalClickArea)
+    const horizontalClickArea = this.props.rtl
+      ? {
+          left: boundingRect.left,
+          right: customScrollbarBoundingRect.right
+        }
+      : {
+          left: customScrollbarBoundingRect.left,
+          width: boundingRect.right
+        }
+    const customScrollbarLayout = Object.assign(
+      {},
+      {
+        left: boundingRect.left,
+        right: boundingRect.right,
+        top: boundingRect.top,
+        height: boundingRect.height
+      },
+      horizontalClickArea
+    )
     return isEventPosOnLayout(event, customScrollbarLayout)
@@ -199,5 +203,6 @@ }
     let newScrollHandleTop
-    const isBelowHandle = clickYRelativeToScrollbar > (scrollHandleTop + this.scrollHandleHeight)
+    const isBelowHandle = clickYRelativeToScrollbar > scrollHandleTop + this.scrollHandleHeight
     if (isBelowHandle) {
-      newScrollHandleTop = scrollHandleTop + Math.min(this.scrollHandleHeight, this.visibleHeight - this.scrollHandleHeight)
+      newScrollHandleTop =
+        scrollHandleTop + Math.min(this.scrollHandleHeight, this.visibleHeight - this.scrollHandleHeight)
     } else {
@@ -210,3 +215,3 @@ newScrollHandleTop = scrollHandleTop - Math.max(this.scrollHandleHeight, 0)
   getScrollValueFromHandlePosition(handlePosition) {
-    return (handlePosition) / this.scrollRatio
+    return handlePosition / this.scrollRatio
   }
@@ -262,3 +267,3 @@
     })
-  }  
+  }
 
@@ -268,3 +273,7 @@ onHandleDrag = event => {
     const mouseDeltaY = event.pageY - this.startDragMousePos
-    const handleTopPosition = ensureWithinLimits(this.startDragHandlePos + mouseDeltaY, 0, this.visibleHeight - this.scrollHandleHeight)
+    const handleTopPosition = ensureWithinLimits(
+      this.startDragHandlePos + mouseDeltaY,
+      0,
+      this.visibleHeight - this.scrollHandleHeight
+    )
     const newScrollValue = this.getScrollValueFromHandlePosition(handleTopPosition)
@@ -290,3 +299,3 @@ this.updateScrollPosition(newScrollValue)
     const maxScroll = totalHeight - e.currentTarget.offsetHeight
-    const delta = e.deltaY % 3 ? (e.deltaY) : (e.deltaY * 10)
+    const delta = e.deltaY % 3 ? e.deltaY : e.deltaY * 10
     if (contentNode.scrollTop + delta <= 0) {
@@ -313,7 +322,7 @@ contentNode.scrollTop = 0
     const innerContainerStyle = {
-      height: (this.props.heightRelativeToParent || this.props.flex) ? '100%' : ''
+      height: this.props.heightRelativeToParent || this.props.flex ? '100%' : ''
     }
     innerContainerStyle[marginKey] = -1 * scrollSize
     const contentWrapperStyle = {
-      height: (this.props.heightRelativeToParent || this.props.flex) ? '100%' : '',
+      height: this.props.heightRelativeToParent || this.props.flex ? '100%' : '',
       overflowY: this.props.freezePosition ? 'hidden' : 'visible'
@@ -331,3 +340,3 @@ }
     return {
-      height: (this.props.heightRelativeToParent || this.props.flex) ? '100%' : ''
+      height: this.props.heightRelativeToParent || this.props.flex ? '100%' : ''
     }
@@ -356,3 +365,4 @@ }
     const scrollPositionToAvailableScrollRatio = this.state.scrollPos / (this.contentHeight - this.visibleHeight)
-    const scrollHandlePosAdjustmentForMinHeight = diffHeightBetweenMinAndCalculated * scrollPositionToAvailableScrollRatio
+    const scrollHandlePosAdjustmentForMinHeight =
+      diffHeightBetweenMinAndCalculated * scrollPositionToAvailableScrollRatio
     const handlePosition = calculatedStyle.top - scrollHandlePosAdjustmentForMinHeight
@@ -367,5 +377,3 @@
   setCustomScrollbarRef = elm => {
-    if (elm && !this.customScrollbarRef) {
-      this.customScrollbarRef = elm
-    }
+    this.customScrollbarRef = elm
   }
@@ -379,29 +387,42 @@
     return (
-      <div className={`${styles.customScroll} ${this.state.onDrag ? styles.scrollHandleDragged : ''}`}
-           style={rootStyle}>
-        <div className={styles.outerContainer}
-             style={this.getOuterContainerStyle()}
-             onMouseDown={this.onMouseDown}
-             onTouchStart={this.onTouchStart}
-             onClick={this.onClick}>
+      <div
+        className={`${styles.customScroll} ${this.state.onDrag ? styles.scrollHandleDragged : ''}`}
+        style={rootStyle}
+      >
+        <div
+          className={styles.outerContainer}
+          style={this.getOuterContainerStyle()}
+          onMouseDown={this.onMouseDown}
+          onTouchStart={this.onTouchStart}
+          onClick={this.onClick}
+        >
           {this.hasScroll ? (
             <div className={styles.positioning}>
-              <div ref={this.setCustomScrollbarRef}
-                   className={`${styles.customScrollbar} ${ this.props.rtl ? styles.customScrollbarRtl : ''}`}
-                   key="scrollbar">
-                <div ref={this.setRefElement('scrollHandle')}
-                     className={styles.customScrollHandle}
-                     style={scrollHandleStyle}>
-                  <div className={this.props.handleClass}/>
+              <div
+                ref={this.setCustomScrollbarRef}
+                className={`${styles.customScrollbar} ${this.props.rtl ? styles.customScrollbarRtl : ''}`}
+                key="scrollbar"
+              >
+                <div
+                  ref={this.setRefElement('scrollHandle')}
+                  className={styles.customScrollHandle}
+                  style={scrollHandleStyle}
+                >
+                  <div className={this.props.handleClass} />
                 </div>
               </div>
-            </div>) : null}
-          <div ref={this.setRefElement('innerContainer')}
-               className={this.getInnerContainerClasses()}
-               style={scrollStyles.innerContainer}
-               onScroll={this.onScroll}
-               onWheel={this.blockOuterScroll}>
-            <div className={styles.contentWrapper}
-                 ref={this.setRefElement('contentWrapper')}
-                 style={scrollStyles.contentWrapper}>
+            </div>
+          ) : null}
+          <div
+            ref={this.setRefElement('innerContainer')}
+            className={this.getInnerContainerClasses()}
+            style={scrollStyles.innerContainer}
+            onScroll={this.onScroll}
+            onWheel={this.blockOuterScroll}
+          >
+            <div
+              className={styles.contentWrapper}
+              ref={this.setRefElement('contentWrapper')}
+              style={scrollStyles.contentWrapper}
+            >
               {this.props.children}
@@ -439,2 +460,2 @@ </div>
 
-module.exports = CustomScroll
+module.exports = CustomScroll

src/test/customScroll.spec.js

 import React from 'react'
-import TestUtils from 'react-dom/test-utils'
+import * as TestUtils from 'react-dom/test-utils'
 import reactDOM from 'react-dom'
@@ -7,6 +7,6 @@ import CustomScroll from '../main/customScroll.js'
 
-describe('custom scroll', function () {
-  let customScrollContainer
+describe('custom scroll', function() {
+  let customScrollContainer, visibleHeight, totalScrollHeight
 
-  beforeEach(function () {
+  beforeEach(function() {
     customScrollContainer = document.createElement('div')
@@ -16,8 +16,8 @@ customScrollContainer.id = 'testScrollContainer'
 
-    this.totalScrollHeight = 200
-    this.visibleHeight = 100
-    this.customScroll = renderCustomScroll(customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight)
+    totalScrollHeight = 200
+    visibleHeight = 100
+    this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
   })
 
-  afterEach(function () {
+  afterEach(function() {
     reactDOM.unmountComponentAtNode(customScrollContainer)
@@ -27,15 +27,19 @@ document.body.removeChild(customScrollContainer)
 
-  function renderCustomScroll(container, props, visibleHeight, contentHeight) {
+  function renderCustomScroll(container, props, visibleHeightArg, contentHeightArg) {
     const scrolledContent = React.createElement('div', {
       style: {
-        height: contentHeight,
+        height: contentHeightArg,
         width: 50
       }
     })
-    const content = React.createElement('div', {
-      style: {
-        maxHeight: visibleHeight,
-        width: 50
-      }
-    }, scrolledContent)
+    const content = React.createElement(
+      'div',
+      {
+        style: {
+          maxHeight: visibleHeightArg,
+          width: 50
+        }
+      },
+      scrolledContent
+    )
     const customScroll = reactDOM.render(React.createElement(CustomScroll, props, content), container)
@@ -46,16 +50,22 @@ customScroll.forceUpdate()
 
-  function renderCustomScrollWithRepeatedContent(container, props, visibleHeight, contentArr) {
-    const scrolledContent = contentArr.map(item => React.createElement('div', {
-      style: {
-        height: item.height,
-        width: 50
+  function renderCustomScrollWithRepeatedContent(container, props, visibleHeightArg, contentArr) {
+    const scrolledContent = contentArr.map(item =>
+      React.createElement('div', {
+        style: {
+          height: item.height,
+          width: 50
+        },
+        key: item.key
+      })
+    )
+    const content = React.createElement(
+      'div',
+      {
+        style: {
+          maxHeight: visibleHeightArg,
+          width: 50
+        }
       },
-      key: item.key
-    }))
-    const content = React.createElement('div', {
-      style: {
-        maxHeight: visibleHeight,
-        width: 50
-      }
-    }, scrolledContent)
+      scrolledContent
+    )
     const customScroll = reactDOM.render(React.createElement(CustomScroll, props, content), container)
@@ -66,6 +76,6 @@ customScroll.forceUpdate()
 
-  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
@@ -84,11 +94,11 @@ 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.innerContainer.style
 
-          expect(innerContainerStyle.marginRight).toEqual(`${-1 * this.nativeScrollWidth  }px`)
+          expect(innerContainerStyle.marginRight).toEqual(`${-1 * this.nativeScrollWidth}px`)
         })
       })
 
-      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 = {
@@ -106,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.innerContainer.style
@@ -115,8 +125,8 @@
 
-    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
         const contentContainerNode = this.customScroll.innerContainer
 
-        contentContainerNode.scrollTop = this.totalScrollHeight / 4
+        contentContainerNode.scrollTop = totalScrollHeight / 4
         TestUtils.Simulate.scroll(contentContainerNode)
@@ -126,10 +136,15 @@
 
-        expect(newHandlePos).toEqual(initialHandlePos + this.visibleHeight / 4)
+        expect(newHandlePos).toEqual(initialHandlePos + visibleHeight / 4)
       })
 
-      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')
-        this.customScroll = renderCustomScroll(customScrollContainer, {
-          onScroll: propsOnScroll
-        }, this.visibleHeight, this.totalScrollHeight)
+        this.customScroll = renderCustomScroll(
+          customScrollContainer,
+          {
+            onScroll: propsOnScroll
+          },
+          visibleHeight,
+          totalScrollHeight
+        )
         this.customScroll.forceUpdate()
@@ -143,8 +158,8 @@ const contentContainerNode = this.customScroll.innerContainer
 
-      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)
@@ -155,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)
@@ -162,13 +177,13 @@ const handleHeight = parseInt(scrollHandle.style.height, 10)
         expect(scrollHandle).toBeTruthy()
-        expect(handleHeight / this.visibleHeight).toEqual(this.visibleHeight / this.totalScrollHeight)
+        expect(handleHeight / visibleHeight).toEqual(visibleHeight / totalScrollHeight)
       })
 
-      describe('when the calculated handle height is less than minimum height', function () {
-        beforeEach(function () {
-          this.totalScrollHeight = 2000
-          this.visibleHeight = 200
-          this.customScroll = renderCustomScroll(customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight)
+      describe('when the calculated handle height is less than minimum height', function() {
+        beforeEach(function() {
+          totalScrollHeight = 2000
+          visibleHeight = 200
+          this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
         })
 
-        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
@@ -182,6 +197,11 @@ const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
 
-        it('should set the handle size to minimum height from props', function () {
-          this.customScroll = renderCustomScroll(customScrollContainer, {
-            minScrollHandleHeight: 50
-          }, this.visibleHeight, this.totalScrollHeight)
+        it('should set the handle size to minimum height from props', function() {
+          this.customScroll = renderCustomScroll(
+            customScrollContainer,
+            {
+              minScrollHandleHeight: 50
+            },
+            visibleHeight,
+            totalScrollHeight
+          )
           const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
@@ -197,15 +217,20 @@ const handleHeight = parseInt(scrollHandle.style.height, 10)
 
-  describe('freeze position', function () {
-    beforeEach(function () {
-      this.totalScrollHeight = 200
-      this.visibleHeight = 100
-      this.customScroll = renderCustomScroll(customScrollContainer, {
-        freezePosition: true
-      }, this.visibleHeight, this.totalScrollHeight)
+  describe('freeze position', function() {
+    beforeEach(function() {
+      totalScrollHeight = 200
+      visibleHeight = 100
+      this.customScroll = renderCustomScroll(
+        customScrollContainer,
+        {
+          freezePosition: true
+        },
+        visibleHeight,
+        totalScrollHeight
+      )
     })
 
-    it('should not scroll', function () {
+    it('should not scroll', function() {
       const contentContainerNode = this.customScroll.innerContainer
 
-      contentContainerNode.scrollTop = this.totalScrollHeight / 4
+      contentContainerNode.scrollTop = totalScrollHeight / 4
       TestUtils.Simulate.scroll(contentContainerNode)
@@ -217,11 +242,16 @@
 
-  describe('heightRelativeToParent', function () {
-    describe('when defined', function () {
-      beforeEach(function () {
-        this.customScroll = renderCustomScroll(customScrollContainer, {
-          heightRelativeToParent: '70%'
-        }, this.visibleHeight, this.totalScrollHeight)
+  describe('heightRelativeToParent', function() {
+    describe('when defined', function() {
+      beforeEach(function() {
+        this.customScroll = renderCustomScroll(
+          customScrollContainer,
+          {
+            heightRelativeToParent: '70%'
+          },
+          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
@@ -231,3 +261,2 @@ const innerContainerStyle = this.customScroll.innerContainer.style
 
-
         expect(rootStyle.height).toEqual('70%')
@@ -239,8 +268,8 @@ expect(innerContainerStyle.height).toEqual('100%')
 
-    describe('when not defined', function () {
-      beforeEach(function () {
-        this.customScroll = renderCustomScroll(customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight)
+    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
@@ -250,3 +279,2 @@ const innerContainerStyle = this.customScroll.innerContainer.style
 
-
         expect(rootStyle.height).toBeFalsy()
@@ -259,10 +287,15 @@ expect(innerContainerStyle.height).toBeFalsy()
 
-  describe('flex size', function () {
-    beforeEach(function () {
-      this.customScroll = renderCustomScroll(customScrollContainer, {
-        flex: '2'
-      }, this.visibleHeight, this.totalScrollHeight)
+  describe('flex size', function() {
+    beforeEach(function() {
+      this.customScroll = renderCustomScroll(
+        customScrollContainer,
+        {
+          flex: '2'
+        },
+        visibleHeight,
+        totalScrollHeight
+      )
     })
 
-    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
@@ -272,3 +305,2 @@ const innerContainerStyle = this.customScroll.innerContainer.style
 
-
       expect(rootStyle.flexGrow).toEqual('2')
@@ -280,11 +312,16 @@ expect(innerContainerStyle.height).toEqual('100%')
 
-  describe('Right to left support', function () {
+  describe('Right to left support', function() {
     let customScroll
-    beforeEach(function () {
-      customScroll = renderCustomScroll(customScrollContainer, {
-        rtl: true
-      }, this.visibleHeight, this.totalScrollHeight)
+    beforeEach(function() {
+      customScroll = renderCustomScroll(
+        customScrollContainer,
+        {
+          rtl: true
+        },
+        visibleHeight,
+        totalScrollHeight
+      )
     })
 
-    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)
@@ -299,3 +336,3 @@ const innerContainerStyle = customScroll.innerContainer.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', () => {
@@ -348,10 +385,21 @@ const initialHandlePos = customScroll.getScrollHandleStyle().top
 
-  describe('custom inner handle css class', function () {
-    it('should replace the default class', function () {
-      this.customScroll = renderCustomScroll(customScrollContainer, {
-        handleClass: 'some-custom-class'
-      }, this.visibleHeight, this.totalScrollHeight)
+  describe('custom inner handle css class', function() {
+    it('should replace the default class', function() {
+      this.customScroll = renderCustomScroll(
+        customScrollContainer,
+        {
+          handleClass: 'some-custom-class'
+        },
+        visibleHeight,
+        totalScrollHeight
+      )
 
-      const scrollHandleWithDefaultClass = TestUtils.scryRenderedDOMComponentsWithClass(this.customScroll, styles.innerHandle)
-      const scrollHandleWithCustomClass = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, 'some-custom-class')
+      const scrollHandleWithDefaultClass = TestUtils.scryRenderedDOMComponentsWithClass(
+        this.customScroll,
+        styles.innerHandle
+      )
+      const scrollHandleWithCustomClass = TestUtils.findRenderedDOMComponentWithClass(
+        this.customScroll,
+        'some-custom-class'
+      )
 
@@ -363,4 +411,4 @@ expect(scrollHandleWithCustomClass).toBeTruthy()
 
-  describe('on click events', function () {
-    beforeEach(function () {
+  describe('on click events', function() {
+    beforeEach(function() {
       this.initialHandlePos = this.customScroll.getScrollHandleStyle().top
@@ -374,3 +422,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
@@ -390,3 +438,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
@@ -407,3 +455,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
@@ -428,4 +476,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
@@ -442,7 +490,9 @@ const xInCustomScrollbar = this.scrollHandleLayout.left + this.scrollHandleLayout.width / 2
 
-        expect(this.customScroll.getScrollHandleStyle().top).toEqual(this.initialHandlePos + this.scrollHandleLayout.height)
+        expect(this.customScroll.getScrollHandleStyle().top).toEqual(
+          this.initialHandlePos + this.scrollHandleLayout.height
+        )
         expect(this.innerContainer.scrollTop).toBeGreaterThan(this.initialScrollPos)
       })
 
-      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
@@ -477,9 +527,12 @@ const xInCustomScrollbar = this.scrollHandleLayout.left + this.scrollHandleLayout.width / 2
 
-  describe('scrollTo', function () {
-    let customScroll, scrollToValue, outerContainer, visibleHeight, totalScrollHeight
-    beforeEach(function () {
+  describe('scrollTo', function() {
+    let customScroll, scrollToValue, outerContainer
+    beforeEach(function() {
       scrollToValue = 10
-      visibleHeight = this.visibleHeight
-      totalScrollHeight = this.totalScrollHeight
-      customScroll = renderCustomScroll(customScrollContainer, {scrollTo: scrollToValue}, visibleHeight, totalScrollHeight)
+      customScroll = renderCustomScroll(
+        customScrollContainer,
+        { scrollTo: scrollToValue },
+        visibleHeight,
+        totalScrollHeight
+      )
       outerContainer = TestUtils.findRenderedDOMComponentWithClass(customScroll, styles.outerContainer)
@@ -494,6 +547,11 @@ })
 
-    it('should work on first render', function () {
+    it('should work on first render', function() {
       reactDOM.unmountComponentAtNode(customScrollContainer)
 
-      customScroll = renderCustomScroll(customScrollContainer, {scrollTo: scrollToValue}, visibleHeight, totalScrollHeight)
+      customScroll = renderCustomScroll(
+        customScrollContainer,
+        { scrollTo: scrollToValue },
+        visibleHeight,
+        totalScrollHeight
+      )
 
@@ -528,3 +586,3 @@ const contentContainerNode = customScroll.innerContainer
     it('should limit the top position of the scroll handle to visible area', () => {
-      customScroll = renderCustomScroll(customScrollContainer, {scrollTo: -1000}, visibleHeight, totalScrollHeight)
+      customScroll = renderCustomScroll(customScrollContainer, { scrollTo: -1000 }, visibleHeight, totalScrollHeight)
 
@@ -537,3 +595,3 @@ const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(customScroll, styles.customScrollHandle)
     it('should limit the bottom position of the scroll handle to visible area', () => {
-      customScroll = renderCustomScroll(customScrollContainer, {scrollTo: 5000}, visibleHeight, totalScrollHeight)
+      customScroll = renderCustomScroll(customScrollContainer, { scrollTo: 5000 }, visibleHeight, totalScrollHeight)
 
@@ -546,10 +604,10 @@ const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(customScroll, styles.customScrollHandle)
 
-  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.innerContainer
-        const expectedScrollTop = this.totalScrollHeight - this.visibleHeight
+        const expectedScrollTop = totalScrollHeight - visibleHeight
 
         // scroll to bottom
-        renderCustomScroll(customScrollContainer, {scrollTo: this.totalScrollHeight}, this.visibleHeight, this.totalScrollHeight)
+        renderCustomScroll(customScrollContainer, { scrollTo: totalScrollHeight }, visibleHeight, totalScrollHeight)
 
@@ -559,3 +617,3 @@ expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop)
         // add content
-        renderCustomScroll(customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight + 500)
+        renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight + 500)
 
@@ -566,16 +624,21 @@ expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop)
 
-    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
           const contentContainerNode = this.customScroll.innerContainer
-          const expectedScrollTop = this.totalScrollHeight - this.visibleHeight + addedContentHeight
+          const expectedScrollTop = totalScrollHeight - visibleHeight + addedContentHeight
 
           // scroll to bottom
-          renderCustomScroll(customScrollContainer, {scrollTo: this.totalScrollHeight}, this.visibleHeight, this.totalScrollHeight)
+          renderCustomScroll(customScrollContainer, { scrollTo: totalScrollHeight }, visibleHeight, totalScrollHeight)
 
-          expect(contentContainerNode.scrollTop).toEqual(this.totalScrollHeight - this.visibleHeight)
+          expect(contentContainerNode.scrollTop).toEqual(totalScrollHeight - visibleHeight)
 
           // add content
-          renderCustomScroll(customScrollContainer, {keepAtBottom: true}, this.visibleHeight, this.totalScrollHeight + addedContentHeight)
+          renderCustomScroll(
+            customScrollContainer,
+            { keepAtBottom: true },
+            visibleHeight,
+            totalScrollHeight + addedContentHeight
+          )
 
@@ -585,3 +648,3 @@ expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop)
 
-        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
@@ -592,3 +655,8 @@ const contentContainerNode = this.customScroll.innerContainer
           // add content
-          renderCustomScroll(customScrollContainer, {keepAtBottom: true}, this.visibleHeight, this.totalScrollHeight + addedContentHeight)
+          renderCustomScroll(
+            customScrollContainer,
+            { keepAtBottom: true },
+            visibleHeight,
+            totalScrollHeight + addedContentHeight
+          )
 
@@ -600,18 +668,23 @@ expect(contentContainerNode.scrollTop).toEqual(initialScrollTop)
       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.innerContainer
 
           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 }))
 
           // scroll to bottom
-          renderCustomScrollWithRepeatedContent(customScrollContainer, {
-            keepAtBottom: true,
-            scrollTo: 1500
-          }, 100, contentItems)
+          renderCustomScrollWithRepeatedContent(
+            customScrollContainer,
+            {
+              keepAtBottom: true,
+              scrollTo: 1500
+            },
+            100,
+            contentItems
+          )
           const scrollPosAfterFirstRender = contentContainerNode.scrollTop
 
           // replace content
-          renderCustomScrollWithRepeatedContent(customScrollContainer, {keepAtBottom: true}, 100, newContentItems)
+          renderCustomScrollWithRepeatedContent(customScrollContainer, { keepAtBottom: true }, 100, newContentItems)
 
@@ -622,13 +695,13 @@ expect(contentContainerNode.scrollTop).toEqual(scrollPosAfterFirstRender)
 
-      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.innerContainer
-          const expectedScrollTop = this.totalScrollHeight - this.visibleHeight
+          const expectedScrollTop = totalScrollHeight - visibleHeight
 
           // scroll to bottom
-          renderCustomScroll(customScrollContainer, {scrollTo: this.totalScrollHeight}, this.visibleHeight, this.totalScrollHeight)
+          renderCustomScroll(customScrollContainer, { scrollTo: totalScrollHeight }, visibleHeight, totalScrollHeight)
 
           expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop)
 
-          renderCustomScroll(customScrollContainer, {keepAtBottom: true}, this.visibleHeight, this.totalScrollHeight)
+          renderCustomScroll(customScrollContainer, { keepAtBottom: true }, visibleHeight, totalScrollHeight)
 
@@ -638,9 +711,13 @@ expect(contentContainerNode.scrollTop).toEqual(expectedScrollTop)
 
-        it('should allow regular scroll', function () {
-          this.customScroll = renderCustomScroll(customScrollContainer, {
-            keepAtBottom: true,
-            scrollTo: this.totalScrollHeight
-          }, this.visibleHeight, this.totalScrollHeight)
+        it('should allow regular scroll', function() {
+          this.customScroll = renderCustomScroll(
+            customScrollContainer,
+            {
+              keepAtBottom: true,
+              scrollTo: totalScrollHeight
+            },
+            visibleHeight,
+            totalScrollHeight
+          )
 
-
           const contentContainerNode = this.customScroll.innerContainer
@@ -656,3 +733,38 @@ contentContainerNode.scrollTop = 0
   })
+
+  describe('dynamic content size', () => {
+    beforeEach(() => {
+      this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
+      this.initialHandlePos = this.customScroll.getScrollHandleStyle().top
+      this.outerContainer = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.outerContainer)
+      this.scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
+      this.scrollHandleLayout = this.scrollHandle.getBoundingClientRect()
+      this.innerContainer = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.innerContainer)
+      this.initialScrollPos = this.innerContainer.scrollTop
+    })
+
+    describe('after content is resized to non scroll state and back to scroll state', () => {
+      beforeEach(() => {
+        this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, 10)
+        this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
+      })
+
+      it('should not respond to click on content area', () => {
+        const innerContainerLayout = this.innerContainer.getBoundingClientRect()
+        const yOnContent = innerContainerLayout.top + 70
+        const xOnContent = innerContainerLayout.left + 10
+        const clickPosition = {
+          clientY: yOnContent,
+          pageY: yOnContent,
+          clientX: xOnContent,
+          pageX: xOnContent
+        }
+
+        TestUtils.Simulate.click(this.outerContainer, clickPosition)
+
+        expect(this.customScroll.getScrollHandleStyle().top).toEqual(this.initialHandlePos)
+        expect(this.innerContainer.scrollTop).toEqual(this.initialScrollPos)
+      })
+    })
+  })
 })
-

No alert changes

Improved metrics

Number of package files

38

increased by5.56%

Lines of code

2633

increased by5.62%

Worsened metrics

Total package byte prevSize

520315

decreased by-0.66%

Dev dependency count

34

increased by6.25%

No dependency changes