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 1.0.0-rc1 to 1.0.0-rc2
@@ -21,4 +21,2 @@ 'use strict'; | ||
| var _reactDom = require('react-dom'); | ||
| var _utilsAddClass = require('./utils/addClass'); | ||
@@ -32,2 +30,6 @@ | ||
| var _utilsAddStyleSheet = require('./utils/addStyleSheet'); | ||
| var _utilsAddStyleSheet2 = _interopRequireDefault(_utilsAddStyleSheet); | ||
| var _utilsGetScrollbarWidth = require('./utils/getScrollbarWidth'); | ||
@@ -37,6 +39,2 @@ | ||
| var _utilsAddStyleSheet = require('./utils/addStyleSheet'); | ||
| var _utilsAddStyleSheet2 = _interopRequireDefault(_utilsAddStyleSheet); | ||
| var _utilsReturnFalse = require('./utils/returnFalse'); | ||
@@ -147,3 +145,10 @@ | ||
| _Component.call(this, props, context); | ||
| _utilsAddStyleSheet2['default'](stylesheet); | ||
| if (SCROLLBAR_WIDTH === false) { | ||
| SCROLLBAR_WIDTH = _utilsGetScrollbarWidth2['default'](classnames.testScrollbar); | ||
| } | ||
| this.bindHandlers(); | ||
| this.needsUpdate = true; | ||
| this.state = { | ||
@@ -160,8 +165,2 @@ x: 0, | ||
| Scrollbars.prototype.componentDidMount = function componentDidMount() { | ||
| _utilsAddStyleSheet2['default'](stylesheet); | ||
| if (SCROLLBAR_WIDTH === false) { | ||
| SCROLLBAR_WIDTH = _utilsGetScrollbarWidth2['default'](classnames.testScrollbar); | ||
| } | ||
| this.addListeners(); | ||
@@ -172,2 +171,6 @@ this.update(); | ||
| Scrollbars.prototype.componentWillReceiveProps = function componentWillReceiveProps() { | ||
| this.needsUpdate = true; | ||
| }; | ||
| Scrollbars.prototype.componentDidUpdate = function componentDidUpdate() { | ||
| this.update(); | ||
@@ -193,7 +196,7 @@ }; | ||
| Scrollbars.prototype.addListeners = function addListeners() { | ||
| _reactDom.findDOMNode(this.refs.view).addEventListener('scroll', this.handleScroll); | ||
| _reactDom.findDOMNode(this.refs.barVertical).addEventListener('mousedown', this.handleVerticalTrackMouseDown); | ||
| _reactDom.findDOMNode(this.refs.barHorizontal).addEventListener('mousedown', this.handleHorizontalTrackMouseDown); | ||
| _reactDom.findDOMNode(this.refs.thumbVertical).addEventListener('mousedown', this.handleVerticalThumbMouseDown); | ||
| _reactDom.findDOMNode(this.refs.thumbHorizontal).addEventListener('mousedown', this.handleHorizontalThumbMouseDown); | ||
| 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); | ||
@@ -204,7 +207,7 @@ window.addEventListener('resize', this.handleWindowResize); | ||
| Scrollbars.prototype.removeListeners = function removeListeners() { | ||
| _reactDom.findDOMNode(this.refs.view).removeEventListener('scroll', this.handleScroll); | ||
| _reactDom.findDOMNode(this.refs.barVertical).removeEventListener('mousedown', this.handleVerticalTrackMouseDown); | ||
| _reactDom.findDOMNode(this.refs.barHorizontal).removeEventListener('mousedown', this.handleHorizontalTrackMouseDown); | ||
| _reactDom.findDOMNode(this.refs.thumbVertical).removeEventListener('mousedown', this.handleVerticalThumbMouseDown); | ||
| _reactDom.findDOMNode(this.refs.thumbHorizontal).removeEventListener('mousedown', this.handleHorizontalThumbMouseDown); | ||
| 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); | ||
@@ -233,5 +236,7 @@ window.removeEventListener('resize', this.handleWindowResize); | ||
| if (SCROLLBAR_WIDTH === 0) return; | ||
| var $view = this.refs.view; | ||
| var sizeInnerPercentage = this.getInnerSizePercentage($view); | ||
| var position = this.getPosition($view); | ||
| if (!this.needsUpdate) return; | ||
| var sizeInnerPercentage = this.getInnerSizePercentage(); | ||
| var position = this.getPosition(); | ||
| this.needsUpdate = false; | ||
| this.setState(_extends({}, sizeInnerPercentage, position)); | ||
@@ -245,5 +250,5 @@ }; | ||
| Scrollbars.prototype.handleVerticalTrackMouseDown = function handleVerticalTrackMouseDown(event) { | ||
| var $thumb = _reactDom.findDOMNode(this.refs.thumbVertical); | ||
| var $bar = _reactDom.findDOMNode(this.refs.barVertical); | ||
| var $view = _reactDom.findDOMNode(this.refs.view); | ||
| 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); | ||
@@ -256,5 +261,5 @@ var thumbHalf = $thumb.offsetHeight / 2; | ||
| Scrollbars.prototype.handleHorizontalTrackMouseDown = function handleHorizontalTrackMouseDown() { | ||
| var $thumb = _reactDom.findDOMNode(this.refs.thumbHorizontal); | ||
| var $bar = _reactDom.findDOMNode(this.refs.barHorizontal); | ||
| var $view = _reactDom.findDOMNode(this.refs.view); | ||
| 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); | ||
@@ -290,5 +295,5 @@ var thumbHalf = $thumb.offsetWidth / 2; | ||
| if (this.prevPageY) { | ||
| var $bar = _reactDom.findDOMNode(this.refs.barVertical); | ||
| var $thumb = _reactDom.findDOMNode(this.refs.thumbVertical); | ||
| var $view = _reactDom.findDOMNode(this.refs.view); | ||
| var $bar = this.refs.barVertical; | ||
| var $thumb = this.refs.thumbVertical; | ||
| var $view = this.refs.view; | ||
| var offset = ($bar.getBoundingClientRect().top - event.clientY) * -1; | ||
@@ -302,5 +307,5 @@ var thumbClickPosition = $thumb.offsetHeight - this.prevPageY; | ||
| if (this.prevPageX) { | ||
| var $bar = _reactDom.findDOMNode(this.refs.barHorizontal); | ||
| var $thumb = _reactDom.findDOMNode(this.refs.thumbHorizontal); | ||
| var $view = _reactDom.findDOMNode(this.refs.view); | ||
| var $bar = this.refs.barHorizontal; | ||
| var $thumb = this.refs.thumbHorizontal; | ||
| var $view = this.refs.view; | ||
| var offset = ($bar.getBoundingClientRect().left - event.clientX) * -1; | ||
@@ -315,2 +320,3 @@ var thumbClickPosition = $thumb.offsetWidth - this.prevPageX; | ||
| Scrollbars.prototype.handleWindowResize = function handleWindowResize() { | ||
| this.needsUpdate = true; | ||
| this.update(); | ||
@@ -317,0 +323,0 @@ }; |
@@ -5,8 +5,9 @@ 'use strict'; | ||
| exports['default'] = addStyleSheet; | ||
| var stylesheetAdded = false; | ||
| function addStyleSheet(styles) { | ||
| if (document.getElementById('react-custom-scrollbars-styles')) return; | ||
| if (stylesheetAdded) return; | ||
| stylesheetAdded = true; | ||
| var style = document.createElement('style'); | ||
| style.type = 'text/css'; | ||
| style.id = 'react-custom-scrollbars-styles'; | ||
| style.innerHTML = styles; | ||
@@ -13,0 +14,0 @@ document.body.appendChild(style); |
| { | ||
| "name": "react-custom-scrollbars", | ||
| "version": "1.0.0-rc1", | ||
| "version": "1.0.0-rc2", | ||
| "description": "React scrollbars component", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -14,5 +14,4 @@ react-custom-scrollbars | ||
| * IE9+ support | ||
| * ^react@0.14.0-beta3 | ||
| * inspired by noeldelgado's great [gemini-scrollbar](https://github.com/noeldelgado/gemini-scrollbar) | ||
| * [check out the demo](http://malte-wessel.github.io/react-custom-scrollbars/) | ||
| * react@0.14.0-rc1 | ||
| * **[check out the demo](http://malte-wessel.github.io/react-custom-scrollbars/)** | ||
@@ -49,6 +48,8 @@ ## Table of Contents | ||
| Don't forget to set the `viewport` meta tag: | ||
| Don't forget to set the `viewport` meta tag, if you want to support mobile devices | ||
| ```html | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> | ||
| ``` | ||
@@ -55,0 +56,0 @@ |
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
- Lines of code
- increased by1.43%
426
- Number of lines in readme file
- increased by0.76%
133
Worsened metrics
- Total package byte prevSize
- decreased by-1.44%
28996
No dependency changes