@clayui/shared/lib/Portal.js

ClayShared component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ClayPortal = void 0;
var _provider = require("@clayui/provider");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _reactDom = require("react-dom");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */

var ClayPortalContext = /*#__PURE__*/_react.default.createContext(null);
ClayPortalContext.displayName = 'ClayPortalContext';
var createDivElement = function createDivElement(className, id) {
  var element = document.createElement('div');
  if (className) {
    element.setAttribute('class', className);
  }
  if (id) {
    element.setAttribute('id', id);
  }
  return element;
};
var ClayPortal = exports.ClayPortal = function ClayPortal(_ref) {
  var children = _ref.children,
    className = _ref.className,
    containerRef = _ref.containerRef,
    id = _ref.id,
    subPortalRef = _ref.subPortalRef;
  var _useProvider = (0, _provider.useProvider)(),
    theme = _useProvider.theme;
  var parentPortalRef = _react.default.useContext(ClayPortalContext);
  var portalRef = _react.default.useRef(typeof document !== 'undefined' ? createDivElement((0, _classnames.default)(theme, className), id) : null);
  _react.default.useEffect(function () {
    var closestParent = parentPortalRef && parentPortalRef.current ? parentPortalRef.current : document.body;
    var elToMountTo = containerRef && containerRef.current ? containerRef.current : closestParent;
    if (elToMountTo && portalRef.current) {
      elToMountTo.appendChild(portalRef.current);
    }
    return function () {
      if (portalRef.current) {
        if (typeof portalRef.current.remove === 'function') {
          portalRef.current.remove();
        } else if (elToMountTo) {
          elToMountTo.removeChild(portalRef.current);
        }
      }
    };
  }, [containerRef, parentPortalRef]);
  var content = /*#__PURE__*/_react.default.createElement(ClayPortalContext.Provider, {
    value: subPortalRef ? subPortalRef : portalRef
  }, children);
  return portalRef.current ? /*#__PURE__*/(0, _reactDom.createPortal)(content, portalRef.current) : content;
};