@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
31 lines (30 loc) • 2.58 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tooltip, Typography } from '@mui/material';
import { Composition } from 'atomic-layout';
import React from 'react';
import { buildPreviewDate, getUserInitials } from '../functions';
import { StyledConvoIcon } from '../ui/convoPreview/StyledConvoIcon';
import { StyledConvoPreviewText } from '../ui/convoPreview/StyledConvoPreviewText';
import { StyledNotificationsIcon } from '../ui/convoPreview/StyledNotificationsIcon';
import { StyledPhoneNumber } from '../ui/convoPreview/StyledPhoneNumber';
import { StyledUserDataWrapper } from '../ui/convoPreview/StyledUserDataWrapper';
import { toPrintableFullDate } from '../utils';
/**
*
* @param isActiveConvo Se la conversazione è attiva
* @param notificationsNumber Numero di notifiche
* @param contactName Nome del contatto. In assenza di nome verrà visualizzato il numero di telefono.
* @param contactNumber Numero del contatto
* @param sentDate Data di invio del messaggio.
* E' considerata nullable per motivi di sicurezza, ma non dovrebbe mai essere null.
* @param handlePreviewClick Funzione da eseguire al click.
* Riceve l'evento del click.
* @param messageText Testo del messaggio.
* In assenza di testo verrà renderizzata la parola "Messaggio".
* @returns
*/
export function ConvoPreview({ isActiveConvo, notificationsNumber, contactName, contactNumber, sentDate, handlePreviewClick, messageText, }) {
return (_jsxs(StyledUserDataWrapper, { "$clicked": isActiveConvo, onClick: handlePreviewClick, children: [notificationsNumber > 0 && (_jsx(StyledNotificationsIcon, { children: _jsx(Typography, { variant: "caption", children: notificationsNumber }) })), _jsxs(Composition, { gap: "1rem", alignItems: "start", templateCols: "auto 1fr", children: [_jsx(Composition, { marginTop: 5, children: _jsx(StyledConvoIcon, { children: _jsx(Typography, { fontWeight: 'bold', children: contactName ? getUserInitials(contactName) : '?' }) }) }), _jsxs("div", { children: [_jsx(Typography, { variant: 'h6', children: _jsxs(Composition, { templateCols: "1fr auto", alignItems: "center", children: [contactNumber, _jsx(Tooltip, { title: toPrintableFullDate(sentDate), children: _jsx(StyledPhoneNumber, { "$clicked": isActiveConvo, children: sentDate
? buildPreviewDate(sentDate)
: 'Data non disponibile' }) })] }) }), _jsx(StyledConvoPreviewText, { readOnly: true, "$isActive": isActiveConvo, value: messageText ?? 'Messaggio' })] })] })] }));
}