@acrsolutions/chat-components/dist/stories/WMessage.stories.js

Un set di componenti per la creazione di un'applicazione di messaggistica

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useMemo } from 'react';
import { SmartWMessage } from '../components/SmartWMessage';
import { LibThemeProvider } from '../ui/theme';
import { allPossibleMessageTypesExamples, baseMessageProps, wMessagesExamplesOptions, } from '../components/EXAMPLES/exampleData';
import { Box, Composition } from 'atomic-layout';
import { Button } from '@mui/material';
export function WMessage() {
    const [messageId, setMessageId] = React.useState(wMessagesExamplesOptions[0]);
    const message = useMemo(() => {
        const partialMessage = allPossibleMessageTypesExamples.find((m) => m.id === messageId);
        //baseMessageprops completa il messaggio parziale valorizzando come null i campi non valorizzati
        //es. se il messaggio non ha un videoUrl, il videoUrl viene valorizzato a null
        return { ...baseMessageProps, ...partialMessage };
    }, [messageId]);
    return (_jsx(LibThemeProvider, { children: _jsxs(Composition, { templateCols: "1fr auto", padding: '1rem', height: '90%', children: [_jsx("div", { style: { backgroundColor: 'lightgrey', height: '100%' }, children: _jsx(Box, { padding: '1rem', children: message && (_jsx(SmartWMessage, { isReceived: true, messageText: message.text, sentDate: message.sentDate, imgUrl: message.imgUrl, caption: message.caption, videoUrl: message.videoUrl, documentUrl: message.documentUrl, fileName: message.fileName, audioUrl: message.audioUrl, buttonPayload: message.buttonPayload, templateName: message.templateName, templateVariables: message.templateVariables, getTemplateData: message.getTemplateData, searchString: message.searchString ?? '', onSearchRefs: message.onSearchRefs, focusedRefIndex: message.focusedRefIndex ?? undefined, focusedKey: message.focusedKey, readDate: message.readDate, deliveredDate: message.deliveredDate, reaction: message.reaction })) }) }), _jsx(Composition, { width: '300px', justifyContent: "center", alignItems: "center", children: wMessagesExamplesOptions.map((messageOption) => (_jsx(Button, { variant: "outlined", onClick: () => setMessageId(messageOption), children: messageOption }, messageOption))) })] }) }));
}