react-custom-scrollbars - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

docs/customization.md

 # Customization
 
-The `<Scrollbars>` consists of the following elements:
+The `<Scrollbars>` component consists of the following elements:
 
-* `view` The wrapper your content is rendered in
+* `view` The element your content is rendered in
 * `trackHorizontal` The horizontal scrollbars track
@@ -45,3 +45,3 @@ * `trackVertical` The vertical scrollbars track
 
-If you are working with **inline styles**, you could do something like the following:
+If you are working with **inline styles**, you could do something like this:
 
@@ -48,0 +48,0 @@ ```javascript

lib/index.js

@@ -12,5 +12,5 @@ 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-exports.default = _Scrollbars2.default;
-exports.Scrollbars = _Scrollbars2.default;
+exports["default"] = _Scrollbars2["default"];
+exports.Scrollbars = _Scrollbars2["default"];

lib/Scrollbars/defaultRenderElements.js

@@ -19,3 +19,3 @@ 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,3 +25,3 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 function renderViewDefault(props) {
-    return _react2.default.createElement('div', props);
+    return _react2["default"].createElement('div', props);
 }
@@ -41,3 +41,3 @@
     });
-    return _react2.default.createElement('div', _extends({ style: finalStyle }, props));
+    return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
 }
@@ -57,3 +57,3 @@
     });
-    return _react2.default.createElement('div', _extends({ style: finalStyle }, props));
+    return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
 }
@@ -71,3 +71,3 @@
     });
-    return _react2.default.createElement('div', _extends({ style: finalStyle }, props));
+    return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
 }
@@ -85,3 +85,3 @@
     });
-    return _react2.default.createElement('div', _extends({ style: finalStyle }, props));
+    return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
 }

lib/Scrollbars/index.js

@@ -41,7 +41,7 @@ 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-exports.default = (0, _react.createClass)({
+exports["default"] = (0, _react.createClass)({
 
@@ -171,3 +171,3 @@ displayName: 'Scrollbars',
 
-        var trackWidth = (0, _getInnerWidth2.default)(trackHorizontal);
+        var trackWidth = (0, _getInnerWidth2["default"])(trackHorizontal);
         var width = clientWidth / scrollWidth * trackWidth;
@@ -188,3 +188,3 @@ if (trackWidth === width) return 0;
 
-        var trackHeight = (0, _getInnerHeight2.default)(trackVertical);
+        var trackHeight = (0, _getInnerHeight2["default"])(trackVertical);
         var height = clientHeight / scrollHeight * trackHeight;
@@ -202,3 +202,3 @@ if (trackHeight === height) return 0;
 
-        var trackWidth = (0, _getInnerWidth2.default)(trackHorizontal);
+        var trackWidth = (0, _getInnerWidth2["default"])(trackHorizontal);
         var thumbWidth = this.getThumbHorizontalWidth();
@@ -214,3 +214,3 @@ return offset / (trackWidth - thumbWidth) * (scrollWidth - clientWidth);
 
-        var trackHeight = (0, _getInnerHeight2.default)(trackVertical);
+        var trackHeight = (0, _getInnerHeight2["default"])(trackVertical);
         var thumbHeight = this.getThumbVerticalHeight();
@@ -262,3 +262,3 @@ return offset / (trackHeight - thumbHeight) * (scrollHeight - clientHeight);
         view.addEventListener('scroll', this.handleScroll);
-        if (!(0, _getScrollbarWidth2.default)()) return;
+        if (!(0, _getScrollbarWidth2["default"])()) return;
         trackHorizontal.addEventListener('mouseenter', this.handleTrackMouseEnter);
@@ -285,3 +285,3 @@ trackHorizontal.addEventListener('mouseleave', this.handleTrackMouseLeave);
         view.removeEventListener('scroll', this.handleScroll);
-        if (!(0, _getScrollbarWidth2.default)()) return;
+        if (!(0, _getScrollbarWidth2["default"])()) return;
         trackHorizontal.removeEventListener('mouseenter', this.handleTrackMouseEnter);
@@ -396,9 +396,9 @@ trackHorizontal.removeEventListener('mouseleave', this.handleTrackMouseLeave);
     setupDragging: function setupDragging() {
-        (0, _domCss2.default)(document.body, _styles.disableSelectStyle);
+        (0, _domCss2["default"])(document.body, _styles.disableSelectStyle);
         document.addEventListener('mousemove', this.handleDrag);
         document.addEventListener('mouseup', this.handleDragEnd);
-        document.onselectstart = _returnFalse2.default;
+        document.onselectstart = _returnFalse2["default"];
     },
     teardownDragging: function teardownDragging() {
-        (0, _domCss2.default)(document.body, _styles.disableSelectStyleReset);
+        (0, _domCss2["default"])(document.body, _styles.disableSelectStyleReset);
         document.removeEventListener('mousemove', this.handleDrag);
@@ -484,4 +484,4 @@ document.removeEventListener('mouseup', this.handleDragEnd);
         clearTimeout(this.hideTracksTimeout);
-        (0, _domCss2.default)(trackHorizontal, { opacity: 1 });
-        (0, _domCss2.default)(trackVertical, { opacity: 1 });
+        (0, _domCss2["default"])(trackHorizontal, { opacity: 1 });
+        (0, _domCss2["default"])(trackVertical, { opacity: 1 });
     },
@@ -499,4 +499,4 @@ hideTracks: function hideTracks() {
         this.hideTracksTimeout = setTimeout(function () {
-            (0, _domCss2.default)(trackHorizontal, { opacity: 0 });
-            (0, _domCss2.default)(trackVertical, { opacity: 0 });
+            (0, _domCss2["default"])(trackHorizontal, { opacity: 0 });
+            (0, _domCss2["default"])(trackVertical, { opacity: 0 });
         }, autoHideTimeout);
@@ -523,4 +523,4 @@ },
 
-        if (this.requestFrame) _raf3.default.cancel(this.requestFrame);
-        this.requestFrame = (0, _raf3.default)(function () {
+        if (this.requestFrame) _raf3["default"].cancel(this.requestFrame);
+        this.requestFrame = (0, _raf3["default"])(function () {
             _this3.requestFrame = undefined;
@@ -535,3 +535,3 @@ callback();
             var values = _this4.getValues();
-            if ((0, _getScrollbarWidth2.default)()) {
+            if ((0, _getScrollbarWidth2["default"])()) {
                 var _refs11 = _this4.refs;
@@ -546,3 +546,3 @@ var thumbHorizontal = _refs11.thumbHorizontal;
 
-                var trackHorizontalWidth = (0, _getInnerWidth2.default)(trackHorizontal);
+                var trackHorizontalWidth = (0, _getInnerWidth2["default"])(trackHorizontal);
                 var thumbHorizontalWidth = _this4.getThumbHorizontalWidth();
@@ -558,3 +558,3 @@ var thumbHorizontalX = scrollLeft / (scrollWidth - clientWidth) * (trackHorizontalWidth - thumbHorizontalWidth);
 
-                var trackVerticalHeight = (0, _getInnerHeight2.default)(trackVertical);
+                var trackVerticalHeight = (0, _getInnerHeight2["default"])(trackVertical);
                 var thumbVerticalHeight = _this4.getThumbVerticalHeight();
@@ -566,4 +566,4 @@ var thumbVerticalY = scrollTop / (scrollHeight - clientHeight) * (trackVerticalHeight - thumbVerticalHeight);
                 };
-                (0, _domCss2.default)(thumbHorizontal, thumbHorizontalStyle);
-                (0, _domCss2.default)(thumbVertical, thumbVerticalStyle);
+                (0, _domCss2["default"])(thumbHorizontal, thumbHorizontalStyle);
+                (0, _domCss2["default"])(thumbVertical, thumbVerticalStyle);
             }
@@ -575,3 +575,3 @@ if (typeof callback !== 'function') return;
     render: function render() {
-        var scrollbarWidth = (0, _getScrollbarWidth2.default)();
+        var scrollbarWidth = (0, _getScrollbarWidth2["default"])();
         var _props4 = this.props;
@@ -609,3 +609,3 @@ var onScroll = _props4.onScroll;
 
-        return _react2.default.createElement(
+        return _react2["default"].createElement(
             'div',
@@ -612,0 +612,0 @@ _extends({}, props, { style: containerStyle, ref: 'container' }),

lib/utils/getInnerHeight.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = getInnerHeight;
+exports["default"] = getInnerHeight;
 function getInnerHeight(el) {
@@ -9,0 +9,0 @@ var clientHeight = el.clientHeight;

lib/utils/getInnerWidth.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = getInnerWidth;
+exports["default"] = getInnerWidth;
 function getInnerWidth(el) {
@@ -9,0 +9,0 @@ var clientWidth = el.clientWidth;

lib/utils/getScrollbarWidth.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.default = getScrollbarWidth;
+exports["default"] = getScrollbarWidth;
 
@@ -13,3 +13,3 @@ var _domCss = require('dom-css');
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -23,3 +23,3 @@ var scrollbarWidth = false;
         var div = document.createElement('div');
-        (0, _domCss2.default)(div, {
+        (0, _domCss2["default"])(div, {
             width: 100,
@@ -26,0 +26,0 @@ height: 100,

lib/utils/returnFalse.js

@@ -6,5 +6,5 @@ "use strict";
 });
-exports.default = returnFalse;
+exports["default"] = returnFalse;
 function returnFalse() {
     return false;
 }

package.json

 {
   "name": "react-custom-scrollbars",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "React scrollbars component",
@@ -9,3 +9,4 @@ "main": "lib/index.js",
     "build": "babel src --out-dir lib",
-    "build:umd": "webpack src/index.js dist/react-custom-scrollbars.js && NODE_ENV=production webpack src/index.js dist/react-custom-scrollbars.min.js",
+    "build:umd": "NODE_ENV=development webpack src/index.js dist/react-custom-scrollbars.js",
+    "build:umd:min": "NODE_ENV=production webpack src/index.js dist/react-custom-scrollbars.min.js",
     "lint": "eslint src test examples",
@@ -15,3 +16,3 @@ "test": "NODE_ENV=test karma start",
     "test:cov": "NODE_ENV=test COVERAGE=true karma start --single-run",
-    "prepublish": "npm run lint && npm run test && npm run clean && npm run build"
+    "prepublish": "npm run lint && npm run test && npm run clean && npm run build && npm run build:umd && npm run build:umd:min && node ./prepublish"
   },
@@ -46,2 +47,3 @@ "repository": {
     "babel-runtime": "^6.3.19",
+    "es3ify": "^0.2.1",
     "eslint": "^1.6.0",
@@ -51,2 +53,3 @@ "eslint-config-airbnb": "^5.0.0",
     "expect": "^1.6.0",
+    "glob": "^7.0.0",
     "isparta-loader": "^2.0.0",
@@ -53,0 +56,0 @@ "karma": "^0.13.10",

README.md

@@ -17,3 +17,3 @@ react-custom-scrollbars
 
-**[Examples](http://malte-wessel.github.io/react-custom-scrollbars/) · [Documentation](https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docs)**
+**[Demos](http://malte-wessel.github.io/react-custom-scrollbars/) · [Documentation](https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docs)**
 
@@ -20,0 +20,0 @@ ## Installation

webpack.config.js

@@ -24,2 +24,10 @@ 'use strict';
 module.exports = {
+    externals: {
+        react: {
+            root: 'React',
+            commonjs2: 'react',
+            commonjs: 'react',
+            amd: 'react'
+        }
+    },
     module: {
@@ -33,3 +41,3 @@ loaders: [{
     output: {
-        library: 'react-custom-scrollbars',
+        library: 'ReactCustomScrollbars',
         libraryTarget: 'umd'
@@ -36,0 +44,0 @@ },

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

121631

increased by115.71%

Number of package files

30

increased by11.11%

Lines of code

1963

increased by152.96%

Worsened metrics

Dev dependency count

32

increased by6.67%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

5

increased by66.67%

No dependency changes