react-remove-scroll-bar - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

dist/es2015/component.d.ts

 import * as React from 'react';
-import { GapMode } from './utils';
+import { GapMode, GapOffset } from './utils';
 export interface BodyScroll {
@@ -10,3 +10,3 @@ noRelative?: boolean;
 export interface BodyState {
-    gap: number;
+    gap: GapOffset;
 }
@@ -17,3 +17,3 @@ export declare const zeroRightClassName = "right-scroll-bar-position";
     state: {
-        gap: number;
+        gap: GapOffset;
     };
@@ -20,0 +20,0 @@ componentDidMount(): void;

dist/es2015/component.js

 import * as tslib_1 from "tslib";
 import * as React from 'react';
 import { styleSinglentone } from 'react-style-singleton';
-import { getGapWidth } from './utils';
+import { getGapWidth, zeroGap } from './utils';
 ;
 var Style = styleSinglentone();
-var getStyles = function (gap, allowRelative, gapMode, important) {
+var getStyles = function (_a, allowRelative, gapMode, important) {
+    var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
     if (gapMode === void 0) { gapMode = 'margin'; }
     return "\n  body {\n    overflow: hidden " + important + ";\n    " + [
         allowRelative && "position: relative " + important + ";",
-        gapMode == 'margin' && "margin-right: " + gap + "px " + important + ";",
+        gapMode == 'margin' && "\n    padding-left: " + left + "px;\n    padding-top: " + top + "px;\n    padding-right: " + right + "px;\n    margin-left:0;\n    margin-top:0;\n    margin-right: " + gap + "px " + important + ";\n    ",
         gapMode == 'padding' && "padding-right: " + gap + "px " + important + ";",
@@ -28,5 +29,3 @@ ].filter(Boolean).join('') + "\n  }\n  \n  .right-scroll-bar-position {\n    right: " + gap + "px " + important + ";\n  }\n  \n  .width-before-scroll-bar {\n    margin-right: " + gap + "px " + important + ";\n  }\n  \n  .right-scroll-bar-position .right-scroll-bar-position {\n    right: 0 " + important + ";\n  }\n  \n  .width-before-scroll-bar .width-before-scroll-bar {\n    margin-right: 0 " + important + ";\n  }\n";
                 if (window.innerHeight > document.body.offsetHeight) {
-                    _this.setState({
-                        gap: 0
-                    });
+                    _this.setState({ gap: zeroGap });
                 }
@@ -57,5 +56,3 @@ }
             if (gap !== this.state.gap) {
-                this.setState({
-                    gap: gap
-                });
+                this.setState({ gap: gap });
             }
@@ -65,5 +62,5 @@ }
     RemoveScrollBar.prototype.render = function () {
-        var _a = this.props, noRelative = _a.noRelative, noImportant = _a.noImportant, gapMode = _a.gapMode;
+        var _a = this.props, noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
         var gap = this.state.gap;
-        return gap
+        return gap.gap
             ? React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') })
@@ -70,0 +67,0 @@ : null;

dist/es2015/utils.d.ts

 export declare type GapMode = 'padding' | 'margin';
-export declare const getGapWidth: (gapMode?: GapMode) => number;
+export interface GapOffset {
+    left: number;
+    top: number;
+    right: number;
+    gap: number;
+}
+export declare const zeroGap: {
+    left: number;
+    top: number;
+    right: number;
+    gap: number;
+};
+export declare const getGapWidth: (gapMode?: GapMode) => GapOffset;

dist/es2015/utils.js

@@ -0,5 +1,17 @@
+export var zeroGap = {
+    left: 0,
+    top: 0,
+    right: 0,
+    gap: 0,
+};
 var getOffset = function (gapMode) {
     var cs = window.getComputedStyle(document.body);
-    var value = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
-    return parseInt(value || '', 10) || 0;
+    var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
+    var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
+    var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
+    return [
+        parseInt(left || '', 10) || 0,
+        parseInt(top || '', 10) || 0,
+        parseInt(right || '', 10) || 0
+    ];
 };
@@ -9,8 +21,13 @@ export var getGapWidth = function (gapMode) {
     if (typeof window === 'undefined') {
-        return 0;
+        return zeroGap;
     }
-    var currentOffset = getOffset(gapMode);
+    var offsets = getOffset(gapMode);
     var documentWidth = document.documentElement.clientWidth;
     var windowWidth = window.innerWidth;
-    return Math.max(0, windowWidth - documentWidth + currentOffset);
+    return {
+        left: offsets[0],
+        top: offsets[1],
+        right: offsets[2],
+        gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
+    };
 };

dist/es5/component.d.ts

 import * as React from 'react';
-import { GapMode } from './utils';
+import { GapMode, GapOffset } from './utils';
 export interface BodyScroll {
@@ -10,3 +10,3 @@ noRelative?: boolean;
 export interface BodyState {
-    gap: number;
+    gap: GapOffset;
 }
@@ -17,3 +17,3 @@ export declare const zeroRightClassName = "right-scroll-bar-position";
     state: {
-        gap: number;
+        gap: GapOffset;
     };
@@ -20,0 +20,0 @@ componentDidMount(): void;

dist/es5/component.js

@@ -9,7 +9,8 @@ "use strict";
 var Style = react_style_singleton_1.styleSinglentone();
-var getStyles = function (gap, allowRelative, gapMode, important) {
+var getStyles = function (_a, allowRelative, gapMode, important) {
+    var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
     if (gapMode === void 0) { gapMode = 'margin'; }
     return "\n  body {\n    overflow: hidden " + important + ";\n    " + [
         allowRelative && "position: relative " + important + ";",
-        gapMode == 'margin' && "margin-right: " + gap + "px " + important + ";",
+        gapMode == 'margin' && "\n    padding-left: " + left + "px;\n    padding-top: " + top + "px;\n    padding-right: " + right + "px;\n    margin-left:0;\n    margin-top:0;\n    margin-right: " + gap + "px " + important + ";\n    ",
         gapMode == 'padding' && "padding-right: " + gap + "px " + important + ";",
@@ -31,5 +32,3 @@ ].filter(Boolean).join('') + "\n  }\n  \n  .right-scroll-bar-position {\n    right: " + gap + "px " + important + ";\n  }\n  \n  .width-before-scroll-bar {\n    margin-right: " + gap + "px " + important + ";\n  }\n  \n  .right-scroll-bar-position .right-scroll-bar-position {\n    right: 0 " + important + ";\n  }\n  \n  .width-before-scroll-bar .width-before-scroll-bar {\n    margin-right: 0 " + important + ";\n  }\n";
                 if (window.innerHeight > document.body.offsetHeight) {
-                    _this.setState({
-                        gap: 0
-                    });
+                    _this.setState({ gap: utils_1.zeroGap });
                 }
@@ -60,5 +59,3 @@ }
             if (gap !== this.state.gap) {
-                this.setState({
-                    gap: gap
-                });
+                this.setState({ gap: gap });
             }
@@ -68,5 +65,5 @@ }
     RemoveScrollBar.prototype.render = function () {
-        var _a = this.props, noRelative = _a.noRelative, noImportant = _a.noImportant, gapMode = _a.gapMode;
+        var _a = this.props, noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
         var gap = this.state.gap;
-        return gap
+        return gap.gap
             ? React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') })
@@ -73,0 +70,0 @@ : null;

dist/es5/utils.d.ts

 export declare type GapMode = 'padding' | 'margin';
-export declare const getGapWidth: (gapMode?: GapMode) => number;
+export interface GapOffset {
+    left: number;
+    top: number;
+    right: number;
+    gap: number;
+}
+export declare const zeroGap: {
+    left: number;
+    top: number;
+    right: number;
+    gap: number;
+};
+export declare const getGapWidth: (gapMode?: GapMode) => GapOffset;

dist/es5/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.zeroGap = {
+    left: 0,
+    top: 0,
+    right: 0,
+    gap: 0,
+};
 var getOffset = function (gapMode) {
     var cs = window.getComputedStyle(document.body);
-    var value = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
-    return parseInt(value || '', 10) || 0;
+    var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
+    var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
+    var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
+    return [
+        parseInt(left || '', 10) || 0,
+        parseInt(top || '', 10) || 0,
+        parseInt(right || '', 10) || 0
+    ];
 };
@@ -11,8 +23,13 @@ exports.getGapWidth = function (gapMode) {
     if (typeof window === 'undefined') {
-        return 0;
+        return exports.zeroGap;
     }
-    var currentOffset = getOffset(gapMode);
+    var offsets = getOffset(gapMode);
     var documentWidth = document.documentElement.clientWidth;
     var windowWidth = window.innerWidth;
-    return Math.max(0, windowWidth - documentWidth + currentOffset);
+    return {
+        left: offsets[0],
+        top: offsets[1],
+        right: offsets[2],
+        gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
+    };
 };

package.json

 {
   "name": "react-remove-scroll-bar",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Removes body scroll without content _shake_",
@@ -5,0 +5,0 @@ "main": "dist/es5/index.js",

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

14524

increased by13.31%

Lines of code

297

increased by21.22%

No dependency changes