71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import { FlashList } from "@shopify/flash-list";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
|
|
import { ConversationListItem } from "@/features/im/components/conversation-list-item";
|
|
import type { ConversationItem } from "@/features/im/types/conversation";
|
|
|
|
type ConversationListProps = {
|
|
data: ConversationItem[];
|
|
isLoading?: boolean;
|
|
onPressItem?: (item: ConversationItem) => void;
|
|
};
|
|
|
|
export function ConversationList({
|
|
data,
|
|
isLoading = false,
|
|
onPressItem,
|
|
}: ConversationListProps) {
|
|
if (isLoading) {
|
|
return (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyTitle}>会话加载中...</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
return (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyTitle}>暂无会话</Text>
|
|
<Text style={styles.emptyHint}>试试更换关键字</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FlashList
|
|
contentInsetAdjustmentBehavior="automatic"
|
|
contentContainerStyle={styles.contentContainer}
|
|
data={data}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<ConversationListItem item={item} onPress={onPressItem} />
|
|
)}
|
|
showsVerticalScrollIndicator={false}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
contentContainer: {
|
|
paddingBottom: 28,
|
|
paddingTop: 16,
|
|
},
|
|
emptyContainer: {
|
|
alignItems: "center",
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
paddingHorizontal: 24,
|
|
},
|
|
emptyTitle: {
|
|
color: "#666B73",
|
|
fontSize: 17,
|
|
fontWeight: "600",
|
|
},
|
|
emptyHint: {
|
|
color: "#A0A4AA",
|
|
fontSize: 13,
|
|
marginTop: 6,
|
|
},
|
|
});
|