@helpscout/hsds-react/components/Portal/Portal.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = require("react");

var _reactDom = require("react-dom");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactFrameComponent = require("react-frame-component");

var _lodash = _interopRequireDefault(require("lodash.isstring"));

var _Portal = _interopRequireWildcard(require("./Portal.Container"));

var _node = require("../../utilities/node");

var _lodash2 = _interopRequireDefault(require("lodash.isplainobject"));

var _Provider = require("../HSDS/Provider");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var getMountSelector = function getMountSelector(renderTo, body) {
  var mountSelector; // 1. Prioritize renderTo selector

  if (renderTo) {
    mountSelector = (0, _lodash.default)(renderTo) ? document.querySelector(renderTo) : false;
    mountSelector = (0, _lodash2.default)(renderTo) && (0, _node.isNodeElement)(renderTo) ? renderTo : mountSelector;
  } // 2- is inside an iframe, but not the one created by storybook/cypress


  if (!mountSelector && !body && window.parent && !window.STORYBOOK_ENV && !window.Cypress) {
    mountSelector = window.parent.document.body;
  } // 3. Fallback to <Portal.Container />


  mountSelector = mountSelector || document.getElementById(_Portal.ID); // 4. Fallback to document.body

  var doc = body || window.document;
  return mountSelector || doc.body; // fallback
};

var Portal = function Portal(_ref) {
  var children = _ref.children,
      renderTo = _ref.renderTo,
      timeout = _ref.timeout,
      onClose = _ref.onClose,
      onOpen = _ref.onOpen,
      className = _ref.className,
      id = _ref.id;

  var _ref2 = (0, _react.useContext)(_Provider.GlobalContext) || {},
      getCurrentScope = _ref2.getCurrentScope;

  var scope = getCurrentScope ? getCurrentScope() : null;
  var frameContext = (0, _react.useContext)(_reactFrameComponent.FrameContext);
  var body = frameContext ? frameContext.document : null;
  var el = (0, _react.useMemo)(function () {
    var _div$classList;

    var div = document.createElement('div');
    if (scope) div.classList.add(scope);
    if (className) (_div$classList = div.classList).add.apply(_div$classList, className.split(' '));
    if (id) div.id = id;
    return div;
  }, [scope, id, className]);
  var mount = (0, _react.useMemo)(function () {
    return getMountSelector(renderTo, body);
  }, [renderTo, body]);
  (0, _react.useEffect)(function () {
    mount.appendChild(el);
    if (onOpen) onOpen();
    return function () {
      var unmount = function unmount() {
        if (onClose) onClose();
        if (mount.contains(el)) mount.removeChild(el);
      };

      if (timeout === 0) {
        unmount();
      } else {
        setTimeout(unmount, timeout);
      }
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/(0, _reactDom.createPortal)(children, el);
};

Portal.Container = _Portal.default;
Portal.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** The ID for the component. */
  id: _propTypes.default.string,

  /** A CSS selector to render content, instead of the `<body>`. */
  renderTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /** Fires as soon as the component has rendered. */
  onOpen: _propTypes.default.func,

  /** Fires after the component is unmounted. */
  onClose: _propTypes.default.func,

  /** Delay before the Portal'ed component is unmounted from the DOM. Default is `0`. */
  timeout: _propTypes.default.number
};
var _default = Portal;
exports.default = _default;