Repository URL to install this package:
|
Version:
2.8.0-studio-release ▾
|
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_dom_1 = require("react-dom");
const exotic_1 = require("exotic");
const deps_1 = require("./deps");
/**
* @api https://reactjs.org/docs/portals.html
*/
class Portal extends react_1.default.PureComponent {
constructor() {
super(...arguments);
this.isComponentMounted = false;
}
componentWillUnmount() {
this.isComponentMounted = false;
if (exotic_1.isObj(this.defaultNode) && exotic_1.isObj(this.defaultNode.classList)) {
this.defaultNode.classList.remove('visible');
if (exotic_1.isString(this.props.id) === false) {
deps_1.removeElement(this.defaultNode);
this.defaultNode = undefined;
}
}
}
/**
* @see https://reactjs.org/docs/reconciliation.html
*/
componentDidMount() {
this.isComponentMounted = true;
this.forceUpdate();
}
/**
* @deprecated
* @todo remove this, we can access using props...
*/
get className() {
return classnames_1.default('portal', this.props.className, {
visible: this.props.isVisible,
hidden: this.props.isVisible === false
});
}
/**
* @todo reduce reading & writing from the DOM here, bad @@perf
*/
render() {
/**
* for best rendering, should not render on server
*/
if (this.isComponentMounted === false) {
return null;
} // if we send an id, find it
if (exotic_1.isString(this.props.id)) {
this.defaultNode = deps_1.getElementOrCreate(this.props.id);
this.defaultNode.className = this.className;
this.defaultNode.setAttribute('aria-hidden', String(!this.props.isVisible));
} // otherwise, we could send a dom node
else if (!this.props.node && exotic_1.isUndefined(this.defaultNode)) {
this.defaultNode = document.createElement('div');
} // if we had to create it, we need to append it
deps_1.appendToBodyIfRequired(this.defaultNode);
return react_dom_1.createPortal(this.props.children, this.props.node || this.defaultNode);
}
}
exports.Portal = Portal;
exports.default = Portal; //# sourceMappingURL=Portal.js.map