office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
125 lines • 7.59 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var Icon_1 = require("../../Icon");
var MessageBar_types_1 = require("./MessageBar.types");
var stylesImport = require("./MessageBar.scss");
var styles = stylesImport;
var MessageBar = /** @class */ (function (_super) {
tslib_1.__extends(MessageBar, _super);
function MessageBar(props) {
var _this = _super.call(this, props) || this;
_this.ICON_MAP = (_a = {},
_a[MessageBar_types_1.MessageBarType.info] = 'Info',
_a[MessageBar_types_1.MessageBarType.warning] = 'Info',
_a[MessageBar_types_1.MessageBarType.error] = 'ErrorBadge',
_a[MessageBar_types_1.MessageBarType.blocked] = 'Blocked2',
_a[MessageBar_types_1.MessageBarType.remove] = 'Blocked',
_a[MessageBar_types_1.MessageBarType.severeWarning] = 'Warning',
_a[MessageBar_types_1.MessageBarType.success] = 'Completed',
_a);
_this.state = {
labelId: Utilities_1.getId('MessageBar'),
showContent: false,
expandSingleLine: 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-actionsSingleLine ' + styles.actionsSingleLine) }, 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_types_1.MessageBarType.info,
_a['ms-MessageBar--error ' + styles.rootIsError] = this.props.messageBarType === MessageBar_types_1.MessageBarType.error,
_a['ms-MessageBar--blocked ' + styles.rootIsBlocked] = (this.props.messageBarType === MessageBar_types_1.MessageBarType.blocked) ||
(this.props.messageBarType === MessageBar_types_1.MessageBarType.remove),
_a['ms-MessageBar--severeWarning ' + styles.rootIsSevereWarning] = this.props.messageBarType === MessageBar_types_1.MessageBarType.severeWarning,
_a['ms-MessageBar--success ' + styles.rootIsSuccess] = this.props.messageBarType === MessageBar_types_1.MessageBarType.success,
_a['ms-MessageBar--warning ' + styles.rootIsWarning] = this.props.messageBarType === MessageBar_types_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: 'Clear' }, ariaLabel: this.props.dismissButtonAriaLabel }));
}
return null;
};
MessageBar.prototype._getDismissSingleLine = function () {
if (this.props.onDismiss) {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-dismissSingleLine', styles.dismissSingleLine) }, this._getDismissDiv()));
}
return null;
};
MessageBar.prototype._getExpandSingleLine = function () {
if (!this.props.actions && this.props.truncated) {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-expandSingleLine', styles.expandSingleLine) },
React.createElement(Button_1.IconButton, { disabled: false, className: Utilities_1.css('ms-MessageBar-expand', styles.expand), onClick: this._onClick, iconProps: { iconName: this.state.expandSingleLine ? 'DoubleChevronUp' : 'DoubleChevronDown' }, ariaLabel: this.props.dismissButtonAriaLabel })));
}
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._renderMultiLine = function () {
return (React.createElement("div", { className: Utilities_1.css(this._getClassName(), 'ms-MessageBar-multiline', styles.multiLine, this.props.onDismiss && styles.dismissalMultiLine), 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-dismissalSingleLine', this.props.truncated && 'ms-MessageBar-expandingSingleLine', this.props.truncated && styles.expandingSingleLine) },
React.createElement("div", { className: Utilities_1.css(styles.content, 'ms-MessageBar-content') },
this._getIconSpan(),
this._renderInnerText(),
this._getExpandSingleLine(),
this._getDismissSingleLine()),
this._getActionsDiv()));
};
MessageBar.prototype._renderInnerText = function () {
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-text', styles.text, this.props.actions && styles.multiLineWithActions, !this.props.onDismiss && styles.noDismissButton, this.state.expandSingleLine && styles.expandSingleLine), id: this.state.labelId },
React.createElement("span", { className: Utilities_1.css('ms-MessageBar-innerText ' + styles.innerText), 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_types_1.MessageBarType.blocked:
case MessageBar_types_1.MessageBarType.error:
case MessageBar_types_1.MessageBarType.severeWarning:
return 'assertive';
}
return 'polite';
};
MessageBar.prototype._onClick = function (ev) {
this.setState({ expandSingleLine: !this.state.expandSingleLine });
};
MessageBar.defaultProps = {
messageBarType: MessageBar_types_1.MessageBarType.info,
onDismiss: undefined,
isMultiline: true,
};
tslib_1.__decorate([
Utilities_1.autobind
], MessageBar.prototype, "_onClick", null);
return MessageBar;
}(Utilities_1.BaseComponent));
exports.MessageBar = MessageBar;
//# sourceMappingURL=MessageBar.js.map