@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
34 lines (33 loc) • 3.04 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card, CardContent, TextField, Typography } from '@mui/material';
import { Box, Composition } from 'atomic-layout';
import { includes } from 'lodash';
import { useCallback, useRef, useState } from 'react';
import { exampleResearchConvo } from '../components/EXAMPLES/exampleData';
import { MessageTextRender } from '../components/MessageTextRender';
import { ResearchNavigationElement } from '../components/ResearchNavigationElement';
import { useScrollToResearch } from '../hooks';
import { LibThemeProvider } from '../ui/theme';
export function HighlightedResearch() {
const containerRef = useRef(null);
const [searchString, setSearchString] = useState('');
const { handleSearchRefs, focusedRefKey, goToNextRef, goToPrevRef, occurrencies, counter, } = useScrollToResearch({
isLoading: false,
convoId: exampleResearchConvo.id.toString(),
messagesContainerRef: containerRef,
messagesFilter: searchString,
});
const buildFocusedRefIndex = useCallback((mexId) => {
if (includes(focusedRefKey, mexId) === true &&
includes(focusedRefKey, exampleResearchConvo.id.toString()) === true &&
focusedRefKey != null) {
return parseInt(focusedRefKey.split('_')[2]);
}
//-1 se non c'è nulla di evidenziato nel messaggio
return -1;
}, [focusedRefKey]);
return (_jsx(LibThemeProvider, { children: _jsxs(Composition, { padding: '1rem', gap: '1rem', children: [_jsx(Typography, { children: " Cerca nei messaggi" }), _jsxs(Composition, { templateColsMd: occurrencies > 0 ? '1fr auto' : '1fr', templateCols: '1fr', gap: '1rem', children: [_jsx(TextField, { fullWidth: true, placeholder: "Cerca nei messaggi", value: searchString, onChange: (e) => setSearchString(e.target.value) }), occurrencies > 0 && (_jsx(ResearchNavigationElement, { goToNextRef: goToNextRef, goToPrevRef: goToPrevRef, occurrencies: occurrencies, counter: counter }))] }), _jsxs(Card, { elevation: 5, children: [_jsx(Typography, { variant: "h6", color: "primary", p: 2, textAlign: 'center', children: "Pipino Tuc" }), _jsx(CardContent, { children: _jsx("div", { ref: containerRef, style: { overflowY: 'scroll', height: '500px' }, children: _jsx(Composition, { gap: '1rem', children: exampleResearchConvo.convo.map((message, index) => {
const focusedIndex = buildFocusedRefIndex(message.id);
return (_jsx(Composition, { padding: '0.5rem', justifyContent: message.contactName ? 'flex-start' : 'flex-end', children: _jsx(Box, { maxWidth: '90%', margin: '0 auto', children: _jsx(Card, { children: _jsx(Box, { padding: '0 0.5rem', children: _jsx(MessageTextRender, { text: message.messageText, searchString: searchString, onSearchRefs: handleSearchRefs(message.id), focusedRefIndex: focusedIndex, focusedKey: focusedRefKey }) }) }) }) }, index));
}) }) }) })] })] }) }));
}