@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
88 lines • 2.79 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
const _excluded = ["children", "direct_dom_return"];
import React from 'react';
import ReactDOM from 'react-dom';
import { warn, isTrue } from '../../shared/component-helper';
import ModalContent from './ModalContent';
export default class ModalRoot extends React.PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "portalElem", void 0);
_defineProperty(this, "state", {
isMounted: false
});
}
static insertModalRoot(id) {
if (typeof window === 'undefined') {
return false;
}
try {
id = `dnb-modal-${id || 'root'}`;
window.__modalRoot = document.getElementById(id);
if (!window.__modalRoot) {
window.__modalRoot = document.createElement('div');
window.__modalRoot.setAttribute('id', id);
document.body.insertBefore(window.__modalRoot, document.body.firstChild);
}
} catch (e) {
warn('Modal: Could not insert dnb-modal-root', e);
}
return window.__modalRoot;
}
componentDidMount() {
const {
direct_dom_return = false,
root_id = 'root'
} = this.props;
if (!isTrue(direct_dom_return)) {
ModalRoot.insertModalRoot(root_id);
try {
if (!this.portalElem) {
this.portalElem = document.createElement('div');
this.portalElem.className = 'dnb-modal-root__inner';
}
if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot) {
window.__modalRoot.appendChild(this.portalElem);
}
} catch (e) {
warn(e);
}
this.setState({
isMounted: true
});
}
}
componentWillUnmount() {
try {
if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && window.__modalRoot.removeChild) {
window.__modalRoot.removeChild(this.portalElem);
this.portalElem = null;
}
} catch (e) {
warn(e);
}
}
render() {
const _this$props = this.props,
{
children,
direct_dom_return
} = _this$props,
props = _objectWithoutProperties(_this$props, _excluded);
if (isTrue(direct_dom_return)) {
return React.createElement(ModalContent, props, children);
}
if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && this.state.isMounted) {
return ReactDOM.createPortal(React.createElement(ModalContent, props, children), this.portalElem);
}
return null;
}
}
_defineProperty(ModalRoot, "defaultProps", {
id: null,
root_id: 'root',
direct_dom_return: false,
children: null
});
//# sourceMappingURL=ModalRoot.js.map