bc518174
 王天杨
提交两个项目文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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;
|
