This commit is contained in:
Mirco Wittrien 2019-10-16 21:13:08 +02:00
parent de66daac0e
commit cd508d4536
2 changed files with 65 additions and 72 deletions

File diff suppressed because one or more lines are too long

View File

@ -3349,14 +3349,10 @@ var BDFDB = {myPlugins: BDFDB && BDFDB.myPlugins ? BDFDB.myPlugins : {}, BDv2Api
return selectMenu; return selectMenu;
}; };
var modals = [];
BDFDB.openModal = function (plugin, config) { BDFDB.openModal = function (plugin, config) {
if (!BDFDB.isObject(plugin) || !BDFDB.isObject(config)) return; if (!BDFDB.isObject(plugin) || !BDFDB.isObject(config)) return;
var modal, modalobserver, id, headerchildren = [], contentchildren = [], footerchildren = [], modalprops, cancels = [], closeModal = _ => { var modal, headerchildren = [], contentchildren = [], footerchildren = [], modalprops, cancels = [], closeModal = _ => {
if (id) BDFDB.removeFromArray(modals, id);
if (typeof config.onClose == 'function') config.onClose(modal);
if (BDFDB.isObject(modalprops) && typeof modalprops.onClose == 'function') modalprops.onClose(); if (BDFDB.isObject(modalprops) && typeof modalprops.onClose == 'function') modalprops.onClose();
if (typeof modalobserver.disconnect == 'function') modalobserver.disconnect();
}; };
if (typeof config.text == 'string') { if (typeof config.text == 'string') {
contentchildren.push(LibraryModules.React.createElement(LibraryComponents.TextElement, { contentchildren.push(LibraryModules.React.createElement(LibraryComponents.TextElement, {
@ -3416,13 +3412,10 @@ var BDFDB = {myPlugins: BDFDB && BDFDB.myPlugins ? BDFDB.myPlugins : {}, BDv2Api
footerchildren.push(LibraryModules.React.createElement(LibraryComponents.Button, { footerchildren.push(LibraryModules.React.createElement(LibraryComponents.Button, {
type: 'button', type: 'button',
look: look || (color ? LibraryComponents.Button.Looks.FILLED : LibraryComponents.Button.Looks.LINK), look: look || (color ? LibraryComponents.Button.Looks.FILLED : LibraryComponents.Button.Looks.LINK),
color: color ? color : LibraryComponents.Button.Colors.PRIMARY, color: color || LibraryComponents.Button.Colors.PRIMARY,
onClick: _ => { onClick: _ => {
click(modal); if (button.close) closeModal();
if (button.close) { if (!(button.close && button.cancel)) click(modal);
for (let cancel of cancels) if (cancel != click) cancel(modal);
closeModal();
}
}, },
children: contents children: contents
})); }));
@ -3432,70 +3425,70 @@ var BDFDB = {myPlugins: BDFDB && BDFDB.myPlugins ? BDFDB.myPlugins : {}, BDv2Api
if (typeof config.onClose != 'function') config.onClose = _ => {}; if (typeof config.onClose != 'function') config.onClose = _ => {};
if (typeof config.onOpen != 'function') config.onOpen = _ => {}; if (typeof config.onOpen != 'function') config.onOpen = _ => {};
id = BDFDB.generateID(modals); let name = plugin.name || (typeof plugin.getName == "function" ? plugin.getName() : null);
modalobserver = new MutationObserver(changes => {changes.forEach(change => {change.addedNodes.forEach(node => { name = typeof name == 'string' ? name : null;
if (node.tagName && (node = node.querySelector(`.BDFDB-modal-${id}.BDFDB-modal-open`)) != null) { let size = typeof config.size == 'string' && LibraryComponents.ModalComponents.ModalSize[config.size.toUpperCase()];
modal = node; let oldTransitionState = 0;
if (typeof config.onOpen == 'function') config.onOpen(modal);
}
})})});
modalobserver.observe(document.querySelector(BDFDB.dotCN.itemlayercontainer), {subtree:true, childList:true});
LibraryModules.ModalUtils.openModal(props => { LibraryModules.ModalUtils.openModal(props => {
modalprops = props; modalprops = props;
let name = plugin.name || (typeof plugin.getName == "function" ? plugin.getName() : null); return LibraryModules.React.createElement(class BDFDBModal extends LibraryModules.React.Component {
name = typeof name == 'string' ? name : null; render () {
let size = typeof config.size == 'string' && LibraryComponents.ModalComponents.ModalSize[config.size.toUpperCase()]; return LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalRoot, {
return LibraryModules.React.createElement(function (e) { className: [`BDFDB-modal`, name ? `${name}-modal` : null, config.selector ? config.selector : null].filter(n => n).join(' '),
return LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalRoot, { size: size || LibraryComponents.ModalComponents.ModalSize.SMALL,
className: [`BDFDB-modal`, `BDFDB-modal-${id}`, name ? `${name}-modal` : null, props.transitionState == 2 ? `BDFDB-modal-open` : null, config.selector ? config.selector : null].filter(n => n).join(' '), transitionState: props.transitionState,
size: size || LibraryComponents.ModalComponents.ModalSize.SMALL, children: [
transitionState: e.transitionState, LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalHeader, {
children: [ className: headerchildren.length ? BDFDB.disCN.modalheaderhassibling : null,
LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalHeader, { separator: config.headerseparator || false,
className: headerchildren.length ? BDFDB.disCN.modalheaderhassibling : null, children: [
separator: config.headerseparator || false, LibraryModules.React.createElement(LibraryComponents.Flex.Child, {
children: [ grow: 1,
LibraryModules.React.createElement(LibraryComponents.Flex.Child, { shrink: 1,
grow: 1, children: [
shrink: 1, LibraryModules.React.createElement(LibraryComponents.FormComponents.FormTitle, {
children: [ tag: LibraryComponents.FormComponents.FormTitle.Tags.H4,
LibraryModules.React.createElement(LibraryComponents.FormComponents.FormTitle, { children: typeof config.header == 'string' ? config.header : ""
tag: LibraryComponents.FormComponents.FormTitle.Tags.H4, }),
children: typeof config.header == 'string' ? config.header : "" LibraryModules.React.createElement(LibraryComponents.TextElement, {
}), size: LibraryComponents.TextElement.Sizes.SMALL,
LibraryModules.React.createElement(LibraryComponents.TextElement, { color: LibraryComponents.TextElement.Colors.PRIMARY,
size: LibraryComponents.TextElement.Sizes.SMALL, children: typeof config.subheader == 'string' ? config.subheader : (name || "")
color: LibraryComponents.TextElement.Colors.PRIMARY, })
children: typeof config.subheader == 'string' ? config.subheader : (name || "") ]
}) }),
] LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalCloseButton, {
}), onClick: closeModal
LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalCloseButton, { })
onClick: _ => { ]
for (let cancel of cancels) cancel(modal); }),
closeModal(); headerchildren.length ? LibraryModules.React.createElement(LibraryComponents.Flex, {
} children: headerchildren
}) }) : null,
] LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalContent, {
}), children: contentchildren
headerchildren.length ? LibraryModules.React.createElement(LibraryComponents.Flex, { }),
children: headerchildren footerchildren.length ? LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalFooter, {
}) : null, children: footerchildren
LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalContent, { }) : null
children: contentchildren ]
}), });
footerchildren.length ? LibraryModules.React.createElement(LibraryComponents.ModalComponents.ModalFooter, { }
children: footerchildren componentDidMount () {
}) : null modal = BDFDB.React.findDOMNodeSafe(this);
] modal = modal && modal.parentElement ? modal.parentElement.querySelector('.BDFDB-modal') : null;
}); if (modal && props.transitionState == 2 && props.transitionState > oldTransitionState) config.onOpen(modal, this);
oldTransitionState = props.transitionState;
}
componentWillUnmount () {
if (modal && props.transitionState == 4) {
for (let cancel of cancels) cancel(modal);
config.onClose(modal, this);
}
}
}, props); }, props);
}, { }, {
onCloseRequest: _ => { onCloseRequest: closeModal
for (let cancel of cancels) cancel(modal);
closeModal();
}
}); });
} }
}; };