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

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

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { StyledHighlightSpan } from '../ui/StyledHighlightSpan';
/**
 * La logica di utilizzo di questo componente è compenetrata con l'hook useScrollToResearch
 */
/**
 * Componente per evidenziare le parti di un testo che corrispondono a una stringa di ricerca.
 * @param text - Il testo da evidenziare.
 * @param searchString - La stringa di ricerca.
 * @param focusedRefIndex - L'indice dell'elemento evidenziato. Corrisponde a -1 quando non deve evidenziare.
 * @param onSearchRefs - Funzione per gestire i riferimenti degli elementi evidenziati.
 * @param parentIndex - Indice del componente genitore (opzionale: serve quando HighlightResearch è usato più volte all'interno di uno stesso messaggio).
 * @param focusedKeyParentIndexSection - Sezione della chiave dell'elemento evidenziato che corrisponde all'indice dell'elemento genitore (opzionale).
 * @returns Un componente React che evidenzia le parti del testo corrispondenti alla stringa di ricerca.
 */
export function HighlightResearch({ text, searchString, focusedRefIndex, onSearchRefs, parentIndex, focusedKeyParentIndexSection, }) {
    const handleSpanRef = useCallback((elementIndex) => (el) => {
        if (el == null)
            return;
        onSearchRefs({
            [`${elementIndex}_${parentIndex ?? ''}_${searchString}`]: el,
        });
    }, [onSearchRefs, parentIndex, searchString]);
    const isFocused = useCallback((indexCounter) => {
        if (!focusedKeyParentIndexSection) {
            return indexCounter === focusedRefIndex;
        }
        else {
            return (focusedKeyParentIndexSection === parentIndex?.toString() &&
                indexCounter === focusedRefIndex);
        }
    }, [focusedKeyParentIndexSection, focusedRefIndex, parentIndex]);
    const textParts = useMemo(() => {
        if (!searchString)
            return [];
        const regex = new RegExp(`(${searchString})`, 'gi');
        const parts = text.split(regex);
        let indexCounter = 0;
        return parts.map((part, index) => {
            return regex.test(part) ? (_jsx(StyledHighlightSpan, { "$isFocused": isFocused(indexCounter), ref: handleSpanRef(indexCounter++), children: part }, index)) : (part);
        });
    }, [searchString, text, isFocused, handleSpanRef]);
    return _jsx(_Fragment, { children: textParts.length > 0 ? textParts : text });
}