@fluentui/react-northstar
Version:
A themable React component library.
132 lines (131 loc) • 7.25 kB
JavaScript
import _isNil from "lodash/isNil";
import { defaultChatDensity } from '../../../../components/Chat/chatDensity';
import { chatMessageSlotClassNames } from '../../../../components/Chat/ChatMessage';
import { pxToRem } from '../../../../utils';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { chatMessageStylesComfy } from './chatMessageStylesComfy';
import { chatMessageStylesCompact } from './chatMessageStylesCompact';
import { chatMessageStylesComfyRefresh } from './chatMessageStylesComfyRefresh';
var displayActionMenu = function displayActionMenu(overlayZIndex) {
return {
// we need higher zIndex for the action menu in order to be displayed above the focus border of the chat message
zIndex: overlayZIndex,
overflow: 'visible',
// opacity should always be preferred over visibility in order to avoid accessibility bugs in
// JAWS behavior on Windows
opacity: 1,
width: 'auto'
};
};
var chatMessageDensityStyles = {
comfy: chatMessageStylesComfy,
compact: chatMessageStylesCompact
};
var getChatMessageVariantStyles = function getChatMessageVariantStyles(props) {
var density = props.density || defaultChatDensity;
if (props.layout === 'refresh' && density === 'comfy') {
return chatMessageStylesComfyRefresh;
}
return chatMessageDensityStyles[density];
};
export var chatMessageStyles = {
root: function root(componentStyleFunctionParam) {
var _hover, _ref, _getChatMessageVarian, _getChatMessageVarian2;
var p = componentStyleFunctionParam.props,
v = componentStyleFunctionParam.variables,
siteVariables = componentStyleFunctionParam.theme.siteVariables;
if (p.layout === 'refresh' && p.density === 'comfy') {
return chatMessageStylesComfyRefresh.root(componentStyleFunctionParam);
}
return Object.assign({
borderRadius: v.borderRadius,
display: 'inline-block',
outline: 0,
position: 'relative',
wordBreak: 'break-word',
wordWrap: 'break-word'
}, getBorderFocusStyles({
borderRadius: 'inherit',
variables: siteVariables
}), _isNil(v.showActionMenu) && p.hasActionMenu && Object.assign({
':hover': (_hover = {}, _hover["> ." + chatMessageSlotClassNames.actionMenu] = displayActionMenu(v.overlayZIndex), _hover)
}, p.showActionMenu && (_ref = {}, _ref["> ." + chatMessageSlotClassNames.actionMenu] = displayActionMenu(v.overlayZIndex), _ref)), (_getChatMessageVarian = (_getChatMessageVarian2 = getChatMessageVariantStyles(p)).root) == null ? void 0 : _getChatMessageVarian.call(_getChatMessageVarian2, componentStyleFunctionParam));
},
actionMenu: function actionMenu(componentStyleFunctionParam) {
var _getChatMessageVarian3, _getChatMessageVarian4;
var p = componentStyleFunctionParam.props,
v = componentStyleFunctionParam.variables;
var defaultShowActionMenu = p.hasActionMenu && (p.focused || p.showActionMenu);
var showActionMenu = _isNil(v.showActionMenu) ? defaultShowActionMenu : v.showActionMenu;
return Object.assign({
backgroundColor: v.backgroundColor,
border: '1px solid',
borderColor: v.reactionGroupBorderColor,
borderRadius: v.borderRadius,
boxShadow: v.actionMenuBoxShadow,
'[data-popper-escaped]': {
opacity: 0
},
zIndex: -1,
overflow: 'hidden',
opacity: 0,
width: 0
}, showActionMenu && displayActionMenu(v.overlayZIndex), (_getChatMessageVarian3 = (_getChatMessageVarian4 = getChatMessageVariantStyles(p)).actionMenu) == null ? void 0 : _getChatMessageVarian3.call(_getChatMessageVarian4, componentStyleFunctionParam));
},
author: function author(componentStyleFunctionParam) {
var _getChatMessageVarian5, _getChatMessageVarian6;
var p = componentStyleFunctionParam.props;
return (_getChatMessageVarian5 = (_getChatMessageVarian6 = getChatMessageVariantStyles(p)).author) == null ? void 0 : _getChatMessageVarian5.call(_getChatMessageVarian6, componentStyleFunctionParam);
},
compactBody: function compactBody(componentStyleFunctionParam) {
var _getChatMessageVarian7, _getChatMessageVarian8;
var p = componentStyleFunctionParam.props;
return (_getChatMessageVarian7 = (_getChatMessageVarian8 = getChatMessageVariantStyles(p)).compactBody) == null ? void 0 : _getChatMessageVarian7.call(_getChatMessageVarian8, componentStyleFunctionParam);
},
timestamp: function timestamp(componentStyleFunctionParam) {
var _getChatMessageVarian9, _getChatMessageVarian10;
var p = componentStyleFunctionParam.props;
return Object.assign({
display: 'inline-block'
}, (_getChatMessageVarian9 = (_getChatMessageVarian10 = getChatMessageVariantStyles(p)).timestamp) == null ? void 0 : _getChatMessageVarian9.call(_getChatMessageVarian10, componentStyleFunctionParam));
},
badge: function badge(componentStyleFunctionParam) {
var _getChatMessageVarian11, _getChatMessageVarian12;
var p = componentStyleFunctionParam.props,
v = componentStyleFunctionParam.variables;
return Object.assign({
backgroundColor: v.hasMention ? v.hasMentionNubbinColor : v.isImportantColor,
borderRadius: '50%',
boxShadow: v.badgeShadow,
color: v.badgeTextColor,
height: 'auto',
padding: pxToRem(4),
width: 'auto',
zIndex: v.zIndex,
'& > :first-child': {
display: 'inline-flex'
}
}, (_getChatMessageVarian11 = (_getChatMessageVarian12 = getChatMessageVariantStyles(p)).badge) == null ? void 0 : _getChatMessageVarian11.call(_getChatMessageVarian12, componentStyleFunctionParam));
},
body: function body(componentStyleFunctionParam) {
var _getChatMessageVarian13, _getChatMessageVarian14;
var p = componentStyleFunctionParam.props;
return Object.assign({}, (_getChatMessageVarian13 = (_getChatMessageVarian14 = getChatMessageVariantStyles(p)).body) == null ? void 0 : _getChatMessageVarian13.call(_getChatMessageVarian14, componentStyleFunctionParam));
},
bubble: function bubble(componentStyleFunctionParam) {
var _getChatMessageVarian15, _getChatMessageVarian16;
var p = componentStyleFunctionParam.props;
return Object.assign({}, (_getChatMessageVarian15 = (_getChatMessageVarian16 = getChatMessageVariantStyles(p)).bubble) == null ? void 0 : _getChatMessageVarian15.call(_getChatMessageVarian16, componentStyleFunctionParam));
},
bubbleInset: function bubbleInset(componentStyleFunctionParam) {
var _getChatMessageVarian17, _getChatMessageVarian18;
var p = componentStyleFunctionParam.props;
return Object.assign({}, (_getChatMessageVarian17 = (_getChatMessageVarian18 = getChatMessageVariantStyles(p)).bubbleInset) == null ? void 0 : _getChatMessageVarian17.call(_getChatMessageVarian18, componentStyleFunctionParam));
},
reactionGroup: function reactionGroup(componentStyleFunctionParam) {
var _getChatMessageVarian19, _getChatMessageVarian20;
var p = componentStyleFunctionParam.props;
return (_getChatMessageVarian19 = (_getChatMessageVarian20 = getChatMessageVariantStyles(p)).reactionGroup) == null ? void 0 : _getChatMessageVarian19.call(_getChatMessageVarian20, componentStyleFunctionParam);
}
};
//# sourceMappingURL=chatMessageStyles.js.map