@microsoft/sp-dialog
Version:
SharePoint Framework support for displaying dialog boxes
110 lines • 5.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Dialog_1 = require("@fluentui/react/lib/Dialog");
var Modal_1 = require("@fluentui/react/lib/Modal");
var V9DialogWrapper_1 = require("./V9DialogWrapper");
var PlaceholderSpinner_1 = tslib_1.__importDefault(require("./placeHolder/PlaceholderSpinner"));
var React = tslib_1.__importStar(require("react"));
var ContentDiv_1 = tslib_1.__importDefault(require("./ContentDiv"));
var KillSwitches_1 = require("./common/KillSwitches");
var DialogManager_1 = require("./DialogManager");
var react_1 = require("@fluentui/react");
var FabricDialogWrapper = /** @class */ (function (_super) {
tslib_1.__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 (!(0, KillSwitches_1.isCleanupFluentDefaultLayerHostDivKSActivated)()) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(0, react_1.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 ? (!(0, KillSwitches_1.isUsingV9ForSPDialogKSActivated)() ? (React.createElement(PlaceholderSpinner_1.default, { label: '' })) : (React.createElement(Dialog_1.DialogContent, {}, React.createElement(PlaceholderSpinner_1.default, { 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 (!(0, KillSwitches_1.isUsingV9ForSPDialogKSActivated)()) {
return (React.createElement(V9DialogWrapper_1.V9Dialog, { isOpen: this.state.isOpen, isBlocking: this.state.dialog._configuration.isBlocking, onDismissed: this._onDismissed, onDismiss: this._closeCallback, popupProps: popupProps },
!dialogContent && React.createElement(ContentDiv_1.default, { innerElement: this._detachedElement }),
dialogContent));
}
else {
return (React.createElement(Modal_1.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_1.default, { 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 (0, DialogManager_1._getInternalDialogApi)(this.state.dialog)
._render(this._detachedElement)
.then(function () {
_this.setState({ isContentReady: true });
});
}
else if (this._resolveOpenPromise) {
this._resolveOpenPromise();
}
}
};
return FabricDialogWrapper;
}(React.Component));
exports.default = FabricDialogWrapper;
//# sourceMappingURL=FabricDialogWrapper.js.map