office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
113 lines • 4.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
var ReactDOM = require("react-dom");
/* tslint:enable:no-unused-variable */
var Fabric_1 = require("../../Fabric");
var Utilities_1 = require("../../Utilities");
var stylesImport = require("./Layer.scss");
var styles = stylesImport;
var _layersByHostId = {};
var Layer = (function (_super) {
tslib_1.__extends(Layer, _super);
function Layer(props) {
var _this = _super.call(this, props) || this;
_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.
*/
Layer.notifyHostChanged = function (id) {
if (_layersByHostId[id]) {
_layersByHostId[id].forEach(function (layer) { return layer.forceUpdate(); });
}
};
Layer.prototype.componentDidMount = function () {
this.componentDidUpdate();
};
Layer.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];
}
}
};
Layer.prototype.componentDidUpdate = function () {
var _this = this;
var host = this._getHost();
if (host !== this._host) {
this._removeLayerElement();
}
if (host) {
this._host = host;
if (!this._layerElement) {
var doc = Utilities_1.getDocument(this._rootElement);
this._layerElement = doc.createElement('div');
this._layerElement.className = Utilities_1.css('ms-Layer', (_a = {},
_a['ms-Layer--fixed ' + styles.rootIsFixed] = !this.props.hostId,
_a));
host.appendChild(this._layerElement);
Utilities_1.setVirtualParent(this._layerElement, this._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: Utilities_1.css('ms-Layer-content', styles.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();
}
});
}
var _a;
};
Layer.prototype.render = function () {
return (React.createElement("span", { className: 'ms-Layer', ref: this._resolveRef('_rootElement') }));
};
Layer.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;
}
};
Layer.prototype._getHost = function () {
var hostId = this.props.hostId;
var doc = Utilities_1.getDocument(this._rootElement);
if (hostId) {
return doc.getElementById(hostId);
}
else {
return doc.body;
}
};
Layer.defaultProps = {
onLayerDidMount: function () { return undefined; },
onLayerWillUnmount: function () { return undefined; }
};
return Layer;
}(Utilities_1.BaseComponent));
exports.Layer = Layer;
//# sourceMappingURL=Layer.js.map