@dnb/eufemia/components/modal/ModalRoot.js

DNB Eufemia Design System UI Library

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
const _excluded = ["children", "direct_dom_return"];
import "core-js/modules/web.dom-collections.iterator.js";
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() {
    super(...arguments);
    _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