@fluentui/react/lib-commonjs/components/MessageBar/MessageBar.styles.js

"use strict";
var _a, _b, _c;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var tslib_1 = require("tslib");
var Styling_1 = require("../../Styling");
var MessageBar_types_1 = require("./MessageBar.types");
var GlobalClassNames = {
    root: 'ms-MessageBar',
    error: 'ms-MessageBar--error',
    blocked: 'ms-MessageBar--blocked',
    severeWarning: 'ms-MessageBar--severeWarning',
    success: 'ms-MessageBar--success',
    warning: 'ms-MessageBar--warning',
    multiline: 'ms-MessageBar-multiline',
    singleline: 'ms-MessageBar-singleline',
    dismissalSingleLine: 'ms-MessageBar-dismissalSingleLine',
    expandingSingleLine: 'ms-MessageBar-expandingSingleLine',
    content: 'ms-MessageBar-content',
    iconContainer: 'ms-MessageBar-icon',
    text: 'ms-MessageBar-text',
    innerText: 'ms-MessageBar-innerText',
    dismissSingleLine: 'ms-MessageBar-dismissSingleLine',
    expandSingleLine: 'ms-MessageBar-expandSingleLine',
    dismissal: 'ms-MessageBar-dismissal',
    expand: 'ms-MessageBar-expand',
    actions: 'ms-MessageBar-actions',
    actionsSingleline: 'ms-MessageBar-actionsSingleLine',
};
var backgroundColor = (_a = {},
    _a[MessageBar_types_1.MessageBarType.error] = 'errorBackground',
    _a[MessageBar_types_1.MessageBarType.blocked] = 'errorBackground',
    _a[MessageBar_types_1.MessageBarType.success] = 'successBackground',
    _a[MessageBar_types_1.MessageBarType.warning] = 'warningBackground',
    _a[MessageBar_types_1.MessageBarType.severeWarning] = 'severeWarningBackground',
    _a[MessageBar_types_1.MessageBarType.info] = 'infoBackground',
    _a);
var highContrastBackgroundColor = (_b = {},
    _b[MessageBar_types_1.MessageBarType.error] = 'rgba(255, 0, 0, 0.3)',
    _b[MessageBar_types_1.MessageBarType.blocked] = 'rgba(255, 0, 0, 0.3)',
    _b[MessageBar_types_1.MessageBarType.success] = 'rgba(48, 241, 73, 0.3)',
    _b[MessageBar_types_1.MessageBarType.warning] = 'rgba(255, 254, 57, 0.3)',
    _b[MessageBar_types_1.MessageBarType.severeWarning] = 'rgba(255, 0, 0, 0.3)',
    _b[MessageBar_types_1.MessageBarType.info] = 'Window',
    _b);
var iconColor = (_c = {},
    _c[MessageBar_types_1.MessageBarType.error] = 'errorIcon',
    _c[MessageBar_types_1.MessageBarType.blocked] = 'errorIcon',
    _c[MessageBar_types_1.MessageBarType.success] = 'successIcon',
    _c[MessageBar_types_1.MessageBarType.warning] = 'warningIcon',
    _c[MessageBar_types_1.MessageBarType.severeWarning] = 'severeWarningIcon',
    _c[MessageBar_types_1.MessageBarType.info] = 'infoIcon',
    _c);
