react-custom-scroll - npm Package Compare versions

Comparing version 1.10.1 to 2.0.0

dist/reactCustomScroll.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],e):"object"==typeof exports?exports.ReactCustomScroll=e(require("react"),require("react-dom")):t.ReactCustomScroll=e(t.react,t["react-dom"])}(this,function(t,e){return function(t){function e(r){if(o[r])return o[r].exports;var s=o[r]={exports:{},id:r,loaded:!1};return t[r].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){t.exports=o(1)},function(t,e,o){"use strict";function r(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function s(t,e,o){return e=e||0===e?e:t,o=o||0===o?o:t,e>o?(console.error("min limit is greater than max limit"),t):t<e?e:t>o?o:t}function l(t,e){var o=e.getBoundingClientRect();return t.clientX>o.left&&t.clientX<o.left+o.width&&t.clientY>o.top&&t.clientY<o.top+o.height}function i(t){var e=this.props.minScrollHandleHeight;if(t.height>=e)return t;var o=e-t.height,r=this.state.scrollPos/(this.contentHeight-this.visibleHeight),s=o*r,l=t.top-s;return{height:e,top:l}}var n=o(2),a=o(3);t.exports=n.createClass({displayName:"customScroll",propTypes:{children:n.PropTypes.any,allowOuterScroll:n.PropTypes.bool,heightRelativeToParent:n.PropTypes.string,onScroll:n.PropTypes.func,addScrolledClass:n.PropTypes.bool,freezePosition:n.PropTypes.bool,handleClass:n.PropTypes.string,minScrollHandleHeight:n.PropTypes.number,flex:n.PropTypes.string,rtl:n.PropTypes.bool,scrollTo:n.PropTypes.number,keepAtBottom:n.PropTypes.bool},getDefaultProps:function(){return{handleClass:"inner-handle",minScrollHandleHeight:38}},getInitialState:function(){return this.scrollbarYWidth=0,{scrollPos:0,onDrag:!1}},componentDidMount:function(){this.forceUpdate()},componentDidUpdate:function(t,e){var o=this.contentHeight,r=this.visibleHeight,s=a.findDOMNode(this),l=s.getBoundingClientRect(),i=this.getScrolledElement(),n=e.scrollPos>=o-r;this.contentHeight=i.scrollHeight,this.scrollbarYWidth=i.offsetWidth-i.clientWidth,this.visibleHeight=i.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1;var c=this.state.scrollPos>=this.contentHeight-this.visibleHeight,h=o!==this.contentHeight;this.toggleScrollIfNeeded(),this.position={top:l.top+window.pageYOffset,left:l.left+window.pageXOffset},(this.props.freezePosition||t.freezePosition)&&this.adjustFreezePosition(t),"undefined"!=typeof this.props.scrollTo&&this.props.scrollTo!==t.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&h&&n&&!c&&this.updateScrollPosition(this.contentHeight-this.visibleHeight)},componentWillUnmount:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},adjustFreezePosition:function(t){var e=this.getScrolledElement(),o=this.refs.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),t.freezePosition&&(e.scrollTop=this.state.scrollPos)},toggleScrollIfNeeded:function(){var t=this.contentHeight-this.visibleHeight>1;this.hasScroll!==t&&(this.hasScroll=t,this.forceUpdate())},getScrollTop:function(){return this.getScrolledElement().scrollTop},updateScrollPosition:function(t){var e=this.getScrolledElement();e.scrollTop=t,this.setState({scrollPos:t})},onClick:function(t){if(this.hasScroll&&this.isMouseEventOnCustomScrollbar(t)&&!this.isMouseEventOnScrollHandle(t)){var e=this.calculateNewScrollHandleTop(t),o=this.getScrollValueFromHandlePosition(e);this.updateScrollPosition(o)}},isMouseEventOnCustomScrollbar:function(t){var e=a.findDOMNode(this.refs.customScrollbar);return l(t,e)},isMouseEventOnScrollHandle:function(t){var e=a.findDOMNode(this.refs.scrollHandle);return l(t,e)},calculateNewScrollHandleTop:function(t){var e=t.pageY-this.position.top,o=this.getScrollHandleStyle().top,r=void 0,s=e>o+this.scrollHandleHeight;return r=s?o+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):o-Math.max(this.scrollHandleHeight,0)},getScrollValueFromHandlePosition:function(t){return t/this.scrollRatio},getScrollHandleStyle:function(){var t=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:t}},adjustCustomScrollPosToContentPos:function(t){this.setState({scrollPos:t})},onScroll:function(t){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(t.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(t))},getScrolledElement:function(){return this.refs.innerContainer},onMouseDown:function(t){this.hasScroll&&this.isMouseEventOnScrollHandle(t)&&(this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=t.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd))},onHandleDrag:function(t){t.preventDefault();var e=t.pageY-this.startDragMousePos,o=s(this.startDragHandlePos+e,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(r)},onHandleDragEnd:function(t){this.setState({onDrag:!1}),t.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},blockOuterScroll:function(t){if(!this.props.allowOuterScroll){var e=t.currentTarget,o=t.currentTarget.scrollHeight,r=o-t.currentTarget.offsetHeight,s=t.deltaY%3?t.deltaY:10*t.deltaY;e.scrollTop+s<=0?(e.scrollTop=0,t.preventDefault()):e.scrollTop+s>=r&&(e.scrollTop=r,t.preventDefault()),t.stopPropagation()}},getInnerContainerClasses:function(){var t="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(t+=" content-scrolled"),t},getScrollStyles:function(){var t,e,o=this.scrollbarYWidth||20,s=this.props.rtl?"marginLeft":"marginRight",l=(t={},r(t,s,-1*o),r(t,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),t),i=(e={},r(e,s,this.scrollbarYWidth?0:o),r(e,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),r(e,"overflowY",this.props.freezePosition?"hidden":"visible"),e);return{innerContainer:l,contentWrapper:i}},getOuterContainerStyle:function(){return{height:this.props.heightRelativeToParent||this.props.flex?"100%":""}},getRootStyles:function(){var t={};return this.props.heightRelativeToParent?t.height=this.props.heightRelativeToParent:this.props.flex&&(t.flex=this.props.flex),t},render:function(){var t=this.getScrollStyles(),e=this.getRootStyles(),o=i.call(this,this.getScrollHandleStyle());return n.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:e},n.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onClick:this.onClick},this.hasScroll?n.createElement("div",{ref:"customScrollbar",className:"custom-scrollbar"+(this.props.rtl?" custom-scrollbar-rtl":""),key:"scrollbar"},n.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:o},n.createElement("div",{className:this.props.handleClass}))):null,n.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:t.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},n.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:t.contentWrapper},this.props.children))))}})},function(e,o){e.exports=t},function(t,o){t.exports=e}])});
+!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"])}(this,function(e,t,o){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){e.exports=o(1)},function(e,t,o){"use strict";function r(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(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}function i(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)}function s(e,t,o){return t=t||0===t?t:e,o=o||0===o?o:e,t>o?(console.error("min limit is greater than max limit"),e):e<t?t:e>o?o:e}function a(e,t){var o=t.getBoundingClientRect();return e.clientX>o.left&&e.clientX<o.left+o.width&&e.clientY>o.top&&e.clientY<o.top+o.height}function c(e){var t=this.props.minScrollHandleHeight;if(e.height>=t)return e;var o=t-e.height,r=this.state.scrollPos/(this.contentHeight-this.visibleHeight),n=o*r,l=e.top-n;return{height:t,top:l}}var h=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}}(),u=o(3),p=o(4),d=function(e){function t(e){n(this,t);var o=l(this,Object.getPrototypeOf(t).call(this,e));return o.scrollbarYWidth=0,o.state={scrollPos:0,onDrag:!1},o.onHandleDrag=o.onHandleDrag.bind(o),o.onHandleDragEnd=o.onHandleDragEnd.bind(o),o.blockOuterScroll=o.blockOuterScroll.bind(o),o.onScroll=o.onScroll.bind(o),o.onMouseDown=o.onMouseDown.bind(o),o.onClick=o.onClick.bind(o),o}return i(t,e),h(t,[{key:"componentDidMount",value:function(){this.forceUpdate()}},{key:"componentDidUpdate",value:function(e,t){var o=this.contentHeight,r=this.visibleHeight,n=p.findDOMNode(this),l=n.getBoundingClientRect(),i=this.getScrolledElement(),s=t.scrollPos>=o-r;this.contentHeight=i.scrollHeight,this.scrollbarYWidth=i.offsetWidth-i.clientWidth,this.visibleHeight=i.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1;var a=this.state.scrollPos>=this.contentHeight-this.visibleHeight,c=o!==this.contentHeight;this.toggleScrollIfNeeded(),this.position={top:l.top+window.pageYOffset,left:l.left+window.pageXOffset},(this.props.freezePosition||e.freezePosition)&&this.adjustFreezePosition(e),"undefined"!=typeof this.props.scrollTo&&this.props.scrollTo!==e.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&c&&s&&!a&&this.updateScrollPosition(this.contentHeight-this.visibleHeight)}},{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.refs.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();t.scrollTop=e,this.setState({scrollPos:e})}},{key:"onClick",value:function(e){if(this.hasScroll&&this.isMouseEventOnCustomScrollbar(e)&&!this.isMouseEventOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),o=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(o)}}},{key:"isMouseEventOnCustomScrollbar",value:function(e){var t=p.findDOMNode(this.refs.customScrollbar);return a(e,t)}},{key:"isMouseEventOnScrollHandle",value:function(e){var t=p.findDOMNode(this.refs.scrollHandle);return a(e,t)}},{key:"calculateNewScrollHandleTop",value:function(e){var t=e.pageY-this.position.top,o=this.getScrollHandleStyle().top,r=void 0,n=t>o+this.scrollHandleHeight;return r=n?o+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):o-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:"onScroll",value:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))}},{key:"getScrolledElement",value:function(){return this.refs.innerContainer}},{key:"onMouseDown",value:function(e){this.hasScroll&&this.isMouseEventOnScrollHandle(e)&&(this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd))}},{key:"onHandleDrag",value:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,o=s(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(r)}},{key:"onHandleDragEnd",value:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"blockOuterScroll",value:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,o=e.currentTarget.scrollHeight,r=o-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()}}},{key:"getInnerContainerClasses",value:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e}},{key:"getScrollStyles",value:function(){var e,t,o=this.scrollbarYWidth||20,n=this.props.rtl?"marginLeft":"marginRight",l=(e={},r(e,n,-1*o),r(e,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),e),i=(t={},r(t,n,this.scrollbarYWidth?0:o),r(t,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),r(t,"overflowY",this.props.freezePosition?"hidden":"visible"),t);return{innerContainer:l,contentWrapper:i}}},{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:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),o=c.call(this,this.getScrollHandleStyle());return u.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:t},u.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onClick:this.onClick},this.hasScroll?u.createElement("div",{ref:"customScrollbar",className:"custom-scrollbar"+(this.props.rtl?" custom-scrollbar-rtl":""),key:"scrollbar"},u.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:o},u.createElement("div",{className:this.props.handleClass}))):null,u.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},u.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},this.props.children))))}}]),t}(u.Component);try{var f=o(2);d.propTypes={children:f.any,allowOuterScroll:f.bool,heightRelativeToParent:f.string,onScroll:f.func,addScrolledClass:f.bool,freezePosition:f.bool,handleClass:f.string,minScrollHandleHeight:f.number,flex:f.string,rtl:f.bool,scrollTo:f.number,keepAtBottom:f.bool}}catch(g){}d.defaultProps={handleClass:"inner-handle",minScrollHandleHeight:38},e.exports=d},function(t,o){if("undefined"==typeof 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}])});

example/main.js

@@ -5,4 +5,5 @@ require.config({
         lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min',
-        react: 'https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons',
-        'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min',
+        react: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-with-addons',
+        'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min',
+        'prop-types': '../node_modules/prop-types/prop-types',
         customScroll: '../dist/reactCustomScroll'
@@ -9,0 +10,0 @@ },

package.json

 {
   "name": "react-custom-scroll",
-  "version": "1.10.1",
+  "version": "2.0.0",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -35,4 +35,4 @@ "main": "index",
     "eslint-config-wix-editor": "^0.2.3",
+    "eslint-plugin-lodash": "2.2.5",
     "eslint-plugin-react": "^6.10.0",
-    "eslint-plugin-lodash": "2.2.5",
     "jasmine": "2.4.1",
@@ -45,9 +45,10 @@ "jasmine-core": "2.4.1",
     "karma-webpack": "1.7.0",
+    "lodash": "^4.17.4",
     "node-sass": "3.4.2",
     "postcss-cli": "2.5.1",
-    "react": "^0.14.7",
-    "react-addons-test-utils": "0.14.7",
-    "react-dom": "^0.14.7",
+    "prop-types": "15.5.8",
+    "react": "^15.5.0",
+    "react-addons-test-utils": "15.5.1",
+    "react-dom": "^15.5.4",
     "react-templates": "^0.4.1",
-    "lodash": "^4.17.4",
     "style-loader": "0.13.1",
@@ -58,3 +59,4 @@ "webpack": "^1.12.13"
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "prop-types": "*"
   },
@@ -61,0 +63,0 @@ "keywords": [

README.md

@@ -17,2 +17,3 @@ [![NPM version][npm-image]][npm-url]
 In both cases **you have to include the customScroll.css** file in your page.  
+It is located in /dist directory  
 
@@ -19,0 +20,0 @@ Wrap your content with the custom scroll component

src/main/customScroll.js

@@ -46,34 +46,24 @@ 'use strict';
 
-module.exports = React.createClass({
-    displayName: 'customScroll',
-    propTypes: {
-        children: React.PropTypes.any,
-        allowOuterScroll: React.PropTypes.bool,
-        heightRelativeToParent: React.PropTypes.string,
-        onScroll: React.PropTypes.func,
-        addScrolledClass: React.PropTypes.bool,
-        freezePosition: React.PropTypes.bool,
-        handleClass: React.PropTypes.string,
-        minScrollHandleHeight: React.PropTypes.number,
-        flex: React.PropTypes.string,
-        rtl: React.PropTypes.bool,
-        scrollTo: React.PropTypes.number,
-        keepAtBottom: React.PropTypes.bool
-    },
-    getDefaultProps() {
-        return {
-            handleClass: 'inner-handle',
-            minScrollHandleHeight: 38
-        };
-    },
-    getInitialState() {
+class CustomScroll extends React.Component {
+    constructor(props) {
+        super(props);
+
         this.scrollbarYWidth = 0;
-        return {
+        this.state = {
             scrollPos: 0,
             onDrag: false
         };
-    },
+
+        this.onHandleDrag = this.onHandleDrag.bind(this);
+        this.onHandleDragEnd = this.onHandleDragEnd.bind(this);
+        this.blockOuterScroll = this.blockOuterScroll.bind(this);
+        this.onScroll = this.onScroll.bind(this);
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onClick = this.onClick.bind(this);
+    }
+
     componentDidMount() {
         this.forceUpdate();
-    },
+    }
+
     componentDidUpdate(prevProps, prevState) {
@@ -109,7 +99,9 @@ const prevContentHeight = this.contentHeight;
         }
-    },
+    }
+
     componentWillUnmount() {
         document.removeEventListener('mousemove', this.onHandleDrag);
         document.removeEventListener('mouseup', this.onHandleDragEnd);
-    },
+    }
+
     adjustFreezePosition(prevProps) {
@@ -126,3 +118,4 @@ const innerContainer = this.getScrolledElement();
         }
-    },
+    }
+
     toggleScrollIfNeeded() {
@@ -134,6 +127,8 @@ const shouldHaveScroll = this.contentHeight - this.visibleHeight > 1;
         }
-    },
+    }
+
     getScrollTop() {
         return this.getScrolledElement().scrollTop;
-    },
+    }
+
     updateScrollPosition(scrollValue) {
@@ -145,3 +140,4 @@ const innerContainer = this.getScrolledElement();
         });
