@fluentui/react
Version:
Reusable React components for building web experiences.
94 lines (93 loc) • 7.2 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./DialogContent.types", "../../Modal", "../../ResponsiveMode", "./DialogContent"], function (require, exports, tslib_1, React, Utilities_1, DialogContent_types_1, Modal_1, ResponsiveMode_1, DialogContent_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogBase = void 0;
var getClassNames = (0, Utilities_1.classNamesFunction)();
var DefaultModalProps = {
isDarkOverlay: false,
isBlocking: false,
className: '',
containerClassName: '',
topOffsetFixed: false,
enableAriaHiddenSiblings: true,
};
var DefaultDialogContentProps = {
type: DialogContent_types_1.DialogType.normal,
className: '',
topButtonsProps: [],
};
// eslint-disable-next-line deprecation/deprecation
var DialogBase = exports.DialogBase = /** @class */ (function (_super) {
tslib_1.__extends(DialogBase, _super);
function DialogBase(props) {
var _this = _super.call(this, props) || this;
_this._getSubTextId = function () {
var _a;
// eslint-disable-next-line deprecation/deprecation
var ariaDescribedById = (_a = _this.props, _a.ariaDescribedById), modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, subText = _a.subText;
var id = (modalProps && modalProps.subtitleAriaId) || ariaDescribedById;
if (!id) {
id = ((dialogContentProps && dialogContentProps.subText) || subText) && _this._defaultSubTextId;
}
return id;
};
_this._getTitleTextId = function () {
var _a;
// eslint-disable-next-line deprecation/deprecation
var ariaLabelledById = (_a = _this.props, _a.ariaLabelledById), modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, title = _a.title;
var id = (modalProps && modalProps.titleAriaId) || ariaLabelledById;
if (!id) {
id = ((dialogContentProps && dialogContentProps.title) || title) && _this._defaultTitleTextId;
}
return id;
};
_this._id = (0, Utilities_1.getId)('Dialog');
_this._defaultTitleTextId = _this._id + '-title';
_this._defaultSubTextId = _this._id + '-subText';
return _this;
}
DialogBase.prototype.render = function () {
var _a, _b;
var _c, _d, _e;
var props = this.props;
var
/* eslint-disable deprecation/deprecation */
className = props.className, containerClassName = props.containerClassName, contentClassName = props.contentClassName, elementToFocusOnDismiss = props.elementToFocusOnDismiss, firstFocusableSelector = props.firstFocusableSelector, forceFocusInsideTrap = props.forceFocusInsideTrap, styles = props.styles, hidden = props.hidden, disableRestoreFocus = (_a = props.disableRestoreFocus, _a === void 0 ? props.ignoreExternalFocusing : _a), isBlocking = props.isBlocking, isClickableOutsideFocusTrap = props.isClickableOutsideFocusTrap, isDarkOverlay = props.isDarkOverlay, isOpen = (_b = props.isOpen, _b === void 0 ? !hidden : _b), onDismiss = props.onDismiss, onDismissed = props.onDismissed, onLayerDidMount = props.onLayerDidMount, responsiveMode = props.responsiveMode, subText = props.subText, theme = props.theme, title = props.title, topButtonsProps = props.topButtonsProps, type = props.type,
/* eslint-enable deprecation/deprecation */
minWidth = props.minWidth, maxWidth = props.maxWidth, modalProps = props.modalProps;
var mergedLayerProps = tslib_1.__assign({ onLayerDidMount: onLayerDidMount }, modalProps === null || modalProps === void 0 ? void 0 : modalProps.layerProps);
var dialogDraggableClassName;
var dragOptions;
// If dragOptions are provided, but no drag handle is specified, we supply a drag handle,
// and inform dialog contents to add class to draggable class to the header
if ((modalProps === null || modalProps === void 0 ? void 0 : modalProps.dragOptions) && !((_c = modalProps.dragOptions) === null || _c === void 0 ? void 0 : _c.dragHandleSelector)) {
// spread options to avoid mutating props
dragOptions = tslib_1.__assign({}, modalProps.dragOptions);
dialogDraggableClassName = 'ms-Dialog-draggable-header';
dragOptions.dragHandleSelector = ".".concat(dialogDraggableClassName);
}
var mergedModalProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, DefaultModalProps), { elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, disableRestoreFocus: disableRestoreFocus, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, responsiveMode: responsiveMode, className: className, containerClassName: containerClassName, isBlocking: isBlocking, isDarkOverlay: isDarkOverlay, onDismissed: onDismissed }), modalProps), { dragOptions: dragOptions, layerProps: mergedLayerProps, isOpen: isOpen });
var dialogContentProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ className: contentClassName, subText: subText, title: title, topButtonsProps: topButtonsProps, type: type }, DefaultDialogContentProps), props.dialogContentProps), { draggableHeaderClassName: dialogDraggableClassName, titleProps: tslib_1.__assign({
// eslint-disable-next-line deprecation/deprecation
id: ((_d = props.dialogContentProps) === null || _d === void 0 ? void 0 : _d.titleId) || this._defaultTitleTextId }, (_e = props.dialogContentProps) === null || _e === void 0 ? void 0 : _e.titleProps) });
var classNames = getClassNames(styles, {
theme: theme,
className: mergedModalProps.className,
containerClassName: mergedModalProps.containerClassName,
hidden: hidden,
dialogDefaultMinWidth: minWidth,
dialogDefaultMaxWidth: maxWidth,
});
return (React.createElement(Modal_1.Modal, tslib_1.__assign({}, mergedModalProps, { className: classNames.root, containerClassName: classNames.main, onDismiss: onDismiss || mergedModalProps.onDismiss, subtitleAriaId: this._getSubTextId(), titleAriaId: this._getTitleTextId() }),
React.createElement(DialogContent_1.DialogContent, tslib_1.__assign({ subTextId: this._defaultSubTextId, showCloseButton: mergedModalProps.isBlocking, onDismiss: onDismiss }, dialogContentProps), props.children)));
};
DialogBase.defaultProps = {
hidden: true,
};
DialogBase = tslib_1.__decorate([
ResponsiveMode_1.withResponsiveMode
], DialogBase);
return DialogBase;
}(React.Component));
});
//# sourceMappingURL=Dialog.base.js.map