office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
111 lines (109 loc) • 6.95 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../../Button", "../../Icon", "./MessageBar.Props", "./MessageBar.scss"], function (require, exports, tslib_1, React, Utilities_1, Button_1, Icon_1, MessageBar_Props_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var MessageBar = (function (_super) {
tslib_1.__extends(MessageBar, _super);
function MessageBar(props) {
var _this = _super.call(this, props) || this;
_this.ICON_MAP = (_a = {},
_a[MessageBar_Props_1.MessageBarType.info] = 'Info',
_a[MessageBar_Props_1.MessageBarType.warning] = 'Info',
_a[MessageBar_Props_1.MessageBarType.error] = 'ErrorBadge',
_a[MessageBar_Props_1.MessageBarType.blocked] = 'Blocked',
_a[MessageBar_Props_1.MessageBarType.remove] = 'Blocked',
_a[MessageBar_Props_1.MessageBarType.severeWarning] = 'Warning',
_a[MessageBar_Props_1.MessageBarType.success] = 'Completed',
_a);
_this.state = {
labelId: Utilities_1.getId('MessageBar'),
showContent: false
};
return _this;
var _a;
}
MessageBar.prototype.render = function () {
var isMultiline = this.props.isMultiline;
return isMultiline ? this._renderMultiLine() : this._renderSingleLine();
};
MessageBar.prototype._getActionsDiv = function () {
if (this.props.actions) {
return React.createElement("div", { className: this.props.isMultiline ?
('ms-MessageBar-actions ' + styles.actions) :
('ms-MessageBar-actionsOneline ' + styles.actionsOneline) }, this.props.actions);
}
return null;
};
MessageBar.prototype._getClassName = function () {
return Utilities_1.css(this.props.className, 'ms-MessageBar', styles.root, (_a = {},
_a['ms-MessageBar ' + styles.root] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.info,
_a['ms-MessageBar--error ' + styles.rootIsError] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.error,
_a['ms-MessageBar--blocked ' + styles.rootIsBlocked] = (this.props.messageBarType === MessageBar_Props_1.MessageBarType.blocked) ||
(this.props.messageBarType === MessageBar_Props_1.MessageBarType.remove),
_a['ms-MessageBar--severeWarning ' + styles.rootIsSevereWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.severeWarning,
_a['ms-MessageBar--success ' + styles.rootIsSuccess] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.success,
_a['ms-MessageBar--warning ' + styles.rootIsWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.warning,
_a));
var _a;
};
MessageBar.prototype._getDismissDiv = function () {
if (this.props.onDismiss) {
return (React.createElement(Button_1.IconButton, { disabled: false, className: Utilities_1.css('ms-MessageBar-dismissal', styles.dismissal), onClick: this.props.onDismiss, iconProps: { iconName: 'Cancel' }, ariaLabel: this.props.dismissButtonAriaLabel }));
}
return null;
};
MessageBar.prototype._getDismissOneLine = function () {
if (this.props.onDismiss) {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-dismissOneline', styles.dismissOneline) }, this._getDismissDiv()));
}
return null;
};
MessageBar.prototype._getIconSpan = function () {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-icon', styles.icon) },
React.createElement(Icon_1.Icon, { iconName: this.ICON_MAP[this.props.messageBarType] })));
};
MessageBar.prototype._getInnerTextClassName = function () {
return this.props.onDismiss || this.props.actions ?
'ms-MessageBar-innerTextPadding ' + styles.innerTextPadding : 'ms-MessageBar-innerText ' + styles.innerText;
};
MessageBar.prototype._renderMultiLine = function () {
return (React.createElement("div", { className: Utilities_1.css(this._getClassName(), 'ms-MessageBar-multiline', styles.multiline, this.props.onDismiss && styles.dismissalMultiline, this.props.actions && styles.actionableMultiline), role: 'status', "aria-live": this._getAnnouncementPriority() },
React.createElement("div", { className: Utilities_1.css(styles.content, 'ms-MessageBar-content') },
this._getIconSpan(),
this._renderInnerText(),
this._getDismissDiv()),
this._getActionsDiv()));
};
MessageBar.prototype._renderSingleLine = function () {
return (React.createElement("div", { className: Utilities_1.css(this._getClassName(), 'ms-MessageBar-singleline', styles.singleline, this.props.onDismiss && 'ms-MessageBar-dismissalOneline ' + styles.dismissalOneline, this.props.actions && styles.actionableOneline) },
React.createElement("div", { className: Utilities_1.css(styles.content, 'ms-MessageBar-content') },
this._getIconSpan(),
this._renderInnerText(),
this._getDismissOneLine()),
this._getActionsDiv()));
};
MessageBar.prototype._renderInnerText = function () {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-text', styles.text), id: this.state.labelId },
React.createElement("span", { className: this._getInnerTextClassName(), role: 'status', "aria-live": this._getAnnouncementPriority() },
React.createElement(Utilities_1.DelayedRender, null,
React.createElement("span", null, this.props.children)))));
};
MessageBar.prototype._getAnnouncementPriority = function () {
switch (this.props.messageBarType) {
case MessageBar_Props_1.MessageBarType.blocked:
case MessageBar_Props_1.MessageBarType.error:
case MessageBar_Props_1.MessageBarType.severeWarning:
return 'assertive';
}
return 'polite';
};
return MessageBar;
}(Utilities_1.BaseComponent));
MessageBar.defaultProps = {
messageBarType: MessageBar_Props_1.MessageBarType.info,
onDismiss: null,
isMultiline: true,
};
exports.MessageBar = MessageBar;
});
//# sourceMappingURL=MessageBar.js.map