@fluentui/react
Version:
Reusable React components for building web experiences.
272 lines • 10.9 kB
JavaScript
var _a, _b, _c, _d;
import { __assign } from "tslib";
import { HighContrastSelector, HighContrastSelectorWhite, ScreenWidthMaxSmall, getScreenSelector, getGlobalClassNames, getFocusStyle, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';
import { MessageBarType } from './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[MessageBarType.error] = 'errorBackground',
_a[MessageBarType.blocked] = 'errorBackground',
_a[MessageBarType.success] = 'successBackground',
_a[MessageBarType.warning] = 'warningBackground',
_a[MessageBarType.severeWarning] = 'severeWarningBackground',
_a[MessageBarType.info] = 'infoBackground',
_a);
var iconColor = (_b = {},
_b[MessageBarType.error] = 'errorIcon',
_b[MessageBarType.blocked] = 'errorIcon',
_b[MessageBarType.success] = 'successIcon',
_b[MessageBarType.warning] = 'warningIcon',
_b[MessageBarType.severeWarning] = 'severeWarningIcon',
_b[MessageBarType.info] = 'infoIcon',
_b);
var highContrastBorderColor = (_c = {},
_c[MessageBarType.error] = '#ff0000',
_c[MessageBarType.blocked] = '#ff0000',
_c[MessageBarType.success] = '#bad80a',
_c[MessageBarType.warning] = '#fff100',
_c[MessageBarType.severeWarning] = '#ff0000',
_c[MessageBarType.info] = 'WindowText',
_c);
var highContrastWhiteBorderColor = (_d = {},
_d[MessageBarType.error] = '#e81123',
_d[MessageBarType.blocked] = '#e81123',
_d[MessageBarType.success] = '#107c10',
_d[MessageBarType.warning] = '#966400',
_d[MessageBarType.severeWarning] = '#d83b01',
_d[MessageBarType.info] = 'WindowText',
_d);
export var getStyles = function (props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
var theme = props.theme, className = props.className, onDismiss = props.onDismiss, truncated = props.truncated, isMultiline = props.isMultiline, expandSingleLine = props.expandSingleLine, _m = props.messageBarType, messageBarType = _m === void 0 ? MessageBarType.info : _m;
var semanticColors = theme.semanticColors, fonts = theme.fonts;
var SmallScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);
var classNames = getGlobalClassNames(GlobalClassNames, theme);
var dismissalAndExpandIconStyle = {
fontSize: IconFontSizes.xSmall,
height: 10,
lineHeight: '10px',
color: semanticColors.messageText,
selectors: (_a = {},
_a[HighContrastSelector] = __assign(__assign({}, getHighContrastNoAdjustStyle()), { color: 'WindowText' }),
_a),
};
var dismissalAndExpandStyle = [
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 === MessageBarType.error && classNames.error,
messageBarType === MessageBarType.blocked && classNames.blocked,
messageBarType === MessageBarType.severeWarning && classNames.severeWarning,
messageBarType === MessageBarType.success && classNames.success,
messageBarType === MessageBarType.warning && classNames.warning,
isMultiline ? classNames.multiline : classNames.singleline,
!isMultiline && onDismiss && classNames.dismissalSingleLine,
!isMultiline && truncated && classNames.expandingSingleLine,
{
background: semanticColors[backgroundColor[messageBarType]],
boxSizing: 'border-box',
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[HighContrastSelector] = __assign(__assign({}, getHighContrastNoAdjustStyle()), { background: 'transparent', border: "1px solid ".concat(highContrastBorderColor[messageBarType]), color: 'WindowText' }),
_b[HighContrastSelectorWhite] = {
border: "1px solid ".concat(highContrastWhiteBorderColor[messageBarType]),
},
_b),
},
isMultiline && {
flexDirection: 'column',
},
className,
],
content: [
classNames.content,
(_c = {
display: 'flex',
width: '100%',
lineHeight: 'normal'
},
_c[SmallScreenSelector] = {
display: 'grid',
gridTemplateColumns: 'auto 1fr auto',
gridTemplateRows: '1fr auto',
gridTemplateAreas: "\n \"icon text close\"\n \"action action action\"\n ",
},
_c),
],
iconContainer: [
classNames.iconContainer,
(_d = {
fontSize: IconFontSizes.medium,
minWidth: 16,
minHeight: 16,
display: 'flex',
flexShrink: 0,
margin: '8px 0 8px 12px'
},
_d[SmallScreenSelector] = {
gridArea: 'icon',
},
_d),
],
icon: {
color: semanticColors[iconColor[messageBarType]],
selectors: (_e = {},
_e[HighContrastSelector] = __assign(__assign({}, getHighContrastNoAdjustStyle()), { color: 'WindowText' }),
_e),
},
text: [
classNames.text,
__assign(__assign({ minWidth: 0, display: 'flex', flexGrow: 1, margin: 8 }, fonts.small), (_f = {}, _f[SmallScreenSelector] = {
gridArea: 'text',
}, _f.selectors = (_g = {},
_g[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),
_g), _f)),
!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: (_h = {},
_h[SmallScreenSelector] = {
overflow: 'visible',
whiteSpace: 'pre-wrap',
},
_h),
},
expandSingleLine && {
overflow: 'visible',
whiteSpace: 'pre-wrap',
},
],
dismissSingleLine: [
classNames.dismissSingleLine,
(_j = {},
_j[SmallScreenSelector] = {
gridArea: 'close',
},
_j),
],
expandSingleLine: classNames.expandSingleLine,
dismissal: [classNames.dismissal, dismissalAndExpandStyle],
expand: [classNames.expand, dismissalAndExpandStyle],
actions: [
isMultiline ? classNames.actions : classNames.actionsSingleline,
(_k = {
display: 'flex',
flexGrow: 0,
flexShrink: 0,
flexBasis: 'auto',
flexDirection: 'row-reverse',
alignItems: 'center',
margin: '0 12px 0 8px',
// reset forced colors to browser control for inner actions
forcedColorAdjust: 'auto',
MsHighContrastAdjust: 'auto'
},
_k[SmallScreenSelector] = {
gridArea: 'action',
marginRight: 8,
marginBottom: 8,
},
_k.selectors = {
'& button:nth-child(n+2)': (_l = {
marginLeft: 8
},
_l[SmallScreenSelector] = {
marginBottom: 0,
},
_l),
},
_k),
isMultiline && {
marginBottom: 8,
},
onDismiss &&
!isMultiline && {
marginRight: 0,
},
],
};
};
//# sourceMappingURL=MessageBar.styles.js.map