@microsoft/sp-webpart-base
Version:
SharePoint Framework support for building web parts
187 lines • 9.38 kB
JavaScript
import { DisplayMode, Validate } from '@microsoft/sp-core-library';
import ClientSideWebPartManagerFactory from '../../core/ClientSideWebPartManagerFactory';
import { isOverrideDataPersistedFlagKSActive } from '../../common/KillSwitches';
/**
* A basic container component to host a web part. This is the simplest component that can
* host a web part. This should be used in scenarios where performance is key. Edit mode
* is currently not supported in this container. And this container does not need ReactJS.
*
* @internal
*/
var MinimalWebPartContainer = /** @class */ (function () {
function MinimalWebPartContainer(props) {
this._validateProps(props);
this._props = props;
this._webPartManager = ClientSideWebPartManagerFactory.create(this._props.host);
}
Object.defineProperty(MinimalWebPartContainer.prototype, "webPartManager", {
/**
* Get the web part manager for this container.
*/
get: function () {
return this._webPartManager;
},
enumerable: false,
configurable: true
});
MinimalWebPartContainer.prototype.render = function (domElement) {
var _this = this;
Validate.isNotNullOrUndefined(domElement, 'domElement');
this._domElement = domElement;
// We create and append the web part container element to the document
// so the initialization of the web part can execute as expected.
// The reason we need the domElement appended to the document is because
// we have not yet seperated the initlization of the web part from
// the rendering, when this is no longer the case we may
// remove this display change. @todo (SPPPLAT VSO#598054)
//
// Additionally, if we have the scenario where we want to render
// the property pane instead of the web part, we need to change the
// display to 'none' so that only the property pane content appears
// in the document object and not the web part.
if (this._props.openPropertyPane) {
this._domElement.style.display = 'none';
}
else {
this._domElement.style.display = 'block';
}
return this._renderWebPart(this._domElement)
.then(function () {
if (_this._props.openPropertyPane) {
_this._webPartManager.requestPropertyPaneAction(_this._props.webPartInstanceId, 'Open');
}
else if (_this._props.openDetailsPropertyPane) {
_this._webPartManager.requestPropertyPaneAction(_this._props.webPartInstanceId, 'OpenDetails');
}
else {
// Scenario: rendering the web part
if (_this._props.requestDisplayModeStatus) {
_this._props.requestDisplayModeStatus();
}
if (_this._props.requestTheme) {
_this._props.requestTheme();
}
if (_this._props.sendDimensionsToParent) {
_this._intervalTask = window.setInterval(_this._sendDimensionsCallback.bind(_this), 200);
}
}
})
.catch(function (error) {
// eslint-disable-next-line no-console
console.log(error);
});
};
MinimalWebPartContainer.prototype.dispose = function () {
if (this._intervalTask) {
clearTimeout(this._intervalTask);
}
this._webPartManager.disposeWebparts(this._props.webPartInstanceId);
this._webPartManager.dispose();
};
MinimalWebPartContainer.prototype.setWebPartData = function (webPartData, instanceId) {
var webPartManagerContext = this._getWebPartManagerContext(this._domElement, webPartData);
this._webPartManager
.setWebPartData(webPartManagerContext, instanceId)
// eslint-disable-next-line no-console
.catch(function (e) { return console.log(e); });
};
/**
* Invokes the ClientSideWebPartManager.serialize() function and returns the result.
*/
MinimalWebPartContainer.prototype.serialize = function () {
var serializedResult = this._webPartManager.serialize(this._props.webPartInstanceId);
var webPartData = serializedResult.get(this._props.webPartInstanceId);
Validate.isNotNullOrUndefined(webPartData, 'webPartData');
return webPartData;
};
/**
* Sets the display mode of the web part in this instance of the MinimalWebPartContainer via the
* ClientSideWebPartManager.
*
* @returns A promise indicating when the mode switch is complete. There can be a delay if the property
* pane chunk needs to be loaded.
*/
MinimalWebPartContainer.prototype.setDisplayMode = function (displayMode) {
return this._webPartManager._setDisplayMode(displayMode, this._props.webPartInstanceId);
};
/**
* A call that trickle down to the PropertyPaneController to open/show the
* property pane context. This is neccessary because the showPropertyPane method
* in IframedWebPartController will only expose the iframed element but not take
* care of showing the property pane content.
*/
MinimalWebPartContainer.prototype.requestPropertyPaneAction = function (instanceId, propertyPaneAction, webPartData) {
if (webPartData) {
Validate.isNotNullOrUndefined(this._domElement, 'domElement');
this.setWebPartData(webPartData, instanceId);
}
this._webPartManager.requestPropertyPaneAction(instanceId, propertyPaneAction);
};
/**
* Returns the height of the element's content including content not visible on the screen due
* to overflow.
*/
MinimalWebPartContainer.prototype._getHeight = function () {
Validate.isNotNullOrUndefined(this._domElement, 'domElement');
// The content measured will always be the only child of the 'domElement'.
// This is because 'this._domElement' is initialized as an empty 'div' element
// and the ClientSideWebPartManager renders the content into this div.
var domElementChild = this._domElement.children.item(0);
// We are using offset height as ooposed to the scroll height because, this way it would respect
// the vertical scrollbars inside the web part itself, if any.
return domElementChild.offsetHeight;
};
/**
* Returns the width of the element's content including content not visible on the screen due
* to overflow.
*/
MinimalWebPartContainer.prototype._getWidth = function () {
Validate.isNotNullOrUndefined(this._domElement, 'domElement');
// The content measured will always be the only child of the 'domElement'.
// This is because 'this._domElement' is initialized as an empty 'div' element
// and the ClientSideWebPartManager renders the content into this div.
var domElementChild = this._domElement.children.item(0);
// We are using offset width as opposed to the scroll width because, this way it would respect
// the horizontal scrollbars inside the web part itself, if any.
return domElementChild.offsetWidth;
};
MinimalWebPartContainer.prototype._sendDimensionsCallback = function () {
// this callback is only called when 'this._props.sendDimensionsToParent' exists.
this._props.sendDimensionsToParent(this._getHeight());
};
MinimalWebPartContainer.prototype._renderWebPart = function (domElement) {
var _this = this;
return this._webPartManager
.loadWebPart(this._getWebPartManagerContext(domElement, this._props.webPartData))
.catch(function (error) {
_this._webPartManager.renderError(domElement, error);
});
};
MinimalWebPartContainer.prototype._getWebPartManagerContext = function (domElement, webPartData) {
return {
domElement: domElement,
instanceId: this._props.webPartInstanceId,
manifest: this._props.manifest,
displayMode: this._props.displayMode || (this._props.openPropertyPane ? DisplayMode.Edit : DisplayMode.Read),
webPartData: webPartData,
addedFromPersistedData: this._isDataAddedFromPersistedData(),
formFactor: this._props.formFactor,
pageLayoutType: this._props.pageHostLayoutType
};
};
MinimalWebPartContainer.prototype._isDataAddedFromPersistedData = function () {
return !isOverrideDataPersistedFlagKSActive() && this._props.isDataAddedFromPersistedData !== undefined
? this._props.isDataAddedFromPersistedData
: true;
};
MinimalWebPartContainer.prototype._validateProps = function (props) {
Validate.isNotNullOrUndefined(props, 'props');
Validate.isNotNullOrUndefined(props.webPartData, 'props.webPartData');
Validate.isNotNullOrUndefined(props.webPartInstanceId, 'props.webPartInstanceId');
Validate.isNotNullOrUndefined(props.manifest, 'props.manifest');
Validate.isNotNullOrUndefined(props.serviceScope, 'props.applicationContext.serviceScope');
};
return MinimalWebPartContainer;
}());
export default MinimalWebPartContainer;
//# sourceMappingURL=MinimalWebPartContainer.js.map