117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
import { FileUploadItem } from "@/types/upload";
|
|
import { Image, StyleSheet, Text, View } from "react-native";
|
|
import * as Progress from 'react-native-progress';
|
|
import { ThemedText } from "../ThemedText";
|
|
|
|
const UploadPreview = ({
|
|
items,
|
|
onRetry
|
|
}: {
|
|
items: FileUploadItem[];
|
|
onRetry?: (id: string) => void;
|
|
}) => {
|
|
return (
|
|
<View style={styles.previewContainer}>
|
|
{items.map((item) => (
|
|
<View key={item.id} style={[
|
|
styles.previewItem,
|
|
item.status === 'error' && styles.errorItem
|
|
]}>
|
|
<Image
|
|
source={{ uri: item.thumbnail }}
|
|
style={styles.previewImage}
|
|
resizeMode="cover"
|
|
/>
|
|
<View style={styles.progressContainer}>
|
|
<Text style={styles.fileName} numberOfLines={1}>
|
|
{item.name}
|
|
</Text>
|
|
<View style={styles.statusContainer}>
|
|
{item.status === 'uploading' && (
|
|
<Progress.Bar
|
|
progress={item.progress / 100}
|
|
width={200}
|
|
color={'#007AFF'}
|
|
/>
|
|
)}
|
|
{item.status === 'success' && (
|
|
<ThemedText style={styles.successText}>✓ 上传成功</ThemedText>
|
|
)}
|
|
</View>
|
|
{item.error && (
|
|
<ThemedText style={styles.errorText} numberOfLines={2}>
|
|
{item.error}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
// 添加样式
|
|
const styles = StyleSheet.create({
|
|
previewContainer: {
|
|
marginTop: 16,
|
|
},
|
|
previewItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
padding: 12,
|
|
backgroundColor: '#f8f9fa',
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
borderColor: '#e9ecef',
|
|
},
|
|
errorItem: {
|
|
backgroundColor: '#fff5f5',
|
|
borderColor: '#ffd6d6',
|
|
},
|
|
previewImage: {
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 4,
|
|
marginRight: 12,
|
|
backgroundColor: '#e9ecef',
|
|
},
|
|
progressContainer: {
|
|
flex: 1,
|
|
},
|
|
statusContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: 4,
|
|
},
|
|
fileName: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
color: '#212529',
|
|
},
|
|
retryButton: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 4,
|
|
backgroundColor: '#ff3b30',
|
|
borderRadius: 4,
|
|
marginLeft: 8,
|
|
},
|
|
retryText: {
|
|
color: 'white',
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
},
|
|
errorText: {
|
|
color: '#ff3b30',
|
|
fontSize: 12,
|
|
marginTop: 4,
|
|
},
|
|
successText: {
|
|
color: '#34c759',
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
},
|
|
});
|
|
|
|
|
|
export default UploadPreview; |