office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
294 lines • 11.1 kB
JavaScript
import * as tslib_1 from "tslib";
import { HighContrastSelector, ScreenWidthMaxSmall, getScreenSelector, getFocusStyle, getGlobalClassNames } 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'
};
// Returns the background color of the MessageBar root element based on the type of MessageBar.
var getRootBackground = function (messageBarType, palette, semanticColors) {
switch (messageBarType) {
case MessageBarType.error:
case MessageBarType.blocked:
return semanticColors.errorBackground;
case MessageBarType.severeWarning:
return semanticColors.blockingBackground;
case MessageBarType.success:
return semanticColors.successBackground;
case MessageBarType.warning:
return semanticColors.warningBackground;
}
return palette.neutralLighter;
};
// Returns the icon color based on the type of MessageBar.
var getIconColor = function (messageBarType, palette, semanticColors) {
switch (messageBarType) {
case MessageBarType.error:
case MessageBarType.blocked:
case MessageBarType.severeWarning:
return semanticColors.errorText;
case MessageBarType.success:
return palette.green;
case MessageBarType.warning:
return semanticColors.warningText;
}
return palette.neutralSecondary;
};
export var getStyles = function (props) {
var theme = props.theme, className = props.className, messageBarType = props.messageBarType, onDismiss = props.onDismiss, actions = props.actions, truncated = props.truncated, isMultiline = props.isMultiline, expandSingleLine = props.expandSingleLine;
var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;
var SmallScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);
var classNames = getGlobalClassNames(GlobalClassNames, theme);
var dismissalAndExpandIconStyle = {
fontSize: 12,
height: 12,
lineHeight: '12px',
color: palette.neutralPrimary
};
var dismissalAndExpandSingleLineStyle = {
display: 'flex',
selectors: {
'& .ms-Button-icon': dismissalAndExpandIconStyle
}
};
var dismissalAndExpandStyle = {
flexShrink: 0,
margin: 8,
marginLeft: 0,
selectors: (_a = {
'& .ms-Button-icon': dismissalAndExpandIconStyle
},
_a[SmallScreenSelector] = {
margin: '0px 0px 0px 8px'
},
_a[HighContrastSelector] = {
MsHighContrastAdjust: 'none'
},
_a)
};
var focusStyle = getFocusStyle(theme, 0, 'relative', undefined, palette.black);
return {
root: [
classNames.root,
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: getRootBackground(messageBarType, palette, semanticColors),
color: palette.neutralPrimary,
minHeight: 32,
width: '100%',
boxSizing: 'border-box',
display: 'flex',
position: 'relative',
wordBreak: 'break-word',
selectors: {
'& .ms-Link': tslib_1.__assign({ color: palette.themeDark }, fonts.small)
}
},
isMultiline && {
flexDirection: 'column'
},
!isMultiline && {
selectors: (_b = {},
_b[SmallScreenSelector] = {
flexDirection: 'column'
},
_b)
},
truncated && {
flexDirection: 'column',
selectors: {
'& .ms-Button-icon': {
fontSize: 12,
height: 12,
lineHeight: 12,
color: palette.neutralPrimary
}
}
},
className
],
content: [
classNames.content,
{
display: 'flex',
lineHeight: 'normal',
width: '100%',
boxSizing: 'border-box',
selectors: {
'&:before': {
pointerEvents: 'none',
position: 'absolute',
right: 0,
bottom: 0,
left: 0,
top: 0,
margin: 0,
selectors: (_c = {},
_c[HighContrastSelector] = {
border: '1px solid WindowText',
content: ' '
},
_c)
}
}
},
!isMultiline && {
selectors: (_d = {},
_d[SmallScreenSelector] = {
flexDirection: 'row'
},
_d)
},
(truncated || isMultiline) && {
flexDirection: 'row'
}
],
iconContainer: [
classNames.iconContainer,
{
fontSize: 16,
minWidth: 16,
minHeight: 16,
display: 'flex',
color: palette.neutralSecondary,
flexShrink: 0,
margin: 16,
marginRight: 0,
selectors: (_e = {},
_e[SmallScreenSelector] = {
margin: '8px 0px 8px 8px'
},
_e)
}
],
icon: {
color: getIconColor(messageBarType, palette, semanticColors)
},
text: [
classNames.text,
tslib_1.__assign({ minWidth: 0, display: 'flex', flexGrow: 1, margin: '16px 8px' }, fonts.small, { selectors: (_f = {},
_f[SmallScreenSelector] = {
margin: '8px 0px 8px 8px'
},
_f) }),
!onDismiss && {
marginRight: 16,
selectors: (_g = {},
_g[SmallScreenSelector] = {
marginRight: 8
},
_g)
},
isMultiline &&
actions && {
marginBottom: 8,
selectors: (_h = {},
_h[SmallScreenSelector] = {
marginBottom: 0
},
_h)
},
!isMultiline &&
actions && {
selectors: (_j = {},
_j[SmallScreenSelector] = {
marginBottom: 0
},
_j)
}
],
innerText: [
classNames.innerText,
{
lineHeight: 16,
selectors: {
'& span': {
selectors: {
'& a': {
paddingLeft: 4
}
}
}
}
},
truncated && {
overflow: 'visible',
whiteSpace: 'pre-wrap'
},
!isMultiline && {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
},
!isMultiline &&
!truncated && {
selectors: (_k = {},
_k[SmallScreenSelector] = {
overflow: 'visible',
whiteSpace: 'pre-wrap'
},
_k)
},
expandSingleLine && {
overflow: 'visible',
whiteSpace: 'pre-wrap'
}
],
dismissSingleLine: [classNames.dismissSingleLine, dismissalAndExpandSingleLineStyle],
expandSingleLine: [classNames.expandSingleLine, dismissalAndExpandSingleLineStyle],
dismissal: [classNames.dismissal, dismissalAndExpandStyle, focusStyle],
expand: [classNames.expand, dismissalAndExpandStyle, focusStyle],
actions: [
isMultiline ? classNames.actions : classNames.actionsSingleline,
{
display: 'flex',
flexGrow: 0,
flexShrink: 0,
flexBasis: 'auto',
flexDirection: 'row-reverse',
alignItems: 'center',
margin: '8px 8px 8px 0',
selectors: {
'& button:nth-child(n+2)': {
marginLeft: 8
}
}
},
isMultiline && {
margin: '0px 12px 12px 0',
selectors: {
'& button:nth-child(n+2)': {
marginLeft: 12
}
}
}
]
};
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
};
//# sourceMappingURL=MessageBar.styles.js.map