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.
79 lines • 5.26 kB
JavaScript
import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import React from 'react';
import { olosPalette } from '../helpers';
var Item = styled(Box)(function (_a) {
var orient = _a.orient;
return ({
display: 'flex',
position: 'relative',
width: '100%',
justifyContent: orient === 'replay' ? 'flex-end' : 'flex-start',
marginBottom: '10px',
alignItems: 'center',
});
});
var ContainerStyled = styled(Box)(function (_a) {
var _b, _c, _d;
var theme = _a.theme;
return ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
minWidth: '640px',
backgroundColor: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.grey) === null || _c === void 0 ? void 0 : _c[100]) || '#F0F0F0',
padding: ((_d = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _d === void 0 ? void 0 : _d.call(theme, 1.25)) || '10px',
});
});
var BoxStyled = styled(Box)(function (_a) {
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
var theme = _a.theme, orient = _a.orient;
return ({
width: '70%',
backgroundColor: orient === 'replay'
? ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) || olosPalette.primary.main
: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.paper) || '#FFF',
color: orient === 'replay'
? ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.contrastText) || '#FFF'
: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.text) === null || _j === void 0 ? void 0 : _j.primary) || '#4D4F5C',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomLeftRadius: orient === 'me' ? 2 : 30,
borderBottomRightRadius: orient === 'me' ? 30 : 2,
marginLeft: orient === 'replay' ? ((_k = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _k === void 0 ? void 0 : _k.call(theme, 1.25)) || '10px' : 0,
marginRight: orient === 'me' ? ((_l = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _l === void 0 ? void 0 : _l.call(theme, 1.25)) || '10px' : 0,
padding: ((_m = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _m === void 0 ? void 0 : _m.call(theme, 2.5)) || 20,
});
});
export var ChatMessage = function (_a) {
var data = _a.data;
return (React.createElement(ContainerStyled, null, data.map(function (item, key) { return (React.createElement(Item, { key: key, orient: item.send },
item.emotion && item.send === 'replay' && React.createElement(React.Fragment, null, item.emotion),
React.createElement(BoxStyled, { orient: item.send },
React.createElement(Typography, { variant: "subtitle2", sx: {
marginBottom: '5px',
fontWeight: 600,
fontSize: '16px',
lineHeight: '20px',
fontFamily: function (theme) { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) || 'Source Sans Pro'; },
} }, item.name),
React.createElement(Typography, { variant: "body1", sx: {
fontSize: '16px',
lineHeight: '20px',
fontFamily: function (theme) { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) || 'Source Sans Pro'; },
} }, item.message),
React.createElement(Typography, { variant: "caption", sx: {
position: 'absolute',
bottom: '-18px',
left: item.send === 'me' ? 0 : 'auto',
right: item.send === 'me' ? 'auto' : 0,
fontSize: '11px',
lineHeight: '13px',
fontFamily: function (theme) { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) || 'Source Sans Pro'; },
opacity: 0.5,
color: function (theme) { var _a, _b; return ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.secondary) || '#4D4F5C'; },
} }, item.time)),
item.emotion && item.send === 'me' && React.createElement(React.Fragment, null, item.emotion),
item.emotionReplay && item.send === 'me' && React.createElement(React.Fragment, null, item.emotionReplay))); })));
};
//# sourceMappingURL=ChatMessage.js.map