react-custom-scrollbars - npm Package Compare versions

Comparing version 0.1.9 to 1.0.0-rc1

lib/Scrollbars.js

@@ -207,3 +207,4 @@ 'use strict';
     Scrollbars.prototype.getPosition = function getPosition() {
-        var $view = _reactDom.findDOMNode(this.refs.view);
+        var $view = arguments.length <= 0 || arguments[0] === undefined ? this.refs.view : arguments[0];
+
         var y = $view.scrollTop * 100 / $view.clientHeight;
@@ -214,12 +215,5 @@ var x = $view.scrollLeft * 100 / $view.clientWidth;
 
-    Scrollbars.prototype.getSize = function getSize() {
-        var $el = _reactDom.findDOMNode(this);
-        return {
-            width: $el.offsetWidth + SCROLLBAR_WIDTH + 1,
-            height: $el.offsetHeight + SCROLLBAR_WIDTH + 1
-        };
-    };
+    Scrollbars.prototype.getInnerSizePercentage = function getInnerSizePercentage() {
+        var $view = arguments.length <= 0 || arguments[0] === undefined ? this.refs.view : arguments[0];
 
-    Scrollbars.prototype.getInnerSizePercentage = function getInnerSizePercentage() {
-        var $view = _reactDom.findDOMNode(this.refs.view);
         return {
@@ -232,13 +226,7 @@ widthPercentageInner: $view.clientWidth * 100 / $view.scrollWidth,
     Scrollbars.prototype.update = function update() {
-        var _this = this;
-
         if (SCROLLBAR_WIDTH === 0) return;
-
-        var size = this.getSize();
-
-        this.setState(size, function () {
-            var sizeInnerPercentage = _this.getInnerSizePercentage();
-            var position = _this.getPosition();
-            _this.setState(_extends({}, sizeInnerPercentage, position));
-        });
+        var $view = this.refs.view;
+        var sizeInnerPercentage = this.getInnerSizePercentage($view);
+        var position = this.getPosition($view);
+        this.setState(_extends({}, sizeInnerPercentage, position));
     };
@@ -340,4 +328,2 @@
         var y = _state.y;
-        var width = _state.width;
-        var height = _state.height;
         var widthPercentageInner = _state.widthPercentageInner;
@@ -387,7 +373,16 @@ var heightPercentageInner = _state.heightPercentageInner;
 
-        var viewStyle = {
-            width: width,
-            height: height,
+        var viewStyle = SCROLLBAR_WIDTH > 0 ? {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: -SCROLLBAR_WIDTH,
+            bottom: -SCROLLBAR_WIDTH,
             overflow: 'scroll',
             WebkitOverflowScrolling: 'touch'
+        } : {
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            overflow: 'scroll',
+            WebkitOverflowScrolling: 'touch'
         };
@@ -394,0 +389,0 @@

package.json

 {
   "name": "react-custom-scrollbars",
-  "version": "0.1.9",
+  "version": "1.0.0-rc1",
   "description": "React scrollbars component",
@@ -45,4 +45,4 @@ "main": "lib/index.js",
     "mocha": "^2.2.5",
-    "react": "^0.14.0-beta3",
-    "react-dom": "^0.14.0-beta3",
+    "react": "^0.14.0-rc1",
+    "react-dom": "^0.14.0-rc1",
     "rimraf": "^2.3.4",
@@ -53,6 +53,6 @@ "webpack": "^1.9.6",
   "peerDependencies": {
-      "react": "^0.14.0-beta3",
-      "react-dom": "^0.14.0-beta3"
+      "react": "^0.14.0-rc1",
+      "react-dom": "^0.14.0-rc1"
   },
   "dependencies": {}
 }

README.md

@@ -5,3 +5,3 @@ react-custom-scrollbars
 [![npm](https://img.shields.io/badge/npm-react--custom--scrollbars-brightgreen.svg?style=flat-square)]()
-[![npm version](https://img.shields.io/npm/v/react-custom-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/react-custom-scrollbars) 
+[![npm version](https://img.shields.io/npm/v/react-custom-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/react-custom-scrollbars)
 [![npm downloads](https://img.shields.io/npm/dm/react-custom-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/react-custom-scrollbars)
@@ -49,2 +49,8 @@
 
+Don't forget to set the `viewport` meta tag:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
+```
+
 ## Customization
@@ -88,3 +94,3 @@ ```javascript
 
-The following properties expect a react element to be returned. You can customize the element to your needs. 
+The following properties expect a react element to be returned. You can customize the element to your needs.
 
@@ -91,0 +97,0 @@ * `scrollbarHorizontal`: (Function) Horizontal scrollbar element

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

29421

increased by0.48%

Number of lines in readme file

132

increased by4.76%

Worsened metrics

Lines of code

420

decreased by-0.71%

No dependency changes