117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
import SvgIcon from "@/components/svg-icon";
|
|
import React from 'react';
|
|
import { useTranslation } from "react-i18next";
|
|
import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
import { FileStatus } from "./file-uploader";
|
|
|
|
interface FileItemProps {
|
|
fileStatus: FileStatus;
|
|
index: number;
|
|
onRemove: (file: File) => void;
|
|
formatFileSize: (bytes: number) => string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function FileItem({
|
|
fileStatus,
|
|
index,
|
|
onRemove,
|
|
formatFileSize,
|
|
disabled = false
|
|
}: FileItemProps) {
|
|
const { t } = useTranslation();
|
|
const fadeAnim = React.useRef(new Animated.Value(0)).current;
|
|
const translateY = React.useRef(new Animated.Value(10)).current;
|
|
|
|
React.useEffect(() => {
|
|
Animated.parallel([
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 1,
|
|
duration: 200,
|
|
delay: index * 50,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(translateY, {
|
|
toValue: 0,
|
|
duration: 200,
|
|
delay: index * 50,
|
|
useNativeDriver: true,
|
|
})
|
|
]).start();
|
|
}, []);
|
|
|
|
return (
|
|
<Animated.View
|
|
style={[
|
|
styles.card,
|
|
{
|
|
opacity: fadeAnim,
|
|
transform: [{ translateY }]
|
|
}
|
|
]}
|
|
>
|
|
<View style={styles.cardBody}>
|
|
<View style={styles.fileInfo}>
|
|
<Text style={styles.fileName}>{fileStatus.file.name}</Text>
|
|
<Text style={styles.fileSize}>{formatFileSize(fileStatus.file.size)}</Text>
|
|
</View>
|
|
{!disabled && (
|
|
<TouchableOpacity
|
|
onPress={() => onRemove(fileStatus.file)}
|
|
style={styles.removeButton}
|
|
>
|
|
<SvgIcon name="close" size={16} color="#666" />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
{fileStatus.progress !== undefined && fileStatus.progress < 100 && (
|
|
<View style={styles.progressContainer}>
|
|
<View style={[styles.progressBar, { width: `${fileStatus.progress}%` }]} />
|
|
</View>
|
|
)}
|
|
</Animated.View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
backgroundColor: '#fff',
|
|
borderRadius: 8,
|
|
marginBottom: 8,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 2,
|
|
elevation: 2,
|
|
},
|
|
cardBody: {
|
|
padding: 12,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
fileInfo: {
|
|
flex: 1,
|
|
},
|
|
fileName: {
|
|
fontSize: 14,
|
|
color: '#333',
|
|
marginBottom: 4,
|
|
},
|
|
fileSize: {
|
|
fontSize: 12,
|
|
color: '#666',
|
|
},
|
|
removeButton: {
|
|
padding: 4,
|
|
},
|
|
progressContainer: {
|
|
height: 2,
|
|
backgroundColor: '#e9ecef',
|
|
width: '100%',
|
|
},
|
|
progressBar: {
|
|
height: '100%',
|
|
backgroundColor: '#007bff',
|
|
},
|
|
}); |