@microsoft/sp-dialog
Version:
SharePoint Framework support for displaying dialog boxes
106 lines • 4.75 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 PlaceholderSpinner_1 = tslib_1.__importDefault(require("./placeHolder/PlaceholderSpinner"));
var React = tslib_1.__importStar(require("react"));
var ContentDiv_1 = tslib_1.__importDefault(require("./ContentDiv"));
var DialogManager_1 = require("./DialogManager");
var sp_core_library_1 = require("@microsoft/sp-core-library");
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;
_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
? React.createElement(Dialog_1.DialogContent, {}, React.createElement(PlaceholderSpinner_1.default, { label: '' }))
: false;
if (this.state.dialog) {
var isModalReadingKSActivated = function () {
return sp_core_library_1._SPKillSwitch.isActivated('b8d7f882-0982-11ee-be56-0242ac120002'
/* '06/12/2023', 'Enable a11y reading on modal popup' */
);
};
var ariaLive = this.state.dialog._configuration.isBlocking
? 'assertive'
: 'polite';
var popupProps = !isModalReadingKSActivated()
? {
role: 'dialog',
ariaDescribedBy: 'sp-dialog-content-message',
'aria-live': ariaLive
}
: undefined;
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