office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
95 lines (93 loc) • 4.92 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../FocusTrapZone/index", "../../Overlay", "../../Layer", "../Popup/index", "../../utilities/decorators/withResponsiveMode", "./Modal.scss"], function (require, exports, tslib_1, React, Utilities_1, index_1, Overlay_1, Layer_1, index_2, withResponsiveMode_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var Modal = (function (_super) {
tslib_1.__extends(Modal, _super);
function Modal(props) {
var _this = _super.call(this, props) || this;
_this.state = {
id: Utilities_1.getId('Modal'),
isOpen: props.isOpen,
isVisible: props.isOpen,
};
return _this;
}
Modal.prototype.componentWillReceiveProps = function (newProps) {
clearTimeout(this._onModalCloseTimer);
// Opening the dialog
if (newProps.isOpen) {
if (!this.state.isOpen) {
// First Open
this.setState({
isOpen: true
});
}
else {
// Reopen during closing
this.setState({
isVisible: true
});
}
}
// Closing the dialog
if (!newProps.isOpen && this.state.isOpen) {
this._onModalCloseTimer = this._async.setTimeout(this._onModalClose, parseFloat(styles.duration) * 1000);
this.setState({
isVisible: false
});
}
};
Modal.prototype.componentDidUpdate = function (prevProps, prevState) {
if (!prevProps.isOpen && !prevState.isVisible) {
this.setState({
isVisible: true
});
}
};
Modal.prototype.render = function () {
var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, onDismiss = _a.onDismiss, onLayerDidMount = _a.onLayerDidMount, responsiveMode = _a.responsiveMode, titleAriaId = _a.titleAriaId, subtitleAriaId = _a.subtitleAriaId;
var _b = this.state, id = _b.id, isOpen = _b.isOpen, isVisible = _b.isVisible;
var modalClassName = Utilities_1.css('ms-Modal', styles.root, this.props.className, (_c = {},
_c['is-open'] = !!isOpen,
_c[styles.rootIsVisible] = !!isVisible,
_c));
if (!isOpen) {
return null;
}
// @temp tuatology - Will adjust this to be a panel at certain breakpoints
if (responsiveMode >= withResponsiveMode_1.ResponsiveMode.small) {
return (React.createElement(Layer_1.Layer, { onLayerDidMount: onLayerDidMount },
React.createElement(index_2.Popup, { role: isBlocking ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss },
React.createElement("div", { className: modalClassName },
React.createElement(Overlay_1.Overlay, { isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss }),
React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Dialog-main', styles.main, this.props.containerClassName), elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, this.props.children)))));
}
return null;
var _c;
};
// Watch for completed animations and set the state
Modal.prototype._onModalClose = function () {
this.setState({
isOpen: false
});
// Call the onDismiss callback
if (this.props.onDismissed) {
this.props.onDismissed();
}
};
return Modal;
}(Utilities_1.BaseComponent));
Modal.defaultProps = {
isOpen: false,
isDarkOverlay: true,
isBlocking: false,
className: '',
containerClassName: '',
};
Modal = tslib_1.__decorate([
withResponsiveMode_1.withResponsiveMode
], Modal);
exports.Modal = Modal;
});
//# sourceMappingURL=Modal.js.map