@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
54 lines (53 loc) • 2.51 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from '@mui/material';
import { Composition } from 'atomic-layout';
import React, { useMemo } from 'react';
import { exampleTemplates } from '../components/EXAMPLES/exampleData';
import { MessageTemplatePreview } from '../components/MessageTemplatePreview';
import { LibThemeProvider } from '../ui/theme';
const exampleMessages = [
{
id: 'wingardium_leviosa',
templateVariables: [
{
key: 'body_1',
value: 'Leviooosa',
},
{
key: 'header_1',
value: 'Hogwarts Via Gufo',
},
{
key: 'footer_1',
value: 'Esercito di Silente',
},
],
},
{
id: 'valar_morghulis',
templateVariables: [
{
key: 'body_1',
value: 'Valar Morghulis',
},
{
key: 'header_1',
value: '/examples/valar-morghulis.jpg',
},
],
},
];
export function MessageTemplatePreviewStory() {
const [templateName, setTemplateName] = React.useState('wingardium_leviosa');
const handleTemplateChange = (newTemplateName) => {
setTemplateName(newTemplateName);
};
const selectedMessage = useMemo(() => exampleMessages.find((m) => m.id === templateName), [templateName]);
const imgUrl = useMemo(() => {
if (exampleTemplates[templateName].headerText === 'IMAGE') {
return selectedMessage?.templateVariables.find((v) => v.key === 'header_1');
}
return undefined;
}, [selectedMessage, templateName]);
return (_jsx(LibThemeProvider, { children: _jsxs(Composition, { gap: '1rem', children: [_jsxs(Composition, { templateCols: "auto auto", gap: '1rem', children: [_jsx(Button, { onClick: () => handleTemplateChange('wingardium_leviosa'), variant: "contained", children: "Template completo" }), _jsx(Button, { onClick: () => handleTemplateChange('valar_morghulis'), variant: "contained", children: "Header con immagine" })] }), selectedMessage && (_jsx(MessageTemplatePreview, { templateName: templateName, isReceived: false, headerText: exampleTemplates[templateName].headerText, footerText: exampleTemplates[templateName].footerText, imgUrl: imgUrl?.value, bodyText: exampleTemplates[templateName].text, templateVariables: selectedMessage.templateVariables }))] }) }));
}