Initial commit
This commit is contained in:
52
node_modules/react-remove-scroll-bar/README.md
generated
vendored
Normal file
52
node_modules/react-remove-scroll-bar/README.md
generated
vendored
Normal file
@ -0,0 +1,52 @@
|
||||
<h1>react-remove-scroll-bar</h1>
|
||||
|
||||
[](https://www.npmjs.com/package/react-remove-scroll-bar)
|
||||
[](https://bundlephobia.com/result?p=react-remove-scroll-bar)
|
||||
[](https://www.npmtrends.com/react-remove-scroll-bar)
|
||||
|
||||
<hr />
|
||||
|
||||
> v1+ for React 15, v2+ requires React 16.8+
|
||||
|
||||
Removes scroll bar (by setting `overflow: hidden` on body), and preserves the scroll bar "gap".
|
||||
|
||||
Read - it just makes scroll bar invisible.
|
||||
|
||||
Does nothing if scroll bar does not consume any space.
|
||||
|
||||
# Usage
|
||||
|
||||
```js
|
||||
import {RemoveScrollBar} from 'react-remove-scroll-bar';
|
||||
|
||||
<RemoveScrollBar /> -> no scroll bar
|
||||
```
|
||||
|
||||
### The Right Border
|
||||
To prevent content jumps __position:fixed__ elements with `right:0` should have additional classname applied.
|
||||
It will just provide a _non-zero_ right, when it needed, to maintain the right "gap".
|
||||
```js
|
||||
import {zeroRightClassName,fullWidthClassName, noScrollbarsClassName} from 'react-remove-scroll-bar';
|
||||
|
||||
// to set `right:0` on an element
|
||||
<div className={zeroRightClassName} />
|
||||
|
||||
// to set `width:100%` on an element
|
||||
<div className={fullWidthClassName} />
|
||||
|
||||
// to remove scrollbar from an element
|
||||
<div className={noScrollbarsClassName} />
|
||||
|
||||
```
|
||||
|
||||
# Size
|
||||
500b after compression (excluding tslib).
|
||||
|
||||
# Scroll-Locky
|
||||
All code is a result of a [react-scroll-locky](https://github.com/theKashey/react-scroll-locky) refactoring.
|
||||
|
||||
# Article
|
||||
There is a medium article about preventing the body scroll - [How to fight the <body> scroll](https://medium.com/@antonkorzunov/how-to-fight-the-body-scroll-2b00267b37ac)
|
||||
|
||||
# License
|
||||
MIT
|
||||
8
node_modules/react-remove-scroll-bar/constants/package.json
generated
vendored
Normal file
8
node_modules/react-remove-scroll-bar/constants/package.json
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"description": "separate entrypoint for constants only",
|
||||
"private": true,
|
||||
"main": "../dist/es5/constants.js",
|
||||
"jsnext:main": "../dist/es2015/constants.js",
|
||||
"module": "../dist/es2015/constants.js",
|
||||
"sideEffects": false
|
||||
}
|
||||
13
node_modules/react-remove-scroll-bar/dist/es2015/component.d.ts
generated
vendored
Normal file
13
node_modules/react-remove-scroll-bar/dist/es2015/component.d.ts
generated
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import { GapMode } from './utils';
|
||||
export interface BodyScroll {
|
||||
noRelative?: boolean;
|
||||
noImportant?: boolean;
|
||||
gapMode?: GapMode;
|
||||
}
|
||||
export declare const lockAttribute = "data-scroll-locked";
|
||||
export declare const useLockAttribute: () => void;
|
||||
/**
|
||||
* Removes page scrollbar and blocks page scroll when mounted
|
||||
*/
|
||||
export declare const RemoveScrollBar: React.FC<BodyScroll>;
|
||||
53
node_modules/react-remove-scroll-bar/dist/es2015/component.js
generated
vendored
Normal file
53
node_modules/react-remove-scroll-bar/dist/es2015/component.js
generated
vendored
Normal file
@ -0,0 +1,53 @@
|
||||
import * as React from 'react';
|
||||
import { styleSingleton } from 'react-style-singleton';
|
||||
import { fullWidthClassName, zeroRightClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
|
||||
import { getGapWidth } from './utils';
|
||||
var Style = styleSingleton();
|
||||
export var lockAttribute = 'data-scroll-locked';
|
||||
// important tip - once we measure scrollBar width and remove them
|
||||
// we could not repeat this operation
|
||||
// thus we are using style-singleton - only the first "yet correct" style will be applied.
|
||||
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 .".concat(noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body[").concat(lockAttribute, "] {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([
|
||||
allowRelative && "position: relative ".concat(important, ";"),
|
||||
gapMode === 'margin' &&
|
||||
"\n padding-left: ".concat(left, "px;\n padding-top: ").concat(top, "px;\n padding-right: ").concat(right, "px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(gap, "px ").concat(important, ";\n "),
|
||||
gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(''), "\n }\n \n .").concat(zeroRightClassName, " {\n right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " {\n margin-right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n right: 0 ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n margin-right: 0 ").concat(important, ";\n }\n \n body[").concat(lockAttribute, "] {\n ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n }\n");
|
||||
};
|
||||
var getCurrentUseCounter = function () {
|
||||
var counter = parseInt(document.body.getAttribute(lockAttribute) || '0', 10);
|
||||
return isFinite(counter) ? counter : 0;
|
||||
};
|
||||
export var useLockAttribute = function () {
|
||||
React.useEffect(function () {
|
||||
document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
|
||||
return function () {
|
||||
var newCounter = getCurrentUseCounter() - 1;
|
||||
if (newCounter <= 0) {
|
||||
document.body.removeAttribute(lockAttribute);
|
||||
}
|
||||
else {
|
||||
document.body.setAttribute(lockAttribute, newCounter.toString());
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
};
|
||||
/**
|
||||
* Removes page scrollbar and blocks page scroll when mounted
|
||||
*/
|
||||
export var RemoveScrollBar = function (_a) {
|
||||
var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
|
||||
useLockAttribute();
|
||||
/*
|
||||
gap will be measured on every component mount
|
||||
however it will be used only by the "first" invocation
|
||||
due to singleton nature of <Style
|
||||
*/
|
||||
var gap = React.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
|
||||
return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
|
||||
};
|
||||
8
node_modules/react-remove-scroll-bar/dist/es2015/constants.d.ts
generated
vendored
Normal file
8
node_modules/react-remove-scroll-bar/dist/es2015/constants.d.ts
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
export declare const zeroRightClassName = "right-scroll-bar-position";
|
||||
export declare const fullWidthClassName = "width-before-scroll-bar";
|
||||
export declare const noScrollbarsClassName = "with-scroll-bars-hidden";
|
||||
/**
|
||||
* Name of a CSS variable containing the amount of "hidden" scrollbar
|
||||
* ! might be undefined ! use will fallback!
|
||||
*/
|
||||
export declare const removedBarSizeVariable = "--removed-body-scroll-bar-size";
|
||||
8
node_modules/react-remove-scroll-bar/dist/es2015/constants.js
generated
vendored
Normal file
8
node_modules/react-remove-scroll-bar/dist/es2015/constants.js
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
export var zeroRightClassName = 'right-scroll-bar-position';
|
||||
export var fullWidthClassName = 'width-before-scroll-bar';
|
||||
export var noScrollbarsClassName = 'with-scroll-bars-hidden';
|
||||
/**
|
||||
* Name of a CSS variable containing the amount of "hidden" scrollbar
|
||||
* ! might be undefined ! use will fallback!
|
||||
*/
|
||||
export var removedBarSizeVariable = '--removed-body-scroll-bar-size';
|
||||
4
node_modules/react-remove-scroll-bar/dist/es2015/index.d.ts
generated
vendored
Normal file
4
node_modules/react-remove-scroll-bar/dist/es2015/index.d.ts
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
import { RemoveScrollBar } from './component';
|
||||
import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
|
||||
import { getGapWidth } from './utils';
|
||||
export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth, };
|
||||
4
node_modules/react-remove-scroll-bar/dist/es2015/index.js
generated
vendored
Normal file
4
node_modules/react-remove-scroll-bar/dist/es2015/index.js
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
import { RemoveScrollBar } from './component';
|
||||
import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
|
||||
import { getGapWidth } from './utils';
|
||||
export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth, };
|
||||
14
node_modules/react-remove-scroll-bar/dist/es2015/utils.d.ts
generated
vendored
Normal file
14
node_modules/react-remove-scroll-bar/dist/es2015/utils.d.ts
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
export declare type GapMode = 'padding' | 'margin';
|
||||
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;
|
||||
29
node_modules/react-remove-scroll-bar/dist/es2015/utils.js
generated
vendored
Normal file
29
node_modules/react-remove-scroll-bar/dist/es2015/utils.js
generated
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
export var zeroGap = {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
gap: 0,
|
||||
};
|
||||
var parse = function (x) { return parseInt(x || '', 10) || 0; };
|
||||
var getOffset = function (gapMode) {
|
||||
var cs = window.getComputedStyle(document.body);
|
||||
var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
|
||||
var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
|
||||
var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
|
||||
return [parse(left), parse(top), parse(right)];
|
||||
};
|
||||
export var getGapWidth = function (gapMode) {
|
||||
if (gapMode === void 0) { gapMode = 'margin'; }
|
||||
if (typeof window === 'undefined') {
|
||||
return zeroGap;
|
||||
}
|
||||
var offsets = getOffset(gapMode);
|
||||
var documentWidth = document.documentElement.clientWidth;
|
||||
var windowWidth = window.innerWidth;
|
||||
return {
|
||||
left: offsets[0],
|
||||
top: offsets[1],
|
||||
right: offsets[2],
|
||||
gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
|
||||
};
|
||||
};
|
||||
13
node_modules/react-remove-scroll-bar/dist/es2019/component.d.ts
generated
vendored
Normal file
13
node_modules/react-remove-scroll-bar/dist/es2019/component.d.ts
generated
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import { GapMode } from './utils';
|
||||
export interface BodyScroll {
|
||||
noRelative?: boolean;
|
||||
noImportant?: boolean;
|
||||
gapMode?: GapMode;
|
||||
}
|
||||
export declare const lockAttribute = "data-scroll-locked";
|
||||
export declare const useLockAttribute: () => void;
|
||||
/**
|
||||
* Removes page scrollbar and blocks page scroll when mounted
|
||||
*/
|
||||
export declare const RemoveScrollBar: React.FC<BodyScroll>;
|
||||
85
node_modules/react-remove-scroll-bar/dist/es2019/component.js
generated
vendored
Normal file
85
node_modules/react-remove-scroll-bar/dist/es2019/component.js
generated
vendored
Normal file
@ -0,0 +1,85 @@
|
||||
import * as React from 'react';
|
||||
import { styleSingleton } from 'react-style-singleton';
|
||||
import { fullWidthClassName, zeroRightClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
|
||||
import { getGapWidth } from './utils';
|
||||
const Style = styleSingleton();
|
||||
export const lockAttribute = 'data-scroll-locked';
|
||||
// important tip - once we measure scrollBar width and remove them
|
||||
// we could not repeat this operation
|
||||
// thus we are using style-singleton - only the first "yet correct" style will be applied.
|
||||
const getStyles = ({ left, top, right, gap }, allowRelative, gapMode = 'margin', important) => `
|
||||
.${noScrollbarsClassName} {
|
||||
overflow: hidden ${important};
|
||||
padding-right: ${gap}px ${important};
|
||||
}
|
||||
body[${lockAttribute}] {
|
||||
overflow: hidden ${important};
|
||||
overscroll-behavior: contain;
|
||||
${[
|
||||
allowRelative && `position: relative ${important};`,
|
||||
gapMode === 'margin' &&
|
||||
`
|
||||
padding-left: ${left}px;
|
||||
padding-top: ${top}px;
|
||||
padding-right: ${right}px;
|
||||
margin-left:0;
|
||||
margin-top:0;
|
||||
margin-right: ${gap}px ${important};
|
||||
`,
|
||||
gapMode === 'padding' && `padding-right: ${gap}px ${important};`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('')}
|
||||
}
|
||||
|
||||
.${zeroRightClassName} {
|
||||
right: ${gap}px ${important};
|
||||
}
|
||||
|
||||
.${fullWidthClassName} {
|
||||
margin-right: ${gap}px ${important};
|
||||
}
|
||||
|
||||
.${zeroRightClassName} .${zeroRightClassName} {
|
||||
right: 0 ${important};
|
||||
}
|
||||
|
||||
.${fullWidthClassName} .${fullWidthClassName} {
|
||||
margin-right: 0 ${important};
|
||||
}
|
||||
|
||||
body[${lockAttribute}] {
|
||||
${removedBarSizeVariable}: ${gap}px;
|
||||
}
|
||||
`;
|
||||
const getCurrentUseCounter = () => {
|
||||
const counter = parseInt(document.body.getAttribute(lockAttribute) || '0', 10);
|
||||
return isFinite(counter) ? counter : 0;
|
||||
};
|
||||
export const useLockAttribute = () => {
|
||||
React.useEffect(() => {
|
||||
document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
|
||||
return () => {
|
||||
const newCounter = getCurrentUseCounter() - 1;
|
||||
if (newCounter <= 0) {
|
||||
document.body.removeAttribute(lockAttribute);
|
||||
}
|
||||
else {
|
||||
document.body.setAttribute(lockAttribute, newCounter.toString());
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
};
|
||||
/**
|
||||
* Removes page scrollbar and blocks page scroll when mounted
|
||||
*/
|
||||
export const RemoveScrollBar = ({ noRelative, noImportant, gapMode = 'margin' }) => {
|
||||
useLockAttribute();
|
||||
/*
|
||||
gap will be measured on every component mount
|
||||
however it will be used only by the "first" invocation
|
||||
due to singleton nature of <Style
|
||||
*/
|
||||
const gap = React.useMemo(() => getGapWidth(gapMode), [gapMode]);
|
||||
return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
|
||||
};
|
||||
8
node_modules/react-remove-scroll-bar/dist/es2019/constants.d.ts
generated
vendored
Normal file
8
node_modules/react-remove-scroll-bar/dist/es2019/constants.d.ts
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
export declare const zeroRightClassName = "right-scroll-bar-position";
|
||||
export declare const fullWidthClassName = "width-before-scroll-bar";
|
||||
export declare const noScrollbarsClassName = "with-scroll-bars-hidden";
|
||||
/**
|
||||
* Name of a CSS variable containing the amount of "hidden" scrollbar
|
||||
* ! might be undefined ! use will fallback!
|
||||
*/
|
||||
export declare const removedBarSizeVariable = "--removed-body-scroll-bar-size";
|
||||
8
node_modules/react-remove-scroll-bar/dist/es2019/constants.js
generated
vendored
Normal file
8
node_modules/react-remove-scroll-bar/dist/es2019/constants.js
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
export const zeroRightClassName = 'right-scroll-bar-position';
|
||||
export const fullWidthClassName = 'width-before-scroll-bar';
|
||||
export const noScrollbarsClassName = 'with-scroll-bars-hidden';
|
||||
/**
|
||||
* Name of a CSS variable containing the amount of "hidden" scrollbar
|
||||
* ! might be undefined ! use will fallback!
|
||||
*/
|
||||
export const removedBarSizeVariable = '--removed-body-scroll-bar-size';
|
||||
4
node_modules/react-remove-scroll-bar/dist/es2019/index.d.ts
generated
vendored
Normal file
4
node_modules/react-remove-scroll-bar/dist/es2019/index.d.ts
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
import { RemoveScrollBar } from './component';
|
||||
import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
|
||||
import { getGapWidth } from './utils';
|
||||
export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth, };
|
||||
4
node_modules/react-remove-scroll-bar/dist/es2019/index.js
generated
vendored
Normal file
4
node_modules/react-remove-scroll-bar/dist/es2019/index.js
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
import { RemoveScrollBar } from './component';
|
||||
import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
|
||||
import { getGapWidth } from './utils';
|
||||
export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth, };
|
||||
14
node_modules/react-remove-scroll-bar/dist/es2019/utils.d.ts
generated
vendored
Normal file
14
node_modules/react-remove-scroll-bar/dist/es2019/utils.d.ts
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
export declare type GapMode = 'padding' | 'margin';
|
||||
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;
|
||||
28
node_modules/react-remove-scroll-bar/dist/es2019/utils.js
generated
vendored
Normal file
28
node_modules/react-remove-scroll-bar/dist/es2019/utils.js
generated
vendored
Normal file
@ -0,0 +1,28 @@
|
||||
export const zeroGap = {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
gap: 0,
|
||||
};
|
||||
const parse = (x) => parseInt(x || '', 10) || 0;
|
||||
const getOffset = (gapMode) => {
|
||||
const cs = window.getComputedStyle(document.body);
|
||||
const left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
|
||||
const top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
|
||||
const right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
|
||||
return [parse(left), parse(top), parse(right)];
|
||||
};
|
||||
export const getGapWidth = (gapMode = 'margin') => {
|
||||
if (typeof window === 'undefined') {
|
||||
return zeroGap;
|
||||
}
|
||||
const offsets = getOffset(gapMode);
|
||||
const documentWidth = document.documentElement.clientWidth;
|
||||
const windowWidth = window.innerWidth;
|
||||
return {
|
||||
left: offsets[0],
|
||||
top: offsets[1],
|
||||
right: offsets[2],
|
||||
gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
|
||||
};
|
||||
};
|
||||
13
node_modules/react-remove-scroll-bar/dist/es5/component.d.ts
generated
vendored
Normal file
13
node_modules/react-remove-scroll-bar/dist/es5/component.d.ts
generated
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import { GapMode } from './utils';
|
||||
export interface BodyScroll {
|
||||
noRelative?: boolean;
|
||||
noImportant?: boolean;
|
||||
gapMode?: GapMode;
|
||||
}
|
||||
export declare const lockAttribute = "data-scroll-locked";
|
||||
export declare const useLockAttribute: () => void;
|
||||
/**
|
||||
* Removes page scrollbar and blocks page scroll when mounted
|
||||
*/
|
||||
export declare const RemoveScrollBar: React.FC<BodyScroll>;
|
||||
59
node_modules/react-remove-scroll-bar/dist/es5/component.js
generated
vendored
Normal file
59
node_modules/react-remove-scroll-bar/dist/es5/component.js
generated
vendored
Normal file
@ -0,0 +1,59 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.RemoveScrollBar = exports.useLockAttribute = exports.lockAttribute = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var react_style_singleton_1 = require("react-style-singleton");
|
||||
var constants_1 = require("./constants");
|
||||
var utils_1 = require("./utils");
|
||||
var Style = (0, react_style_singleton_1.styleSingleton)();
|
||||
exports.lockAttribute = 'data-scroll-locked';
|
||||
// important tip - once we measure scrollBar width and remove them
|
||||
// we could not repeat this operation
|
||||
// thus we are using style-singleton - only the first "yet correct" style will be applied.
|
||||
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 .".concat(constants_1.noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body[").concat(exports.lockAttribute, "] {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([
|
||||
allowRelative && "position: relative ".concat(important, ";"),
|
||||
gapMode === 'margin' &&
|
||||
"\n padding-left: ".concat(left, "px;\n padding-top: ").concat(top, "px;\n padding-right: ").concat(right, "px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(gap, "px ").concat(important, ";\n "),
|
||||
gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(''), "\n }\n \n .").concat(constants_1.zeroRightClassName, " {\n right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(constants_1.fullWidthClassName, " {\n margin-right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(constants_1.zeroRightClassName, " .").concat(constants_1.zeroRightClassName, " {\n right: 0 ").concat(important, ";\n }\n \n .").concat(constants_1.fullWidthClassName, " .").concat(constants_1.fullWidthClassName, " {\n margin-right: 0 ").concat(important, ";\n }\n \n body[").concat(exports.lockAttribute, "] {\n ").concat(constants_1.removedBarSizeVariable, ": ").concat(gap, "px;\n }\n");
|
||||
};
|
||||
var getCurrentUseCounter = function () {
|
||||
var counter = parseInt(document.body.getAttribute(exports.lockAttribute) || '0', 10);
|
||||
return isFinite(counter) ? counter : 0;
|
||||
};
|
||||
var useLockAttribute = function () {
|
||||
React.useEffect(function () {
|
||||
document.body.setAttribute(exports.lockAttribute, (getCurrentUseCounter() + 1).toString());
|
||||
return function () {
|
||||
var newCounter = getCurrentUseCounter() - 1;
|
||||
if (newCounter <= 0) {
|
||||
document.body.removeAttribute(exports.lockAttribute);
|
||||
}
|
||||
else {
|
||||
document.body.setAttribute(exports.lockAttribute, newCounter.toString());
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
};
|
||||
exports.useLockAttribute = useLockAttribute;
|
||||
/**
|
||||
* Removes page scrollbar and blocks page scroll when mounted
|
||||
*/
|
||||
var RemoveScrollBar = function (_a) {
|
||||
var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
|
||||
(0, exports.useLockAttribute)();
|
||||
/*
|
||||
gap will be measured on every component mount
|
||||
however it will be used only by the "first" invocation
|
||||
due to singleton nature of <Style
|
||||
*/
|
||||
var gap = React.useMemo(function () { return (0, utils_1.getGapWidth)(gapMode); }, [gapMode]);
|
||||
return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
|
||||
};
|
||||
exports.RemoveScrollBar = RemoveScrollBar;
|
||||
8
node_modules/react-remove-scroll-bar/dist/es5/constants.d.ts
generated
vendored
Normal file
8
node_modules/react-remove-scroll-bar/dist/es5/constants.d.ts
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
export declare const zeroRightClassName = "right-scroll-bar-position";
|
||||
export declare const fullWidthClassName = "width-before-scroll-bar";
|
||||
export declare const noScrollbarsClassName = "with-scroll-bars-hidden";
|
||||
/**
|
||||
* Name of a CSS variable containing the amount of "hidden" scrollbar
|
||||
* ! might be undefined ! use will fallback!
|
||||
*/
|
||||
export declare const removedBarSizeVariable = "--removed-body-scroll-bar-size";
|
||||
11
node_modules/react-remove-scroll-bar/dist/es5/constants.js
generated
vendored
Normal file
11
node_modules/react-remove-scroll-bar/dist/es5/constants.js
generated
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.removedBarSizeVariable = exports.noScrollbarsClassName = exports.fullWidthClassName = exports.zeroRightClassName = void 0;
|
||||
exports.zeroRightClassName = 'right-scroll-bar-position';
|
||||
exports.fullWidthClassName = 'width-before-scroll-bar';
|
||||
exports.noScrollbarsClassName = 'with-scroll-bars-hidden';
|
||||
/**
|
||||
* Name of a CSS variable containing the amount of "hidden" scrollbar
|
||||
* ! might be undefined ! use will fallback!
|
||||
*/
|
||||
exports.removedBarSizeVariable = '--removed-body-scroll-bar-size';
|
||||
4
node_modules/react-remove-scroll-bar/dist/es5/index.d.ts
generated
vendored
Normal file
4
node_modules/react-remove-scroll-bar/dist/es5/index.d.ts
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
import { RemoveScrollBar } from './component';
|
||||
import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
|
||||
import { getGapWidth } from './utils';
|
||||
export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth, };
|
||||
12
node_modules/react-remove-scroll-bar/dist/es5/index.js
generated
vendored
Normal file
12
node_modules/react-remove-scroll-bar/dist/es5/index.js
generated
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.getGapWidth = exports.removedBarSizeVariable = exports.noScrollbarsClassName = exports.fullWidthClassName = exports.zeroRightClassName = exports.RemoveScrollBar = void 0;
|
||||
var component_1 = require("./component");
|
||||
Object.defineProperty(exports, "RemoveScrollBar", { enumerable: true, get: function () { return component_1.RemoveScrollBar; } });
|
||||
var constants_1 = require("./constants");
|
||||
Object.defineProperty(exports, "zeroRightClassName", { enumerable: true, get: function () { return constants_1.zeroRightClassName; } });
|
||||
Object.defineProperty(exports, "fullWidthClassName", { enumerable: true, get: function () { return constants_1.fullWidthClassName; } });
|
||||
Object.defineProperty(exports, "noScrollbarsClassName", { enumerable: true, get: function () { return constants_1.noScrollbarsClassName; } });
|
||||
Object.defineProperty(exports, "removedBarSizeVariable", { enumerable: true, get: function () { return constants_1.removedBarSizeVariable; } });
|
||||
var utils_1 = require("./utils");
|
||||
Object.defineProperty(exports, "getGapWidth", { enumerable: true, get: function () { return utils_1.getGapWidth; } });
|
||||
14
node_modules/react-remove-scroll-bar/dist/es5/utils.d.ts
generated
vendored
Normal file
14
node_modules/react-remove-scroll-bar/dist/es5/utils.d.ts
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
export declare type GapMode = 'padding' | 'margin';
|
||||
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;
|
||||
33
node_modules/react-remove-scroll-bar/dist/es5/utils.js
generated
vendored
Normal file
33
node_modules/react-remove-scroll-bar/dist/es5/utils.js
generated
vendored
Normal file
@ -0,0 +1,33 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.getGapWidth = exports.zeroGap = void 0;
|
||||
exports.zeroGap = {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
gap: 0,
|
||||
};
|
||||
var parse = function (x) { return parseInt(x || '', 10) || 0; };
|
||||
var getOffset = function (gapMode) {
|
||||
var cs = window.getComputedStyle(document.body);
|
||||
var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
|
||||
var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
|
||||
var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
|
||||
return [parse(left), parse(top), parse(right)];
|
||||
};
|
||||
var getGapWidth = function (gapMode) {
|
||||
if (gapMode === void 0) { gapMode = 'margin'; }
|
||||
if (typeof window === 'undefined') {
|
||||
return exports.zeroGap;
|
||||
}
|
||||
var offsets = getOffset(gapMode);
|
||||
var documentWidth = document.documentElement.clientWidth;
|
||||
var windowWidth = window.innerWidth;
|
||||
return {
|
||||
left: offsets[0],
|
||||
top: offsets[1],
|
||||
right: offsets[2],
|
||||
gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
|
||||
};
|
||||
};
|
||||
exports.getGapWidth = getGapWidth;
|
||||
85
node_modules/react-remove-scroll-bar/package.json
generated
vendored
Normal file
85
node_modules/react-remove-scroll-bar/package.json
generated
vendored
Normal file
@ -0,0 +1,85 @@
|
||||
{
|
||||
"name": "react-remove-scroll-bar",
|
||||
"version": "2.3.6",
|
||||
"description": "Removes body scroll without content _shake_",
|
||||
"main": "dist/es5/index.js",
|
||||
"jsnext:main": "dist/es2015/index.js",
|
||||
"module": "dist/es2015/index.js",
|
||||
"types": "dist/es5/index.d.ts",
|
||||
"scripts": {
|
||||
"dev": "lib-builder dev",
|
||||
"test": "jest",
|
||||
"test:ci": "jest --runInBand --coverage",
|
||||
"build": "lib-builder build && yarn size:report",
|
||||
"release": "yarn build && yarn test",
|
||||
"size": "yarn size-limit",
|
||||
"size:report": "yarn --silent size-limit --json > .size.json",
|
||||
"lint": "lib-builder lint",
|
||||
"format": "lib-builder format",
|
||||
"update": "lib-builder update",
|
||||
"prepublish": "yarn build && yarn changelog",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
|
||||
"changelog:rewrite": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"keywords": [
|
||||
"scroll"
|
||||
],
|
||||
"author": "Anton Korzunov <thekashey@gmail.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@size-limit/preset-small-lib": "^11.0.2",
|
||||
"size-limit": "^11.0.2",
|
||||
"@storybook/react": "^6.4.22",
|
||||
"@testing-library/react": "^12.1.5",
|
||||
"@types/react": "^16.14.56",
|
||||
"@theuiteam/lib-builder": "^0.1.4",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"constants"
|
||||
],
|
||||
"repository": "https://github.com/theKashey/react-remove-scroll-bar",
|
||||
"dependencies": {
|
||||
"react-style-singleton": "^2.2.1",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"module:es2019": "dist/es2019/index.js",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx}": [
|
||||
"prettier --write",
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{js,css,json,md}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 120,
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user