stream-chat-react/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.js

React components to create chat conversations or livestream style chat

import clsx from 'clsx';
import React, { useCallback, useLayoutEffect, useRef } from 'react';
import { useMessageComposer } from '../../MessageInput';
import { useMessageInputContext } from '../../../context';
export const SuggestionListItem = React.forwardRef(function SuggestionListItem({ className, component: Component, focused, item, onMouseEnter }, innerRef) {
    const { textComposer } = useMessageComposer();
    const { textareaRef } = useMessageInputContext();
    const containerRef = useRef(null);
    const handleSelect = useCallback(() => {
        textComposer.handleSelect(item);
        textareaRef.current?.focus();
    }, [item, textareaRef, textComposer]);
    useLayoutEffect(() => {
        if (!focused)
            return;
        containerRef.current?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
    }, [focused, containerRef]);
    return (React.createElement("li", { className: clsx('str-chat__suggestion-list-item', className, {
            'str-chat__suggestion-item--selected': focused,
        }), onMouseEnter: onMouseEnter, ref: containerRef },
        React.createElement("button", { onClick: handleSelect, onKeyDown: (event) => {
                if (event.key === 'Enter') {
                    handleSelect();
                }
            }, ref: innerRef },
            React.createElement(Component, { entity: item, focused: focused }))));
});