office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
130 lines • 6.01 kB
JavaScript
define(["require", "exports", "tslib", "react", "react-dom", "../../Fabric", "../../Utilities"], function (require, exports, tslib_1, React, ReactDOM, Fabric_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _layersByHostId = {};
var _defaultHostSelector;
var getClassNames = Utilities_1.classNamesFunction();
var LayerBase = /** @class */ (function (_super) {
tslib_1.__extends(LayerBase, _super);
function LayerBase(props) {
var _this = _super.call(this, props) || this;
_this._rootElement = Utilities_1.createRef();
_this._warnDeprecations({
onLayerMounted: 'onLayerDidMount'
});
if (_this.props.hostId) {
if (!_layersByHostId[_this.props.hostId]) {
_layersByHostId[_this.props.hostId] = [];
}
_layersByHostId[_this.props.hostId].push(_this);
}
return _this;
}
/**
* Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that
* care about the specific host.
*/
LayerBase.notifyHostChanged = function (id) {
if (_layersByHostId[id]) {
_layersByHostId[id].forEach(function (layer) { return layer.forceUpdate(); });
}
};
/**
* Sets the default target selector to use when determining the host in which
* Layered content will be injected into. If not provided, an element will be
* created at the end of the document body.
*
* Passing in a falsey value will clear the default target and reset back to
* using a created element at the end of document body.
*/
LayerBase.setDefaultTarget = function (selector) {
_defaultHostSelector = selector;
};
LayerBase.prototype.componentDidMount = function () {
this.componentDidUpdate();
};
LayerBase.prototype.componentWillUnmount = function () {
var _this = this;
this._removeLayerElement();
if (this.props.hostId) {
_layersByHostId[this.props.hostId] = _layersByHostId[this.props.hostId].filter(function (layer) { return layer !== _this; });
if (!_layersByHostId[this.props.hostId].length) {
delete _layersByHostId[this.props.hostId];
}
}
};
LayerBase.prototype.componentDidUpdate = function () {
var _this = this;
var host = this._getHost();
var _a = this.props, className = _a.className, styles = _a.styles, theme = _a.theme;
var classNames = getClassNames(styles, {
theme: theme,
className: className,
isNotHost: !this.props.hostId
});
if (host !== this._host) {
this._removeLayerElement();
}
if (host) {
this._host = host;
if (!this._layerElement) {
var rootElement = this._rootElement.current;
var doc = Utilities_1.getDocument(rootElement);
if (!doc || !rootElement) {
return;
}
this._layerElement = doc.createElement('div');
this._layerElement.className = classNames.root;
host.appendChild(this._layerElement);
Utilities_1.setVirtualParent(this._layerElement, rootElement);
}
// Using this 'unstable' method allows us to retain the React context across the layer projection.
ReactDOM.unstable_renderSubtreeIntoContainer(this, React.createElement(Fabric_1.Fabric, { className: classNames.content }, this.props.children), this._layerElement, function () {
if (!_this._hasMounted) {
_this._hasMounted = true;
// TODO: @deprecated cleanup required.
if (_this.props.onLayerMounted) {
_this.props.onLayerMounted();
}
_this.props.onLayerDidMount();
}
});
}
};
LayerBase.prototype.render = function () {
return React.createElement("span", { className: "ms-Layer", ref: this._rootElement });
};
LayerBase.prototype._removeLayerElement = function () {
if (this._layerElement) {
this.props.onLayerWillUnmount();
ReactDOM.unmountComponentAtNode(this._layerElement);
var parentNode = this._layerElement.parentNode;
if (parentNode) {
parentNode.removeChild(this._layerElement);
}
this._layerElement = undefined;
this._hasMounted = false;
}
};
LayerBase.prototype._getHost = function () {
var hostId = this.props.hostId;
var doc = Utilities_1.getDocument(this._rootElement.current);
if (!doc) {
return undefined;
}
if (hostId) {
return doc.getElementById(hostId);
}
else {
return _defaultHostSelector ? doc.querySelector(_defaultHostSelector) : doc.body;
}
};
LayerBase.defaultProps = {
onLayerDidMount: function () { return undefined; },
onLayerWillUnmount: function () { return undefined; }
};
return LayerBase;
}(Utilities_1.BaseComponent));
exports.LayerBase = LayerBase;
});
//# sourceMappingURL=Layer.base.js.map