react-custom-scrollbars - npm Package Compare versions

Comparing version 2.3.0 to 3.0.0-beta

karma.conf.js

 /* eslint no-var: 0, no-unused-vars: 0 */
 var path = require('path');
 var webpack = require('webpack');
+var runCoverage = process.env.COVERAGE === 'true';
 
+var coverageLoaders = [];
+var coverageReporters = [];
+
+if (runCoverage) {
+    coverageLoaders.push({
+        test: /\.js$/,
+        include: path.resolve('src/'),
+        loader: 'isparta'
+    });
+    coverageReporters.push('coverage');
+}
+
 module.exports = function karmaConfig(config) {
     config.set({
-        browsers: [ 'Chrome' ],
+        browsers: ['Chrome'],
         singleRun: true,
-        // autoWatch: true,
-        frameworks: [ 'mocha' ],
-        files: [ './test.js' ],
+        frameworks: ['mocha'],
+        files: ['./test.js'],
         preprocessors: {
-            './test.js': [ 'webpack', 'sourcemap' ]
+            './test.js': ['webpack', 'sourcemap']
         },
-        reporters: [ 'mocha' ],
+        reporters: ['mocha'].concat(coverageReporters),
         webpack: {
@@ -28,6 +40,14 @@ devtool: 'inline-source-map',
                     exclude: /(node_modules)/
-                }]
+                }].concat(coverageLoaders)
             }
+        },
+        coverageReporter: {
+            dir: 'coverage/',
+            reporters: [
+                { type: 'html', subdir: 'report-html' },
+                { type: 'text', subdir: '.', file: 'text.txt' },
+                { type: 'text-summary', subdir: '.', file: 'text-summary.txt' },
+            ]
         }
     });
 };

lib/index.js

@@ -14,2 +14,3 @@ 'use strict';
 
+exports.default = _Scrollbars2.default;
 exports.Scrollbars = _Scrollbars2.default;

lib/Scrollbars/defaultRenderElements.js

 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.defaultRenderScrollbarHorizontal = defaultRenderScrollbarHorizontal;
-exports.defaultRenderScrollbarVertical = defaultRenderScrollbarVertical;
-exports.defaultRenderThumbHorizontal = defaultRenderThumbHorizontal;
-exports.defaultRenderThumbVertical = defaultRenderThumbVertical;
-exports.defaultRenderView = defaultRenderView;
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.renderViewDefault = renderViewDefault;
+exports.renderTrackHorizontalDefault = renderTrackHorizontalDefault;
+exports.renderTrackVerticalDefault = renderTrackVerticalDefault;
+exports.renderThumbHorizontalDefault = renderThumbHorizontalDefault;
+exports.renderThumbVerticalDefault = renderThumbVerticalDefault;
+
 var _react = require('react');
@@ -22,3 +23,7 @@
 
