@fluentui/react
Version:
Reusable React components for building web experiences.
113 lines • 7.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogBase = void 0;
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 ResponsiveMode_1 = require("../../ResponsiveMode");
var getClassNames = (0, Utilities_1.classNamesFunction)();
var DialogContent_1 = require("./DialogContent");
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 @typescript-eslint/no-deprecated
var DialogBase = /** @class */ (function (_super) {
tslib_1.__extends(DialogBase, _super);
function DialogBase(props) {
var _this = _super.call(this, props) || this;
_this._getSubTextId = function () {
// eslint-disable-next-line @typescript-eslint/no-deprecated
var _a = _this.props, ariaDescribedById = _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 () {
// eslint-disable-next-line @typescript-eslint/no-deprecated
var _a = _this.props, ariaLabelledById = _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';
if (process.env.NODE_ENV !== 'production') {
(0, Utilities_1.warnDeprecations)('Dialog', props, {
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.layerProps.onLayerDidMount',
ariaDescribedById: 'modalProps.subtitleAriaId',
ariaLabelledById: 'modalProps.titleAriaId',
});
}
return _this;
}
DialogBase.prototype.render = function () {
var _a, _b, _c;
var props = this.props;
var
/* eslint-disable @typescript-eslint/no-deprecated */
className = props.className, containerClassName = props.containerClassName, contentClassName = props.contentClassName, elementToFocusOnDismiss = props.elementToFocusOnDismiss, firstFocusableSelector = props.firstFocusableSelector, forceFocusInsideTrap = props.forceFocusInsideTrap, styles = props.styles, hidden = props.hidden, _d = props.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? props.ignoreExternalFocusing : _d, isBlocking = props.isBlocking, isClickableOutsideFocusTrap = props.isClickableOutsideFocusTrap, isDarkOverlay = props.isDarkOverlay, _e = props.isOpen, isOpen = _e === void 0 ? !hidden : _e, 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 @typescript-eslint/no-deprecated */
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) && !((_a = modalProps.dragOptions) === null || _a === void 0 ? void 0 : _a.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 @typescript-eslint/no-deprecated
id: ((_b = props.dialogContentProps) === null || _b === void 0 ? void 0 : _b.titleId) || this._defaultTitleTextId }, (_c = props.dialogContentProps) === null || _c === void 0 ? void 0 : _c.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));
exports.DialogBase = DialogBase;
//# sourceMappingURL=Dialog.base.js.map