wini-web-components 2.4.6 → 2.4.7
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.
|
@@ -11,7 +11,7 @@ interface PopupState {
|
|
|
11
11
|
hideButtonClose?: boolean;
|
|
12
12
|
}
|
|
13
13
|
export declare const showPopup: (props: {
|
|
14
|
-
ref: React.
|
|
14
|
+
ref: React.RefObject<Popup | undefined>;
|
|
15
15
|
heading?: ReactNode;
|
|
16
16
|
content?: ReactNode;
|
|
17
17
|
body?: ReactNode;
|
|
@@ -20,7 +20,7 @@ export declare const showPopup: (props: {
|
|
|
20
20
|
style?: CSSProperties;
|
|
21
21
|
hideButtonClose?: boolean;
|
|
22
22
|
}) => void;
|
|
23
|
-
export declare const closePopup: (ref: React.
|
|
23
|
+
export declare const closePopup: (ref: React.RefObject<Popup>) => void;
|
|
24
24
|
export declare class Popup extends React.Component<Object, PopupState> {
|
|
25
25
|
private ref;
|
|
26
26
|
constructor(props: Object | Readonly<Object>);
|
|
@@ -122,10 +122,7 @@ var Popup = /** @class */ (function (_super) {
|
|
|
122
122
|
var _this = this;
|
|
123
123
|
var _a;
|
|
124
124
|
return (react_1.default.createElement(react_1.default.Fragment, null, this.state.open &&
|
|
125
|
-
react_dom_1.default.createPortal(react_1.default.createElement(
|
|
126
|
-
if (ev.target.classList.contains('popup-overlay'))
|
|
127
|
-
_this.onClose();
|
|
128
|
-
} : undefined }, (_a = this.state.content) !== null && _a !== void 0 ? _a : react_1.default.createElement("div", { ref: this.ref, className: 'popup-container col', onClick: function (e) { return e.stopPropagation(); }, style: this.state.style },
|
|
125
|
+
react_dom_1.default.createPortal(react_1.default.createElement(PopupOverlay, { className: this.state.clickOverlayClosePopup ? 'hidden-overlay' : '', onClose: this.state.clickOverlayClosePopup ? function () { _this.onClose(); } : undefined }, (_a = this.state.content) !== null && _a !== void 0 ? _a : react_1.default.createElement("div", { ref: this.ref, className: 'popup-container col', onClick: function (e) { return e.stopPropagation(); }, style: this.state.style },
|
|
129
126
|
this.state.heading,
|
|
130
127
|
this.state.body,
|
|
131
128
|
this.state.footer,
|
|
@@ -136,3 +133,20 @@ var Popup = /** @class */ (function (_super) {
|
|
|
136
133
|
return Popup;
|
|
137
134
|
}(react_1.default.Component));
|
|
138
135
|
exports.Popup = Popup;
|
|
136
|
+
function PopupOverlay(_a) {
|
|
137
|
+
var children = _a.children, onClose = _a.onClose, className = _a.className;
|
|
138
|
+
var overlayRef = (0, react_1.useRef)(null);
|
|
139
|
+
(0, react_1.useEffect)(function () {
|
|
140
|
+
if (overlayRef.current && onClose) {
|
|
141
|
+
var onClickDropDown_1 = function (ev) {
|
|
142
|
+
if (ev.target !== overlayRef.current && !overlayRef.current.contains(ev.target))
|
|
143
|
+
onClose();
|
|
144
|
+
};
|
|
145
|
+
window.document.body.addEventListener("click", onClickDropDown_1);
|
|
146
|
+
return function () {
|
|
147
|
+
window.document.body.removeEventListener("click", onClickDropDown_1);
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
}, [overlayRef]);
|
|
151
|
+
return react_1.default.createElement("div", { ref: overlayRef, className: "popup-overlay ".concat(className !== null && className !== void 0 ? className : "") }, children);
|
|
152
|
+
}
|