@fluentui/react
Version:
Reusable React components for building web experiences.
112 lines • 7.47 kB
JavaScript
import { __assign, __decorate, __extends } from "tslib";
import * as React from 'react';
import { warnDeprecations, classNamesFunction, getId } from '../../Utilities';
import { DialogType } from './DialogContent.types';
import { Modal } from '../../Modal';
import { withResponsiveMode } from '../../ResponsiveMode';
var getClassNames = classNamesFunction();
import { DialogContent } from './DialogContent';
var DefaultModalProps = {
isDarkOverlay: false,
isBlocking: false,
className: '',
containerClassName: '',
topOffsetFixed: false,
enableAriaHiddenSiblings: true,
};
var DefaultDialogContentProps = {
type: DialogType.normal,
className: '',
topButtonsProps: [],
};
// eslint-disable-next-line deprecation/deprecation
export var DialogBase = /** @class */ (function (_super) {
__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 = getId('Dialog');
_this._defaultTitleTextId = _this._id + '-title';
_this._defaultSubTextId = _this._id + '-subText';
if (process.env.NODE_ENV !== 'production') {
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;
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 = __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 = __assign({}, modalProps.dragOptions);
dialogDraggableClassName = 'ms-Dialog-draggable-header';
dragOptions.dragHandleSelector = ".".concat(dialogDraggableClassName);
}
var mergedModalProps = __assign(__assign(__assign(__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 = __assign(__assign(__assign({ className: contentClassName, subText: subText, title: title, topButtonsProps: topButtonsProps, type: type }, DefaultDialogContentProps), props.dialogContentProps), { draggableHeaderClassName: dialogDraggableClassName, titleProps: __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, __assign({}, mergedModalProps, { className: classNames.root, containerClassName: classNames.main, onDismiss: onDismiss || mergedModalProps.onDismiss, subtitleAriaId: this._getSubTextId(), titleAriaId: this._getTitleTextId() }),
React.createElement(DialogContent, __assign({ subTextId: this._defaultSubTextId, showCloseButton: mergedModalProps.isBlocking, onDismiss: onDismiss }, dialogContentProps), props.children)));
};
DialogBase.defaultProps = {
hidden: true,
};
DialogBase = __decorate([
withResponsiveMode
], DialogBase);
return DialogBase;
}(React.Component));
//# sourceMappingURL=Dialog.base.js.map