@cometchat/chat-uikit-react-native/lib/shared/views/CometChatListItem/CometChatListItem.js

Ready-to-use Chat UI Components for React Native

import React, { useCallback, useState } from "react";
import { Text, TouchableOpacity, View, } from "react-native";
import { useTheme } from "../../../theme";
import { Icon } from "../../icons/Icon";
import { CometChatAvatar } from "../CometChatAvatar";
import { CometChatStatusIndicator, } from "../CometChatStatusIndicator";
import { Style } from "./style";
/**
 * CometChatListItem renders a single item in the list.
 * It displays an avatar with an optional status indicator, title, subtitle, and trailing view.
 *
 * @param {CometChatListItemInterface} props - Props for the list item.
 * @returns {JSX.Element} The rendered list item.
 */
export const CometChatListItem = React.memo((props) => {
    const [translate, setTranslate] = useState(0);
    const theme = useTheme();
    const { id, avatarURL, avatarName, title, LeadingView, SubtitleView, TrailingView, headViewContainerStyle, trailingViewContainerStyle, titleSubtitleContainerStyle, onPress, onLongPress, statusIndicatorType, titleStyle, containerStyle, avatarStyle, selected = false, shouldSelect, TitleView, statusIndicatorStyle } = props;
    let cancelClick = false;
    const CheckBoxView = useCallback(() => {
        return (<>
        {shouldSelect && (<View style={{
                    width: 24,
                    height: 24,
                    borderWidth: 1.6,
                    borderColor: theme.color.borderDefault,
                    backgroundColor: selected ? theme.color.primary : theme.color.background1,
                    borderRadius: 5,
                    marginRight: 12,
                    justifyContent: "center",
                    alignItems: "center",
                    zIndex: 2,
                }}>
            {selected && (<Icon name='list-item-check' size={16} height={16} width={16} color={theme.color.iconWhite}/>)}
          </View>)}
      </>);
    }, [selected, shouldSelect]);
    /**
     * Renders the title view.
     *
     *  The title view.
     */
    const getTitleView = () => {
        if (TitleView)
            return TitleView;
        return (<Text numberOfLines={1} ellipsizeMode='tail' style={titleStyle}>
        {title}
      </Text>);
    };
    /**
     * Handles the press event on the list item.
     */
    const clickHandler = () => {
        if (!cancelClick) {
            if (onPress && typeof onPress === "function") {
                onPress(id);
            }
        }
    };
    /**
     * Handles the long press event on the list item.
     *
     * @param {GestureResponderEvent} e - The long press event.
     */
    const longPressHandler = useCallback((e) => {
        if (!cancelClick) {
            if (onLongPress && typeof onLongPress === "function") {
                onLongPress(id, e);
            }
        }
    }, [onLongPress, id]);
    /**
     * Renders the trailing view of the list item.
     *
     * @returns {JSX.Element | null} The trailing view if provided.
     */
    const getTrailingView = () => {
        if (TrailingView)
            return (<View style={[Style.tailViewStyle, trailingViewContainerStyle ?? {}]}>{TrailingView}</View>);
        return null;
    };
    let ListComponent = (onPress && typeof onPress === "function") || (onLongPress && typeof onLongPress === "function")
        ? TouchableOpacity
        : View;
    let listComponentProps = (onPress && typeof onPress === "function") || (onLongPress && typeof onLongPress === "function")
        ? {
            activeOpacity: 1,
            onPress: clickHandler,
            onLongPress: longPressHandler,
        }
        : {};
    const getLeadingView = useCallback(() => {
        return (<View style={[{ flexDirection: "row", alignItems: "center" }, headViewContainerStyle]}>
        <CheckBoxView />
        {LeadingView ? (LeadingView) : avatarURL || avatarName ? (<>
            <CometChatAvatar image={avatarURL} name={avatarName} style={avatarStyle}/>
            <CometChatStatusIndicator type={statusIndicatorType} style={statusIndicatorStyle}/>
          </>) : null}
      </View>);
    }, [
        avatarURL,
        avatarName,
        statusIndicatorType,
        avatarStyle,
        headViewContainerStyle,
        theme,
        selected,
        shouldSelect,
        statusIndicatorStyle
    ]);
    return (<ListComponent {...listComponentProps} style={[containerStyle, selected && { backgroundColor: theme.color.background4 }]}>
      {getLeadingView()}
      <View style={[Style.rightContainerStyle]}>
        <View style={[
            Style.middleViewStyle,
            { padding: 0, paddingLeft: 0 },
            titleSubtitleContainerStyle ?? {},
        ]}>
          {getTitleView()}
          {SubtitleView}
        </View>
        {getTrailingView()}
      </View>
    </ListComponent>);
});
//# sourceMappingURL=CometChatListItem.js.map