Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-custom-scrollbars
Advanced tools
react-custom-scrollbars - npm Package Compare versions
Comparing version 2.0.1 to 2.1.0
@@ -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)(); |
| { | ||
| "name": "react-custom-scrollbars", | ||
| "version": "2.0.1", | ||
| "version": "2.1.0", | ||
| "description": "React scrollbars component", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -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
LicenseThis 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
LicenseThis 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
- increased by1.42%
33576
- Lines of code
- increased by2.39%
515
- Number of lines in readme file
- increased by4.25%
221
No dependency changes