@microsoft/sp-dialog
Version:
SharePoint Framework support for displaying dialog boxes
108 lines • 5.15 kB
JavaScript
import { __extends } from "tslib";
import { DialogContent as DialogContentV8 } from '@fluentui/react/lib/Dialog';
import { Modal } from '@fluentui/react/lib/Modal';
import { V9Dialog } from './V9DialogWrapper';
import PlaceholderSpinner from './placeHolder/PlaceholderSpinner';
import * as React from 'react';
import ContentDiv from './ContentDiv';
import { isUsingV9ForSPDialogKSActivated, isCleanupFluentDefaultLayerHostDivKSActivated } from './common/KillSwitches';
import { _getInternalDialogApi } from './DialogManager';
import { cleanupDefaultLayerHost } from '@fluentui/react';
var FabricDialogWrapper = /** @class */ (function (_super) {
__extends(FabricDialogWrapper, _super);
function FabricDialogWrapper(props) {
var _this = _super.call(this, props) || this;
/**
* Starts the sequence of opening the modal and rendering the dialog content into it.
* Returns a promise that resolves when the content is fully rendered.
*/
_this.open = function (dialog) {
_this._openPromise = new Promise(function (resolve) {
_this._resolveOpenPromise = resolve;
});
dialog = dialog || _this.state.dialog;
if (!isCleanupFluentDefaultLayerHostDivKSActivated()) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
cleanupDefaultLayerHost(document.body);
}
_this.setState({ dialog: dialog, isOpen: true, isContentReady: false });
return _this._openPromise;
};
_this.close = function () {
_this._closedPromise = new Promise(function (resolve) {
_this._resolveClosedPromise = resolve;
});
if (!_this.state.isOpen) {
_this._resolveClosedPromise();
}
else {
_this.setState({ isOpen: false });
}
return _this._closedPromise;
};
_this._onDismissed = function () {
if (!_this.state.isOpen && _this._resolveClosedPromise) {
_this._resolveClosedPromise();
}
};
_this._closeCallback = function () {
if (_this.props.closeCallback && _this.state.dialog) {
void _this.props.closeCallback(_this.state.dialog);
}
};
_this._onDismissed = _this._onDismissed.bind(_this);
_this.state = {
isOpen: false,
isContentReady: false
};
return _this;
}
FabricDialogWrapper.prototype.render = function () {
var dialogContent = !this.state.isContentReady ? (!isUsingV9ForSPDialogKSActivated() ? (React.createElement(PlaceholderSpinner, { label: '' })) : (React.createElement(DialogContentV8, {}, React.createElement(PlaceholderSpinner, { label: '' })))) : (false);
if (this.state.dialog) {
var ariaLive = this.state.dialog._configuration.isBlocking
? 'assertive'
: 'polite';
var popupProps = {
role: 'dialog',
ariaDescribedBy: 'sp-dialog-content-message',
'aria-live': ariaLive
};
if (!isUsingV9ForSPDialogKSActivated()) {
return (React.createElement(V9Dialog, { isOpen: this.state.isOpen, isBlocking: this.state.dialog._configuration.isBlocking, onDismissed: this._onDismissed, onDismiss: this._closeCallback, popupProps: popupProps },
!dialogContent && React.createElement(ContentDiv, { innerElement: this._detachedElement }),
dialogContent));
}
else {
return (React.createElement(Modal, { isOpen: this.state.isOpen, isBlocking: this.state.dialog._configuration.isBlocking, layerProps: { eventBubblingEnabled: true }, onDismissed: this._onDismissed, onDismiss: this._closeCallback, popupProps: popupProps },
!dialogContent && React.createElement(ContentDiv, { innerElement: this._detachedElement }),
dialogContent));
}
}
else {
return React.createElement("div", null);
}
};
// eslint-disable-next-line @typescript-eslint/naming-convention
FabricDialogWrapper.prototype.UNSAFE_componentWillMount = function () {
this._detachedElement = document.createElement('DIV');
};
FabricDialogWrapper.prototype.componentDidUpdate = function () {
var _this = this;
if (this.state.isOpen && this.state.dialog && this._detachedElement) {
if (!this.state.isContentReady) {
void _getInternalDialogApi(this.state.dialog)
._render(this._detachedElement)
.then(function () {
_this.setState({ isContentReady: true });
});
}
else if (this._resolveOpenPromise) {
this._resolveOpenPromise();
}
}
};
return FabricDialogWrapper;
}(React.Component));
export default FabricDialogWrapper;
//# sourceMappingURL=FabricDialogWrapper.js.map