oolib 2.168.4 → 2.168.6
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.
|
@@ -34,10 +34,17 @@ var Buttons_1 = require("../../../Buttons");
|
|
|
34
34
|
var Modal_1 = require("../../../Modals/Modal");
|
|
35
35
|
var styled_1 = require("./styled");
|
|
36
36
|
var OptionsAnimateWrapper_1 = require("./comps/OptionsAnimateWrapper");
|
|
37
|
+
var styled_components_1 = require("styled-components");
|
|
38
|
+
var DefaultMobileShell = function (_a) {
|
|
39
|
+
var children = _a.children;
|
|
40
|
+
return (react_1.default.createElement("div", { style: { top: 0, left: 0, height: '100dvh', width: '100dvw', position: 'fixed', zIndex: '100000000', background: 'rgba(0,0,0,0.5)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' } }));
|
|
41
|
+
};
|
|
37
42
|
exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
|
|
38
43
|
var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _b = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _b === void 0 ? false : _b, relativeToRef = _a.relativeToRef, S = _a.S, alignDropdown = _a.alignDropdown;
|
|
39
44
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
40
45
|
var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
|
|
46
|
+
var currentTheme = (0, styled_components_1.useTheme)();
|
|
47
|
+
var MobileShell = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.MobileShell) || DefaultMobileShell;
|
|
41
48
|
var _c = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _c.fixPos, applyFixedPos = _c.applyFixedPos, removeFixedPos = _c.removeFixedPos, trackerRef = _c.trackerRef;
|
|
42
49
|
(0, react_1.useEffect)(function () {
|
|
43
50
|
if (popOutOfOverflowHiddenParent) {
|
|
@@ -56,7 +63,18 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
|
|
|
56
63
|
position: "absolute",
|
|
57
64
|
bottom: yOrientation === "top" ? undefined : 0,
|
|
58
65
|
top: yOrientation === "top" ? 0 : undefined,
|
|
59
|
-
} }, children)))) : (
|
|
66
|
+
} }, children)))) : (
|
|
67
|
+
// <AnimatePresence>
|
|
68
|
+
// {showOptions ? (
|
|
69
|
+
// <Modal
|
|
70
|
+
// fitToContentHeight
|
|
71
|
+
// title={optionsModalLabel || label}
|
|
72
|
+
// onClose={handleHideOptions}
|
|
73
|
+
// invert={invert}
|
|
74
|
+
// S={S}
|
|
75
|
+
// dynamicHeaderHeight
|
|
76
|
+
// >
|
|
77
|
+
react_1.default.createElement(react_1.Fragment, null, showOptions ? (react_1.default.createElement(MobileShell, { onClose: handleHideOptions, title: optionsModalLabel || label },
|
|
60
78
|
SelectComp && SelectComp,
|
|
61
79
|
react_1.default.createElement(styled_1.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
|
|
62
80
|
showDoneButton && (react_1.default.createElement("div", { style: {
|
|
@@ -65,5 +83,9 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
|
|
|
65
83
|
position: "sticky",
|
|
66
84
|
bottom: "0",
|
|
67
85
|
} },
|
|
68
|
-
react_1.default.createElement(Buttons_1.ButtonPrimary, { children: "Done", width: "100%", onClick: handleHideOptions, S: S }))))) : null)
|
|
86
|
+
react_1.default.createElement(Buttons_1.ButtonPrimary, { children: "Done", width: "100%", onClick: handleHideOptions, S: S }))))) : null)
|
|
87
|
+
// </Modal>
|
|
88
|
+
// ) : null}
|
|
89
|
+
// </AnimatePresence>
|
|
90
|
+
);
|
|
69
91
|
});
|
|
@@ -45,40 +45,6 @@ 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
|
-
};
|
|
82
48
|
/**
|
|
83
49
|
* @component Renders a modal component with customizable title, content, and actions.
|
|
84
50
|
*
|
|
@@ -111,11 +77,10 @@ var Modal = function (_a) {
|
|
|
111
77
|
var initAnimPos = { marginTop: "100dvh", opacity: 0 };
|
|
112
78
|
var endAnimPos = { marginTop: 0, opacity: 1 };
|
|
113
79
|
var _o = (0, react_1.useState)(endAnimPos), animPos = _o[0], setAnimPos = _o[1];
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
useFreezePageBehind();
|
|
80
|
+
(0, react_1.useEffect)(function () {
|
|
81
|
+
document.body.style.overflow = "hidden";
|
|
82
|
+
return function () { document.body.style.overflow = "unset"; };
|
|
83
|
+
}, []);
|
|
119
84
|
var genHeader = function () {
|
|
120
85
|
var headerStyles = {
|
|
121
86
|
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: 100%;\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: 100%;\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;
|