-    },
+    }
+
     onClick(event) {
@@ -155,11 +151,14 @@ if (!this.hasScroll || !this.isMouseEventOnCustomScrollbar(event) || this.isMouseEventOnScrollHandle(event)) {
         this.updateScrollPosition(newScrollValue);
-    },
+    }
+
     isMouseEventOnCustomScrollbar(event) {
         const customScrollbar = reactDOM.findDOMNode(this.refs.customScrollbar);
         return isEventPosOnDomNode(event, customScrollbar);
-    },
+    }
+
     isMouseEventOnScrollHandle(event) {
         const scrollHandle = reactDOM.findDOMNode(this.refs.scrollHandle);
         return isEventPosOnDomNode(event, scrollHandle);
-    },
+    }
+
     calculateNewScrollHandleTop(clickEvent) {
@@ -176,6 +175,8 @@ const clickYRelativeToScrollbar = clickEvent.pageY - this.position.top;
         return newScrollHandleTop;
-    },
+    }
+
     getScrollValueFromHandlePosition(handlePosition) {
         return (handlePosition) / this.scrollRatio;
-    },
+    }
+
     getScrollHandleStyle() {
@@ -188,3 +189,4 @@ const handlePosition = this.state.scrollPos * this.scrollRatio;
         };
-    },
+    }
+
     adjustCustomScrollPosToContentPos(scrollPosition) {
@@ -194,3 +196,4 @@ this.setState({
         });
-    },
+    }
+
     onScroll(event) {
@@ -204,6 +207,8 @@ if (this.props.freezePosition) {
         }
-    },
+    }
+
     getScrolledElement() {
         return this.refs.innerContainer;
-    },
+    }
+
     onMouseDown(event) {
@@ -221,3 +226,4 @@ if (!this.hasScroll || !this.isMouseEventOnScrollHandle(event)) {
         document.addEventListener('mouseup', this.onHandleDragEnd);
-    },
+    }
+
     onHandleDrag(event) {
@@ -229,3 +235,4 @@ event.preventDefault();
         this.updateScrollPosition(newScrollValue);
-    },
+    }
+
     onHandleDragEnd(e) {
@@ -238,3 +245,4 @@ this.setState({
         document.removeEventListener('mouseup', this.onHandleDragEnd);
-    },
+    }
+
     blockOuterScroll(e) {
@@ -256,3 +264,4 @@ if (this.props.allowOuterScroll) {
         e.stopPropagation();
-    },
+    }
+
     getInnerContainerClasses() {
@@ -264,3 +273,4 @@ let res = 'inner-container';
         return res;
-    },
+    }
+
     getScrollStyles() {
@@ -283,3 +293,4 @@ const scrollSize = this.scrollbarYWidth || 20;
         };
