office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
72 lines (70 loc) • 4.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var Image_1 = require("../../Image");
var stylesImport = require("./TeachingBubble.scss");
var styles = stylesImport;
var TeachingBubbleContent = (function (_super) {
tslib_1.__extends(TeachingBubbleContent, _super);
// Constructor
function TeachingBubbleContent(props) {
var _this = _super.call(this, props) || this;
_this._id = Utilities_1.getId('TeachingBubble');
_this.state = {};
return _this;
}
TeachingBubbleContent.prototype.render = function () {
var _a = this.props, illustrationImage = _a.illustrationImage, primaryButtonProps = _a.primaryButtonProps, secondaryButtonProps = _a.secondaryButtonProps, headline = _a.headline, hasCondensedHeadline = _a.hasCondensedHeadline, hasCloseIcon = _a.hasCloseIcon, onDismiss = _a.onDismiss, closeButtonAriaLabel = _a.closeButtonAriaLabel;
var imageContent;
var headerContent;
var bodyContent;
var footerContent;
var closeButton;
if (illustrationImage && illustrationImage.src) {
imageContent = (React.createElement("div", { className: 'ms-TeachingBubble-header' },
React.createElement(Image_1.Image, tslib_1.__assign({}, illustrationImage))));
}
if (headline) {
headerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-header', hasCondensedHeadline ?
'ms-TeachingBubble-header--small ' + styles.headerIsSmall :
'ms-TeachingBubble-header--large ' + styles.headerIsLarge) },
React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-headline', styles.headline) }, headline)));
}
if (this.props.children) {
bodyContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-body', styles.body) },
React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-subText', styles.subText) }, this.props.children)));
}
if (primaryButtonProps || secondaryButtonProps) {
footerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-footer', styles.footer) },
primaryButtonProps && (React.createElement(Button_1.PrimaryButton, tslib_1.__assign({}, primaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-primaryButton', styles.primaryButton, primaryButtonProps.className) }))),
secondaryButtonProps && (React.createElement(Button_1.DefaultButton, tslib_1.__assign({}, secondaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-secondaryButton', styles.secondaryButton, secondaryButtonProps.className) })))));
}
if (hasCloseIcon) {
closeButton = (React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-TeachingBubble-closebutton', styles.closeButton), iconProps: { iconName: 'Cancel' }, title: closeButtonAriaLabel, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }));
}
return (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-content') },
imageContent,
closeButton,
React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-bodycontent', styles.bodyContent) },
headerContent,
bodyContent,
footerContent)));
};
return TeachingBubbleContent;
}(Utilities_1.BaseComponent));
// Specify default props values
TeachingBubbleContent.defaultProps = {
hasCondensedHeadline: false,
imageProps: {
imageFit: Image_1.ImageFit.cover,
width: 364,
height: 130
}
};
exports.TeachingBubbleContent = TeachingBubbleContent;
//# sourceMappingURL=TeachingBubbleContent.js.map