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

Reusable React components for building experiences for Office 365.

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 __());
};
define(["require", "exports", "react", "../../Button", "../../utilities/css", "./MessageBar.Props", "../../utilities/object", "./MessageBar.scss"], function (require, exports, React, Button_1, css_1, MessageBar_Props_1, object_1) {
    "use strict";
    var MessageBar = (function (_super) {
        __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: object_1.getId('MessageBar')
            };
            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 this.props.isMultiline ?
                    React.createElement("div", { className: 'ms-MessageBar-actions' },
                        " ",
                        this.props.actions,
                        " ") :
                    React.createElement("div", { className: 'ms-MessageBar-actionsOneline' },
                        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--blocked': (this.props.messageBarType === MessageBar_Props_1.MessageBarType.blocked) || (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_1.Button, { disabled: false, className: 'ms-MessageBar-dismissal', buttonType: Button_1.ButtonType.icon, onClick: this.props.onDismiss, icon: 'Cancel', ariaLabel: this.props.dismissButtonAriaLabel });
            }
            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 || this.props.actions ? '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())));
        };
        return MessageBar;
    }(React.Component));
    MessageBar.defaultProps = {
        messageBarType: MessageBar_Props_1.MessageBarType.info,
        onDismiss: null,
        isMultiline: true,
    };
    exports.MessageBar = MessageBar;
});

//# sourceMappingURL=MessageBar.js.map