react-custom-scroll - npm Package Compare versions

Comparing version 1.6.1 to 1.6.2

dist/reactCustomScroll.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports.ReactCustomScroll=t(require("react"),require("react-dom")):e.ReactCustomScroll=t(e.react,e["react-dom"])}(this,function(e,t){return function(e){function t(r){if(o[r])return o[r].exports;var l=o[r]={exports:{},id:r,loaded:!1};return e[r].call(l.exports,l,l.exports,t),l.loaded=!0,l.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){if(t=t||0===t?t:e,o=o||0===o?o:e,t>o)throw"min limit is greater than max limit";return t>e?t:e>o?o:e}var l=o(2),n=o(3);e.exports=l.createClass({displayName:"customScroll",propTypes:{allowOuterScroll:l.PropTypes.bool,heightRelativeToParent:l.PropTypes.string,onScroll:l.PropTypes.func,addScrolledClass:l.PropTypes.bool,freezePosition:l.PropTypes.bool,handleClass:l.PropTypes.string},getDefaultProps:function(){return{handleClass:"inner-handle"}},getInitialState:function(){return this.scrollbarYWidth=0,{scrollPos:0,onDrag:!1}},componentDidMount:function(){this.forceUpdate()},componentDidUpdate:function(e){var t=n.findDOMNode(this),o=t.getBoundingClientRect(),r=this.getScrolledElement(),l=r.scrollHeight;this.scrollbarYWidth=r.offsetWidth-r.clientWidth,this.visibleHeight=r.clientHeight,this.scrollRatio=l?this.visibleHeight/l:1,this.toggleScrollIfNeeded(l),this.position={top:o.top+window.pageYOffset,left:o.left+window.pageXOffset},this.freezePosition(e)},componentWillUnmount:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},freezePosition: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)},toggleScrollIfNeeded:function(e){var t=e-this.visibleHeight>1;this.hasScroll!==t&&(this.hasScroll=t,this.forceUpdate())},getScrollTop:function(){return this.getScrolledElement().scrollTop},updateScrollPosition:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})},onCustomScrollClick:function(e){if(!this.isClickOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),o=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(o)}},isClickOnScrollHandle:function(e){var t=n.findDOMNode(this.refs.scrollHandle);return e.target===t||e.target.parentElement===t},calculateNewScrollHandleTop:function(e){var t,o=e.pageY-this.position.top,r=this.getScrollHandleStyle().top,l=o>r+this.scrollHandleHeight;return t=l?r+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):r-Math.max(this.scrollHandleHeight,0)},getScrollValueFromHandlePosition:function(e){return e/this.scrollRatio},getScrollHandleStyle:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}},adjustCustomScrollPosToContentPos:function(e){this.setState({scrollPos:e})},onScroll:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))},getScrolledElement:function(){return this.refs.innerContainer},onHandleMouseDown:function(e){this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd)},onHandleDrag:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,o=r(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),l=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(l)},onHandleDragEnd:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},blockOuterScroll:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,o=e.currentTarget.scrollHeight,r=o-e.currentTarget.offsetHeight,l=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+l<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+l>=r&&(t.scrollTop=r,e.preventDefault()),e.stopPropagation()}},getInnerContainerClasses:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e},getScrollStyles:function(){var e=this.scrollbarYWidth||20,t={marginRight:-1*e,height:this.props.heightRelativeToParent?"100%":""},o={marginRight:this.scrollbarYWidth?0:e,height:this.props.heightRelativeToParent?"100%":"",overflowY:this.props.freezePosition?"hidden":"visible"};return{innerContainer:t,contentWrapper:o}},getOuterContainerStyle:function(){return{height:this.props.heightRelativeToParent?"100%":""}},render:function(){var e=this.getScrollStyles(),t={height:this.props.heightRelativeToParent};return l.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:t},l.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle()},this.hasScroll?l.createElement("div",{className:"custom-scrollbar",onClick:this.onCustomScrollClick,key:"scrollbar"},l.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:this.getScrollHandleStyle(),onMouseDown:this.onHandleMouseDown},l.createElement("div",{className:"inner-handle"}))):null,l.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},l.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},this.props.children))))}})},function(t,o){t.exports=e},function(e,o){e.exports=t}])});
+!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 l=o[r]={exports:{},id:r,loaded:!1};return t[r].call(l.exports,l,l.exports,e),l.loaded=!0,l.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=e||0===e?e:t,o=o||0===o?o:t,e>o?(console.error("min limit is greater than max limit"),t):e>t?e:t>o?o:t}function l(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),l=o*r,n=t.top-l;return{height:e,top:n}}var n=o(2),s=o(3);t.exports=n.createClass({displayName:"customScroll",propTypes:{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},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){var e=s.findDOMNode(this),o=e.getBoundingClientRect(),r=this.getScrolledElement();this.contentHeight=r.scrollHeight,this.scrollbarYWidth=r.offsetWidth-r.clientWidth,this.visibleHeight=r.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1,this.toggleScrollIfNeeded(),this.position={top:o.top+window.pageYOffset,left:o.left+window.pageXOffset},this.freezePosition(t)},componentWillUnmount:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},freezePosition: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})},onCustomScrollClick:function(t){if(!this.isClickOnScrollHandle(t)){var e=this.calculateNewScrollHandleTop(t),o=this.getScrollValueFromHandlePosition(e);this.updateScrollPosition(o)}},isClickOnScrollHandle:function(t){var e=s.findDOMNode(this.refs.scrollHandle);return t.target===e||t.target.parentElement===e},calculateNewScrollHandleTop:function(t){var e,o=t.pageY-this.position.top,r=this.getScrollHandleStyle().top,l=o>r+this.scrollHandleHeight;return e=l?r+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):r-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},onHandleMouseDown:function(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=r(this.startDragHandlePos+e,0,this.visibleHeight-this.scrollHandleHeight),l=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(l)},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,l=t.deltaY%3?t.deltaY:10*t.deltaY;e.scrollTop+l<=0?(e.scrollTop=0,t.preventDefault()):e.scrollTop+l>=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=this.scrollbarYWidth||20,e={marginRight:-1*t,height:this.props.heightRelativeToParent?"100%":""},o={marginRight:this.scrollbarYWidth?0:t,height:this.props.heightRelativeToParent?"100%":"",overflowY:this.props.freezePosition?"hidden":"visible"};return{innerContainer:e,contentWrapper:o}},getOuterContainerStyle:function(){return{height:this.props.heightRelativeToParent?"100%":""}},render:function(){var t=this.getScrollStyles(),e={height:this.props.heightRelativeToParent},o=l.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()},this.hasScroll?n.createElement("div",{className:"custom-scrollbar",onClick:this.onCustomScrollClick,key:"scrollbar"},n.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:o,onMouseDown:this.onHandleMouseDown},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}])});

