office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
77 lines • 5.6 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css, getId } from '../../Utilities';
import { DialogType } from './DialogContent.types';
import { Modal } from '../../Modal';
import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
import * as stylesImport from './Dialog.scss';
var styles = stylesImport;
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, 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, responsiveMode = _a.responsiveMode, subText = _a.subText, title = _a.title, type = _a.type, contentClassName = _a.contentClassName, topButtonsProps = _a.topButtonsProps, containerClassName = _a.containerClassName, hidden = _a.hidden;
var modalProps = tslib_1.__assign({}, DefaultModalProps, this.props.modalProps);
var dialogContentProps = tslib_1.__assign({}, DefaultDialogContentProps, this.props.dialogContentProps);
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: css('ms-Dialog', className ? className : modalProps.className), containerClassName: css(styles.main, containerClassName ? containerClassName : modalProps.containerClassName), 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: css(contentClassName ? 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