@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
64 lines • 3.24 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const core_1 = require("@material-ui/core");
const components_1 = require("../../components");
const ModalHeader_1 = require("../../containers/Modal/ModalHeader");
const contexts_1 = require("../../contexts");
const Modal_style_1 = require("../../containers/Modal/Modal.style");
const constants_1 = require("../../constants");
const Modal = (props) => {
const { children, closeCallback = () => { }, modalStyle = {} } = props;
const { modalWidth, modalStatus, hideModalWatermark, closeModal } = (0, contexts_1.useLayoutContext)();
const classes = (0, Modal_style_1.useStyles)({
modalWidth,
});
// element to which the modal will be rendered
const elementRef = (0, react_1.useRef)(document.createElement("div"));
const modalRootRef = (0, react_1.useRef)(document.createElement("div"));
(0, react_1.useEffect)(() => {
const modalElm = document.getElementById(constants_1.WEB_UI_MODAL_ID_SELECTOR);
//remove if there is already a modal opened
if (modalElm) {
modalElm.remove();
}
// initiate modal container
modalRootRef.current.id = constants_1.WEB_UI_MODAL_ID_SELECTOR;
document.body.appendChild(modalRootRef.current);
// append to root when the children of Modal are mounted
modalRootRef.current.appendChild(elementRef.current);
// do a cleanup
return () => {
modalRootRef.current.removeChild(elementRef.current);
};
}, [modalWidth, modalStatus]);
const onClose = () => {
closeCallback();
modalRootRef.current.removeChild(elementRef.current);
closeModal();
};
return (react_1.default.createElement(components_1.GovernanceDialog, { container: elementRef.current, isOpen: true, content: react_1.default.createElement(core_1.Box, { display: "flex", flexDirection: "column", my: 2 },
children,
!hideModalWatermark && (react_1.default.createElement(components_1.GovernanceTypography, { className: classes.bottomText, variant: "body1" }, "Powered by Hypernet Protocol"))), onClose: onClose, maxWidth: "md", title: react_1.default.createElement(ModalHeader_1.ModalHeader, null) }));
};
exports.default = Modal;
//# sourceMappingURL=Modal.js.map