oolib 2.168.3 → 2.168.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -45,6 +45,40 @@ var ModalHeaderStyle2_1 = require("./comps/ModalHeaderStyle2");
|
|
|
45
45
|
var styled_1 = require("./styled");
|
|
46
46
|
var Buttons_1 = require("../../Buttons");
|
|
47
47
|
var Divider_1 = require("../../Divider");
|
|
48
|
+
var useFreezePageBehind = function () {
|
|
49
|
+
(0, react_1.useEffect)(function () {
|
|
50
|
+
// Store original values
|
|
51
|
+
var originalStyle = window.getComputedStyle(document.body);
|
|
52
|
+
var originalOverflow = originalStyle.overflow;
|
|
53
|
+
var originalPosition = originalStyle.position;
|
|
54
|
+
var originalWidth = originalStyle.width;
|
|
55
|
+
var originalHeight = originalStyle.height;
|
|
56
|
+
var originalTop = document.body.style.top;
|
|
57
|
+
// Get current scroll position
|
|
58
|
+
var scrollY = window.scrollY;
|
|
59
|
+
// Apply multiple techniques to prevent scrolling
|
|
60
|
+
document.body.style.overflow = 'hidden';
|
|
61
|
+
document.body.style.position = 'fixed';
|
|
62
|
+
document.body.style.width = '100%';
|
|
63
|
+
document.body.style.height = '100%';
|
|
64
|
+
document.body.style.top = "-".concat(scrollY, "px");
|
|
65
|
+
// Touch events backup for iOS
|
|
66
|
+
var preventDefault = function (e) { return e.preventDefault(); };
|
|
67
|
+
document.addEventListener('touchmove', preventDefault, { passive: false });
|
|
68
|
+
return function () {
|
|
69
|
+
// Restore original styles
|
|
70
|
+
document.body.style.overflow = originalOverflow;
|
|
71
|
+
document.body.style.position = originalPosition;
|
|
72
|
+
document.body.style.width = originalWidth;
|
|
73
|
+
document.body.style.height = originalHeight;
|
|
74
|
+
document.body.style.top = originalTop;
|
|
75
|
+
// Restore scroll position
|
|
76
|
+
window.scrollTo(0, scrollY);
|
|
77
|
+
// Remove touch event listener
|
|
78
|
+
document.removeEventListener('touchmove', preventDefault);
|
|
79
|
+
};
|
|
80
|
+
}, []);
|
|
81
|
+
};
|
|
48
82
|
/**
|
|
49
83
|
* @component Renders a modal component with customizable title, content, and actions.
|
|
50
84
|
*
|
|
@@ -77,10 +111,11 @@ var Modal = function (_a) {
|
|
|
77
111
|
var initAnimPos = { marginTop: "100dvh", opacity: 0 };
|
|
78
112
|
var endAnimPos = { marginTop: 0, opacity: 1 };
|
|
79
113
|
var _o = (0, react_1.useState)(endAnimPos), animPos = _o[0], setAnimPos = _o[1];
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}, []);
|
|
114
|
+
// useEffect(() => {
|
|
115
|
+
// document.body.style.overflow = "hidden";
|
|
116
|
+
// return () => { document.body.style.overflow = "unset" };
|
|
117
|
+
// }, []);
|
|
118
|
+
useFreezePageBehind();
|
|
84
119
|
var genHeader = function () {
|
|
85
120
|
var headerStyles = {
|
|
86
121
|
style1: ModalHeaderStyle1_1.ModalHeaderStyle1,
|
|
@@ -33,7 +33,7 @@ var themes_1 = require("../../../themes");
|
|
|
33
33
|
var framer_motion_1 = require("framer-motion");
|
|
34
34
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
35
35
|
var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15;
|
|
36
|
-
exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height:
|
|
36
|
+
exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100dvh;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 999999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"], ["\n width: 100vw;\n height: 100dvh;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 999999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
|
|
37
37
|
exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100dvh;\n"], ["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100dvh;\n"])), black_opacity80);
|
|
38
38
|
exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50dvh; */\n max-height: 90dvh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"], ["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50dvh; */\n max-height: 90dvh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"])), white, function (_a) {
|
|
39
39
|
var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
|
|
@@ -250,7 +250,8 @@ var Dropdowns = function (args) {
|
|
|
250
250
|
var _a;
|
|
251
251
|
return (__assign(__assign({}, prev), (_a = {}, _a[args.selection] = v, _a)));
|
|
252
252
|
});
|
|
253
|
-
}, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent })))
|
|
253
|
+
}, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent }))),
|
|
254
|
+
react_1.default.createElement("div", { style: { height: '1000px', background: 'red' } }))));
|
|
254
255
|
};
|
|
255
256
|
exports.Dropdowns = Dropdowns;
|
|
256
257
|
// export const Button_Primary = (args) => (
|