@kenreymozo/kenrey-component
Version:
Components for kendallrey
35 lines • 2.59 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var react_2 = tslib_1.__importDefault(require("react"));
var index_module_css_1 = tslib_1.__importDefault(require("../../index.module.css"));
var Modal = function (props) {
var show = props.show, onClose = props.onClose, header = props.header, footer = props.footer, children = props.children, variant = props.variant, shade = props.shade, clickOutsideClose = props.clickOutsideClose, cleanProps = tslib_1.__rest(props, ["show", "onClose", "header", "footer", "children", "variant", "shade", "clickOutsideClose"]);
var _a = (0, react_1.useState)(show), _show = _a[0], _setShow = _a[1];
(0, react_1.useEffect)(function () {
if (show) {
_setShow(show);
return;
}
var interval = setTimeout(function () { return _setShow(show); }, 200);
return function () {
clearTimeout(interval);
};
}, [show]);
var onClickOutside = function () {
if (clickOutsideClose === false)
return;
onClose();
};
var stopPropagation = function (e) { return e.stopPropagation(); };
return (react_2.default.createElement(react_2.default.Fragment, null, _show && (react_2.default.createElement("div", { className: "".concat(index_module_css_1.default['modal-container'], " ").concat(show ? '' : index_module_css_1.default['modal-hide']), onClick: onClickOutside },
react_2.default.createElement("div", tslib_1.__assign({ className: index_module_css_1.default['modal-content'], onClick: stopPropagation }, cleanProps),
react_2.default.createElement("div", { className: "".concat(index_module_css_1.default['modal-header'], " ").concat(variant ? index_module_css_1.default["".concat(variant).concat(shade ? "-".concat(shade) : '')] : index_module_css_1.default['primary']) },
header,
onClose && (react_2.default.createElement("button", { className: index_module_css_1.default['modal-close'], onClick: onClose }, "X"))),
react_2.default.createElement("div", { className: index_module_css_1.default['modal-body'] }, children),
footer && (react_2.default.createElement("div", { className: "".concat(index_module_css_1.default['modal-footer'], " ").concat(variant ? index_module_css_1.default["".concat(variant).concat(shade ? "-".concat(shade) : '')] : index_module_css_1.default['primary']) }, footer)))))));
};
exports.default = Modal;
//# sourceMappingURL=modal.js.map