react-custom-scrollbars - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0-beta

lib/index.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Scrollbars = undefined;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 var _Scrollbars = require('./Scrollbars');
@@ -11,2 +12,4 @@
 
-exports.Scrollbars = _Scrollbars2['default'];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.Scrollbars = _Scrollbars2.default;

lib/Scrollbars.js

 'use strict';
 
-exports.__esModule = 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; };
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+var _raf2 = require('raf');
 
-var _react = require('react');
+var _raf3 = _interopRequireDefault(_raf2);
 
-var _react2 = _interopRequireDefault(_react);
+var _domCss = require('dom-css');
 
-var _utilsAddClass = require('./utils/addClass');
+var _domCss2 = _interopRequireDefault(_domCss);
 
-var _utilsAddClass2 = _interopRequireDefault(_utilsAddClass);
+var _react = require('react');
 
-var _utilsRemoveClass = require('./utils/removeClass');
+var _react2 = _interopRequireDefault(_react);
 
-var _utilsRemoveClass2 = _interopRequireDefault(_utilsRemoveClass);
+var _getScrollbarWidth = require('./utils/getScrollbarWidth');
 
-var _utilsAddStyleSheet = require('./utils/addStyleSheet');
+var _getScrollbarWidth2 = _interopRequireDefault(_getScrollbarWidth);
 
-var _utilsAddStyleSheet2 = _interopRequireDefault(_utilsAddStyleSheet);
+var _returnFalse = require('./utils/returnFalse');
 
-var _utilsGetScrollbarWidth = require('./utils/getScrollbarWidth');
+var _returnFalse2 = _interopRequireDefault(_returnFalse);
 
-var _utilsGetScrollbarWidth2 = _interopRequireDefault(_utilsGetScrollbarWidth);
+var _styles = require('./styles');
 
-var _utilsReturnFalse = require('./utils/returnFalse');
+var _elementGetters = require('./elementGetters');
 
