office-ui-fabric-react/lib/components/MessageBar/MessageBar.js

Reusable React components for building experiences for Office 365.

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
require('./MessageBar.scss');
var css_1 = require('../../utilities/css');
var MessageBar_Props_1 = require('./MessageBar.Props');
var object_1 = require('../../utilities/object');
var MessageBar = (function (_super) {
    __extends(MessageBar, _super);
    function MessageBar(props) {
        _super.call(this, props);
        this.ICON_MAP = (_a = {},
            _a[MessageBar_Props_1.MessageBarType.info] = 'infoCircle',
            _a[MessageBar_Props_1.MessageBarType.warning] = 'infoCircle',
            _a[MessageBar_Props_1.MessageBarType.error] = 'xCircle',
            _a[MessageBar_Props_1.MessageBarType.remove] = 'circle',
            _a[MessageBar_Props_1.MessageBarType.severeWarning] = 'alert',
            _a[MessageBar_Props_1.MessageBarType.success] = 'checkboxCheck ms-Icon--circle',
            _a
        );
        this.state = {
            labelId: object_1.getId('MessageBar')
        };
        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 this.props.isMultiline ?
                React.createElement("div", {className: 'ms-MessageBar-actions'}, " ", this.props.actions, " ") :
                React.createElement("div", {className: 'ms-MessageBar-actions-oneline'}, " ", [this._getDismissDiv(), this.props.actions], " ");
        }
        return null;
    };
    MessageBar.prototype._getClassName = function () {
        return css_1.css(this.props.className, 'ms-MessageBar', {
            'ms-MessageBar': this.props.messageBarType === MessageBar_Props_1.MessageBarType.info,
            'ms-MessageBar--error': this.props.messageBarType === MessageBar_Props_1.MessageBarType.error,
            'ms-MessageBar--remove': this.props.messageBarType === MessageBar_Props_1.MessageBarType.remove,
            'ms-MessageBar--severeWarning': this.props.messageBarType === MessageBar_Props_1.MessageBarType.severeWarning,
            'ms-MessageBar--success': this.props.messageBarType === MessageBar_Props_1.MessageBarType.success,
            'ms-MessageBar--warning': this.props.messageBarType === MessageBar_Props_1.MessageBarType.warning
        });
    };
    MessageBar.prototype._getDismissDiv = function () {
        if (this.props.onDismiss != null) {
            return React.createElement("button", {"aria-label": this.props.dismissButtonAriaLabel, className: 'ms-MessageBar-dismissal ms-Button--icon', onClick: this.props.onDismiss}, React.createElement("i", {className: 'ms-Icon ms-Icon--x'}));
        }
        return null;
    };
    MessageBar.prototype._getIconSpan = function () {
        return React.createElement("div", {className: 'ms-MessageBar-icon'}, React.createElement("i", {className: "ms-Icon ms-Icon--" + this.ICON_MAP[this.props.messageBarType]}));
    };
    MessageBar.prototype._getInnerTextClassName = function () {
        return this.props.onDismiss ? 'ms-MessageBar-innerTextPadding' : 'ms-MessageBar-innerText';
    };
    MessageBar.prototype._renderMultiLine = function () {
        return (React.createElement("div", {className: this._getClassName() + ' ms-MessageBar-multiline', role: 'status', "aria-live": 'polite', "aria-controls": 'ms-MessageBar-text'}, React.createElement("div", {className: 'ms-MessageBar-content'}, this._getIconSpan(), React.createElement("div", {className: 'ms-MessageBar-actionables'}, this._getDismissDiv(), React.createElement("div", {className: 'ms-MessageBar-text', id: this.state.labelId}, React.createElement("span", {className: this._getInnerTextClassName()}, this.props.children)), this._getActionsDiv()))));
    };
    MessageBar.prototype._renderSingleLine = function () {
        return (React.createElement("div", {className: this._getClassName() + ' ms-MessageBar-singleline', role: 'status', "aria-live": 'polite', "aria-controls": 'ms-MessageBar-text'}, React.createElement("div", {className: 'ms-MessageBar-content'}, this._getIconSpan(), React.createElement("div", {className: 'ms-MessageBar-actionables'}, React.createElement("div", {className: 'ms-MessageBar-text', id: this.state.labelId}, React.createElement("span", {className: this._getInnerTextClassName()}, this.props.children)), this._getActionsDiv()))));
    };
    MessageBar.defaultProps = {
        messageBarType: MessageBar_Props_1.MessageBarType.info,
        onDismiss: null,
        isMultiline: true,
    };
    return MessageBar;
}(React.Component));
exports.MessageBar = MessageBar;

//# sourceMappingURL=MessageBar.js.map