@cometchat/chat-uikit-react-native
Version:
Ready-to-use Chat UI Components for React Native
39 lines • 2.12 kB
JavaScript
import React, { useEffect, useState } from "react";
import { ActivityIndicator, FlatList, View } from "react-native";
import { CometChatListItem } from "../CometChatListItem";
import { Skeleton } from "./Skeleton";
export const CometChatSuggestionList = (props) => {
const { data, listStyle, onPress, onEndReached, loading } = props;
const [initialLoad, setInitialLoad] = useState(true);
useEffect(() => {
setTimeout(() => {
setInitialLoad(false);
}, 800);
}, []);
const _render = ({ item, index }) => {
let shouldLoadAvatarName = item.hideLeadingIcon ? {} : { avatarName: item.name };
return (<CometChatListItem key={index} id={item.id} title={item.name} avatarURL={item.leadingIconUrl ? { uri: item.leadingIconUrl } : undefined} containerStyle={listStyle?.listItemStyle.containerStyle} titleStyle={listStyle?.listItemStyle.titleStyle} avatarStyle={listStyle?.listItemStyle.avatarStyle} titleSubtitleContainerStyle={{
alignSelf: "center",
}} onPress={() => onPress(item)} {...shouldLoadAvatarName}/>);
};
return (<View>
{initialLoad ? (<View>
<Skeleton />
</View>) : (<FlatList data={data} renderItem={_render} onMomentumScrollEnd={(event) => {
const contentOffsetY = event.nativeEvent.contentOffset.y; // The current scroll position
const contentHeight = event.nativeEvent.contentSize.height; // Total height of the content
const layoutHeight = event.nativeEvent.layoutMeasurement.height; // Height of the visible area
if (contentOffsetY + layoutHeight >= contentHeight - 10) {
onEndReached && onEndReached();
}
}} onEndReachedThreshold={0.3} keyboardShouldPersistTaps={"always"}/>)}
{!initialLoad && (<View style={{
position: "absolute",
bottom: 0,
width: "100%",
}}>
{loading && <ActivityIndicator animating={loading}/>}
</View>)}
</View>);
};
//# sourceMappingURL=CometChatSuggestionList.js.map