office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
84 lines • 5.86 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction, getId } from '../../Utilities';
import { DialogType } from './DialogContent.types';
import { Modal } from '../../Modal';
import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
var getClassNames = classNamesFunction();
import { DialogContent } from './DialogContent';
var DefaultModalProps = {
isDarkOverlay: false,
isBlocking: false,
className: '',
containerClassName: ''
};
var DefaultDialogContentProps = {
type: 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 = 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, minWidth = _a.minWidth, maxWidth = _a.maxWidth;
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,
dialogDefaultMinWidth: minWidth,
dialogDefaultMaxWidth: maxWidth
});
return (React.createElement(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, 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([
withResponsiveMode
], DialogBase);
return DialogBase;
}(BaseComponent));
export { DialogBase };
//# sourceMappingURL=Dialog.base.js.map