modals
This commit is contained in:
parent
de66daac0e
commit
cd508d4536
File diff suppressed because one or more lines are too long
|
@ -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();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue