react-custom-scrollbars - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

lib/Scrollbars.js

@@ -71,2 +71,32 @@ 'use strict';
     },
+    getScrollLeft: function getScrollLeft() {
+        var view = this.refs.view;
+
+        return view.scrollLeft;
+    },
+    getScrollTop: function getScrollTop() {
+        var view = this.refs.view;
+
+        return view.scrollTop;
+    },
+    getScrollWidth: function getScrollWidth() {
+        var view = this.refs.view;
+
+        return view.scrollWidth;
+    },
+    getScrollHeight: function getScrollHeight() {
+        var view = this.refs.view;
+
+        return view.scrollHeight;
+    },
+    getWidth: function getWidth() {
+        var view = this.refs.view;
+
+        return view.clientWidth;
+    },
+    getHeight: function getHeight() {
+        var view = this.refs.view;
+
+        return view.clientHeight;
+    },
     getPosition: function getPosition() {
@@ -144,54 +174,60 @@ var view = this.refs.view;
     },
-    raf: function raf(callback) {
-        var _this = this;
+    scrollTop: function scrollTop() {
+        var top = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
+        var view = this.refs.view;
 
-        if (this.timer) _raf3.default.cancel(this.timer);
-        this.timer = (0, _raf3.default)(function () {
-            _this.timer = undefined;
-            callback();
-        });
+        view.scrollTop = top;
     },
-    update: function update() {
-        var _this2 = this;
+    scrollToTop: function scrollToTop() {
+        var view = this.refs.view;
 
-        if ((0, _getScrollbarWidth2.default)() === 0) return;
-        this.raf(function () {
-            var _getInnerSizePercenta = _this2.getInnerSizePercentage();
+        view.scrollTop = 0;
+    },
+    scrollToBottom: function scrollToBottom() {
+        var view = this.refs.view;
 
-            var widthPercentageInner = _getInnerSizePercenta.widthPercentageInner;
-            var heightPercentageInner = _getInnerSizePercenta.heightPercentageInner;
+        view.scrollTop = view.scrollHeight;
+    },
+    scrollLeft: function scrollLeft() {
+        var left = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
+        var view = this.refs.view;
 
-            var _getPosition = _this2.getPosition();
+        view.scrollLeft = left;
+    },
+    scrollToLeft: function scrollToLeft() {
+        var view = this.refs.view;
 
-            var x = _getPosition.x;
-            var y = _getPosition.y;
+        view.scrollLeft = 0;
+    },
+    scrollToRight: function scrollToRight() {
+        var view = this.refs.view;
 
-            _this2.setScrollbarHorizontalStyle(_this2.getScrollbarHorizontalStyle(widthPercentageInner));
-            _this2.setScrollbarVerticalStyle(_this2.getScrollbarVerticalStyle(heightPercentageInner));
-            _this2.setThumbHorizontalStyle(_this2.getThumbHorizontalStyle(x, widthPercentageInner));
-            _this2.setThumbVerticalStyle(_this2.getThumbVerticalStyle(y, heightPercentageInner));
-        });
+        view.scrollLeft = view.scrollWidth;
     },
+    addListeners: function addListeners() {
+        if (typeof document === 'undefined') return;
+        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() {
+        if (typeof document === 'undefined') return;
+        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);
+    },
     handleScroll: function handleScroll(event) {
-        var _this3 = this;
-
         var onScroll = this.props.onScroll;
 
-        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));
+        this.update(function (values) {
+            if (!onScroll) return;
+            onScroll(event, values);
         });
@@ -222,3 +258,3 @@ },
     handleVerticalThumbMouseDown: function handleVerticalThumbMouseDown(event) {
-        this.dragStart(event);
+        this.handleDragStart(event);
         var currentTarget = event.currentTarget;
@@ -230,3 +266,3 @@ var clientY = event.clientY;
     handleHorizontalThumbMouseDown: function handleHorizontalThumbMouseDown(event) {
-        this.dragStart(event);
+        this.handleDragStart(event);
         var currentTarget = event.currentTarget;
@@ -238,3 +274,3 @@ var clientX = event.clientX;
     handleDocumentMouseUp: function handleDocumentMouseUp() {
-        this.dragEnd();
+        this.handleDragEnd();
     },
@@ -271,3 +307,3 @@ handleDocumentMouseMove: function handleDocumentMouseMove(event) {
     },
-    dragStart: function dragStart(event) {
+    handleDragStart: function handleDragStart(event) {
         if (!document) return;
@@ -280,3 +316,3 @@ event.stopImmediatePropagation();
     },
-    dragEnd: function dragEnd() {
+    handleDragEnd: function handleDragEnd() {
         if (!document) return;
@@ -289,60 +325,37 @@ this.cursorDown = false;
     },
-    scrollTop: function scrollTop() {
-        var top = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
-        var view = this.refs.view;
+    raf: function raf(callback) {
+        var _this = this;
 
-        view.scrollTop = top;
-        this.update();
+        if (this.timer) _raf3.default.cancel(this.timer);
+        this.timer = (0, _raf3.default)(function () {
+            _this.timer = undefined;
+            callback();
+        });
     },
-    scrollToTop: function scrollToTop() {
-        var view = this.refs.view;
+    update: function update(callback) {
+        var _this2 = this;
 
-        view.scrollTop = 0;
-        this.update();
-    },
-    scrollToBottom: function scrollToBottom() {
-        var view = this.refs.view;
+        if ((0, _getScrollbarWidth2.default)() === 0) return;
+        this.raf(function () {
+            var _getInnerSizePercenta = _this2.getInnerSizePercentage();
 
-        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;
+            var widthPercentageInner = _getInnerSizePercenta.widthPercentageInner;
+            var heightPercentageInner = _getInnerSizePercenta.heightPercentageInner;
 
-        view.scrollLeft = left;
-        this.update();
-    },
-    scrollToLeft: function scrollToLeft() {
-        var view = this.refs.view;
+            var _getPosition = _this2.getPosition();
 
-        view.scrollLeft = 0;
-        this.update();
-    },
-    scrollToRight: function scrollToRight() {
-        var view = this.refs.view;
+            var x = _getPosition.x;
+            var y = _getPosition.y;
 
-        view.scrollLeft = view.scrollWidth;
-        this.update();
+            var values = _objectWithoutProperties(_getPosition, ['x', 'y']);
+
+            _this2.setScrollbarHorizontalStyle(_this2.getScrollbarHorizontalStyle(widthPercentageInner));
+            _this2.setScrollbarVerticalStyle(_this2.getScrollbarVerticalStyle(heightPercentageInner));
+            _this2.setThumbHorizontalStyle(_this2.getThumbHorizontalStyle(x, widthPercentageInner));
+            _this2.setThumbVerticalStyle(_this2.getThumbVerticalStyle(y, heightPercentageInner));
+
+            if (typeof callback !== 'function') return;
+            callback(values);
+        });
     },
-    addListeners: function addListeners() {
-        if (typeof document === 'undefined') return;
-        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() {
-        if (typeof document === 'undefined') return;
-        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);
-    },
     render: function render() {
@@ -349,0 +362,0 @@ var scrollbarWidth = (0, _getScrollbarWidth2.default)();

package.json

 {
   "name": "react-custom-scrollbars",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React scrollbars component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -140,8 +140,14 @@ react-custom-scrollbars
 
-* `scrollTop(top)`: Scroll to the top value
-* `scrollLeft(left)`: Scroll to the left value
-* `scrollToTop()`: Scroll to top
-* `scrollToBottom()`: Scroll to bottom
-* `scrollToLeft()`: Scroll to left
-* `scrollToRight()`: Scroll to right
+* `scrollTop(top)`: scroll to the top value
+* `scrollLeft(left)`: scroll to the left value
+* `scrollToTop()`: scroll to top
+* `scrollToBottom()`: scroll to bottom
+* `scrollToLeft()`: scroll to left
+* `scrollToRight()`: scroll to right
+* `getScrollLeft`: get scrollLeft value
+* `getScrollTop`: get scrollTop value
+* `getScrollWidth`: get scrollWidth value
+* `getScrollHeight`: get scrollHeight value
+* `getWidth`: get view client width
+* `getHeight`: get view client height
 
@@ -205,2 +211,5 @@ ```javascript
 ```bash
+# Make sure that you've installed the dependencies
+npm install
+# Move to example directory
 cd react-custom-scrollbars/examples/simple
@@ -207,0 +216,0 @@ npm install

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

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

33576

increased by1.42%

Lines of code

515

increased by2.39%

Number of lines in readme file

221

increased by4.25%

No dependency changes