office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
64 lines (62 loc) • 5.25 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./DialogContent.Props", "../../Modal", "../../utilities/decorators/withResponsiveMode", "./Dialog.scss", "./DialogContent"], function (require, exports, tslib_1, React, Utilities_1, DialogContent_Props_1, Modal_1, withResponsiveMode_1, stylesImport, DialogContent_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var Dialog = (function (_super) {
tslib_1.__extends(Dialog, _super);
function Dialog(props) {
var _this = _super.call(this, props) || this;
_this.state = {
id: Utilities_1.getId('Dialog'),
};
_this._warnDeprecations({
'isOpen': 'hidden',
'type': 'dialogContentProps.type',
'subText': 'dialogContentProps.subText',
'contentClassName': 'dialogContentProps.className',
'topButtonsProps': 'dialogContentProps.topButtonsProps',
'className': 'modalProps.className',
'isDarkOverlay': 'modalProps.isDarkOverlay',
'isBlocking': 'modalProps.isBlocking',
'containerClassName': 'modalProps.containerClassName',
'onDismissed': 'modalProps.onDismissed',
'onLayerDidMount': 'modalProps.onLayerDidMount',
'ariaDescribedById': 'modalProps.subtitleAriaId',
'ariaLabelledById': 'modalProps.titleAriaId'
});
return _this;
}
Dialog.prototype.render = function () {
var _a = this.props, ariaDescribedById = _a.ariaDescribedById, ariaLabelledById = _a.ariaLabelledById, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, isOpen = _a.isOpen, className = _a.className, onDismiss = _a.onDismiss, onDismissed = _a.onDismissed, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted, responsiveMode = _a.responsiveMode, subText = _a.subText, title = _a.title, type = _a.type, contentClassName = _a.contentClassName, topButtonsProps = _a.topButtonsProps, dialogContentProps = _a.dialogContentProps, modalProps = _a.modalProps, containerClassName = _a.containerClassName, hidden = _a.hidden;
var id = this.state.id;
return (React.createElement(Modal_1.Modal, tslib_1.__assign({ elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, ignoreExternalFocusing: ignoreExternalFocusing, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, onDismissed: onDismissed, onLayerDidMount: onLayerDidMount, responsiveMode: responsiveMode }, modalProps, { isDarkOverlay: isDarkOverlay !== undefined ? isDarkOverlay : modalProps.isDarkOverlay, isBlocking: isBlocking !== undefined ? isBlocking : modalProps.isBlocking, isOpen: isOpen !== undefined ? isOpen : !hidden, className: Utilities_1.css('ms-Dialog', className ? className : modalProps.className), containerClassName: Utilities_1.css(styles.main, containerClassName ? containerClassName : modalProps.containerClassName), onDismiss: onDismiss ? onDismiss : modalProps.onDismiss, subtitleAriaId: this._getAriaLabelId(ariaDescribedById ? ariaDescribedById : modalProps.subtitleAriaId, subText ? subText : modalProps.subtitleAriaId, id + '-subText'), titleAriaId: this._getAriaLabelId(modalProps.titleAriaId ? modalProps.titleAriaId : ariaLabelledById, title ? title : modalProps.titleAriaId, id + '-title') }),
React.createElement(DialogContent_1.DialogContent, tslib_1.__assign({ title: title, subText: subText, showCloseButton: isBlocking !== undefined ? !isBlocking : !modalProps.isBlocking, topButtonsProps: topButtonsProps ? topButtonsProps : dialogContentProps.topButtonsProps, type: type !== undefined ? type : dialogContentProps.type, onDismiss: onDismiss ? onDismiss : dialogContentProps.onDismiss, className: Utilities_1.css(contentClassName ? contentClassName : dialogContentProps.className) }, dialogContentProps), this.props.children)));
};
Dialog.prototype._getAriaLabelId = function (ariaId, text, alternativeId) {
return ariaId || text && alternativeId;
};
return Dialog;
}(Utilities_1.BaseComponent));
Dialog.defaultProps = {
modalProps: {
isDarkOverlay: true,
isBlocking: false,
className: '',
containerClassName: ''
},
dialogContentProps: {
type: DialogContent_Props_1.DialogType.normal,
className: '',
topButtonsProps: [],
},
hidden: true,
};
tslib_1.__decorate([
Utilities_1.autobind
], Dialog.prototype, "_getAriaLabelId", null);
Dialog = tslib_1.__decorate([
withResponsiveMode_1.withResponsiveMode
], Dialog);
exports.Dialog = Dialog;
});
//# sourceMappingURL=Dialog.js.map