example/firstComp/firstComp.js

@@ -1,2 +0,2 @@
-define(['React', 'lodash', './demoText', './firstComp.rt'], function (React, _, demoText, template) {
+define(['react', 'lodash', './demoText', './firstComp.rt'], function (React, _, demoText, template) {
     'use strict';
@@ -3,0 +3,0 @@

example/firstComp/firstComp.rt.js

 define([
-    'React',
+    'react',
     'lodash',
     'customScroll'
-], function (React, _, cs) {
+], function (React, _, customScroll) {
     'use strict';
-    function scopeCustomScroll1() {
-        var customScroll = cs.CustomScroll;
+    return function () {
         return React.createElement('div', { 'className': 'example-wrapper' }, React.createElement('div', { 'className': 'container native-scroll' }, React.createElement('label', { 'className': 'side-title' }, 'Native Scroll'), React.createElement('div', { 'className': 'panel' }, React.createElement('div', { 'className': 'panel-header' }, React.createElement('label', { 'className': 'panel-title' }, 'This is boring')), React.createElement('div', { 'className': 'panel-content-native panel-content' }, React.createElement('div', { 'className': 'content-fill' }, this.getText())))), React.createElement('div', { 'className': 'container custom-scroll-example' }, React.createElement('label', { 'className': 'side-title' }, 'Custom Scroll'), React.createElement('div', { 'className': 'panel' }, React.createElement('div', { 'className': 'panel-header' }, React.createElement('label', { 'className': 'panel-title' }, 'Cool Scrollbar !')), React.createElement(customScroll, { 'allowOuterScroll': true }, React.createElement('div', { 'className': 'panel-content-custom panel-content' }, React.createElement('div', { 'className': 'content-fill' }, this.getText()))))), React.createElement('div', { 'className': 'container custom-scroll-example' }, React.createElement('label', { 'className': 'side-title' }, 'Crazy Designer'), React.createElement('div', { 'className': 'panel crazy-scroll' }, React.createElement('div', { 'className': 'panel-header' }, React.createElement('label', { 'className': 'panel-title' }, 'Who designed this ???')), React.createElement(customScroll, { 'allowOuterScroll': true }, React.createElement('div', { 'className': 'panel-content-custom panel-content' }, React.createElement('div', { 'className': 'content-fill' }, this.getText()))))), React.createElement('div', { 'className': 'scroll-creator' }));
-    }
-    return function () {
-        return scopeCustomScroll1.apply(this, []);
     };
 });

example/main.js

@@ -5,4 +5,4 @@ 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.min',
-        ReactDOM: 'https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.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',
         customScroll: '../dist/reactCustomScroll'
@@ -12,8 +12,8 @@ },
         lodash: {exports: '_'},
-        React: {exports: 'React'}
+        react: {exports: 'React'},
+        'react-dom': {exports: 'ReactDOM'}
     },
     map: {
         '*': {
-            'react/addons': 'React',
-            react: 'React'
+            'react/addons': 'react'
         }
@@ -23,5 +23,5 @@ }
 
-require(['ReactDOM', 'React', './firstComp/firstComp'], function (ReactDOM, React, firstComp) {
+require(['react-dom', 'react', './firstComp/firstComp'], function (ReactDOM, React, firstComp) {
     'use strict';
     ReactDOM.render(React.createElement(firstComp), document.getElementById('body'));
 });

package.json

 {
   "name": "react-custom-scroll",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -8,3 +8,3 @@ "main": "index",
     "test": "karma start --single-run",
-    "rtex": "rt -m amd example/firstComp/firstComp.rt -r --react-import-path React",
+    "rtex": "rt -m amd example/firstComp/firstComp.rt -r --react-import-path react",
     "sass": "node-sass src/main/cs.scss | postcss --use autoprefixer -b 'last 2 versions' > src/main/customScroll.css",
@@ -11,0 +11,0 @@ "sassex": "node-sass example/main.scss | postcss --use autoprefixer -b 'last 2 versions' > example/styles.css",

src/main/customScroll.js

@@ -9,3 +9,4 @@ 'use strict';
     if (min > max) {
-        throw 'min limit is greater than max limit';
+        console.error('min limit is greater than max limit');
+        return value;
     }
@@ -21,2 +22,19 @@ if (value < min) {
 
+function enforceMinHandleHeight(calculatedStyle) {
+    var minHeight = this.props.minScrollHandleHeight;
+    if (calculatedStyle.height >= minHeight) {
+        return calculatedStyle;
+    }
+
+    var diffHeightBetweenScrollHandles = minHeight - calculatedStyle.height;
+    var scrollPositionRatio = this.state.scrollPos / (this.contentHeight - this.visibleHeight);
+    var marginTop = diffHeightBetweenScrollHandles * scrollPositionRatio;
+    var handlePosition = calculatedStyle.top - marginTop;
+
+    return {
+        height: minHeight,
+        top: handlePosition
+    };
+}
+
 module.exports = React.createClass({
@@ -30,7 +48,9 @@ displayName: 'customScroll',
         freezePosition: React.PropTypes.bool,
-        handleClass: React.PropTypes.string
+        handleClass: React.PropTypes.string,
+        minScrollHandleHeight: React.PropTypes.number
     },
     getDefaultProps: function () {
         return {
-            handleClass: 'inner-handle'
+            handleClass: 'inner-handle',
+            minScrollHandleHeight: 38
         };
@@ -52,9 +72,9 @@ },
         var innerContainer = this.getScrolledElement();
-        var contentHeight = innerContainer.scrollHeight;
+        this.contentHeight = innerContainer.scrollHeight;
 
         this.scrollbarYWidth = innerContainer.offsetWidth - innerContainer.clientWidth;
         this.visibleHeight = innerContainer.clientHeight;
-        this.scrollRatio = contentHeight ? this.visibleHeight / contentHeight : 1;
+        this.scrollRatio = this.contentHeight ? this.visibleHeight / this.contentHeight : 1;
 
-        this.toggleScrollIfNeeded(contentHeight);
+        this.toggleScrollIfNeeded();
 
@@ -84,4 +104,4 @@ this.position = {
     },
-    toggleScrollIfNeeded: function (contentHeight) {
-        var shouldHaveScroll = contentHeight - this.visibleHeight > 1;
+    toggleScrollIfNeeded: function () {
+        var shouldHaveScroll = this.contentHeight - this.visibleHeight > 1;
         if (this.hasScroll !== shouldHaveScroll) {
@@ -230,3 +250,5 @@ this.hasScroll = shouldHaveScroll;
         };
+        var scrollHandleStyle = enforceMinHandleHeight.call(this, this.getScrollHandleStyle());
 
+
         return (
@@ -236,8 +258,9 @@ <div className={'custom-scroll ' + (this.state.onDrag ? 'scroll-handle-dragged' : '')}
                 <div className="outer-container" style={this.getOuterContainerStyle()}>
-                    {this.hasScroll ? (<div className="custom-scrollbar" onClick={this.onCustomScrollClick} key="scrollbar">
-                        <div ref="scrollHandle" className="custom-scroll-handle" style={this.getScrollHandleStyle()}
-                             onMouseDown={this.onHandleMouseDown}>
-                            <div className="inner-handle"></div>
-                        </div>
-                    </div>) : null}
+                    {this.hasScroll ? (
+                        <div className="custom-scrollbar" onClick={this.onCustomScrollClick} key="scrollbar">
+                            <div ref="scrollHandle" className="custom-scroll-handle" style={scrollHandleStyle}
+                                 onMouseDown={this.onHandleMouseDown}>
+                                <div className={this.props.handleClass}></div>
+                            </div>
+                        </div>) : null}
                     <div ref="innerContainer"
@@ -244,0 +267,0 @@ className={this.getInnerContainerClasses()}

src/test/customScroll.spec.js

@@ -14,2 +14,6 @@ var React = require('react');
         document.body.appendChild(this.customScrollContainer);
+
+        this.totalScrollHeight = 200;
+        this.visibleHeight = 100;
+        this.customScroll = createAndRenderCustomScroll(this.customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight);
     });
@@ -21,8 +25,6 @@
 
-    function getCustomScroll(props) {
-        this.totalScrollHeight = 200;
-        this.visibleHeight = 100;
+    function createAndRenderCustomScroll(container, props, visibleHeight, contentHeight) {
         var scrolledContent = React.createElement('div', {
             style: {
-                height: this.totalScrollHeight,
+                height: contentHeight,
                 width: 50
@@ -33,15 +35,12 @@ }
             style: {
-                maxHeight: this.visibleHeight,
+                maxHeight: visibleHeight,
                 width: 50
             }
         }, scrolledContent);
-        return reactDOM.render(React.createElement(customScrollClass, props, content), this.customScrollContainer);
+        var customScroll = reactDOM.render(React.createElement(customScrollClass, props, content), container);
+        customScroll.forceUpdate();
+        return customScroll;
     }
 
     describe('general functionality', function () {
-        beforeEach(function () {
-            this.customScroll = getCustomScroll.call(this);
-            this.customScroll.forceUpdate();
-        });
-
         describe('getScrollStyles', function () {
@@ -107,5 +106,5 @@ describe('when native scrollbar exists', function () {
                 var propsOnScroll = jasmine.createSpy('onScroll');
-                this.customScroll = getCustomScroll.call(this, {
+                this.customScroll = createAndRenderCustomScroll(this.customScrollContainer, {
                     onScroll: propsOnScroll
-                });
+                }, this.visibleHeight, this.totalScrollHeight);
                 this.customScroll.forceUpdate();
@@ -131,4 +130,42 @@ var contentContainerNode = this.customScroll.refs.innerContainer;
         describe('scroll handle size', function () {
-            it('should set the size of the handle relative to the scrollbar, in the same ratio as the content size to the visible area size');
+            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 () {
+                var scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, 'custom-scroll-handle');
+                var handleHeight = parseInt(scrollHandle.style.height, 10);
+
+                expect(scrollHandle).toBeTruthy();
+                expect(handleHeight / this.visibleHeight).toEqual(this.visibleHeight / this.totalScrollHeight);
+            });
+
+            describe('when the calculated handle height is less than minimum height', function () {
+                beforeEach(function () {
+                    this.totalScrollHeight = 2000;
+                    this.visibleHeight = 200;
+                    this.customScroll = createAndRenderCustomScroll(this.customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight);
+                });
+
+                it('should set the handle size to minimum default height', function () {
+                    var defaultMinHeight = 38;
+                    var scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, 'custom-scroll-handle');
+                    var handleHeight = parseInt(scrollHandle.style.height, 10);
+
+                    expect(scrollHandle).toBeTruthy();
+                    expect(handleHeight).toEqual(defaultMinHeight);
+                });
+
+                it('should set the handle size to minimum height from props', function () {
+                    this.customScroll = createAndRenderCustomScroll(this.customScrollContainer, {
+                        minScrollHandleHeight: 50
+                    }, this.visibleHeight, this.totalScrollHeight);
+                    var scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, 'custom-scroll-handle');
+                    var handleHeight = parseInt(scrollHandle.style.height, 10);
+
+                    expect(scrollHandle).toBeTruthy();
+                    expect(handleHeight).toEqual(50);
+                });
+            });
         });
+
+        describe('scroll handle position', function () {
+
+        });
     });
@@ -138,8 +175,17 @@
         beforeEach(function () {
-            this.customScroll = getCustomScroll.call(this, {
+            this.totalScrollHeight = 200;
+            this.visibleHeight = 100;
+            this.customScroll = createAndRenderCustomScroll(this.customScrollContainer, {
                 freezePosition: true
-            });
+            }, this.visibleHeight, this.totalScrollHeight);
         });
 
-        it('should not scroll');
+        it('should not scroll', function () {
+            var contentContainerNode = this.customScroll.refs.innerContainer;
+
+            contentContainerNode.scrollTop = this.totalScrollHeight / 4;
+            TestUtils.Simulate.scroll(contentContainerNode);
+
+            expect(contentContainerNode.scrollTop).toEqual(0);
+        });
     });
@@ -150,5 +196,5 @@
             beforeEach(function () {
-                this.customScroll = getCustomScroll.call(this, {
+                this.customScroll = createAndRenderCustomScroll(this.customScrollContainer, {
                     heightRelativeToParent: '70%'
-                });
+                }, this.visibleHeight, this.totalScrollHeight);
             });
@@ -170,3 +216,3 @@
             beforeEach(function () {
-                this.customScroll = getCustomScroll.call(this, {});
+                this.customScroll = createAndRenderCustomScroll(this.customScrollContainer, {}, this.visibleHeight, this.totalScrollHeight);
             });
@@ -186,3 +232,17 @@
     });
+
+    describe('custom inner handle css class', function () {
+        it('should replace the default class', function () {
+            this.customScroll = createAndRenderCustomScroll(this.customScrollContainer, {
+                handleClass: 'some-custom-class'
+            }, this.visibleHeight, this.totalScrollHeight);
+
+            var scrollHandleWithDefaultClass = TestUtils.scryRenderedDOMComponentsWithClass(this.customScroll, 'inner-handle');
+            var scrollHandleWithCustomClass = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, 'some-custom-class');
+
+            expect(scrollHandleWithCustomClass).toBeTruthy();
+            expect(scrollHandleWithDefaultClass.length).toBeFalsy();
+        });
+    });
 });
 

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

99103

increased by4.82%

Lines of code

1741

increased by3.69%

No dependency changes