office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
70 lines • 3.83 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css, } from '../../Utilities';
import { DialogType } from './DialogContent.types';
import { IconButton } from '../../Button';
import { DialogFooter } from './DialogFooter';
import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
import * as stylesImport from './Dialog.scss';
var styles = stylesImport;
var DialogContent = /** @class */ (function (_super) {
tslib_1.__extends(DialogContent, _super);
function DialogContent(props) {
return _super.call(this, props) || this;
}
DialogContent.prototype.render = function () {
var _a = this.props, showCloseButton = _a.showCloseButton, closeButtonAriaLabel = _a.closeButtonAriaLabel, onDismiss = _a.onDismiss, subTextId = _a.subTextId, subText = _a.subText, titleId = _a.titleId, title = _a.title, type = _a.type;
var groupings = this._groupChildren();
var subTextContent;
if (subText) {
subTextContent = React.createElement("p", { className: css('ms-Dialog-subText', styles.subText), id: subTextId }, subText);
}
var contentClassName = css(this.props.className, (_b = {},
_b['ms-Dialog--lgHeader ' + styles.isLargeHeader] = type === DialogType.largeHeader,
_b['ms-Dialog--close ' + styles.isClose] = type === DialogType.close,
_b));
return (React.createElement("div", { className: css(contentClassName) },
React.createElement("div", { className: css('ms-Dialog-header', styles.header) },
React.createElement("p", { className: css('ms-Dialog-title', styles.title), id: titleId, role: 'heading' }, title),
React.createElement("div", { className: css('ms-Dialog-topButton', styles.topButton) },
this.props.topButtonsProps.map(function (props) { return (React.createElement(IconButton, tslib_1.__assign({}, props))); }),
(type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) &&
React.createElement(IconButton, { className: css('ms-Dialog-button ms-Dialog-button--close', styles.button), iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }))),
React.createElement("div", { className: css('ms-Dialog-inner', styles.inner) },
React.createElement("div", { className: css('ms-Dialog-content', styles.content, this.props.className) },
subTextContent,
groupings.contents),
groupings.footers)));
var _b;
};
// @TODO - typing the footers as an array of DialogFooter is difficult because
// casing "child as DialogFooter" causes a problem because
// "Neither type 'ReactElement<any>' nor type 'DialogFooter' is assignable to the other."
DialogContent.prototype._groupChildren = function () {
var groupings = {
footers: [],
contents: []
};
React.Children.map(this.props.children, function (child) {
if (typeof child === 'object' && child !== null && child.type === DialogFooter) {
groupings.footers.push(child);
}
else {
groupings.contents.push(child);
}
});
return groupings;
};
DialogContent.defaultProps = {
showCloseButton: false,
className: '',
topButtonsProps: [],
closeButtonAriaLabel: 'Close'
};
DialogContent = tslib_1.__decorate([
withResponsiveMode
], DialogContent);
return DialogContent;
}(BaseComponent));
export { DialogContent };
//# sourceMappingURL=DialogContent.js.map