-    },
+    }
+
     getOuterContainerStyle() {
@@ -289,3 +300,4 @@ return {
         };
-    },
+    }
+
     getRootStyles() {
@@ -301,3 +313,4 @@ const result = {};
         return result;
-    },
+    }
+
     render() {
@@ -316,9 +329,9 @@ const scrollStyles = this.getScrollStyles();
                     {this.hasScroll ? (
-                        <div ref="customScrollbar"
-                             className={`custom-scrollbar${ this.props.rtl ? ' custom-scrollbar-rtl' : ''}`}
-                             key="scrollbar">
-                            <div ref="scrollHandle" className="custom-scroll-handle" style={scrollHandleStyle}>
-                                <div className={this.props.handleClass}></div>
-                            </div>
-                        </div>) : null}
+                            <div ref="customScrollbar"
+                                 className={`custom-scrollbar${ this.props.rtl ? ' custom-scrollbar-rtl' : ''}`}
+                                 key="scrollbar">
+                                <div ref="scrollHandle" className="custom-scroll-handle" style={scrollHandleStyle}>
+                                    <div className={this.props.handleClass}></div>
+                                </div>
+                            </div>) : null}
                     <div ref="innerContainer"
@@ -339,2 +352,27 @@ className={this.getInnerContainerClasses()}
     }
-});
+}
+
+try {
+    const PropTypes = require('prop-types');
+    CustomScroll.propTypes = {
+        children: PropTypes.any,
+        allowOuterScroll: PropTypes.bool,
+        heightRelativeToParent: PropTypes.string,
+        onScroll: PropTypes.func,
+        addScrolledClass: PropTypes.bool,
+        freezePosition: PropTypes.bool,
+        handleClass: PropTypes.string,
+        minScrollHandleHeight: PropTypes.number,
+        flex: PropTypes.string,
+        rtl: PropTypes.bool,
+        scrollTo: PropTypes.number,
+        keepAtBottom: PropTypes.bool
+    };
+} catch (e) {} //eslint-disable-line no-empty
+
+CustomScroll.defaultProps = {
+    handleClass: 'inner-handle',
+    minScrollHandleHeight: 38
+};
+
+module.exports = CustomScroll;

webpack.config.js

@@ -32,4 +32,5 @@ 'use strict';
         'react-dom': 'react-dom',
+        'prop-types': 'prop-types',
         lodash: 'lodash'
     }
 };

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133234

increased by1.69%

Lines of code

2204

increased by0.41%

Number of lines in readme file

135

increased by0.75%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

27

increased by3.85%

No dependency changes