@fluentui/react-northstar
Version:
A themable React component library.
180 lines (178 loc) • 7.13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.chatMessageStylesComfyRefresh = void 0;
var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _ChatMessage = require("../../../../components/Chat/ChatMessage");
var _utils = require("../../../../utils");
var _accessibilityStyles = require("../../../../utils/accessibility/Styles/accessibilityStyles");
var displayActionMenu = function displayActionMenu(overlayZIndex) {
return {
zIndex: overlayZIndex,
overflow: 'visible',
opacity: 1,
width: 'auto'
};
};
var chatMessageStylesComfyRefresh = {
root: function root(_ref) {
var _ref2;
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
borderRadius: 'inherit',
variables: theme.siteVariables,
// Fixes the bubble focus border rendering on top of the user avatar
zIndex: 'initial'
});
return _ref2 = {
display: 'flex',
flexDirection: 'column',
alignItems: p.mine ? 'flex-end' : 'flex-start',
outline: 'none'
}, _ref2["&:focus-visible ." + _ChatMessage.chatMessageSlotClassNames.timestamp] = {
opacity: 1
}, _ref2["&:focus-visible ." + _ChatMessage.chatMessageSlotClassNames.bubble] = borderFocusStyles[':focus-visible'], _ref2;
},
header: function header(_ref3) {
var p = _ref3.props,
theme = _ref3.theme;
return {
display: 'flex',
width: '100%',
justifyContent: p.mine ? 'flex-end' : 'start',
gap: (0, _utils.pxToRem)(8),
'& > div': {
paddingTop: (0, _utils.pxToRem)(8)
},
color: theme.siteVariables.colorScheme.default.foreground2
};
},
author: function author(_ref4) {
var p = _ref4.props;
return Object.assign({}, (p.mine || p.attached === 'bottom' || p.attached === true) && _accessibilityStyles.screenReaderContainerStyles, {
fontWeight: 400,
marginBottom: (0, _utils.pxToRem)(2),
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
});
},
timestamp: function timestamp(_ref5) {
var v = _ref5.variables;
return Object.assign({
display: 'inline-block',
alignSelf: 'self-start',
whiteSpace: 'nowrap',
opacity: 0
}, v.hasReducedHorizontalSpace && {
fontSize: '1rem',
margin: (0, _utils.pxToRem)(3) + " " + (0, _utils.pxToRem)(2.5) + " 0"
});
},
body: function body(_ref6) {
var p = _ref6.props,
v = _ref6.variables;
return Object.assign({
display: 'flex',
flexDirection: p.mine ? 'row-reverse' : 'row',
position: 'relative',
maxWidth: '100%'
}, !p.mine && v.hasReducedHorizontalSpace && {
marginRight: (0, _utils.pxToRem)(16)
});
},
bubble: function bubble(_ref7) {
var _ref8, _hover, _ref9, _Object$assign, _ref10, _ref11, _ref12;
var p = _ref7.props,
v = _ref7.variables,
theme = _ref7.theme;
return Object.assign({
position: 'relative',
border: v.border,
borderRadius: (0, _utils.pxToRem)(6),
paddingLeft: (0, _utils.pxToRem)(16),
paddingRight: (0, _utils.pxToRem)(16),
paddingTop: (0, _utils.pxToRem)(8),
paddingBottom: p.hasReactions ? (0, _utils.pxToRem)(10) : (0, _utils.pxToRem)(8),
backgroundColor: p.mine ? v.backgroundColorMine : v.backgroundColor,
backgroundAttachment: 'fixed'
}, p.failed && {
backgroundImage: 'none',
backgroundColor: theme.siteVariables.colorScheme.red.background1,
border: "1px solid " + theme.siteVariables.colorScheme.red.border
}, (v.hasMention || v.isImportant) && (_ref8 = {}, _ref8["& ." + _ChatMessage.chatMessageSlotClassNames.bar] = {
backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor,
position: 'absolute',
borderBottomLeftRadius: 'inherit',
borderTopLeftRadius: 'inherit',
height: '100%',
left: '0',
top: '0',
width: (0, _utils.pxToRem)(3)
}, _ref8), (0, _isNil2.default)(v.showActionMenu) && p.hasActionMenu && Object.assign({
':hover': (_hover = {}, _hover["& > ." + _ChatMessage.chatMessageSlotClassNames.actionMenu] = displayActionMenu(v.overlayZIndex), _hover)
}, p.showActionMenu && (_ref9 = {}, _ref9["& ." + _ChatMessage.chatMessageSlotClassNames.actionMenu] = displayActionMenu(v.overlayZIndex), _ref9)), (_Object$assign = {}, _Object$assign["&:hover + ." + _ChatMessage.chatMessageSlotClassNames.bubbleInset + " ." + _ChatMessage.chatMessageSlotClassNames.timestamp] = {
opacity: 1
}, _Object$assign), p.attached === true && !v.isImportant && (_ref10 = {}, _ref10[p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius'] = 0, _ref10[p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius'] = 0, _ref10), p.attached === 'top' && !v.isImportant && (_ref11 = {}, _ref11[p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius'] = 0, _ref11), p.attached === 'bottom' && !v.isImportant && (_ref12 = {}, _ref12[p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius'] = 0, _ref12));
},
bubbleInset: function bubbleInset(_ref13) {
var _Object$assign2;
var p = _ref13.props,
v = _ref13.variables;
return Object.assign({
display: 'flex',
paddingTop: (0, _utils.pxToRem)(10),
paddingBottom: 0,
// use padding instead of margin so that the bubble container's :hover
// styles still apply when mousing over the gap between the container
// and bubble-inset.
paddingLeft: v.hasReducedHorizontalSpace ? (0, _utils.pxToRem)(2.5) : (0, _utils.pxToRem)(5),
paddingRight: v.hasReducedHorizontalSpace ? (0, _utils.pxToRem)(2.5) : (0, _utils.pxToRem)(5)
}, p.mine ? {
right: '100%',
flexDirection: 'row-reverse'
} : {
left: '100%'
}, (_Object$assign2 = {}, _Object$assign2["&:hover ." + _ChatMessage.chatMessageSlotClassNames.timestamp] = {
opacity: 1
}, _Object$assign2));
},
badge: function badge(_ref14) {
var p = _ref14.props,
v = _ref14.variables;
return Object.assign({
position: 'relative',
top: (0, _utils.pxToRem)(-5),
width: (0, _utils.pxToRem)(25),
height: (0, _utils.pxToRem)(25),
backgroundColor: 'none',
color: v.isImportantColor,
zIndex: v.zIndex,
'& > :first-child': {
display: 'inline-flex',
margin: '0 auto'
}
}, p.mine ? {
marginRight: (0, _utils.pxToRem)(-5)
} : {
marginLeft: (0, _utils.pxToRem)(-5)
});
},
reactionGroup: function reactionGroup(_ref15) {
var p = _ref15.props;
return Object.assign({
position: 'relative',
display: 'flex',
float: 'left',
zIndex: 1
}, p.mine && {
float: 'right',
marginRight: (0, _utils.pxToRem)(-4)
});
}
};
exports.chatMessageStylesComfyRefresh = chatMessageStylesComfyRefresh;
//# sourceMappingURL=chatMessageStylesComfyRefresh.js.map