office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
110 lines (108 loc) • 4.83 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', 'react-dom', '../../Fabric', '../../Utilities', './Layer.scss'], function (require, exports, React, ReactDOM, Fabric_1, Utilities_1) {
"use strict";
var _layersByHostId = {};
var Layer = (function (_super) {
__extends(Layer, _super);
function Layer(props) {
_super.call(this, props, {
// Make sure to deprecate old properties.
'onLayerMounted': 'onLayerDidMount'
});
if (this.props.hostId) {
if (!_layersByHostId[this.props.hostId]) {
_layersByHostId[this.props.hostId] = [];
}
_layersByHostId[this.props.hostId].push(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', {
'ms-Layer--fixed': !this.props.hostId
});
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: 'ms-Layer-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();
}
});
}
};
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