react-custom-scroll - npm Package Compare versions

Comparing version 4.4.0 to 5.0.0

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

example/main.js

 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { FirstComp } from './firstComp/firstComp'
 
-ReactDOM.render(React.createElement(FirstComp), document.getElementById('body'))
+debugger
+const root = createRoot(document.getElementById('body'))
+root.render(React.createElement(FirstComp))

package.json

 {
   "name": "react-custom-scroll",
-  "version": "4.4.0",
+  "version": "5.0.0",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -30,3 +30,3 @@ "main": "index",
     "@babel/runtime": "^7.8.4",
-    "@types/react-dom": "^16.9.5",
+    "@types/react-dom": "^18.0.10",
     "babel-eslint": "^10.1.0",
@@ -50,7 +50,8 @@ "babel-loader": "^8.0.6",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.49.0",
     "sass-loader": "^11.1.1",
     "style-loader": "^1.3.0",
+    "wait-for-expect": "^3.0.2",
     "webpack": "^5.37.0",
@@ -61,4 +62,3 @@ "webpack-cli": "^4.7.0"
     "prop-types": "*",
-    "react": "*",
-    "react-dom": "*"
+    "react": "*"
   },
@@ -65,0 +65,0 @@ "keywords": [

README.md

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

src/main/customScroll.js

 import React, { Component, createRef } from 'react'
-import reactDOM from 'react-dom'
 import styles from './cs.scss'
@@ -97,2 +96,3 @@ import { simpleDebounce } from './simpleDebounce'
 
+  customScrollRef = createRef()
   innerContainerRef = createRef()
@@ -150,3 +150,3 @@ customScrollbarRef = createRef()
     }
-    const customScrollElm = reactDOM.findDOMNode(this)
+    const customScrollElm = this.customScrollRef.current
     const boundingRect = customScrollElm.getBoundingClientRect()
@@ -180,3 +180,3 @@ const customScrollbarBoundingRect = this.customScrollbarRef.current.getBoundingClientRect()
     }
-    const scrollHandle = reactDOM.findDOMNode(this.scrollHandleRef.current)
+    const scrollHandle = this.scrollHandleRef.current
     return isEventPosOnDomNode(event, scrollHandle)
@@ -186,3 +186,3 @@ }
   calculateNewScrollHandleTop = (clickEvent) => {
-    const domNode = reactDOM.findDOMNode(this)
+    const domNode = this.customScrollRef.current
     const boundingRect = domNode.getBoundingClientRect()
@@ -363,3 +363,3 @@ const currentTop = boundingRect.top + window.pageYOffset
     return (
-      <div className={className} style={rootStyle}>
+      <div className={className} style={rootStyle} ref={this.customScrollRef}>
         <div
@@ -366,0 +366,0 @@ className={styles.outerContainer}

No alert changes

Improved metrics

Total package byte prevSize

243352

increased by0.03%

Dependency count

2

decreased by-33.33%

Lines of code

2558

increased by0.08%

Worsened metrics

Dev dependency count

32

increased by3.23%

No dependency changes