65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
|
|
|
|
interface UploadProgressProps {
|
|
progress?: number;
|
|
status: 'idle' | 'uploading' | 'processing' | 'success' | 'error';
|
|
error?: string;
|
|
}
|
|
|
|
export function UploadProgress({ progress, status, error }: UploadProgressProps) {
|
|
if (status === 'idle') return null;
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{status === 'uploading' && (
|
|
<>
|
|
<ActivityIndicator size="small" color="#1976D2" />
|
|
<Text style={styles.text}>
|
|
Upload en cours... {progress !== undefined && `${progress}%`}
|
|
</Text>
|
|
</>
|
|
)}
|
|
|
|
{status === 'processing' && (
|
|
<>
|
|
<ActivityIndicator size="small" color="#1976D2" />
|
|
<Text style={styles.text}>Traitement OCR en cours...</Text>
|
|
</>
|
|
)}
|
|
|
|
{status === 'success' && (
|
|
<Text style={[styles.text, styles.success]}>Upload terminé !</Text>
|
|
)}
|
|
|
|
{status === 'error' && (
|
|
<Text style={[styles.text, styles.error]}>
|
|
{error || "Erreur lors de l'upload"}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 12,
|
|
backgroundColor: '#F5F5F5',
|
|
borderRadius: 8,
|
|
marginBottom: 16,
|
|
},
|
|
text: {
|
|
marginLeft: 8,
|
|
fontSize: 14,
|
|
color: '#333',
|
|
},
|
|
success: {
|
|
color: '#4CAF50',
|
|
},
|
|
error: {
|
|
color: '#F44336',
|
|
},
|
|
});
|