-var _utilsReturnFalse2 = _interopRequireDefault(_utilsReturnFalse);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var SCROLLBAR_WIDTH = false;
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var classnames = {
-    testScrollbar: 'react-custom-scrollbars-test-scrollbar',
-    disableSelection: 'react-custom-scrollbars-disable-selection'
-};
+exports.default = (0, _react.createClass)({
 
-var stylesheet = ['.' + classnames.testScrollbar + ' {\n        width: 100px;\n        height: 100px;\n        position: absolute;\n        top: -9999px;\n        overflow: scroll;\n        -ms-overflow-style: scrollbar;\n    }', '.' + classnames.disableSelection + ' {\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        -khtml-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n    }'].join('').replace(/(\s|\n)/g, '');
-
-function getDefaultScrollbarHorizontal(_ref) {
-    var style = _ref.style;
-
-    var props = _objectWithoutProperties(_ref, ['style']);
-
-    var finalStyle = _extends({}, style, {
-        right: 2,
-        bottom: 2,
-        left: 2,
-        borderRadius: 3
-    });
-    return _react2['default'].createElement('div', _extends({ style: finalStyle }, props));
-}
-
-function getDefaultScrollbarVertical(_ref2) {
-    var style = _ref2.style;
-
-    var props = _objectWithoutProperties(_ref2, ['style']);
-
-    var finalStyle = _extends({}, style, {
-        right: 2,
-        bottom: 2,
-        top: 2,
-        borderRadius: 3
-    });
-    return _react2['default'].createElement('div', _extends({ style: finalStyle }, props));
-}
-
-function getDefaultThumbHorizontal(_ref3) {
-    var style = _ref3.style;
-
-    var props = _objectWithoutProperties(_ref3, ['style']);
-
-    var finalStyle = _extends({}, style, {
-        cursor: 'pointer',
-        borderRadius: 'inherit',
-        backgroundColor: 'rgba(0,0,0,.2)'
-    });
-    return _react2['default'].createElement('div', _extends({ style: finalStyle }, props));
-}
-
-function getDefaultThumbVertical(_ref4) {
-    var style = _ref4.style;
-
-    var props = _objectWithoutProperties(_ref4, ['style']);
-
-    var finalStyle = _extends({}, style, {
-        cursor: 'pointer',
-        borderRadius: 'inherit',
-        backgroundColor: 'rgba(0,0,0,.2)'
-    });
-    return _react2['default'].createElement('div', _extends({ style: finalStyle }, props));
-}
-
-function getDefaultView(_ref5) {
-    var style = _ref5.style;
-
-    var props = _objectWithoutProperties(_ref5, ['style']);
-
-    var finalStyle = _extends({}, style);
-    return _react2['default'].createElement('div', _extends({ style: finalStyle }, props));
-}
-
-exports['default'] = _react.createClass({
-
     displayName: 'Scrollbars',
 
     propTypes: {
+        onScroll: _react.PropTypes.func,
         scrollbarHorizontal: _react.PropTypes.func,
@@ -117,3 +48,4 @@ scrollbarVertical: _react.PropTypes.func,
         view: _react.PropTypes.func,
-        onScroll: _react.PropTypes.func
+        style: _react.PropTypes.object,
+        children: _react.PropTypes.node
     },
@@ -123,29 +55,9 @@
         return {
-            scrollbarHorizontal: getDefaultScrollbarHorizontal,
-            scrollbarVertical: getDefaultScrollbarVertical,
-            thumbHorizontal: getDefaultThumbHorizontal,
-            thumbVertical: getDefaultThumbVertical,
-            view: getDefaultView
+            scrollbarHorizontal: _elementGetters.getDefaultScrollbarHorizontal,
+            scrollbarVertical: _elementGetters.getDefaultScrollbarVertical,
+            thumbHorizontal: _elementGetters.getDefaultThumbHorizontal,
+            thumbVertical: _elementGetters.getDefaultThumbVertical,
+            view: _elementGetters.getDefaultView
         };
     },
-
-    componentWillMount: function componentWillMount() {
-        _utilsAddStyleSheet2['default'](stylesheet);
-        if (SCROLLBAR_WIDTH === false) {
-            SCROLLBAR_WIDTH = _utilsGetScrollbarWidth2['default'](classnames.testScrollbar);
-        }
-        this.needsUpdate = true;
-    },
-
-    getInitialState: function getInitialState() {
-        return {
-            x: 0,
-            y: 0,
-            width: '100%',
-            height: '100%',
-            heightPercentageInner: 100,
-            widthPercentageInner: 100
-        };
-    },
-
     componentDidMount: function componentDidMount() {
@@ -155,161 +67,156 @@ this.addListeners();
     },
-
-    componentWillReceiveProps: function componentWillReceiveProps() {
-        this.needsUpdate = true;
-    },
-
     componentDidUpdate: function componentDidUpdate() {
         this.update();
     },
-
     componentWillUnmount: function componentWillUnmount() {
         this.removeListeners();
     },
-
-    addListeners: function addListeners() {
-        this.refs.view.addEventListener('scroll', this.handleScroll);
-        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);
-        window.addEventListener('resize', this.handleWindowResize);
-    },
-
-    removeListeners: function removeListeners() {
-        this.refs.view.removeEventListener('scroll', this.handleScroll);
-        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);
-        window.removeEventListener('resize', this.handleWindowResize);
-    },
-
     getPosition: function getPosition() {
-        var $view = arguments.length <= 0 || arguments[0] === undefined ? this.refs.view : arguments[0];
+        var view = this.refs.view;
+        var scrollTop = view.scrollTop;
+        var scrollLeft = view.scrollLeft;
+        var scrollHeight = view.scrollHeight;
+        var scrollWidth = view.scrollWidth;
+        var clientHeight = view.clientHeight;
+        var clientWidth = view.clientWidth;
 
-        var scrollTop = $view.scrollTop;
-        var scrollLeft = $view.scrollLeft;
-        var scrollHeight = $view.scrollHeight;
-        var scrollWidth = $view.scrollWidth;
-        var clientHeight = $view.clientHeight;
-        var clientWidth = $view.clientWidth;
-        var y = scrollTop * 100 / clientHeight;
-        var x = scrollLeft * 100 / clientWidth;
         return {
-            x: x, y: y,
-            scrollLeft: scrollLeft, scrollTop: scrollTop,
-            scrollWidth: scrollWidth, scrollHeight: scrollHeight,
-            clientWidth: clientWidth, clientHeight: clientHeight,
+            x: scrollLeft * 100 / clientWidth,
+            y: scrollTop * 100 / clientHeight,
             left: scrollLeft / (scrollWidth - clientWidth) || 0,
-            top: scrollTop / (scrollHeight - clientHeight) || 0
+            top: scrollTop / (scrollHeight - clientHeight) || 0,
+            scrollLeft: scrollLeft,
+            scrollTop: scrollTop,
+            scrollWidth: scrollWidth,
+            scrollHeight: scrollHeight,
+            clientWidth: clientWidth,
+            clientHeight: clientHeight
         };
     },
-
     getInnerSizePercentage: function getInnerSizePercentage() {
-        var $view = arguments.length <= 0 || arguments[0] === undefined ? this.refs.view : arguments[0];
+        var view = this.refs.view;
 
         return {
-            widthPercentageInner: $view.clientWidth * 100 / $view.scrollWidth,
-            heightPercentageInner: $view.clientHeight * 100 / $view.scrollHeight
+            widthPercentageInner: view.clientWidth * 100 / view.scrollWidth,
+            heightPercentageInner: view.clientHeight * 100 / view.scrollHeight
         };
     },
-
-    scrollTop: function scrollTop() {
-        var top = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
-
-        var $view = this.refs.view;
-        $view.scrollTop = top;
-        this.needsUpdate = true;
-        this.update();
+    getThumbHorizontalStyle: function getThumbHorizontalStyle(x, widthPercentageInner) {
+        return {
+            width: widthPercentageInner < 100 ? widthPercentageInner + '%' : 0,
+            transform: 'translateX(' + x + '%)'
+        };
     },
+    getThumbVerticalStyle: function getThumbVerticalStyle(y, heightPercentageInner) {
+        return {
+            height: heightPercentageInner < 100 ? heightPercentageInner + '%' : 0,
+            transform: 'translateY(' + y + '%)'
+        };
+    },
+    getScrollbarHorizontalStyle: function getScrollbarHorizontalStyle(widthPercentageInner) {
+        return {
+            height: widthPercentageInner < 100 ? 6 : 0
+        };
+    },
+    getScrollbarVerticalStyle: function getScrollbarVerticalStyle(heightPercentageInner) {
+        return {
+            width: heightPercentageInner < 100 ? 6 : 0
+        };
+    },
+    setThumbHorizontalStyle: function setThumbHorizontalStyle(style) {
+        var thumbHorizontal = this.refs.thumbHorizontal;
 
-    scrollToTop: function scrollToTop() {
-        var $view = this.refs.view;
-        $view.scrollTop = 0;
-        this.needsUpdate = true;
-        this.update();
+        (0, _domCss2.default)(thumbHorizontal, style);
     },
+    setThumbVerticalStyle: function setThumbVerticalStyle(style) {
+        var thumbVertical = this.refs.thumbVertical;
 
-    scrollToBottom: function scrollToBottom() {
-        var $view = this.refs.view;
-        $view.scrollTop = $view.scrollHeight;
-        this.needsUpdate = true;
-        this.update();
+        (0, _domCss2.default)(thumbVertical, style);
     },
+    setScrollbarHorizontalStyle: function setScrollbarHorizontalStyle(style) {
+        var barHorizontal = this.refs.barHorizontal;
 
-    scrollLeft: function scrollLeft() {
-        var left = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
-
-        var $view = this.refs.view;
-        $view.scrollLeft = left;
-        this.needsUpdate = true;
-        this.update();
+        (0, _domCss2.default)(barHorizontal, style);
     },
+    setScrollbarVerticalStyle: function setScrollbarVerticalStyle(style) {
+        var barVertical = this.refs.barVertical;
 
-    scrollToLeft: function scrollToLeft() {
-        var $view = this.refs.view;
-        $view.scrollLeft = 0;
-        this.needsUpdate = true;
-        this.update();
+        (0, _domCss2.default)(barVertical, style);
     },
+    raf: function raf(callback) {
+        var _this = this;
 
-    scrollToRight: function scrollToRight() {
-        var $view = this.refs.view;
-        $view.scrollLeft = $view.scrollWidth;
-        this.needsUpdate = true;
-        this.update();
+        if (this.timer) _raf3.default.cancel(this.timer);
+        this.timer = (0, _raf3.default)(function () {
+            _this.timer = undefined;
+            callback();
+        });
     },
-
     update: function update() {
-        if (SCROLLBAR_WIDTH === 0) return;
-        if (!this.needsUpdate) return;
+        var _this2 = this;
 
-        var sizeInnerPercentage = this.getInnerSizePercentage();
+        if ((0, _getScrollbarWidth2.default)() === 0) return;
+        this.raf(function () {
+            var _getInnerSizePercenta = _this2.getInnerSizePercentage();
 
-        var _getPosition = this.getPosition();
+            var widthPercentageInner = _getInnerSizePercenta.widthPercentageInner;
+            var heightPercentageInner = _getInnerSizePercenta.heightPercentageInner;
 
-        var x = _getPosition.x;
-        var y = _getPosition.y;
+            var _getPosition = _this2.getPosition();
 
-        this.needsUpdate = false;
-        this.setState(_extends({}, sizeInnerPercentage, {
-            x: x, y: y
-        }));
+            var x = _getPosition.x;
+            var y = _getPosition.y;
+
+            _this2.setScrollbarHorizontalStyle(_this2.getScrollbarHorizontalStyle(widthPercentageInner));
+            _this2.setScrollbarVerticalStyle(_this2.getScrollbarVerticalStyle(heightPercentageInner));
+            _this2.setThumbHorizontalStyle(_this2.getThumbHorizontalStyle(x, widthPercentageInner));
+            _this2.setThumbVerticalStyle(_this2.getThumbVerticalStyle(y, heightPercentageInner));
+        });
     },
-
     handleScroll: function handleScroll(event) {
-        var position = this.getPosition();
-        var x = position.x;
-        var y = position.y;
+        var _this3 = this;
 
-        var values = _objectWithoutProperties(position, ['x', 'y']);
-
         var onScroll = this.props.onScroll;
 
-        if (onScroll) onScroll(event, values);
-        this.setState({ x: x, y: y });
+        this.raf(function () {
+            var _getPosition2 = _this3.getPosition();
+
+            var x = _getPosition2.x;
+            var y = _getPosition2.y;
+
+            var values = _objectWithoutProperties(_getPosition2, ['x', 'y']);
+
+            var _getInnerSizePercenta2 = _this3.getInnerSizePercentage();
+
+            var widthPercentageInner = _getInnerSizePercenta2.widthPercentageInner;
+            var heightPercentageInner = _getInnerSizePercenta2.heightPercentageInner;
+
+            if (onScroll) onScroll(event, values);
+
+            _this3.setThumbHorizontalStyle(_this3.getThumbHorizontalStyle(x, widthPercentageInner));
+            _this3.setThumbVerticalStyle(_this3.getThumbVerticalStyle(y, heightPercentageInner));
+        });
     },
+    handleVerticalTrackMouseDown: function handleVerticalTrackMouseDown(event) {
+        var _refs = this.refs;
+        var thumbVertical = _refs.thumbVertical;
+        var barVertical = _refs.barVertical;
+        var view = _refs.view;
 
-    handleVerticalTrackMouseDown: function handleVerticalTrackMouseDown(event) {
-        var $thumb = this.refs.thumbVertical;
-        var $bar = this.refs.barVertical;
-        var $view = this.refs.view;
         var offset = Math.abs(event.target.getBoundingClientRect().top - event.clientY);
-        var thumbHalf = $thumb.offsetHeight / 2;
-        var thumbPositionPercentage = (offset - thumbHalf) * 100 / $bar.offsetHeight;
-        $view.scrollTop = thumbPositionPercentage * $view.scrollHeight / 100;
+        var thumbHalf = thumbVertical.offsetHeight / 2;
+        var thumbPositionPercentage = (offset - thumbHalf) * 100 / barVertical.offsetHeight;
+        view.scrollTop = thumbPositionPercentage * view.scrollHeight / 100;
     },
+    handleHorizontalTrackMouseDown: function handleHorizontalTrackMouseDown() {
+        var _refs2 = this.refs;
+        var thumbHorizontal = _refs2.thumbHorizontal;
+        var barHorizontal = _refs2.barHorizontal;
+        var view = _refs2.view;
 
-    handleHorizontalTrackMouseDown: function handleHorizontalTrackMouseDown() {
-        var $thumb = this.refs.thumbHorizontal;
-        var $bar = this.refs.barHorizontal;
-        var $view = this.refs.view;
         var offset = Math.abs(event.target.getBoundingClientRect().left - event.clientX);
-        var thumbHalf = $thumb.offsetWidth / 2;
-        var thumbPositionPercentage = (offset - thumbHalf) * 100 / $bar.offsetWidth;
-        $view.scrollLeft = thumbPositionPercentage * $view.scrollWidth / 100;
+        var thumbHalf = thumbHorizontal.offsetWidth / 2;
+        var thumbPositionPercentage = (offset - thumbHalf) * 100 / barHorizontal.offsetWidth;
+        view.scrollLeft = thumbPositionPercentage * view.scrollWidth / 100;
     },
-
     handleVerticalThumbMouseDown: function handleVerticalThumbMouseDown(event) {
@@ -322,3 +229,2 @@ this.dragStart(event);
     },
-
     handleHorizontalThumbMouseDown: function handleHorizontalThumbMouseDown(event) {
@@ -331,60 +237,109 @@ this.dragStart(event);
     },
-
     handleDocumentMouseUp: function handleDocumentMouseUp() {
         this.dragEnd();
     },
-
     handleDocumentMouseMove: function handleDocumentMouseMove(event) {
-        if (this.cursorDown === false) return void 0;
+        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;
 
-        if (this.prevPageY) {
-            var $bar = this.refs.barVertical;
-            var $thumb = this.refs.thumbVertical;
-            var $view = this.refs.view;
-            var offset = ($bar.getBoundingClientRect().top - event.clientY) * -1;
-            var thumbClickPosition = $thumb.offsetHeight - this.prevPageY;
-            var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / $bar.offsetHeight;
-            $view.scrollTop = thumbPositionPercentage * $view.scrollHeight / 100;
-            return void 0;
+            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;
 
-        if (this.prevPageX) {
-            var $bar = this.refs.barHorizontal;
-            var $thumb = this.refs.thumbHorizontal;
-            var $view = this.refs.view;
-            var offset = ($bar.getBoundingClientRect().left - event.clientX) * -1;
-            var thumbClickPosition = $thumb.offsetWidth - this.prevPageX;
-            var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / $bar.offsetWidth;
-            $view.scrollLeft = thumbPositionPercentage * $view.scrollWidth / 100;
-            return void 0;
+            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;
         }
     },
-
     handleWindowResize: function handleWindowResize() {
-        this.needsUpdate = true;
         this.update();
     },
-
     dragStart: function dragStart(event) {
+        if (!document) return;
         event.stopImmediatePropagation();
         this.cursorDown = true;
-        _utilsAddClass2['default'](document.body, [classnames.disableSelection]);
+        (0, _domCss2.default)(document.body, _styles.disableSelectStyle);
         document.addEventListener('mousemove', this.handleDocumentMouseMove);
-        document.onselectstart = _utilsReturnFalse2['default'];
+        document.onselectstart = _returnFalse2.default;
     },
-
     dragEnd: function dragEnd() {
+        if (!document) return;
         this.cursorDown = false;
         this.prevPageX = this.prevPageY = 0;
-        _utilsRemoveClass2['default'](document.body, [classnames.disableSelection]);
+        (0, _domCss2.default)(document.body, _styles.resetDisableSelectStyle);
         document.removeEventListener('mousemove', this.handleDocumentMouseMove);
-        document.onselectstart = null;
+        document.onselectstart = undefined;
     },
+    scrollTop: function scrollTop() {
+        var top = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
+        var view = this.refs.view;
 
+        view.scrollTop = top;
+        this.update();
+    },
+    scrollToTop: function scrollToTop() {
+        var view = this.refs.view;
+
+        view.scrollTop = 0;
+        this.update();
+    },
+    scrollToBottom: function scrollToBottom() {
+        var view = this.refs.view;
+
+        view.scrollTop = view.scrollHeight;
+        this.update();
+    },
+    scrollLeft: function scrollLeft() {
+        var left = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
+        var view = this.refs.view;
+
+        view.scrollLeft = left;
+        this.update();
+    },
+    scrollToLeft: function scrollToLeft() {
+        var view = this.refs.view;
+
+        view.scrollLeft = 0;
+        this.update();
+    },
+    scrollToRight: function scrollToRight() {
+        var view = this.refs.view;
+
+        view.scrollLeft = view.scrollWidth;
+        this.update();
+    },
+    addListeners: function addListeners() {
+        this.refs.view.addEventListener('scroll', this.handleScroll);
+        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);
+        if (document) document.addEventListener('mouseup', this.handleDocumentMouseUp);
+        if (window) window.addEventListener('resize', this.handleWindowResize);
+    },
+    removeListeners: function removeListeners() {
+        this.refs.view.removeEventListener('scroll', this.handleScroll);
+        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);
+        if (document) document.removeEventListener('mouseup', this.handleDocumentMouseUp);
+        if (window) window.removeEventListener('resize', this.handleWindowResize);
+    },
     render: function render() {
-        var _state = this.state;
-        var x = _state.x;
-        var y = _state.y;
-        var widthPercentageInner = _state.widthPercentageInner;
-        var heightPercentageInner = _state.heightPercentageInner;
+        var scrollbarWidth = (0, _getScrollbarWidth2.default)();
         var _props = this.props;
@@ -402,5 +357,2 @@ var style = _props.style;
 
-        var thumbTranslateX = 'translateX(' + x + '%)';
-        var thumbTranslateY = 'translateY(' + y + '%)';
-
         var containerStyle = _extends({
@@ -413,61 +365,20 @@ position: 'relative',
 
-        var thumbStyle = {
-            position: 'relative',
-            display: 'block'
-        };
-
-        var thumbHorizontalStyle = _extends({}, thumbStyle, {
-            height: '100%',
-            width: widthPercentageInner < 100 ? widthPercentageInner + '%' : 0,
-            MsTransform: thumbTranslateX,
-            WebkitTransform: thumbTranslateX,
-            transform: thumbTranslateX
-        });
-
-        var thumbVerticalStyle = _extends({}, thumbStyle, {
-            width: '100%',
-            height: heightPercentageInner < 100 ? heightPercentageInner + '%' : 0,
-            MsTransform: thumbTranslateY,
-            WebkitTransform: thumbTranslateY,
-            transform: thumbTranslateY
-        });
-
-        var viewStyle = SCROLLBAR_WIDTH > 0 ? {
+        var viewStyle = scrollbarWidth > 0 ? {
             position: 'absolute',
             top: 0,
             left: 0,
-            right: -SCROLLBAR_WIDTH,
-            bottom: -SCROLLBAR_WIDTH,
+            right: -scrollbarWidth,
+            bottom: -scrollbarWidth,
             overflow: 'scroll',
             WebkitOverflowScrolling: 'touch'
-        } : {
-            position: 'relative',
-            width: '100%',
-            height: '100%',
-            overflow: 'scroll',
-            WebkitOverflowScrolling: 'touch'
-        };
+        } : _styles.viewStyleScrollbarsInvisible;
 
-        var scrollbarStyle = {
-            position: 'absolute',
-            zIndex: 1
-        };
-
-        var scrollbarHorizontalStyle = _extends({}, scrollbarStyle, {
-            height: widthPercentageInner < 100 ? 6 : 0
-        });
-
-        var scrollbarVerticalStyle = _extends({}, scrollbarStyle, {
-            width: heightPercentageInner < 100 ? 6 : 0
-        });
-
-        return _react2['default'].createElement(
+        return _react2.default.createElement(
             'div',
             _extends({}, props, { style: containerStyle }),
-            _react.cloneElement(scrollbarHorizontal({ style: scrollbarHorizontalStyle }), { ref: 'barHorizontal' }, _react.cloneElement(thumbHorizontal({ style: thumbHorizontalStyle }), { ref: 'thumbHorizontal' })),
-            _react.cloneElement(scrollbarVertical({ style: scrollbarVerticalStyle }), { ref: 'barVertical' }, _react.cloneElement(thumbVertical({ style: thumbVerticalStyle }), { ref: 'thumbVertical' })),
-            _react.cloneElement(view({ style: viewStyle }), { ref: 'view' }, children)
+            (0, _react.cloneElement)(view({ style: viewStyle }), { ref: 'view' }, children),
+            (0, _react.cloneElement)(scrollbarHorizontal({ style: _styles.scrollbarHorizontalStyle }), { ref: 'barHorizontal' }, (0, _react.cloneElement)(thumbHorizontal({ style: _styles.thumbHorizontalStyle }), { ref: 'thumbHorizontal' })),
+            (0, _react.cloneElement)(scrollbarVertical({ style: _styles.scrollbarVerticalStyle }), { ref: 'barVertical' }, (0, _react.cloneElement)(thumbVertical({ style: _styles.thumbVerticalStyle }), { ref: 'thumbVertical' }))
         );
     }
-});
-module.exports = exports['default'];
+});

lib/utils/getScrollbarWidth.js

 'use strict';
 
-exports.__esModule = true;
-exports['default'] = getScrollbarWidth;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = getScrollbarWidth;
 
-function getScrollbarWidth(className) {
-    var div = document.createElement('div');
-    div.className = className;
-    document.body.appendChild(div);
-    var scrollbarWidth = div.offsetWidth - div.clientWidth;
-    document.body.removeChild(div);
+var _domCss = require('dom-css');
+
+var _domCss2 = _interopRequireDefault(_domCss);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var scrollbarWidth = false;
+
+function getScrollbarWidth() {
+    if (scrollbarWidth !== false) return scrollbarWidth;
+    if (document) {
+        var div = document.createElement('div');
+        (0, _domCss2.default)(div, {
+            width: 100,
+            height: 100,
+            position: 'absolute',
+            top: -9999,
+            overflow: 'scroll',
+            '-ms-overflow-style': 'scrollbar'
+        });
+        document.body.appendChild(div);
+        scrollbarWidth = div.offsetWidth - div.clientWidth;
+        document.body.removeChild(div);
+    } else {
+        scrollbarWidth = 0;
+    }
     return scrollbarWidth;
-}
-
-module.exports = exports['default'];
+}

lib/utils/returnFalse.js

 "use strict";
 
-exports.__esModule = true;
-exports["default"] = returnFalse;
-
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = returnFalse;
 function returnFalse() {
     return false;
-}
-
-module.exports = exports["default"];
+}

package.json

 {
   "name": "react-custom-scrollbars",
-  "version": "1.1.0",
+  "version": "2.0.0-beta",
   "description": "React scrollbars component",
@@ -11,5 +11,4 @@ "main": "lib/index.js",
     "lint": "eslint src test examples",
-    "test": "NODE_ENV=test mocha --compilers js:babel/register --recursive",
-    "test:watch": "NODE_ENV=test mocha --compilers js:babel/register --recursive --watch",
-    "test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive",
+    "test": "NODE_ENV=test mocha --compilers js:babel-register --recursive",
+    "test:watch": "NODE_ENV=test mocha --compilers js:babel-register --recursive --watch",
     "prepublish": "npm run lint && npm run test && npm run clean && npm run build"
@@ -36,11 +35,15 @@ },
   "devDependencies": {
-    "babel": "^5.5.8",
-    "babel-core": "^5.6.18",
-    "babel-eslint": "^3.1.15",
-    "babel-loader": "^5.1.4",
-    "eslint": "^0.23",
-    "eslint-config-airbnb": "0.0.6",
-    "eslint-plugin-react": "^2.3.0",
+    "babel-cli": "^6.2.0",
+    "babel-core": "^6.2.1",
+    "babel-eslint": "4.*",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.1.18",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-1": "^6.1.18",
+    "babel-register": "^6.3.13",
+    "babel-runtime": "^6.3.19",
+    "eslint": "^1.6.0",
+    "eslint-config-airbnb": "^0.1.0",
+    "eslint-plugin-react": "^3.5.1",
     "expect": "^1.6.0",
-    "isparta": "^3.0.3",
     "mocha": "^2.2.5",
@@ -54,6 +57,9 @@ "react": "^0.14.3",
   "peerDependencies": {
-      "react": "^0.14.3",
-      "react-dom": "^0.14.3"
+    "react": "^0.14.5",
+    "react-dom": "^0.14.5"
   },
-  "dependencies": {}
+  "dependencies": {
+    "dom-css": "^2.0.0",
+    "raf": "^3.1.0"
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32738

increased by6.53%

Lines of code

501

increased by7.74%

Worsened metrics

Dependency count

4

increased by100%

Dev dependency count

19

increased by26.67%

Number of package files

17

decreased by-5.56%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addeddom-css@^2.0.0

• + Addedraf@^3.1.0

• + Addedadd-px-to-style@1.0.0(transitive)

• + Addeddom-css@2.1.0(transitive)

• + Addedperformance-now@2.1.0(transitive)

• + Addedprefix-style@2.0.1(transitive)

• + Addedraf@3.4.1(transitive)

• + Addedto-camel-case@1.0.0(transitive)

• + Addedto-no-case@1.0.2(transitive)

• + Addedto-space-case@1.0.0(transitive)