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

Comparing version 1.1.0 to 1.1.1

dist/es2015/component.d.ts

@@ -7,5 +7,18 @@ import * as React from 'react';
     gapMode?: GapMode;
+    dynamic?: boolean;
 }
+export interface BodyState {
+    gap: number;
+}
 export declare const zeroRightClassName = "right-scroll-bar-position";
 export declare const fullWidthClassName = "width-before-scroll-bar";
-export declare const RemoveScrollBar: React.SFC<BodyScroll>;
+export declare class RemoveScrollBar extends React.Component<BodyScroll, BodyState> {
+    state: {
+        gap: number;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(): void;
+    onResize: () => void;
+    render(): JSX.Element;
+}

dist/es2015/component.js

@@ -0,18 +1,71 @@
+import * as tslib_1 from "tslib";
 import * as React from 'react';
 import { styleSinglentone } from 'react-style-singleton';
 import { getGapWidth } from './utils';
+;
 var Style = styleSinglentone();
-var getStyles = function (gap, allowRelative, gapMode, important) { return "\n  body {\n    overflow: hidden " + important + ";\n    " + [
-    allowRelative && "position: relative " + important + ";",
-    gapMode == 'margin' && "margin-right: " + gap + "px " + important + ";",
-    gapMode == 'padding' && "padding-right: " + gap + "px " + important + ";",
-].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"; };
+var getStyles = function (gap, allowRelative, gapMode, important) {
+    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 == 'padding' && "padding-right: " + gap + "px " + important + ";",
+    ].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";
+};
 export var zeroRightClassName = 'right-scroll-bar-position';
 export var fullWidthClassName = 'width-before-scroll-bar';
-export var RemoveScrollBar = function (_a) {
-    var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
-    var gap = getGapWidth(gapMode);
-    return gap
-        ? React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') })
-        : null;
-};
+var RemoveScrollBar = (function (_super) {
+    tslib_1.__extends(RemoveScrollBar, _super);
+    function RemoveScrollBar() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            gap: getGapWidth(_this.props.gapMode)
+        };
+        _this.onResize = function () {
+            _this.forceUpdate();
+            if (_this.state.gap && _this.props.dynamic) {
+                if (window.innerHeight > document.body.offsetHeight) {
+                    _this.setState({
+                        gap: 0
+                    });
+                }
+            }
+        };
+        return _this;
+    }
+    RemoveScrollBar.prototype.componentDidMount = function () {
+        var gap = getGapWidth(this.props.gapMode);
+        if (gap !== this.state.gap) {
+            this.setState({
+                gap: gap
+            });
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.onResize);
+        }
+    };
+    RemoveScrollBar.prototype.componentWillUnmount = function () {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.onResize);
+        }
+    };
+    RemoveScrollBar.prototype.componentDidUpdate = function () {
+        if (!this.state.gap) {
+            var gap = getGapWidth(this.props.gapMode);
+            if (gap !== this.state.gap) {
+                this.setState({
+                    gap: gap
+                });
+            }
+        }
+    };
+    RemoveScrollBar.prototype.render = function () {
+        var _a = this.props, noRelative = _a.noRelative, noImportant = _a.noImportant, gapMode = _a.gapMode;
+        var gap = this.state.gap;
+        return gap
+            ? React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') })
+            : null;
+    };
+    return RemoveScrollBar;
+}(React.Component));
+export { RemoveScrollBar };

dist/es2015/utils.d.ts

 export declare type GapMode = 'padding' | 'margin';
-export declare const getGapWidth: (gapMode: GapMode) => number;
+export declare const getGapWidth: (gapMode?: GapMode) => number;

dist/es2015/utils.js