var getStyles = function (props) {
    var _a, _b, _c, _d, _e;
    var theme = props.theme, className = props.className, onDismiss = props.onDismiss, truncated = props.truncated, isMultiline = props.isMultiline, expandSingleLine = props.expandSingleLine, _f = props.messageBarType, messageBarType = _f === void 0 ? MessageBar_types_1.MessageBarType.info : _f;
    var semanticColors = theme.semanticColors, fonts = theme.fonts;
    var SmallScreenSelector = Styling_1.getScreenSelector(0, Styling_1.ScreenWidthMaxSmall);
    var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
    var dismissalAndExpandIconStyle = {
        fontSize: Styling_1.IconFontSizes.xSmall,
        height: 10,
        lineHeight: '10px',
        color: semanticColors.messageText,
        selectors: (_a = {},
            _a[Styling_1.HighContrastSelector] = tslib_1.__assign(tslib_1.__assign({}, Styling_1.getHighContrastNoAdjustStyle()), { color: 'WindowText' }),
            _a),
    };
    var dismissalAndExpandStyle = [
        Styling_1.getFocusStyle(theme, {
            inset: 1,
            highContrastStyle: {
                outlineOffset: '-6px',
                outline: '1px solid Highlight',
            },
            borderColor: 'transparent',
        }),
        {
            flexShrink: 0,
            width: 32,
            height: 32,
            padding: '8px 12px',
            selectors: {
                '& .ms-Button-icon': dismissalAndExpandIconStyle,
                ':hover': {
                    backgroundColor: 'transparent',
                },
                ':active': {
                    backgroundColor: 'transparent',
                },
            },
        },
    ];
    return {
        root: [
            classNames.root,
            fonts.medium,
            messageBarType === MessageBar_types_1.MessageBarType.error && classNames.error,
            messageBarType === MessageBar_types_1.MessageBarType.blocked && classNames.blocked,
            messageBarType === MessageBar_types_1.MessageBarType.severeWarning && classNames.severeWarning,
            messageBarType === MessageBar_types_1.MessageBarType.success && classNames.success,
            messageBarType === MessageBar_types_1.MessageBarType.warning && classNames.warning,
            isMultiline ? classNames.multiline : classNames.singleline,
            !isMultiline && onDismiss && classNames.dismissalSingleLine,
            !isMultiline && truncated && classNames.expandingSingleLine,
            {
                background: semanticColors[backgroundColor[messageBarType]],
                color: semanticColors.messageText,
                minHeight: 32,
                width: '100%',
                display: 'flex',
                wordBreak: 'break-word',
                selectors: (_b = {
                        '.ms-Link': {
                            color: semanticColors.messageLink,
                            selectors: {
                                ':hover': {
                                    color: semanticColors.messageLinkHovered,
                                },
                            },
                        }
                    },
                    _b[Styling_1.HighContrastSelector] = tslib_1.__assign(tslib_1.__assign({}, Styling_1.getHighContrastNoAdjustStyle()), { background: highContrastBackgroundColor[messageBarType], border: '1px solid WindowText', color: 'WindowText' }),
                    _b),
            },
            isMultiline && {
                flexDirection: 'column',
            },
            className,
        ],
        content: [
            classNames.content,
            {
                display: 'flex',
                width: '100%',
                lineHeight: 'normal',
            },
        ],
        iconContainer: [
            classNames.iconContainer,
            {
                fontSize: Styling_1.IconFontSizes.medium,
                minWidth: 16,
                minHeight: 16,
                display: 'flex',
                flexShrink: 0,
                margin: '8px 0 8px 12px',
            },
        ],
        icon: {
            color: semanticColors[iconColor[messageBarType]],
            selectors: (_c = {},
                _c[Styling_1.HighContrastSelector] = tslib_1.__assign(tslib_1.__assign({}, Styling_1.getHighContrastNoAdjustStyle()), { color: 'WindowText' }),
                _c),
        },
        text: [
            classNames.text,
            tslib_1.__assign(tslib_1.__assign({ minWidth: 0, display: 'flex', flexGrow: 1, margin: 8 }, fonts.small), { selectors: (_d = {},
                    _d[Styling_1.HighContrastSelector] = tslib_1.__assign({}, Styling_1.getHighContrastNoAdjustStyle()),
                    _d) }),
            !onDismiss && {
                marginRight: 12,
            },
        ],
        innerText: [
            classNames.innerText,
            {
                lineHeight: 16,
                selectors: {
                    '& span a:last-child': {
                        paddingLeft: 4,
                    },
                },
            },
            truncated && {
                overflow: 'visible',
                whiteSpace: 'pre-wrap',
            },
            !isMultiline && {
                // In high contrast this causes the top and bottom of links' focus outline to be clipped
                // (not sure of a good way around that while still maintaining text clipping)
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
            },
            !isMultiline &&
                !truncated && {
                selectors: (_e = {},
                    _e[SmallScreenSelector] = {
                        overflow: 'visible',
                        whiteSpace: 'pre-wrap',
                    },
                    _e),
            },
            expandSingleLine && {
                overflow: 'visible',
                whiteSpace: 'pre-wrap',
            },
        ],
        dismissSingleLine: classNames.dismissSingleLine,
        expandSingleLine: classNames.expandSingleLine,
        dismissal: [classNames.dismissal, dismissalAndExpandStyle],
        expand: [classNames.expand, dismissalAndExpandStyle],
        actions: [
            isMultiline ? classNames.actions : classNames.actionsSingleline,
            {
                display: 'flex',
                flexGrow: 0,
                flexShrink: 0,
                flexBasis: 'auto',
                flexDirection: 'row-reverse',
                alignItems: 'center',
                margin: '0 12px 0 8px',
                selectors: {
                    '& button:nth-child(n+2)': {
                        marginLeft: 8,
                    },
                },
            },
            isMultiline && {
                marginBottom: 8,
            },
            onDismiss &&
                !isMultiline && {
                marginRight: 0,
            },
        ],
    };
};
exports.getStyles = getStyles;
//# sourceMappingURL=MessageBar.styles.js.map