office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
73 lines (71 loc) • 4.33 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./DialogContent.Props", "../../Button", "./DialogFooter", "../../utilities/decorators/withResponsiveMode", "./Dialog.scss"], function (require, exports, tslib_1, React, Utilities_1, DialogContent_Props_1, Button_1, DialogFooter_1, withResponsiveMode_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var DialogContent = (function (_super) {
tslib_1.__extends(DialogContent, _super);
function DialogContent(props) {
var _this = _super.call(this, props) || this;
_this.state = {
id: Utilities_1.getId('Dialog'),
};
return _this;
}
DialogContent.prototype.render = function () {
var _a = this.props, showCloseButton = _a.showCloseButton, closeButtonAriaLabel = _a.closeButtonAriaLabel, onDismiss = _a.onDismiss, subText = _a.subText, title = _a.title, type = _a.type;
var id = this.state.id;
var groupings = this._groupChildren();
var subTextContent;
if (subText) {
subTextContent = React.createElement("p", { className: Utilities_1.css('ms-Dialog-subText', styles.subText), id: id + '-subText' }, subText);
}
var contentClassName = Utilities_1.css(this.props.className, (_b = {},
_b['ms-Dialog--lgHeader ' + styles.isLargeHeader] = type === DialogContent_Props_1.DialogType.largeHeader,
_b['ms-Dialog--close ' + styles.isClose] = type === DialogContent_Props_1.DialogType.close,
_b));
return (React.createElement("div", { className: Utilities_1.css(contentClassName) },
React.createElement("div", { className: Utilities_1.css('ms-Dialog-header', styles.header) },
React.createElement("p", { className: Utilities_1.css('ms-Dialog-title', styles.title), id: id + '-title', role: 'heading' }, title),
React.createElement("div", { className: Utilities_1.css('ms-Dialog-topButton', styles.topButton) },
this.props.topButtonsProps.map(function (props) { return (React.createElement(Button_1.IconButton, tslib_1.__assign({}, props))); }),
showCloseButton && type !== DialogContent_Props_1.DialogType.largeHeader &&
React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Dialog-button ms-Dialog-button--close', styles.button), iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }))),
React.createElement("div", { className: Utilities_1.css('ms-Dialog-inner', styles.inner) },
React.createElement("div", { className: Utilities_1.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_1.DialogFooter) {
groupings.footers.push(child);
}
else {
groupings.contents.push(child);
}
});
return groupings;
};
return DialogContent;
}(Utilities_1.BaseComponent));
DialogContent.defaultProps = {
showCloseButton: false,
className: '',
topButtonsProps: [],
closeButtonAriaLabel: 'Close'
};
DialogContent = tslib_1.__decorate([
withResponsiveMode_1.withResponsiveMode
], DialogContent);
exports.DialogContent = DialogContent;
});
//# sourceMappingURL=DialogContent.js.map