@acrsolutions/chat-components/dist/components/TemplateEditor.js

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

import { jsx as _jsx } from "react/jsx-runtime";
import { TextField } from '@mui/material';
import { useMemo } from 'react';
import { StyledTemplateSpan } from '../ui/StyledTemplateSpan';
import { TemplateEditorWrapper } from '../ui/TemplateEditorWrapper';
/**
 * Prende un testo di tipo Ciao {{1}}! 😊 Tra {{2}} inizierà ecc
 * e lo trasforma in un componente che permette di modificare i valori {{1}}, {{2}} ecc
 * mappando i placeholders in TextField.
 */
export const TemplateEditor = ({ text, prefix, onChange, values, }) => {
    const textSegments = useMemo(() => text.split(/(\{\{\d+\}\})/g), [text]);
    const elements = textSegments.map((text, i) => {
        if (text.match(/\{\{\d+\}\}/g) != null) {
            const placeholderId = text.match(/\d+/g)?.[0];
            // ho trovato as es di {{1}} -> 1
            return (_jsx(TextField, { name: prefix + '_' + placeholderId, color: "success", 
                //cerco tra i valori quello con chiave prefix_placeholderId
                value: values[prefix + '_' + placeholderId] ?? '', onChange: (e) => onChange(prefix + '_' + placeholderId, e.target.value), size: "small", hiddenLabel: true, variant: "filled", required: true, multiline: true, placeholder: placeholderId }, prefix + placeholderId + i));
        }
        else
            return _jsx(StyledTemplateSpan, { children: text }, prefix + i);
    });
    return _jsx(TemplateEditorWrapper, { children: elements });
};