@kenreymozo/kenrey-component
Version:
Components for kendallrey
33 lines • 2.12 kB
JavaScript
import { __assign, __rest } from "tslib";
import { useEffect, useState } from 'react';
import React from 'react';
import styles from '../../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 = __rest(props, ["show", "onClose", "header", "footer", "children", "variant", "shade", "clickOutsideClose"]);
var _a = useState(show), _show = _a[0], _setShow = _a[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.createElement(React.Fragment, null, _show && (React.createElement("div", { className: "".concat(styles['modal-container'], " ").concat(show ? '' : styles['modal-hide']), onClick: onClickOutside },
React.createElement("div", __assign({ className: styles['modal-content'], onClick: stopPropagation }, cleanProps),
React.createElement("div", { className: "".concat(styles['modal-header'], " ").concat(variant ? styles["".concat(variant).concat(shade ? "-".concat(shade) : '')] : styles['primary']) },
header,
onClose && (React.createElement("button", { className: styles['modal-close'], onClick: onClose }, "X"))),
React.createElement("div", { className: styles['modal-body'] }, children),
footer && (React.createElement("div", { className: "".concat(styles['modal-footer'], " ").concat(variant ? styles["".concat(variant).concat(shade ? "-".concat(shade) : '')] : styles['primary']) }, footer)))))));
};
export default Modal;
//# sourceMappingURL=modal.js.map