-function defaultRenderScrollbarHorizontal(_ref) {
+function renderViewDefault(props) {
+    return _react2.default.createElement('div', props);
+}
+
+function renderTrackHorizontalDefault(_ref) {
     var style = _ref.style;
@@ -29,7 +34,7 @@
     var finalStyle = _extends({}, style, {
-        height: 6,
         right: 2,
         bottom: 2,
         left: 2,
-        borderRadius: 3
+        borderRadius: 3,
+        cursor: 'pointer'
     });
@@ -39,3 +44,3 @@ return _react2.default.createElement('div', _extends({ style: finalStyle }, props));
 
-function defaultRenderScrollbarVertical(_ref2) {
+function renderTrackVerticalDefault(_ref2) {
     var style = _ref2.style;
@@ -46,7 +51,7 @@
     var finalStyle = _extends({}, style, {
-        width: 6,
         right: 2,
         bottom: 2,
         top: 2,
-        borderRadius: 3
+        borderRadius: 3,
+        cursor: 'pointer'
     });
@@ -56,3 +61,3 @@ return _react2.default.createElement('div', _extends({ style: finalStyle }, props));
 
-function defaultRenderThumbHorizontal(_ref3) {
+function renderThumbHorizontalDefault(_ref3) {
     var style = _ref3.style;
@@ -70,3 +75,3 @@
 
-function defaultRenderThumbVertical(_ref4) {
+function renderThumbVerticalDefault(_ref4) {
     var style = _ref4.style;
@@ -82,6 +87,2 @@
     return _react2.default.createElement('div', _extends({ style: finalStyle }, props));
-}
-
-function defaultRenderView(props) {
-    return _react2.default.createElement('div', props);
 }

lib/Scrollbars/index.js

 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,2 +7,4 @@ value: true
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _raf2 = require('raf');
@@ -30,2 +30,10 @@
 
+var _getInnerWidth = require('../utils/getInnerWidth');
+
+var _getInnerWidth2 = _interopRequireDefault(_getInnerWidth);
+
+var _getInnerHeight = require('../utils/getInnerHeight');
+
+var _getInnerHeight2 = _interopRequireDefault(_getInnerHeight);
+
 var _styles = require('./styles');
@@ -45,7 +53,16 @@
         onScroll: _react.PropTypes.func,
-        renderScrollbarHorizontal: _react.PropTypes.func,
-        renderScrollbarVertical: _react.PropTypes.func,
+        onScrollFrame: _react.PropTypes.func,
+        onScrollStart: _react.PropTypes.func,
+        onScrollStop: _react.PropTypes.func,
+        renderView: _react.PropTypes.func,
+        renderTrackHorizontal: _react.PropTypes.func,
+        renderTrackVertical: _react.PropTypes.func,
         renderThumbHorizontal: _react.PropTypes.func,
         renderThumbVertical: _react.PropTypes.func,
-        renderView: _react.PropTypes.func,
+        autoHide: _react.PropTypes.bool,
+        autoHideTimeout: _react.PropTypes.number,
+        autoHideDuration: _react.PropTypes.number,
+        thumbSize: _react.PropTypes.number,
+        thumbMinSize: _react.PropTypes.number,
+        universal: _react.PropTypes.bool,
         style: _react.PropTypes.object,
@@ -57,13 +74,31 @@ children: _react.PropTypes.node
         return {
-            renderScrollbarHorizontal: _defaultRenderElements.defaultRenderScrollbarHorizontal,
-            renderScrollbarVertical: _defaultRenderElements.defaultRenderScrollbarVertical,
-            renderThumbHorizontal: _defaultRenderElements.defaultRenderThumbHorizontal,
-            renderThumbVertical: _defaultRenderElements.defaultRenderThumbVertical,
-            renderView: _defaultRenderElements.defaultRenderView
+            renderView: _defaultRenderElements.renderViewDefault,
+            renderTrackHorizontal: _defaultRenderElements.renderTrackHorizontalDefault,
+            renderTrackVertical: _defaultRenderElements.renderTrackVerticalDefault,
+            renderThumbHorizontal: _defaultRenderElements.renderThumbHorizontalDefault,
+            renderThumbVertical: _defaultRenderElements.renderThumbVerticalDefault,
+            autoHide: false,
+            autoHideTimeout: 1000,
+            autoHideDuration: 200,
+            thumbMinSize: 30,
+            universal: false
         };
     },
+    getInitialState: function getInitialState() {
+        return {
+            didMountUniversal: false
+        };
+    },
     componentDidMount: function componentDidMount() {
         this.addListeners();
         this.update();
+        this.componentDidMountUniversal();
     },
+    componentDidMountUniversal: function componentDidMountUniversal() {
+        // eslint-disable-line react/sort-comp
+        var universal = this.props.universal;
+
+        if (!universal) return;
+        this.setState({ didMountUniversal: true });
+    },
     componentDidUpdate: function componentDidUpdate() {
@@ -74,3 +109,5 @@ this.update();
         this.removeListeners();
-        if (this.timer) _raf3.default.cancel(this.timer);
+        (0, _raf2.cancel)(this.requestFrame);
+        clearTimeout(this.hideTracksTimeout);
+        clearInterval(this.detectScrollingInterval);
     },
@@ -97,3 +134,3 @@ getScrollLeft: function getScrollLeft() {
     },
-    getWidth: function getWidth() {
+    getClientWidth: function getClientWidth() {
         var view = this.refs.view;
@@ -103,3 +140,3 @@
     },
-    getHeight: function getHeight() {
+    getClientHeight: function getClientHeight() {
         var view = this.refs.view;
@@ -111,9 +148,10 @@
         var view = this.refs.view;
+        var scrollLeft = view.scrollLeft;
         var scrollTop = view.scrollTop;
-        var scrollLeft = view.scrollLeft;
+        var scrollWidth = view.scrollWidth;
         var scrollHeight = view.scrollHeight;
-        var scrollWidth = view.scrollWidth;
+        var clientWidth = view.clientWidth;
         var clientHeight = view.clientHeight;
-        var clientWidth = view.clientWidth;
 
+
         return {
@@ -130,18 +168,56 @@ left: scrollLeft / (scrollWidth - clientWidth) || 0,
     },
-    scrollTop: function scrollTop() {
-        var top = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
-        var view = this.refs.view;
+    getThumbHorizontalWidth: function getThumbHorizontalWidth() {
+        var _props = this.props;
+        var thumbSize = _props.thumbSize;
+        var thumbMinSize = _props.thumbMinSize;
+        var _refs = this.refs;
+        var view = _refs.view;
+        var trackHorizontal = _refs.trackHorizontal;
+        var scrollWidth = view.scrollWidth;
+        var clientWidth = view.clientWidth;
 
-        view.scrollTop = top;
+        var trackWidth = (0, _getInnerWidth2.default)(trackHorizontal);
+        var width = clientWidth / scrollWidth * trackWidth;
+        if (trackWidth === width) return 0;
+        if (thumbSize) return thumbSize;
+        return Math.max(width, thumbMinSize);
     },
-    scrollToTop: function scrollToTop() {
-        var view = this.refs.view;
+    getThumbVerticalHeight: function getThumbVerticalHeight() {
+        var _props2 = this.props;
+        var thumbSize = _props2.thumbSize;
+        var thumbMinSize = _props2.thumbMinSize;
+        var _refs2 = this.refs;
+        var view = _refs2.view;
+        var trackVertical = _refs2.trackVertical;
+        var scrollHeight = view.scrollHeight;
+        var clientHeight = view.clientHeight;
 
-        view.scrollTop = 0;
+        var trackHeight = (0, _getInnerHeight2.default)(trackVertical);
+        var height = clientHeight / scrollHeight * trackHeight;
+        if (trackHeight === height) return 0;
+        if (thumbSize) return thumbSize;
+        return Math.max(height, thumbMinSize);
     },
-    scrollToBottom: function scrollToBottom() {
-        var view = this.refs.view;
+    getScrollLeftForOffset: function getScrollLeftForOffset(offset) {
+        var _refs3 = this.refs;
+        var view = _refs3.view;
+        var trackHorizontal = _refs3.trackHorizontal;
+        var scrollWidth = view.scrollWidth;
+        var clientWidth = view.clientWidth;
 
-        view.scrollTop = view.scrollHeight;
+        var trackWidth = (0, _getInnerWidth2.default)(trackHorizontal);
+        var thumbWidth = this.getThumbHorizontalWidth();
+        return offset / (trackWidth - thumbWidth) * (scrollWidth - clientWidth);
     },
+    getScrollTopForOffset: function getScrollTopForOffset(offset) {
+        var _refs4 = this.refs;
+        var view = _refs4.view;
+        var trackVertical = _refs4.trackVertical;
+        var scrollHeight = view.scrollHeight;
+        var clientHeight = view.clientHeight;
+
+        var trackHeight = (0, _getInnerHeight2.default)(trackVertical);
+        var thumbHeight = this.getThumbVerticalHeight();
+        return offset / (trackHeight - thumbHeight) * (scrollHeight - clientHeight);
+    },
     scrollLeft: function scrollLeft() {
@@ -153,2 +229,8 @@ var left = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
     },
+    scrollTop: function scrollTop() {
+        var top = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
+        var view = this.refs.view;
+
+        view.scrollTop = top;
+    },
     scrollToLeft: function scrollToLeft() {
@@ -159,2 +241,7 @@ var view = this.refs.view;
     },
+    scrollToTop: function scrollToTop() {
+        var view = this.refs.view;
+
+        view.scrollTop = 0;
+    },
     scrollToRight: function scrollToRight() {
@@ -165,123 +252,277 @@ var view = this.refs.view;
     },
+    scrollToBottom: function scrollToBottom() {
+        var view = this.refs.view;
+
+        view.scrollTop = view.scrollHeight;
+    },
     addListeners: function addListeners() {
+        /* istanbul ignore if */
         if (typeof document === 'undefined') return;
-        this.refs.view.addEventListener('scroll', this.handleScroll);
+        var _refs5 = this.refs;
+        var view = _refs5.view;
+        var trackHorizontal = _refs5.trackHorizontal;
+        var trackVertical = _refs5.trackVertical;
+        var thumbHorizontal = _refs5.thumbHorizontal;
+        var thumbVertical = _refs5.thumbVertical;
+
+        view.addEventListener('scroll', this.handleScroll);
         if (!(0, _getScrollbarWidth2.default)()) return;
-        this.refs.barVertical.addEventListener('mousedown', this.handleVerticalTrackMouseDown);
-        this.refs.barHorizontal.addEventListener('mousedown', this.handleHorizontalTrackMouseDown);
-        this.refs.thumbVertical.addEventListener('mousedown', this.handleVerticalThumbMouseDown);
-        this.refs.thumbHorizontal.addEventListener('mousedown', this.handleHorizontalThumbMouseDown);
-        document.addEventListener('mouseup', this.handleDocumentMouseUp);
+        trackHorizontal.addEventListener('mouseenter', this.handleTrackMouseEnter);
+        trackHorizontal.addEventListener('mouseleave', this.handleTrackMouseLeave);
+        trackHorizontal.addEventListener('mousedown', this.handleHorizontalTrackMouseDown);
+        trackVertical.addEventListener('mouseenter', this.handleTrackMouseEnter);
+        trackVertical.addEventListener('mouseleave', this.handleTrackMouseLeave);
+        trackVertical.addEventListener('mousedown', this.handleVerticalTrackMouseDown);
+        thumbHorizontal.addEventListener('mousedown', this.handleHorizontalThumbMouseDown);
+        thumbVertical.addEventListener('mousedown', this.handleVerticalThumbMouseDown);
         window.addEventListener('resize', this.handleWindowResize);
     },
     removeListeners: function removeListeners() {
+        /* istanbul ignore if */
         if (typeof document === 'undefined') return;
-        this.refs.view.removeEventListener('scroll', this.handleScroll);
+        var _refs6 = this.refs;
+        var view = _refs6.view;
+        var trackHorizontal = _refs6.trackHorizontal;
+        var trackVertical = _refs6.trackVertical;
+        var thumbHorizontal = _refs6.thumbHorizontal;
+        var thumbVertical = _refs6.thumbVertical;
+
+        view.removeEventListener('scroll', this.handleScroll);
         if (!(0, _getScrollbarWidth2.default)()) return;
-        this.refs.barVertical.removeEventListener('mousedown', this.handleVerticalTrackMouseDown);
-        this.refs.barHorizontal.removeEventListener('mousedown', this.handleHorizontalTrackMouseDown);
-        this.refs.thumbVertical.removeEventListener('mousedown', this.handleVerticalThumbMouseDown);
-        this.refs.thumbHorizontal.removeEventListener('mousedown', this.handleHorizontalThumbMouseDown);
-        document.removeEventListener('mouseup', this.handleDocumentMouseUp);
+        trackHorizontal.removeEventListener('mouseenter', this.handleTrackMouseEnter);
+        trackHorizontal.removeEventListener('mouseleave', this.handleTrackMouseLeave);
+        trackHorizontal.removeEventListener('mousedown', this.handleHorizontalTrackMouseDown);
+        trackVertical.removeEventListener('mouseenter', this.handleTrackMouseEnter);
+        trackVertical.removeEventListener('mouseleave', this.handleTrackMouseLeave);
+        trackVertical.removeEventListener('mousedown', this.handleVerticalTrackMouseDown);
+        thumbHorizontal.removeEventListener('mousedown', this.handleHorizontalThumbMouseDown);
+        thumbVertical.removeEventListener('mousedown', this.handleVerticalThumbMouseDown);
         window.removeEventListener('resize', this.handleWindowResize);
+        // Possibly setup by `handleDragStart`
+        this.teardownDragging();
     },
     handleScroll: function handleScroll(event) {
-        var onScroll = this.props.onScroll;
+        var _this = this;
 
+        var _props3 = this.props;
+        var onScroll = _props3.onScroll;
+        var onScrollFrame = _props3.onScrollFrame;
+
+        if (onScroll) onScroll(event);
         this.update(function (values) {
-            if (!onScroll) return;
-            onScroll(event, values);
+            var scrollLeft = values.scrollLeft;
+            var scrollTop = values.scrollTop;
+
+            _this.viewScrollLeft = scrollLeft;
+            _this.viewScrollTop = scrollTop;
+            if (onScrollFrame) onScrollFrame(values);
         });
+        this.detectScrolling();
     },
-    handleVerticalTrackMouseDown: function handleVerticalTrackMouseDown(event) {
-        var _refs = this.refs;
-        var thumbVertical = _refs.thumbVertical;
-        var barVertical = _refs.barVertical;
-        var view = _refs.view;
+    handleScrollStart: function handleScrollStart() {
+        var onScrollStart = this.props.onScrollStart;
 
-        var offset = Math.abs(event.target.getBoundingClientRect().top - event.clientY);
-        var thumbHalf = thumbVertical.offsetHeight / 2;
-        var thumbPositionPercentage = (offset - thumbHalf) * 100 / barVertical.offsetHeight;
-        view.scrollTop = thumbPositionPercentage * view.scrollHeight / 100;
+        if (onScrollStart) onScrollStart();
+        this.handleScrollStartAutoHide();
     },
+    handleScrollStartAutoHide: function handleScrollStartAutoHide() {
+        var autoHide = this.props.autoHide;
+
+        if (!autoHide) return;
+        this.showTracks();
+    },
+    handleScrollStop: function handleScrollStop() {
+        var onScrollStop = this.props.onScrollStop;
+
+        if (onScrollStop) onScrollStop();
+        this.handleScrollStopAutoHide();
+    },
+    handleScrollStopAutoHide: function handleScrollStopAutoHide() {
+        var autoHide = this.props.autoHide;
+
+        if (!autoHide) return;
+        this.hideTracks();
+    },
+    handleWindowResize: function handleWindowResize() {
+        this.update();
+    },
     handleHorizontalTrackMouseDown: function handleHorizontalTrackMouseDown() {
-        var _refs2 = this.refs;
-        var thumbHorizontal = _refs2.thumbHorizontal;
-        var barHorizontal = _refs2.barHorizontal;
-        var view = _refs2.view;
+        var view = this.refs.view;
+        var _event = event;
+        var target = _event.target;
+        var clientX = _event.clientX;
 
-        var offset = Math.abs(event.target.getBoundingClientRect().left - event.clientX);
-        var thumbHalf = thumbHorizontal.offsetWidth / 2;
-        var thumbPositionPercentage = (offset - thumbHalf) * 100 / barHorizontal.offsetWidth;
-        view.scrollLeft = thumbPositionPercentage * view.scrollWidth / 100;
+        var _target$getBoundingCl = target.getBoundingClientRect();
+
+        var targetLeft = _target$getBoundingCl.left;
+
+        var thumbWidth = this.getThumbHorizontalWidth();
+        var offset = Math.abs(targetLeft - clientX) - thumbWidth / 2;
+        view.scrollLeft = this.getScrollLeftForOffset(offset);
     },
-    handleVerticalThumbMouseDown: function handleVerticalThumbMouseDown(event) {
-        this.handleDragStart(event);
-        var currentTarget = event.currentTarget;
+    handleVerticalTrackMouseDown: function handleVerticalTrackMouseDown(event) {
+        var view = this.refs.view;
+        var target = event.target;
         var clientY = event.clientY;
 
-        this.prevPageY = currentTarget.offsetHeight - (clientY - currentTarget.getBoundingClientRect().top);
+        var _target$getBoundingCl2 = target.getBoundingClientRect();
+
+        var targetTop = _target$getBoundingCl2.top;
+
+        var thumbHeight = this.getThumbVerticalHeight();
+        var offset = Math.abs(targetTop - clientY) - thumbHeight / 2;
+        view.scrollTop = this.getScrollTopForOffset(offset);
     },
     handleHorizontalThumbMouseDown: function handleHorizontalThumbMouseDown(event) {
         this.handleDragStart(event);
-        var currentTarget = event.currentTarget;
+        var target = event.target;
         var clientX = event.clientX;
+        var offsetWidth = target.offsetWidth;
 
-        this.prevPageX = currentTarget.offsetWidth - (clientX - currentTarget.getBoundingClientRect().left);
+        var _target$getBoundingCl3 = target.getBoundingClientRect();
+
+        var left = _target$getBoundingCl3.left;
+
+        this.prevPageX = offsetWidth - (clientX - left);
     },
-    handleDocumentMouseUp: function handleDocumentMouseUp() {
-        this.handleDragEnd();
-    },
-    handleDocumentMouseMove: function handleDocumentMouseMove(event) {
-        if (this.cursorDown === false) return false;
-        if (this.prevPageY) {
-            var _refs3 = this.refs;
-            var barVertical = _refs3.barVertical;
-            var thumbVertical = _refs3.thumbVertical;
-            var view = _refs3.view;
+    handleVerticalThumbMouseDown: function handleVerticalThumbMouseDown(event) {
+        this.handleDragStart(event);
+        var target = event.target;
+        var clientY = event.clientY;
+        var offsetHeight = target.offsetHeight;
 
-            var offset = (barVertical.getBoundingClientRect().top - event.clientY) * -1;
-            var thumbClickPosition = thumbVertical.offsetHeight - this.prevPageY;
-            var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / barVertical.offsetHeight;
-            view.scrollTop = thumbPositionPercentage * view.scrollHeight / 100;
-            return false;
-        }
-        if (this.prevPageX) {
-            var _refs4 = this.refs;
-            var barHorizontal = _refs4.barHorizontal;
-            var thumbHorizontal = _refs4.thumbHorizontal;
-            var view = _refs4.view;
+        var _target$getBoundingCl4 = target.getBoundingClientRect();
 
-            var offset = (barHorizontal.getBoundingClientRect().left - event.clientX) * -1;
-            var thumbClickPosition = thumbHorizontal.offsetWidth - this.prevPageX;
-            var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / barHorizontal.offsetWidth;
-            view.scrollLeft = thumbPositionPercentage * view.scrollWidth / 100;
-            return false;
-        }
+        var top = _target$getBoundingCl4.top;
+
+        this.prevPageY = offsetHeight - (clientY - top);
     },
-    handleWindowResize: function handleWindowResize() {
-        this.update();
+    setupDragging: function setupDragging() {
+        (0, _domCss2.default)(document.body, _styles.disableSelectStyle);
+        document.addEventListener('mousemove', this.handleDrag);
+        document.addEventListener('mouseup', this.handleDragEnd);
+        document.onselectstart = _returnFalse2.default;
     },
+    teardownDragging: function teardownDragging() {
+        (0, _domCss2.default)(document.body, _styles.disableSelectStyleReset);
+        document.removeEventListener('mousemove', this.handleDrag);
+        document.removeEventListener('mouseup', this.handleDragEnd);
+        document.onselectstart = undefined;
+    },
     handleDragStart: function handleDragStart(event) {
-        if (!document) return;
+        this.dragging = true;
         event.stopImmediatePropagation();
-        this.cursorDown = true;
-        (0, _domCss2.default)(document.body, _styles.disableSelectStyle);
-        document.addEventListener('mousemove', this.handleDocumentMouseMove);
-        document.onselectstart = _returnFalse2.default;
+        this.setupDragging();
     },
+    handleDrag: function handleDrag(event) {
+        if (this.prevPageX) {
+            var clientX = event.clientX;
+            var _refs7 = this.refs;
+            var view = _refs7.view;
+            var trackHorizontal = _refs7.trackHorizontal;
+
+            var _trackHorizontal$getB = trackHorizontal.getBoundingClientRect();
+
+            var trackLeft = _trackHorizontal$getB.left;
+
+            var thumbWidth = this.getThumbHorizontalWidth();
+            var clickPosition = thumbWidth - this.prevPageX;
+            var offset = -trackLeft + clientX - clickPosition;
+            view.scrollLeft = this.getScrollLeftForOffset(offset);
+        }
+        if (this.prevPageY) {
+            var clientY = event.clientY;
+            var _refs8 = this.refs;
+            var view = _refs8.view;
+            var trackVertical = _refs8.trackVertical;
+
+            var _trackVertical$getBou = trackVertical.getBoundingClientRect();
+
+            var trackTop = _trackVertical$getBou.top;
+
+            var thumbHeight = this.getThumbVerticalHeight();
+            var clickPosition = thumbHeight - this.prevPageY;
+            var offset = -trackTop + clientY - clickPosition;
+            view.scrollTop = this.getScrollTopForOffset(offset);
+        }
+        return false;
+    },
     handleDragEnd: function handleDragEnd() {
-        if (!document) return;
-        this.cursorDown = false;
+        this.dragging = false;
         this.prevPageX = this.prevPageY = 0;
-        (0, _domCss2.default)(document.body, _styles.resetDisableSelectStyle);
-        document.removeEventListener('mousemove', this.handleDocumentMouseMove);
-        document.onselectstart = undefined;
+        this.teardownDragging();
+        this.handleDragEndAutoHide();
     },
+    handleDragEndAutoHide: function handleDragEndAutoHide() {
+        var autoHide = this.props.autoHide;
+
+        if (!autoHide) return;
+        this.hideTracks();
+    },
+    handleTrackMouseEnter: function handleTrackMouseEnter() {
+        this.trackMouseOver = true;
+        this.handleTrackMouseEnterAutoHide();
+    },
+    handleTrackMouseEnterAutoHide: function handleTrackMouseEnterAutoHide() {
+        var autoHide = this.props.autoHide;
+
+        if (!autoHide) return;
+        this.showTracks();
+    },
+    handleTrackMouseLeave: function handleTrackMouseLeave() {
+        this.trackMouseOver = false;
+        this.handleTrackMouseLeaveAutoHide();
+    },
+    handleTrackMouseLeaveAutoHide: function handleTrackMouseLeaveAutoHide() {
+        var autoHide = this.props.autoHide;
+
+        if (!autoHide) return;
+        this.hideTracks();
+    },
+    showTracks: function showTracks() {
+        var _refs9 = this.refs;
+        var trackHorizontal = _refs9.trackHorizontal;
+        var trackVertical = _refs9.trackVertical;
+
+        clearTimeout(this.hideTracksTimeout);
+        (0, _domCss2.default)(trackHorizontal, { opacity: 1 });
+        (0, _domCss2.default)(trackVertical, { opacity: 1 });
+    },
+    hideTracks: function hideTracks() {
+        if (this.dragging) return;
+        if (this.scrolling) return;
+        if (this.trackMouseOver) return;
+        var autoHideTimeout = this.props.autoHideTimeout;
+        var _refs10 = this.refs;
+        var trackHorizontal = _refs10.trackHorizontal;
+        var trackVertical = _refs10.trackVertical;
+
+        clearTimeout(this.hideTracksTimeout);
+        this.hideTracksTimeout = setTimeout(function () {
+            (0, _domCss2.default)(trackHorizontal, { opacity: 0 });
+            (0, _domCss2.default)(trackVertical, { opacity: 0 });
+        }, autoHideTimeout);
+    },
+    detectScrolling: function detectScrolling() {
+        var _this2 = this;
+
+        if (this.scrolling) return;
+        this.scrolling = true;
+        this.handleScrollStart();
+        this.detectScrollingInterval = setInterval(function () {
+            if (_this2.lastViewScrollLeft === _this2.viewScrollLeft && _this2.lastViewScrollTop === _this2.viewScrollTop) {
+                clearInterval(_this2.detectScrollingInterval);
+                _this2.scrolling = false;
+                _this2.handleScrollStop();
+            }
+            _this2.lastViewScrollLeft = _this2.viewScrollLeft;
+            _this2.lastViewScrollTop = _this2.viewScrollTop;
+        }, 100);
+    },
     raf: function raf(callback) {
-        var _this = this;
+        var _this3 = this;
 
-        if (this.timer) _raf3.default.cancel(this.timer);
-        this.timer = (0, _raf3.default)(function () {
-            _this.timer = undefined;
+        if (this.requestFrame) _raf3.default.cancel(this.requestFrame);
+        this.requestFrame = (0, _raf3.default)(function () {
+            _this3.requestFrame = undefined;
             callback();
@@ -291,27 +532,33 @@ });
     update: function update(callback) {
-        var values = this.getValues();
-        var _refs5 = this.refs;
-        var thumbHorizontal = _refs5.thumbHorizontal;
-        var thumbVertical = _refs5.thumbVertical;
-        var scrollLeft = values.scrollLeft;
-        var scrollTop = values.scrollTop;
-        var clientWidth = values.clientWidth;
-        var clientHeight = values.clientHeight;
-        var scrollWidth = values.scrollWidth;
-        var scrollHeight = values.scrollHeight;
+        var _this4 = this;
 
-        var thumbHorizontalX = scrollLeft * 100 / clientWidth;
-        var thumbHorizontalWidth = clientWidth * 100 / scrollWidth;
-        var thumbVerticalY = scrollTop * 100 / clientHeight;
-        var thumbVerticalHeight = clientHeight * 100 / scrollHeight;
-
         this.raf(function () {
+            var values = _this4.getValues();
             if ((0, _getScrollbarWidth2.default)()) {
+                var _refs11 = _this4.refs;
+                var thumbHorizontal = _refs11.thumbHorizontal;
+                var thumbVertical = _refs11.thumbVertical;
+                var trackHorizontal = _refs11.trackHorizontal;
+                var trackVertical = _refs11.trackVertical;
+                var scrollLeft = values.scrollLeft;
+                var clientWidth = values.clientWidth;
+                var scrollWidth = values.scrollWidth;
+
+                var trackHorizontalWidth = (0, _getInnerWidth2.default)(trackHorizontal);
+                var thumbHorizontalWidth = _this4.getThumbHorizontalWidth();
+                var thumbHorizontalX = scrollLeft / (scrollWidth - clientWidth) * (trackHorizontalWidth - thumbHorizontalWidth);
                 var thumbHorizontalStyle = {
-                    width: thumbHorizontalWidth < 100 ? thumbHorizontalWidth + '%' : 0,
-                    transform: 'translateX(' + thumbHorizontalX + '%)'
+                    width: thumbHorizontalWidth,
+                    transform: 'translateX(' + thumbHorizontalX + 'px)'
                 };
+                var scrollTop = values.scrollTop;
+                var clientHeight = values.clientHeight;
+                var scrollHeight = values.scrollHeight;
+
+                var trackVerticalHeight = (0, _getInnerHeight2.default)(trackVertical);
+                var thumbVerticalHeight = _this4.getThumbVerticalHeight();
+                var thumbVerticalY = scrollTop / (scrollHeight - clientHeight) * (trackVerticalHeight - thumbVerticalHeight);
                 var thumbVerticalStyle = {
-                    height: thumbVerticalHeight < 100 ? thumbVerticalHeight + '%' : 0,
-                    transform: 'translateY(' + thumbVerticalY + '%)'
+                    height: thumbVerticalHeight,
+                    transform: 'translateY(' + thumbVerticalY + 'px)'
                 };
@@ -327,34 +574,42 @@ (0, _domCss2.default)(thumbHorizontal, thumbHorizontalStyle);
         var scrollbarWidth = (0, _getScrollbarWidth2.default)();
-        var _props = this.props;
-        var style = _props.style;
-        var renderScrollbarHorizontal = _props.renderScrollbarHorizontal;
-        var renderScrollbarVertical = _props.renderScrollbarVertical;
-        var renderThumbHorizontal = _props.renderThumbHorizontal;
-        var renderThumbVertical = _props.renderThumbVertical;
-        var renderView = _props.renderView;
-        var onScroll = _props.onScroll;
-        var children = _props.children;
+        var _props4 = this.props;
+        var onScroll = _props4.onScroll;
+        var onScrollFrame = _props4.onScrollFrame;
+        var onScrollStart = _props4.onScrollStart;
+        var onScrollStop = _props4.onScrollStop;
+        var renderView = _props4.renderView;
+        var renderTrackHorizontal = _props4.renderTrackHorizontal;
+        var renderTrackVertical = _props4.renderTrackVertical;
+        var renderThumbHorizontal = _props4.renderThumbHorizontal;
+        var renderThumbVertical = _props4.renderThumbVertical;
+        var autoHide = _props4.autoHide;
+        var autoHideTimeout = _props4.autoHideTimeout;
+        var autoHideDuration = _props4.autoHideDuration;
+        var thumbSize = _props4.thumbSize;
+        var thumbMinSize = _props4.thumbMinSize;
+        var universal = _props4.universal;
+        var style = _props4.style;
+        var children = _props4.children;
 
-        var props = _objectWithoutProperties(_props, ['style', 'renderScrollbarHorizontal', 'renderScrollbarVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'renderView', 'onScroll', 'children']);
+        var props = _objectWithoutProperties(_props4, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'style', 'children']);
 
-        var containerStyle = _extends({
-            position: 'relative',
-            overflow: 'hidden',
-            width: '100%',
-            height: '100%'
-        }, style);
+        var didMountUniversal = this.state.didMountUniversal;
 
-        var viewStyle = scrollbarWidth ? _extends({}, _styles.scrollbarsVisibleViewStyle, {
-            right: -scrollbarWidth,
-            bottom: -scrollbarWidth
-        }) : _styles.scrollbarsInvisibleViewStyle;
 
+        var containerStyle = _extends({}, _styles.containerStyleDefault, style);
+
+        var viewStyle = _extends({}, _styles.viewStyleDefault, scrollbarWidth ? { right: -scrollbarWidth, bottom: -scrollbarWidth } : { right: 0, bottom: 0 }, universal && !didMountUniversal ? _styles.viewStyleUniversalInitial : undefined);
+
+        var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide ? { transition: 'opacity ' + autoHideDuration + 'ms', opacity: 0 } : undefined, !scrollbarWidth || universal && !didMountUniversal ? { display: 'none' } : undefined);
+
+        var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide ? { transition: 'opacity ' + autoHideDuration + 'ms', opacity: 0 } : undefined, !scrollbarWidth || universal && !didMountUniversal ? { display: 'none' } : undefined);
+
         return _react2.default.createElement(
             'div',
-            _extends({}, props, { style: containerStyle }),
+            _extends({}, props, { style: containerStyle, ref: 'container' }),
             (0, _react.cloneElement)(renderView({ style: viewStyle }), { ref: 'view' }, children),
-            scrollbarWidth ? (0, _react.cloneElement)(renderScrollbarHorizontal({ style: _styles.defaultScrollbarHorizontalStyle }), { ref: 'barHorizontal' }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.defaultThumbHorizontalStyle }), { ref: 'thumbHorizontal' })) : undefined,
-            scrollbarWidth ? (0, _react.cloneElement)(renderScrollbarVertical({ style: _styles.defaultScrollbarVerticalStyle }), { ref: 'barVertical' }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.defaultThumbVerticalStyle }), { ref: 'thumbVertical' })) : undefined
+            (0, _react.cloneElement)(renderTrackHorizontal({ style: trackHorizontalStyle }), { ref: 'trackHorizontal' }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.thumbHorizontalStyleDefault }), { ref: 'thumbHorizontal' })),
+            (0, _react.cloneElement)(renderTrackVertical({ style: trackVerticalStyle }), { ref: 'trackVertical' }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.thumbVerticalStyleDefault }), { ref: 'thumbVertical' }))
         );
     }
 });

lib/Scrollbars/styles.js

@@ -6,54 +6,51 @@ 'use strict';
 });
-var defaultThumbHorizontalStyle = exports.defaultThumbHorizontalStyle = {
+var containerStyleDefault = exports.containerStyleDefault = {
     position: 'relative',
-    display: 'block',
+    overflow: 'hidden',
+    width: '100%',
     height: '100%'
 };
 
-var defaultThumbVerticalStyle = exports.defaultThumbVerticalStyle = {
-    position: 'relative',
-    display: 'block',
-    width: '100%'
+var viewStyleDefault = exports.viewStyleDefault = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    overflow: 'scroll',
+    WebkitOverflowScrolling: 'touch'
 };
 
-var defaultScrollbarHorizontalStyle = exports.defaultScrollbarHorizontalStyle = {
-    position: 'absolute'
+var viewStyleUniversalInitial = exports.viewStyleUniversalInitial = {
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden'
 };
 
-var defaultScrollbarVerticalStyle = exports.defaultScrollbarVerticalStyle = {
-    position: 'absolute'
+var trackHorizontalStyleDefault = exports.trackHorizontalStyleDefault = {
+    position: 'absolute',
+    height: 6
 };
 
-var scrollbarsVisibleViewStyle = exports.scrollbarsVisibleViewStyle = {
+var trackVerticalStyleDefault = exports.trackVerticalStyleDefault = {
     position: 'absolute',
-    top: 0,
-    left: 0,
-    overflow: 'scroll',
-    WebkitOverflowScrolling: 'touch'
+    width: 6
 };
 
-var scrollbarsInvisibleViewStyle = exports.scrollbarsInvisibleViewStyle = {
+var thumbHorizontalStyleDefault = exports.thumbHorizontalStyleDefault = {
     position: 'relative',
-    width: '100%',
-    height: '100%',
-    overflow: 'scroll',
-    WebkitOverflowScrolling: 'touch'
+    display: 'block',
+    height: '100%'
 };
 
+var thumbVerticalStyleDefault = exports.thumbVerticalStyleDefault = {
+    position: 'relative',
+    display: 'block',
+    width: '100%'
+};
+
 var disableSelectStyle = exports.disableSelectStyle = {
-    '-webkit-touch-callout': 'none',
-    '-webkit-user-select': 'none',
-    '-khtml-user-select': 'none',
-    '-moz-user-select': 'none',
-    '-ms-user-select': 'none',
-    'user-select': 'none'
+    userSelect: 'none'
 };
 
-var resetDisableSelectStyle = exports.resetDisableSelectStyle = {
-    '-webkit-touch-callout': '',
-    '-webkit-user-select': '',
-    '-khtml-user-select': '',
-    '-moz-user-select': '',
-    '-ms-user-select': '',
-    'user-select': ''
+var disableSelectStyleReset = exports.disableSelectStyleReset = {
+    userSelect: ''
 };

lib/utils/getScrollbarWidth.js

@@ -18,2 +18,3 @@ 'use strict';
     if (scrollbarWidth !== false) return scrollbarWidth;
+    /* istanbul ignore else */
     if (typeof document !== 'undefined') {
@@ -27,3 +28,3 @@ var div = document.createElement('div');
             overflow: 'scroll',
-            '-ms-overflow-style': 'scrollbar'
+            MsOverflowStyle: 'scrollbar'
         });
@@ -30,0 +31,0 @@ document.body.appendChild(div);

package.json

 {
   "name": "react-custom-scrollbars",
-  "version": "2.3.0",
+  "version": "3.0.0-beta",
   "description": "React scrollbars component",
@@ -13,2 +13,3 @@ "main": "lib/index.js",
     "test:watch": "NODE_ENV=test karma start --auto-watch --no-single-run",
+    "test:cov": "NODE_ENV=test COVERAGE=true karma start --single-run",
     "prepublish": "npm run lint && npm run test && npm run clean && npm run build"
@@ -48,5 +49,7 @@ },
     "expect": "^1.6.0",
+    "isparta-loader": "^2.0.0",
     "karma": "^0.13.10",
     "karma-chrome-launcher": "^0.2.1",
     "karma-cli": "^0.1.1",
+    "karma-coverage": "^0.5.3",
     "karma-mocha": "^0.2.0",
@@ -53,0 +56,0 @@ "karma-mocha-reporter": "^1.0.3",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45931

increased by33.4%

Number of package files

21

increased by10.53%

Lines of code

776

increased by48.09%

Worsened metrics

Dev dependency count

30

increased by7.14%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes