react-base-guide
Version:
react ui components
49 lines • 2.55 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const layer_1 = __importDefault(require("./layer"));
const window_1 = __importDefault(require("./window"));
const title_1 = __importDefault(require("./title"));
const content_1 = __importDefault(require("./content"));
const styled_close_1 = __importDefault(require("./styled-close"));
const container_1 = __importDefault(require("./container"));
const Modal = (props) => {
const [visible, setVisible] = (0, react_1.useState)(props.open);
const [animation, setAnimation] = (0, react_1.useState)(null);
const modalLayer = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
if (props.open) {
setVisible(true);
setAnimation("show");
document.body.style.overflow = "hidden";
document.onkeydown = (e) => {
if (e.key === "Escape") {
props.onClose(e);
}
};
}
else {
setAnimation("hide");
setTimeout(() => {
document.body.style.overflow = "auto";
document.onkeydown = null;
setAnimation(null);
setVisible(false);
}, 300);
}
return function () {
document.body.style.overflow = "auto";
document.onkeydown = null;
};
}, [props.open]);
if (!visible) {
return null;
}
return ((0, jsx_runtime_1.jsxs)(container_1.default, Object.assign({ id: props.id, ref: props.forwardRef }, { children: [(0, jsx_runtime_1.jsx)(layer_1.default, { ref: modalLayer, onClick: props.onClose, id: "modal-layer-" + props.id }), (0, jsx_runtime_1.jsxs)(window_1.default, Object.assign({ className: props.className, animation: animation, layer: props.layer, maxWidth: props.maxWidth, maxHeight: props.maxHeight }, { children: [props.title && (0, jsx_runtime_1.jsx)(title_1.default, { children: props.title }), (0, jsx_runtime_1.jsx)(content_1.default, Object.assign({ layer: props.layer }, { children: props.children })), (!props.layer && !props.hideClose) && (0, jsx_runtime_1.jsx)(styled_close_1.default, { onClick: props.onClose })] }))] })));
};
exports.default = Modal;
//# sourceMappingURL=index.js.map