office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
85 lines • 5.97 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var DialogContent_types_1 = require("./DialogContent.types");
var Modal_1 = require("../../Modal");
var withResponsiveMode_1 = require("../../utilities/decorators/withResponsiveMode");
var getClassNames = Utilities_1.classNamesFunction();
var DialogContent_1 = require("./DialogContent");
var DefaultModalProps = {
isDarkOverlay: false,
isBlocking: false,
className: '',
containerClassName: ''
};
var DefaultDialogContentProps = {
type: DialogContent_types_1.DialogType.normal,
className: '',
topButtonsProps: [],
};
var DialogBase = /** @class */ (function (_super) {
tslib_1.__extends(DialogBase, _super);
function DialogBase(props) {
var _this = _super.call(this, props) || this;
_this._getSubTextId = function () {
var _a = _this.props, ariaDescribedById = _a.ariaDescribedById, modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, subText = _a.subText;
var id = ariaDescribedById || (modalProps && modalProps.subtitleAriaId);
if (!id) {
id = (subText || (dialogContentProps && dialogContentProps.subText)) && _this._defaultSubTextId;
}
return id;
};
_this._getTitleTextId = function () {
var _a = _this.props, ariaLabelledById = _a.ariaLabelledById, modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, title = _a.title;
var id = ariaLabelledById || (modalProps && modalProps.titleAriaId);
if (!id) {
id = (title || (dialogContentProps && dialogContentProps.title)) && _this._defaultTitleTextId;
}
return id;
};
_this._id = Utilities_1.getId('Dialog');
_this._defaultTitleTextId = _this._id + '-title';
_this._defaultSubTextId = _this._id + '-subText';
_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;
}
DialogBase.prototype.render = function () {
var _a = this.props, className = _a.className, containerClassName = _a.containerClassName, contentClassName = _a.contentClassName, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, styles = _a.styles, hidden = _a.hidden, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, isOpen = _a.isOpen, onDismiss = _a.onDismiss, onDismissed = _a.onDismissed, onLayerDidMount = _a.onLayerDidMount, responsiveMode = _a.responsiveMode, subText = _a.subText, theme = _a.theme, title = _a.title, topButtonsProps = _a.topButtonsProps, type = _a.type;
var modalProps = tslib_1.__assign({}, DefaultModalProps, this.props.modalProps);
var dialogContentProps = tslib_1.__assign({}, DefaultDialogContentProps, this.props.dialogContentProps);
var classNames = getClassNames(styles, {
theme: theme,
className: className || modalProps.className,
containerClassName: containerClassName || modalProps.containerClassName,
hidden: hidden,
});
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: classNames.root, containerClassName: classNames.main, onDismiss: onDismiss ? onDismiss : modalProps.onDismiss, subtitleAriaId: this._getSubTextId(), titleAriaId: this._getTitleTextId() }),
React.createElement(DialogContent_1.DialogContent, tslib_1.__assign({ titleId: this._defaultTitleTextId, subTextId: this._defaultSubTextId, 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: contentClassName || dialogContentProps.className }, dialogContentProps), this.props.children)));
};
DialogBase.defaultProps = {
hidden: true,
};
DialogBase = tslib_1.__decorate([
Utilities_1.customizable('Dialog', ['theme']),
withResponsiveMode_1.withResponsiveMode
], DialogBase);
return DialogBase;
}(Utilities_1.BaseComponent));
exports.DialogBase = DialogBase;
//# sourceMappingURL=Dialog.base.js.map