@up-group-ui/react-controls
Version:
Up shared react controls
59 lines • 4.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpModal = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var theming_1 = require("../../../Common/theming");
var styles_1 = require("./styles");
var types_1 = require("../../../Common/utils/types");
var UpModal = function (props) {
var children = props.children, closeOnClickOutside = props.closeOnClickOutside, footer = props.footer, header = props.header, html = props.html, onClose = props.onClose, showModal = props.showModal, withHeaderSeparator = props.withHeaderSeparator;
var wrapperModalRef = react_1.default.useRef(null);
react_1.default.useEffect(function () {
document.addEventListener('mousedown', handleClickOutside);
return function () {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [closeOnClickOutside]);
var handleClickOutside = function (e) {
if (closeOnClickOutside && wrapperModalRef && !wrapperModalRef.current.contains(e.target))
closeModal();
};
var closeModal = function () {
if (onClose)
onClose();
};
var modalHeader = function () { return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "up-modal_header", style: withHeaderSeparator ? { borderBottom: '1px solid #e5e5e5' } : {} }, { children: [typeof header === 'string' ? (0, jsx_runtime_1.jsx)("h3", (0, tslib_1.__assign)({ className: "up-modal_title" }, { children: header }), void 0) : header, (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ onClick: closeModal, className: "up-modal_close" }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: 'close' }, void 0) }), void 0)] }), void 0)); };
var modalFooter = function () {
return footer && (typeof footer === 'string' ? (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "up-modal_footer" }, { children: footer }), void 0) : footer);
};
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, styles_1.getStyles)(props) }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-modal', showModal ? 'in' : 'fade') }, (0, types_1.getTestableComponentProps)(props), { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: wrapperModalRef, className: "up-modal_dialog" }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "up-modal_content" }, { children: [modalHeader(), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "up-modal_body" }, { children: [children, html != null && ((0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: {
__html: html,
}, style: {
width: '100%',
minHeight: '800px',
minWidth: '600px',
border: 'none',
} }, void 0))] }), void 0), modalFooter()] }), void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", { style: {
display: showModal === true ? 'block' : 'none',
}, className: "up-modal_backdrop" }, void 0)] }), void 0));
};
exports.UpModal = UpModal;
UpModal.defaultProps = {
showModal: false,
withHeaderSeparator: true,
modalWidth: 'default',
displayMode: 'fromTop',
fullHeight: false,
closeOnClickOutside: false,
header: null,
footer: null,
html: null,
onClose: null,
screenPosition: 'top',
};
exports.default = (0, theming_1.withTheme)(UpModal);
//# sourceMappingURL=UpModal.js.map