chayns-components/lib/components/overlay/Overlay.js

A set of beautiful React components for developing chayns® applications.

import { any, instanceOf, node } from 'prop-types';
import { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { isServer } from '../../utils/isServer';
import "./overlay.css";
const Overlay = _ref => {
  let {
    parent,
    children
  } = _ref;
  const [parentElement, setParentElement] = useState(() => {
    if (!parent && !isServer()) {
      return document.createElement('div');
    }
    return null;
  });
  useEffect(() => {
    if (parent) {
      setParentElement(null);
    } else if (!parentElement) {
      setParentElement(document.createElement('div'));
    }
  }, [parent, parentElement]);
  useEffect(
  // eslint-disable-next-line consistent-return
  () => {
    if (parentElement) {
      parentElement.className = 'cc_overlay-parent';
      document.body.appendChild(parentElement);
      return () => {
        parentElement.remove();
      };
    }
  }, [parentElement]);
  return isServer() ? null : /*#__PURE__*/ReactDOM.createPortal(children, parent || parentElement);
};
Overlay.propTypes = {
  parent: isServer() ? any : instanceOf(Element),
  children: node.isRequired
};
export default Overlay;
//# sourceMappingURL=Overlay.js.map