77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import { FlashList } from "@shopify/flash-list";
|
|
import { RefreshControl, 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;
|
|
isRefreshing?: boolean;
|
|
onRefresh?: () => void;
|
|
onPressItem?: (item: ConversationItem) => void;
|
|
};
|
|
|
|
export function ConversationList({
|
|
data,
|
|
isLoading = false,
|
|
isRefreshing = false,
|
|
onRefresh,
|
|
onPressItem,
|
|
}: ConversationListProps) {
|
|
return (
|
|
<FlashList
|
|
alwaysBounceVertical
|
|
bounces
|
|
contentInsetAdjustmentBehavior="automatic"
|
|
contentContainerStyle={styles.contentContainer}
|
|
data={data}
|
|
keyExtractor={(item) => item.id}
|
|
ListEmptyComponent={
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyTitle}>{isLoading ? "会话加载中..." : "暂无会话"}</Text>
|
|
{!isLoading && <Text style={styles.emptyHint}>试试更换关键字</Text>}
|
|
</View>
|
|
}
|
|
onRefresh={onRefresh}
|
|
refreshControl={
|
|
<RefreshControl
|
|
colors={["#00D48C"]}
|
|
onRefresh={onRefresh}
|
|
refreshing={isRefreshing}
|
|
tintColor="#00D48C"
|
|
/>
|
|
}
|
|
renderItem={({ item }) => (
|
|
<ConversationListItem item={item} onPress={onPressItem} />
|
|
)}
|
|
refreshing={isRefreshing}
|
|
showsVerticalScrollIndicator={false}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
contentContainer: {
|
|
flexGrow: 1,
|
|
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,
|
|
},
|
|
});
|