@onwave/ui
Version:
onwave ui library
42 lines • 2.25 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, { useState } from "react";
import { useDom } from "../../../utils/useDom";
import { OverlaidPortal } from "../OverlaidPortal";
export var Modal = function (_a) {
var children = _a.children, className = _a.className, onClose = _a.onClose, opener = _a.opener;
var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
var canUseDom = useDom();
var showModal = function () {
setIsOpen(true);
};
var hideModal = function () {
setIsOpen(false);
};
var blockPropagation = function (e) {
e.stopPropagation();
};
var handleCloseModal = function () {
if (opener) {
hideModal();
}
onClose ? onClose() : hideModal();
};
if (!canUseDom) {
return opener !== null && opener !== void 0 ? opener : React.createElement(React.Fragment, null);
}
var clonedOpener = opener &&
React.cloneElement(opener, {
onClick: showModal,
});
return (React.createElement(React.Fragment, null,
clonedOpener,
React.createElement(OverlaidPortal, { isOpen: isOpen, onClose: handleCloseModal },
React.createElement(Dialog, { className: className, onClick: blockPropagation }, children))));
};
var Dialog = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 5px, rgba(0, 0, 0, 0.02) 0px 6px 4px,\n rgba(0, 0, 0, 0.03) 0px 9px 6px, rgba(0, 0, 0, 0.03) 0px 16px 12px,\n rgba(0, 0, 0, 0.08) 0px 24px 24px;\n border-radius: 8px;\n max-width: 1280px;\n background-color: #fff;\n padding: 32px;\n"], ["\n box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 5px, rgba(0, 0, 0, 0.02) 0px 6px 4px,\n rgba(0, 0, 0, 0.03) 0px 9px 6px, rgba(0, 0, 0, 0.03) 0px 16px 12px,\n rgba(0, 0, 0, 0.08) 0px 24px 24px;\n border-radius: 8px;\n max-width: 1280px;\n background-color: #fff;\n padding: 32px;\n"])));
var templateObject_1;
//# sourceMappingURL=index.js.map