@onwave/ui
Version:
onwave ui library
43 lines • 2.51 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import styled from "@emotion/styled";
import React, { useEffect } from "react";
import { useDom } from "../../../utils/useDom";
import { Portal } from "../Portal";
export var OverlaidPortal = function (_a) {
var isOpen = _a.isOpen, className = _a.className, zIndex = _a.zIndex, children = _a.children, overlayColor = _a.overlayColor, onClose = _a.onClose;
var canUseDom = useDom();
useEffect(function () {
if (canUseDom) {
document.body.style.overflow = isOpen ? "hidden" : "";
}
return function () {
if (canUseDom) {
document.body.style.overflow = "";
}
};
}, [isOpen, canUseDom]);
if (!canUseDom) {
return React.createElement(React.Fragment, null);
}
return (React.createElement(Portal, { container: document.body },
React.createElement(Overlay, { className: className, overlayColor: overlayColor, zIndex: zIndex, visible: isOpen, onClick: onClose !== null && onClose !== void 0 ? onClose : undefined }, children)));
};
export var Overlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: ", ";\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n background-color: ", ";\n opacity: ", ";\n visibility: ", ";\n overscroll-behavior: contain;\n"], ["\n position: fixed;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: ", ";\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n background-color: ",
";\n opacity: ", ";\n visibility: ", ";\n overscroll-behavior: contain;\n"])), function (_a) {
var zIndex = _a.zIndex;
return zIndex !== null && zIndex !== void 0 ? zIndex : "501";
}, function (_a) {
var overlayColor = _a.overlayColor;
return overlayColor !== null && overlayColor !== void 0 ? overlayColor : "rgba(0, 0, 0, 0.72)";
}, function (_a) {
var visible = _a.visible;
return (visible ? "1" : "0");
}, function (_a) {
var visible = _a.visible;
return (visible ? "visible" : "hidden");
});
var templateObject_1;
//# sourceMappingURL=index.js.map