react-custom-scrollbars - npm Package Compare versions

Comparing version 1.0.0-rc1 to 1.0.0-rc2

lib/Scrollbars.js

@@ -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 @@ };

lib/utils/addStyleSheet.js

@@ -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);

package.json

 {
   "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",

README.md

@@ -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 @@

No alert changes

Improved metrics

Lines of code

426

increased by1.43%

Number of lines in readme file

133

increased by0.76%

Worsened metrics

Total package byte prevSize

28996

decreased by-1.44%

No dependency changes