@@ -7,2 +7,3 @@ var getOffset = function (gapMode) {
 export var getGapWidth = function (gapMode) {
+    if (gapMode === void 0) { gapMode = 'margin'; }
     if (typeof window === 'undefined') {
@@ -9,0 +10,0 @@ return 0;

dist/es5/component.d.ts

@@ -7,5 +7,18 @@ import * as React from 'react';
     gapMode?: GapMode;
+    dynamic?: boolean;
 }
+export interface BodyState {
+    gap: number;
+}
 export declare const zeroRightClassName = "right-scroll-bar-position";
 export declare const fullWidthClassName = "width-before-scroll-bar";
-export declare const RemoveScrollBar: React.SFC<BodyScroll>;
+export declare class RemoveScrollBar extends React.Component<BodyScroll, BodyState> {
+    state: {
+        gap: number;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(): void;
+    onResize: () => void;
+    render(): JSX.Element;
+}

dist/es5/component.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
 var React = require("react");
 var react_style_singleton_1 = require("react-style-singleton");
 var utils_1 = require("./utils");
+;
 var Style = react_style_singleton_1.styleSinglentone();
-var getStyles = function (gap, allowRelative, gapMode, important) { return "\n  body {\n    overflow: hidden " + important + ";\n    " + [
-    allowRelative && "position: relative " + important + ";",
-    gapMode == 'margin' && "margin-right: " + gap + "px " + important + ";",
-    gapMode == 'padding' && "padding-right: " + gap + "px " + important + ";",
-].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"; };
+var getStyles = function (gap, allowRelative, gapMode, important) {
+    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 == 'padding' && "padding-right: " + gap + "px " + important + ";",
+    ].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";
+};
 exports.zeroRightClassName = 'right-scroll-bar-position';
 exports.fullWidthClassName = 'width-before-scroll-bar';
-exports.RemoveScrollBar = function (_a) {
-    var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
-    var gap = utils_1.getGapWidth(gapMode);
-    return gap
-        ? React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') })
-        : null;
-};
+var RemoveScrollBar = (function (_super) {
+    tslib_1.__extends(RemoveScrollBar, _super);
+    function RemoveScrollBar() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            gap: utils_1.getGapWidth(_this.props.gapMode)
+        };
+        _this.onResize = function () {
+            _this.forceUpdate();
+            if (_this.state.gap && _this.props.dynamic) {
+                if (window.innerHeight > document.body.offsetHeight) {
+                    _this.setState({
+                        gap: 0
+                    });
+                }
+            }
+        };
+        return _this;
+    }
+    RemoveScrollBar.prototype.componentDidMount = function () {
+        var gap = utils_1.getGapWidth(this.props.gapMode);
+        if (gap !== this.state.gap) {
+            this.setState({
+                gap: gap
+            });
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.onResize);
+        }
+    };
+    RemoveScrollBar.prototype.componentWillUnmount = function () {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.onResize);
+        }
+    };
+    RemoveScrollBar.prototype.componentDidUpdate = function () {
+        if (!this.state.gap) {
+            var gap = utils_1.getGapWidth(this.props.gapMode);
+            if (gap !== this.state.gap) {
+                this.setState({
+                    gap: gap
+                });
+            }
+        }
+    };
+    RemoveScrollBar.prototype.render = function () {
+        var _a = this.props, noRelative = _a.noRelative, noImportant = _a.noImportant, gapMode = _a.gapMode;
+        var gap = this.state.gap;
+        return gap
+            ? React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') })
+            : null;
+    };
+    return RemoveScrollBar;
+}(React.Component));
+exports.RemoveScrollBar = RemoveScrollBar;

dist/es5/utils.d.ts

 export declare type GapMode = 'padding' | 'margin';
-export declare const getGapWidth: (gapMode: GapMode) => number;
+export declare const getGapWidth: (gapMode?: GapMode) => number;

dist/es5/utils.js

@@ -9,2 +9,3 @@ "use strict";
 exports.getGapWidth = function (gapMode) {
+    if (gapMode === void 0) { gapMode = 'margin'; }
     if (typeof window === 'undefined') {
@@ -11,0 +12,0 @@ return 0;

package.json

 {
   "name": "react-remove-scroll-bar",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
@@ -12,2 +12,3 @@ "main": "dist/es5/index.js",
     "build": "ts-react-toolbox build",
+    "prepublish": "yarn build",
     "release": "ts-react-toolbox release",
@@ -14,0 +15,0 @@ "lint": "ts-react-toolbox lint",

No alert changes

Improved metrics

Total package byte prevSize

12513

increased by49.52%

Lines of code

245

increased by120.72%

No dependency changes