react-custom-scroll - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist/reactCustomScroll.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("lodash"),require("ReactDOM"),require("jquery")):"function"==typeof define&&define.amd?define(["React","lodash","ReactDOM","jquery"],e):"object"==typeof exports?exports.ReactCustomScroll=e(require("React"),require("lodash"),require("ReactDOM"),require("jquery")):t.ReactCustomScroll=e(t.React,t.lodash,t.ReactDOM,t.jquery)}(this,function(t,e,o,l){return function(t){function e(l){if(o[l])return o[l].exports;var r=o[l]={exports:{},id:l,loaded:!1};return t[l].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){t.exports=o(3)},function(e,o){e.exports=t},function(t,o){t.exports=e},function(t,e,o){"use strict";var l=o(4);t.exports={CustomScroll:l}},function(t,e,o){"use strict";function l(t,e,o){if(e=s.isUndefined(e)?t:e,o=s.isUndefined(o)?t:o,e>o)throw"min limit is greater than max limit";return e>t?e:t>o?o:t}var r=o(1),n=o(6),s=o(2),i=o(7),a=o(5);t.exports=r.createClass({displayName:"customScroll",propTypes:{allowOuterScroll:r.PropTypes.bool,heightRelativeToParent:r.PropTypes.string,onScroll:r.PropTypes.func,addScrolledClass:r.PropTypes.bool,freezePosition:r.PropTypes.bool,handleClass:r.PropTypes.string},getDefaultProps:function(){return{handleClass:"inner-handle"}},getInitialState:function(){return this.scrollbarYWidth=0,{scrollPos:0,onDrag:!1}},componentDidMount:function(){this.forceUpdate()},componentDidUpdate:function(t){var e=n.findDOMNode(this),o=e.getBoundingClientRect(),l=this.getScrolledElement(),r=l.scrollHeight;this.scrollbarYWidth=l.offsetWidth-l.clientWidth,this.visibleHeight=l.clientHeight,this.scrollRatio=r?this.visibleHeight/r:1,this.toggleScrollIfNeeded(r),this.position={top:o.top+i(window).scrollTop(),left:o.left+i(window).scrollLeft()},this.freezePosition(t)},componentWillUnmount:function(){i(document).off("mousemove",this.onHandleDrag),i(document).off("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(t){var e=t-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,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=n.findDOMNode(this.refs.scrollHandle);return t.target===e||t.target.parentElement===e},calculateNewScrollHandleTop:function(t){var e,o=t.pageY-this.position.top,l=this.getScrollHandleStyle().top,r=o>l+this.scrollHandleHeight;return e=r?l+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):l-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}),i(document).on("mousemove",this.onHandleDrag),i(document).on("mouseup",this.onHandleDragEnd)},onHandleDrag:function(t){var e=t.pageY-this.startDragMousePos,o=l(this.startDragHandlePos+e,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(r)},onHandleDragEnd:function(){this.setState({onDrag:!1}),i(document).off("mousemove",this.onHandleDrag),i(document).off("mouseup",this.onHandleDragEnd)},blockOuterScroll:function(t){if(!this.props.allowOuterScroll){var e=t.currentTarget,o=t.currentTarget.scrollHeight,l=o-t.currentTarget.offsetHeight,r=t.deltaY%3?t.deltaY:10*t.deltaY;e.scrollTop+r<=0?(e.scrollTop=0,t.preventDefault()):e.scrollTop+r>=l&&(e.scrollTop=l,t.preventDefault()),t.stopPropagation()}},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:a})},function(t,e,o){"use strict";var l=o(1),r=o(2);t.exports=function(){return l.createElement("div",{className:"custom-scroll",style:{height:this.props.heightRelativeToParent}},l.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle()},this.hasScroll?l.createElement("div",{className:"custom-scrollbar "+(this.state.onDrag?"handleDrag":""),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:r.keys(r.pick({"inner-container":!0,"content-scrolled":this.state.scrollPos&&this.props.addScrolledClass},r.identity)).join(" "),style:this.getScrollStyles().innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},l.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:this.getScrollStyles().contentWrapper},"\n                ",this.props.children,"\n            "))))}},function(t,e){t.exports=o},function(t,e){t.exports=l}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("lodash"),require("ReactDOM"),require("jquery")):"function"==typeof define&&define.amd?define(["React","lodash","ReactDOM","jquery"],e):"object"==typeof exports?exports.ReactCustomScroll=e(require("React"),require("lodash"),require("ReactDOM"),require("jquery")):t.ReactCustomScroll=e(t.React,t.lodash,t.ReactDOM,t.jquery)}(this,function(t,e,o,r){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(3)},function(e,o){e.exports=t},function(t,o){t.exports=e},function(t,e,o){"use strict";var r=o(4);t.exports={CustomScroll:r}},function(t,e,o){"use strict";function r(t,e,o){if(e=s.isUndefined(e)?t:e,o=s.isUndefined(o)?t:o,e>o)throw"min limit is greater than max limit";return e>t?e:t>o?o:t}var l=o(1),n=o(6),s=o(2),i=o(7),a=o(5);t.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(t){var e=n.findDOMNode(this),o=e.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+i(window).scrollTop(),left:o.left+i(window).scrollLeft()},this.freezePosition(t)},componentWillUnmount:function(){i(document).off("mousemove",this.onHandleDrag),i(document).off("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(t){var e=t-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,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=n.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}),i(document).on("mousemove",this.onHandleDrag),i(document).on("mouseup",this.onHandleDragEnd)},onHandleDrag:function(t){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(){this.setState({onDrag:!1}),i(document).off("mousemove",this.onHandleDrag),i(document).off("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:a})},function(t,e,o){"use strict";function r(){var t=this.getScrollStyles();return l.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:t.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},l.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:t.contentWrapper},"\n                ",this.props.children,"\n            "))}var l=o(1);o(2);t.exports=function(){return l.createElement("div",{className:"custom-scroll",style:{height:this.props.heightRelativeToParent}},l.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle()},this.hasScroll?l.createElement("div",{className:"custom-scrollbar "+(this.state.onDrag?"handleDrag":""),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,r.apply(this,[])))}},function(t,e){t.exports=o},function(t,e){t.exports=r}])});

karma.conf.js

 'use strict';
 module.exports = function (config) {
     config.set({
-
-        // base path that will be used to resolve all patterns (eg. files, exclude)
-        basePath: '',
-
-        // frameworks to use
-        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['jasmine', 'requirejs'],
-
-
-        // list of files / patterns to load in the browser
+        browsers: ['Chrome'],
+        frameworks: ['jasmine'],
+        plugins: [
+            'karma-chrome-launcher',
+            'karma-jasmine',
+            'karma-webpack',
+            'karma-sourcemap-loader'
+        ],
         files: [
-            'src/test/test-main.js',
-            {pattern: 'src/main/**/*.js', included: false},
-            {pattern: 'src/test/**/*.js', included: false},
-            {pattern: '*.css', included: false}
+            'tests.webpack.js' //just load this file
         ],
-
-
-        // list of files to exclude
-        exclude: [
-            'src/main/main.js'
-        ],
-
-
-        // preprocess matching files before serving them to the browser
-        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
         preprocessors: {
+            'tests.webpack.js': ['webpack', 'sourcemap']
         },
-
-
-        // test results reporter to use
-        // possible values: 'dots', 'progress'
-        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['progress'],
-
-
-        // web server port
-        port: 9876,
-
-
-        // enable / disable colors in the output (reporters and logs)
-        colors: true,
-
-
-        // level of logging
-        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_INFO,
-
-
-        // enable / disable watching file and executing tests whenever any file changes
-        autoWatch: true,
-
-
-        // start these browsers
-        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-        browsers: ['Chrome'],
-
-
-        // Continuous Integration mode
-        // if true, Karma captures browsers, runs the tests and exits
-        singleRun: false
+        singleRun: false,
+        reporters: ['dots'], //report results in this format
+        webpack: { //kind of a copy of your webpack config
+            devtool: 'inline-source-map',
+            module: {
+                loaders: [
+                    {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
+                    {test: /\.css$/, loader: 'style-loader!css-loader'}
+                ]
+            }
+        },
+        webpackServer: {
+            noInfo: true //please don't spam the console when running in karma!
+        }
     });
-};
+};

package.json

 {
   "name": "react-custom-scroll",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
   "main": "index",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "karma start --single-run",
     "rt": "rt -m commonjs src/main/customScroll.rt -r --react-import-path react",
     "rtex": "rt -m amd example/firstComp/firstComp.rt -r --react-import-path React",
-    "sass": "node-sass src/main/customScroll.scss > src/main/customScroll.css",
+    "sass": "node-sass src/main/cs.scss > src/main/customScroll.css",
     "sassex": "node-sass example/main.scss > example/styles.css",
@@ -30,9 +30,21 @@ "lint": "eslint .",
   "devDependencies": {
+    "babel-core": "6.5.2",
+    "babel-loader": "6.2.4",
+    "css-loader": "0.23.1",
     "eslint": "^2.0.0",
     "eslint-config-wix-editor": "^0.2.0",
     "eslint-plugin-react": "^3.16.1",
+    "jasmine": "2.4.1",
+    "jasmine-core": "2.4.1",
+    "karma": "0.13.21",
+    "karma-chrome-launcher": "0.2.2",
+    "karma-jasmine": "0.3.7",
+    "karma-sourcemap-loader": "0.3.7",
+    "karma-webpack": "1.7.0",
     "node-sass": "3.4.2",
     "react": "^0.14.7",
+    "react-addons-test-utils": "0.14.7",
     "react-dom": "^0.14.7",
     "react-templates": "^0.4.1",
+    "style-loader": "0.13.1",
     "webpack": "^1.12.13"
@@ -39,0 +51,0 @@ },

src/main/customScroll.js

@@ -192,2 +192,9 @@ 'use strict';
     },
+    getInnerContainerClasses: function () {
+        var res = 'inner-container';
+        if (this.state.scrollPos && this.props.addScrolledClass) {
+            res += ' content-scrolled';
+        }
+        return res;
+    },
     getScrollStyles: function () {
@@ -194,0 +201,0 @@ var scrollSize = this.scrollbarYWidth || 20;

src/main/customScroll.rt.js

 'use strict';
 var React = require('react');
 var _ = require('lodash');
+function scopeScrollStyles1() {
+    var scrollStyles = this.getScrollStyles();
+    return React.createElement('div', {
+        'ref': 'innerContainer',
+        'className': this.getInnerContainerClasses(),
+        'style': scrollStyles.innerContainer,
+        'onScroll': this.onScroll,
+        'onWheel': this.blockOuterScroll
+    }, React.createElement('div', {
+        'className': 'content-wrapper',
+        'ref': 'contentWrapper',
+        'style': scrollStyles.contentWrapper
+    }, '\n                ', this.props.children, '\n            '));
+}
 module.exports = function () {
@@ -20,16 +34,3 @@ return React.createElement('div', {
         'onMouseDown': this.onHandleMouseDown
-    }, React.createElement('div', { 'className': 'inner-handle' }))) : null, React.createElement('div', {
-        'ref': 'innerContainer',
-        'className': _.keys(_.pick({
-            'inner-container': true,
-            'content-scrolled': this.state.scrollPos && this.props.addScrolledClass
-        }, _.identity)).join(' '),
-        'style': this.getScrollStyles().innerContainer,
-        'onScroll': this.onScroll,
-        'onWheel': this.blockOuterScroll
-    }, React.createElement('div', {
-        'className': 'content-wrapper',
-        'ref': 'contentWrapper',
-        'style': this.getScrollStyles().contentWrapper
-    }, '\n                ', this.props.children, '\n            '))));
+    }, React.createElement('div', { 'className': 'inner-handle' }))) : null, scopeScrollStyles1.apply(this, [])));
 };

src/test/customScroll.spec.js

@@ -1,161 +0,179 @@
-define(['React', 'ReactDOM', 'customScroll/customScroll'], function (React, reactDOM, customScrollClass) {
-    'use strict';
+var React = require('react');
+var TestUtils = require('react-addons-test-utils');
+var reactDOM = require('react-dom');
+var customScrollClass = require('../main/customScroll.js');
 
-    describe('custom scroll', function () {
-        var testUtils = React.addons.TestUtils;
 
-        function loadCSS(url, callback) {
-            var link = document.createElement('link');
-            link.type = 'text/css';
-            link.rel = 'stylesheet';
-            link.href = url;
+describe('custom scroll', function () {
+    'use strict';
 
-            document.getElementsByTagName('head')[0].appendChild(link);
+    beforeEach(function () {
+        this.customScrollContainer = document.createElement('div');
+        this.customScrollContainer.id = 'testScrollContainer';
+        document.body.appendChild(this.customScrollContainer);
+    });
 
-            var img = document.createElement('img');
-            img.onerror = function () {
-                if (callback) {
-                    callback(link);
-                }
-            };
-            img.src = url;
-        }
+    afterEach(function () {
+        document.body.removeChild(this.customScrollContainer);
+    });
 
-        beforeEach(function (done) {
-            loadCSS('/base/styles.css', function (linkElm) {
-                this.link = linkElm;
-
-                this.customScrollContainer = document.createElement('div');
-                this.customScrollContainer.id = 'testScrollContainer';
-                document.body.appendChild(this.customScrollContainer);
-                done();
-            }.bind(this));
+    function getCustomScroll(props) {
+        this.totalScrollHeight = 200;
+        this.visibleHeight = 100;
+        var scrolledContent = React.createElement('div', {
+            style: {
+                height: this.totalScrollHeight,
+                width: 50
+            }
         });
+        var content = React.createElement('div', {
+            style: {
+                maxHeight: this.visibleHeight,
+                width: 50
+            }
+        }, scrolledContent);
+        return reactDOM.render(React.createElement(customScrollClass, props, content), this.customScrollContainer);
+    }
 
-        afterEach(function () {
-            document.body.removeChild(this.customScrollContainer);
-            var head = document.getElementsByTagName('head')[0];
-            head.removeChild(this.link);
+    describe('general functionality', function () {
+        beforeEach(function () {
+            this.customScroll = getCustomScroll.call(this);
+            this.customScroll.forceUpdate();
         });
 
-        function getCustomScroll(props) {
-            this.totalScrollHeight = 200;
-            this.visibleHeight = 100;
-            var scrolledContent = React.createElement('div', {
-                style: {
-                    height: this.totalScrollHeight,
-                    width: 50
-                }
-            });
-            var content = React.createElement('div', {
-                style: {
-                    maxHeight: this.visibleHeight,
-                    width: 50
-                }
-            }, scrolledContent);
-            return reactDOM.render(React.createElement(customScrollClass, props, content), this.customScrollContainer);
-        }
+        describe('getScrollStyles', function () {
+            describe('when native scrollbar exists', function () {
+                beforeEach(function () {
+                    this.nativeScrollWidth = 15;
+                    var innerContainer = {
+                        scrollTop: 0,
+                        offsetWidth: 0,
+                        clientWidth: 0
+                    };
+                    spyOn(this.customScroll, 'getScrolledElement').and.returnValue(innerContainer);
 
-        describe('general functionality', function () {
-            beforeEach(function () {
-                this.customScroll = getCustomScroll.call(this);
-                this.customScroll.forceUpdate();
-            });
+                    innerContainer.clientWidth = 50;
+                    innerContainer.offsetWidth = innerContainer.clientWidth + this.nativeScrollWidth;
+                    this.customScroll.forceUpdate();
+                });
 
-            describe('getScrollStyles', function () {
-                describe('when native scrollbar exists', function () {
-                    beforeEach(function () {
-                        this.nativeScrollWidth = 15;
-                        var innerContainer = {
-                            scrollTop: 0,
-                            offsetWidth: 0,
-                            clientWidth: 0
-                        };
-                        spyOn(this.customScroll, 'getScrolledElement').and.returnValue(innerContainer);
+                it('should position the inner container to the right with minus the size of the scrollbar', function () {
+                    var innerContainerStyle = this.customScroll.refs.innerContainer.style;
 
-                        innerContainer.clientWidth = 50;
-                        innerContainer.offsetWidth = innerContainer.clientWidth + this.nativeScrollWidth;
-                        this.customScroll.forceUpdate();
-                    });
+                    expect(innerContainerStyle.marginRight).toEqual((-1 * this.nativeScrollWidth) + 'px');
+                });
+            });
 
-                    it('should position the inner container to the right with minus the size of the scrollbar', function () {
-                        var styles = this.customScroll.getScrollStyles();
+            describe('when there is no native scrollbar (mac floating scrollbar)', function () {
+                beforeEach(function () {
+                    var innerContainer = {
+                        scrollTop: 0,
+                        offsetWidth: 0,
+                        clientWidth: 0
+                    };
+                    spyOn(this.customScroll, 'getScrolledElement').and.returnValue(innerContainer);
+                    innerContainer.clientWidth = 50;
+                    innerContainer.offsetWidth = innerContainer.clientWidth;
 
-                        expect(styles.innerContainer.marginRight).toEqual(-1 * this.nativeScrollWidth);
-                    });
+                    this.customScroll.forceUpdate();
                 });
 
-                describe('when there is no native scrollbar (mac floating scrollbar)', function () {
-                    beforeEach(function () {
-                        var innerContainer = {
-                            scrollTop: 0,
-                            offsetWidth: 0,
-                            clientWidth: 0
-                        };
-                        spyOn(this.customScroll, 'getScrolledElement').and.returnValue(innerContainer);
-                        innerContainer.clientWidth = 50;
-                        innerContainer.offsetWidth = innerContainer.clientWidth;
+                it('should position the inner container to the right with minus 20 pixels', function () {
+                    var innerContainerStyle = this.customScroll.refs.innerContainer.style;
 
-                        this.customScroll.forceUpdate();
-                    });
-
-                    it('should position the inner container to the right with minus 20 pixels', function () {
-                        var styles = this.customScroll.getScrollStyles();
-
-                        expect(styles.innerContainer.marginRight).toEqual(-20);
-                    });
+                    expect(innerContainerStyle.marginRight).toEqual('-20px');
                 });
             });
+        });
 
-            describe('when scrolling content', function () {
-                it('should update scroll handle position', function () {
-                    var initialHandlePos = this.customScroll.getScrollHandleStyle().top;
-                    var contentContainerNode = this.customScroll.refs.innerContainer;
+        describe('when scrolling content', function () {
+            it('should update scroll handle position', function () {
+                var initialHandlePos = this.customScroll.getScrollHandleStyle().top;
+                var contentContainerNode = this.customScroll.refs.innerContainer;
 
-                    contentContainerNode.scrollTop = this.totalScrollHeight / 4;
-                    testUtils.Simulate.scroll(contentContainerNode);
+                contentContainerNode.scrollTop = this.totalScrollHeight / 4;
+                TestUtils.Simulate.scroll(contentContainerNode);
 
-                    var newHandlePos = this.customScroll.getScrollHandleStyle().top;
+                var newHandlePos = this.customScroll.getScrollHandleStyle().top;
 
-                    expect(newHandlePos).toEqual(initialHandlePos + this.visibleHeight / 4);
+                expect(newHandlePos).toEqual(initialHandlePos + this.visibleHeight / 4);
+            });
+
+            it('should call onScroll callback from props if defined', function () {
+                var propsOnScroll = jasmine.createSpy('onScroll');
+                this.customScroll = getCustomScroll.call(this, {
+                    onScroll: propsOnScroll
                 });
+                this.customScroll.forceUpdate();
+                var contentContainerNode = this.customScroll.refs.innerContainer;
 
-                it('should call onScroll callback from props if defined', function () {
-                    var propsOnScroll = jasmine.createSpy('onScroll');
-                    this.customScroll = getCustomScroll.call(this, {
-                        onScroll: propsOnScroll
-                    });
-                    this.customScroll.forceUpdate();
-                    var contentContainerNode = this.customScroll.refs.innerContainer;
+                TestUtils.Simulate.scroll(contentContainerNode);
 
-                    testUtils.Simulate.scroll(contentContainerNode);
+                expect(propsOnScroll).toHaveBeenCalled();
+            });
 
-                    expect(propsOnScroll).toHaveBeenCalled();
+            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);
                 });
 
-                describe('when allowOuterScroll prop us false or undefined', function () {
-                    it('should block wheel event from reaching outer container');
+                it('should not block wheel event if allow outer scroll is truthy', function () {
+                    expect(true).toEqual(true);
                 });
-
-                describe('when allowOuterScroll prop is true', function () {
-                    it('should not block wheel event');
-                });
             });
+        });
 
-            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');
+        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');
+        });
+    });
+
+    describe('freeze position', function () {
+        beforeEach(function () {
+            this.customScroll = getCustomScroll.call(this, {
+                freezePosition: true
             });
         });
 
-        describe('freeze position', function () {
+        it('should not scroll');
+    });
+
+    describe('heightRelativeToParent', function () {
+        describe('when defined', function () {
             beforeEach(function () {
                 this.customScroll = getCustomScroll.call(this, {
-                    freezePosition: true
+                    heightRelativeToParent: '70%'
                 });
             });
 
-            it('should not scroll ');
+            it('should set value passed as heightRelativeToParent on the root element, and 100% on other containers', function () {
+                var rootStyle = reactDOM.findDOMNode(this.customScroll).style;
+                var innerContainerStyle = this.customScroll.refs.innerContainer.style;
+                var contentWrapperStyle = this.customScroll.refs.contentWrapper.style;
+
+
+                expect(rootStyle.height).toEqual('70%');
+                expect(innerContainerStyle.height).toEqual('100%');
+                expect(contentWrapperStyle.height).toEqual('100%');
+            });
         });
+
+        describe('when not defined', function () {
+            beforeEach(function () {
+                this.customScroll = getCustomScroll.call(this, {});
+            });
+
+            it('should set value passed as heightRelativeToParent on the root element, and 100% on other containers', function () {
+                var rootStyle = reactDOM.findDOMNode(this.customScroll).style;
+                var innerContainerStyle = this.customScroll.refs.innerContainer.style;
+                var contentWrapperStyle = this.customScroll.refs.contentWrapper.style;
+
+
+                expect(rootStyle.height).toBeFalsy();
+                expect(innerContainerStyle.height).toBeFalsy();
+                expect(contentWrapperStyle.height).toBeFalsy();
+            });
+        });
     });
 });
 

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

86225

increased by0.21%

Number of package files

33

increased by3.13%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

20

increased by150%

Lines of code

1671

decreased by-3.35%

No dependency changes