norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
29 lines • 2.13 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useMemo } from 'react';
import { Typography } from '@mui/material';
import * as S from './ChatMessageBalloon.style';
export var ChatMessageBalloon = function (_a) {
var label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, children = _a.children, className = _a.className, bottomChildren = _a.bottomChildren, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onRowMouseEnter = _a.onRowMouseEnter, onRowMouseLeave = _a.onRowMouseLeave, highlight = _a.highlight, rest = __rest(_a, ["label", "description", "date", "direction", "children", "className", "bottomChildren", "onMouseEnter", "onMouseLeave", "onRowMouseEnter", "onRowMouseLeave", "highlight"]);
var ballonClassNames = useMemo(function () {
var classNames = [];
if (!!onMouseEnter)
classNames.push('is-interactive');
if (!!highlight)
classNames.push('is-highlight');
return classNames.join(" ");
}, [highlight, onMouseEnter]);
return (React.createElement(S.ChatMessageBalloonContainerStyle, __assign({ className: className }, rest),
React.createElement(S.ChatMessageBalloonRowStyle, { direction: direction, onMouseLeave: onRowMouseLeave, onMouseEnter: onRowMouseEnter },
React.createElement(S.ChatMessageBalloonStyle, { onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, direction: direction, className: ballonClassNames },
React.createElement(Typography, { variant: "subtitle2", style: {
fontSize: "1rem",
fontWeight: "600",
marginBottom: '5px'
} }, label),
description),
React.createElement(S.ChatMessageChildrenStyle, { direction: direction }, children)),
React.createElement(S.ChatMessageBalloonRowStyle, { direction: direction, sx: { gap: "10px" } },
React.createElement(S.ChatMessageDateStyle, { fontSize: "0.7rem" }, date),
bottomChildren)));
};
//# sourceMappingURL=ChatMessageBalloon.js.map