@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
29 lines (28 loc) • 3.54 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Questo componente copre la maggior parte delle possibilità di messaggio:
* template, media, testo semplice, ecc.
*/
import { WMessageShell } from './dummy/WMessageShell';
import { MessageTemplatePreview } from './MessageTemplatePreview';
import { useMemo } from 'react';
import { Box, Composition } from 'atomic-layout';
import { MessageTextRender } from './MessageTextRender';
import { ImageElement } from './dummy/ImageElement';
import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
import { StyledLink } from '../ui/StyledLink';
import ReactAudioPlayer from 'react-audio-player';
import { Button, Typography } from '@mui/material';
export function SmartWMessage({ isReceived, templateName, searchString, onSearchRefs, focusedRefIndex, focusedKey, templateVariables, getTemplateData, messageText, imgUrl, caption, videoUrl, audioUrl, documentUrl, fileName, buttonPayload, sentDate, readDate, deliveredDate, reaction, }) {
const { bodyText, headerText, footerText, templateImgUrl } = useMemo(() => {
if (!templateName || !getTemplateData)
return {
bodyText: '',
headerText: '',
footerText: '',
templateImgUrl: undefined,
};
return getTemplateData(templateName);
}, [templateName, getTemplateData]);
return (_jsxs(WMessageShell, { isReceived: isReceived, sentDate: sentDate ?? null, readDate: readDate ?? null, deliveredDate: deliveredDate ?? null, reaction: reaction ?? null, children: [templateName && bodyText && (_jsx(MessageTemplatePreview, { templateName: templateName, templateVariables: templateVariables ?? undefined, isReceived: isReceived, onSearchRefs: onSearchRefs, focusedRefIndex: focusedRefIndex, searchString: searchString, focusedKey: focusedKey, headerText: headerText, footerText: footerText, imgUrl: templateImgUrl, bodyText: bodyText })), _jsxs(Box, { padding: '0.5rem', children: [messageText && (_jsx(Typography, { children: _jsx(MessageTextRender, { text: messageText ?? '', searchString: searchString, onSearchRefs: onSearchRefs, focusedRefIndex: focusedRefIndex, focusedKey: focusedKey }) })), imgUrl && (_jsx(ImageElement, { imgUrl: imgUrl, imgCaption: caption ?? null, searchString: searchString, focusedRefIndex: focusedRefIndex, onSearchRefs: onSearchRefs })), videoUrl && (_jsxs(Composition, { justifyContent: "center", alignItems: "center", children: [_jsx(Typography, { textAlign: 'center', children: _jsx(OndemandVideoIcon, { fontSize: "large" }) }), _jsx(StyledLink, { href: videoUrl, children: 'Link video' }), _jsx(Typography, { children: _jsx(MessageTextRender, { text: caption ?? '', searchString: searchString, onSearchRefs: onSearchRefs, focusedRefIndex: focusedRefIndex, focusedKey: focusedKey }) })] })), audioUrl && (_jsxs(Composition, { gap: '0.5rem', justifyContent: "center", children: [_jsx(ReactAudioPlayer, { src: audioUrl, controls: true }), _jsx(StyledLink, { href: audioUrl, children: "Vai al link" })] })), documentUrl && (_jsxs(Box, { paddingTop: '0.5rem', children: [_jsx(Typography, { variant: "caption", children: "E' stato inviato un documento scaricabile al link:" }), _jsx(StyledLink, { href: documentUrl, children: fileName ?? 'File' })] })), buttonPayload && (_jsx(Composition, { justifyContent: "center", alignItems: "center", children: _jsx(Button, { variant: "contained", color: "success", disabled: true, children: buttonPayload ?? 'Bottone sconosciuto' }) }))] })] }));
}