@stokr/components-library 2.3.75 → 2.3.77
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.
|
@@ -41,7 +41,8 @@ const ConfirmModalComponent = _ref => {
|
|
|
41
41
|
buttonProps,
|
|
42
42
|
cancelButtonProps,
|
|
43
43
|
contentFullWidth,
|
|
44
|
-
barStyle
|
|
44
|
+
barStyle,
|
|
45
|
+
innerModalStyles
|
|
45
46
|
} = _ref;
|
|
46
47
|
const [titleHeight, setTitleHeight] = (0, _react.useState)(0);
|
|
47
48
|
const observerRef = (0, _react.useRef)(null);
|
|
@@ -67,8 +68,7 @@ const ConfirmModalComponent = _ref => {
|
|
|
67
68
|
const handleConfirm = (0, _react.useCallback)(function () {
|
|
68
69
|
let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
69
70
|
onConfirm === null || onConfirm === void 0 || onConfirm(value);
|
|
70
|
-
|
|
71
|
-
}, [onConfirm, onClose]);
|
|
71
|
+
}, [onConfirm]);
|
|
72
72
|
const handleCancel = (0, _react.useCallback)(() => {
|
|
73
73
|
onCancel === null || onCancel === void 0 || onCancel();
|
|
74
74
|
onClose === null || onClose === void 0 || onClose();
|
|
@@ -96,7 +96,9 @@ const ConfirmModalComponent = _ref => {
|
|
|
96
96
|
}, modalProps), /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
|
|
97
97
|
relative: true,
|
|
98
98
|
part: contentFullWidth ? null : 14
|
|
99
|
-
}, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner,
|
|
99
|
+
}, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
|
|
100
|
+
style: innerModalStyles
|
|
101
|
+
}, /*#__PURE__*/_react.default.createElement(_ConfirmModal.ContainerWithLine, {
|
|
100
102
|
height: titleHeight,
|
|
101
103
|
lineColor: lineColor
|
|
102
104
|
}, /*#__PURE__*/_react.default.createElement(_Text.Text, null, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("h3", {
|
|
@@ -165,7 +167,8 @@ const confirm = function () {
|
|
|
165
167
|
renderFooter = null,
|
|
166
168
|
modalProps = {},
|
|
167
169
|
buttonProps = {},
|
|
168
|
-
cancelButtonProps = {}
|
|
170
|
+
cancelButtonProps = {},
|
|
171
|
+
innerModalStyles
|
|
169
172
|
} = options;
|
|
170
173
|
return new Promise(resolve => {
|
|
171
174
|
// Create container if it doesn't exist
|
|
@@ -226,7 +229,8 @@ const confirm = function () {
|
|
|
226
229
|
renderFooter: renderFooter,
|
|
227
230
|
modalProps: modalProps,
|
|
228
231
|
buttonProps: buttonProps,
|
|
229
|
-
cancelButtonProps: cancelButtonProps
|
|
232
|
+
cancelButtonProps: cancelButtonProps,
|
|
233
|
+
innerModalStyles: innerModalStyles
|
|
230
234
|
}));
|
|
231
235
|
};
|
|
232
236
|
|
|
@@ -28,6 +28,30 @@ function findScrolledElement() {
|
|
|
28
28
|
walk(document.body);
|
|
29
29
|
return best;
|
|
30
30
|
}
|
|
31
|
+
function restoreScroll(saved) {
|
|
32
|
+
if (!saved) return;
|
|
33
|
+
if (saved.type === 'window') {
|
|
34
|
+
window.scrollTo(0, saved.y);
|
|
35
|
+
} else if (saved.el && document.contains(saved.el)) {
|
|
36
|
+
saved.el.scrollTop = saved.scrollTop;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
function clearBodyLock() {
|
|
40
|
+
const {
|
|
41
|
+
style
|
|
42
|
+
} = document.body;
|
|
43
|
+
const docEl = document.documentElement;
|
|
44
|
+
style.position = '';
|
|
45
|
+
style.top = '';
|
|
46
|
+
style.left = '';
|
|
47
|
+
style.right = '';
|
|
48
|
+
style.width = '';
|
|
49
|
+
style.height = '';
|
|
50
|
+
style.overflow = '';
|
|
51
|
+
style.paddingRight = '';
|
|
52
|
+
docEl.style.overflow = '';
|
|
53
|
+
docEl.style.setProperty('--scrollbar-compensation', '0px');
|
|
54
|
+
}
|
|
31
55
|
const SideModal = _ref => {
|
|
32
56
|
let {
|
|
33
57
|
children,
|
|
@@ -50,42 +74,48 @@ const SideModal = _ref => {
|
|
|
50
74
|
type: 'window',
|
|
51
75
|
y: window.scrollY
|
|
52
76
|
};else savedScroll.current = null;
|
|
77
|
+
const saved = savedScroll.current;
|
|
53
78
|
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
79
|
+
const isWindowScroll = saved && saved.type === 'window';
|
|
80
|
+
if (isWindowScroll) {
|
|
81
|
+
// Position-fixed lock: avoids browser resetting scroll when overflow changes
|
|
82
|
+
const y = saved.y;
|
|
83
|
+
const docHeight = document.documentElement.scrollHeight;
|
|
84
|
+
document.documentElement.style.overflow = 'hidden';
|
|
85
|
+
document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
|
|
86
|
+
document.body.style.position = 'fixed';
|
|
87
|
+
document.body.style.top = "-".concat(y, "px");
|
|
88
|
+
document.body.style.left = '0';
|
|
89
|
+
document.body.style.right = '0';
|
|
90
|
+
document.body.style.width = '100%';
|
|
91
|
+
document.body.style.height = "".concat(docHeight, "px");
|
|
92
|
+
document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
|
|
93
|
+
} else {
|
|
94
|
+
// Overflow lock; for element scroll we restore after lock
|
|
95
|
+
document.documentElement.style.overflow = 'hidden';
|
|
96
|
+
document.body.style.overflow = 'hidden';
|
|
97
|
+
document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
|
|
98
|
+
document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
|
|
99
|
+
if (saved) {
|
|
100
|
+
requestAnimationFrame(() => {
|
|
101
|
+
restoreScroll(saved);
|
|
102
|
+
requestAnimationFrame(() => restoreScroll(saved));
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
}
|
|
58
106
|
setTimeout(() => setIsVisible(true), 10);
|
|
59
107
|
} else {
|
|
60
108
|
const saved = savedScroll.current;
|
|
61
109
|
savedScroll.current = null;
|
|
62
|
-
|
|
63
|
-
document.body.style.overflow = '';
|
|
64
|
-
document.body.style.paddingRight = '';
|
|
65
|
-
document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
|
|
110
|
+
clearBodyLock();
|
|
66
111
|
setIsVisible(false);
|
|
67
|
-
if (saved)
|
|
68
|
-
requestAnimationFrame(() => {
|
|
69
|
-
if (saved.type === 'window') window.scrollTo(0, saved.y);else if (saved.el && document.contains(saved.el)) saved.el.scrollTop = saved.scrollTop;
|
|
70
|
-
});
|
|
71
|
-
}
|
|
112
|
+
if (saved) requestAnimationFrame(() => restoreScroll(saved));
|
|
72
113
|
}
|
|
73
114
|
return () => {
|
|
74
115
|
const saved = savedScroll.current;
|
|
75
116
|
savedScroll.current = null;
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
document.body.style.paddingRight = '';
|
|
79
|
-
document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
|
|
80
|
-
if (saved && saved.el && document.contains(saved.el)) {
|
|
81
|
-
requestAnimationFrame(() => {
|
|
82
|
-
saved.el.scrollTop = saved.scrollTop;
|
|
83
|
-
});
|
|
84
|
-
} else if (saved && saved.type === 'window') {
|
|
85
|
-
requestAnimationFrame(() => {
|
|
86
|
-
window.scrollTo(0, saved.y);
|
|
87
|
-
});
|
|
88
|
-
}
|
|
117
|
+
clearBodyLock();
|
|
118
|
+
if (saved) requestAnimationFrame(() => restoreScroll(saved));
|
|
89
119
|
};
|
|
90
120
|
}, [isOpen]);
|
|
91
121
|
|