@atlaskit/portal
Version:
A wrapper for rendering components in React portals.
93 lines (88 loc) • 3.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.removePortalContainer = exports.createPortalParent = exports.createContainer = exports.createAtlaskitPortal = exports.appendPortalContainerIfNotAppended = void 0;
var _constants = require("../constants");
/**
* Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
* it is not be attached to any DOM node at this stage.
* @param {number | string} zIndex - the z-index value of the newly created portal container element
* @return {number} - The newly created container element
*/
var createContainer = exports.createContainer = function createContainer(zIndex) {
var container = document.createElement('div');
container.className = _constants.portalClassName;
container.style.zIndex = "".concat(zIndex);
return container;
};
/**
* Returns document body element
* @return {number} - The document body element
*/
var getBody = function getBody() {
return document.body;
};
/**
* Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'
* @return {Element} - The portal parent container div element
*/
var getPortalParent = function getPortalParent() {
var parentElement = document.querySelector(_constants.portalParentSelector);
if (!parentElement) {
var _getBody;
var parent = document.createElement('div');
parent.className = _constants.portalParentClassName;
// we are setting display to flex because we want each portal to create a new stacking context
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
parent.style.display = 'flex';
(_getBody = getBody()) === null || _getBody === void 0 || _getBody.appendChild(parent);
return parent;
}
return parentElement;
};
/**
* Removes portal container from portal parent container
* @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
*/
var removePortalContainer = exports.removePortalContainer = function removePortalContainer(container) {
getPortalParent().removeChild(container);
};
/**
* Appends portal container to portal parent container if it hasn't already been done
* @param {HTMLDivElement | undefined} container - portal container to be added to portal parent container
*/
var appendPortalContainerIfNotAppended = exports.appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {
if (!container.parentElement) {
getPortalParent().appendChild(container);
}
};
var isDocumentDefined = function isDocumentDefined() {
return document !== undefined;
};
var createAtlaskitPortal = exports.createAtlaskitPortal = function createAtlaskitPortal(zIndex) {
//atlaskit-portal div
if (isDocumentDefined()) {
var atlaskitportal = document.createElement('div');
atlaskitportal.className = _constants.portalClassName;
atlaskitportal.style.zIndex = "".concat(zIndex);
return atlaskitportal;
}
return;
};
var createPortalParent = exports.createPortalParent = function createPortalParent() {
//atlaskit-portal-container div
if (isDocumentDefined()) {
var parentElement = document.querySelector(_constants.portalParentSelector);
if (!parentElement) {
var _getBody2;
var parent = document.createElement('div');
parent.className = _constants.portalParentClassName;
parent.style.display = 'flex';
(_getBody2 = getBody()) === null || _getBody2 === void 0 || _getBody2.appendChild(parent);
return parent;
}
return parentElement;
}
return;
};