67 lines
1.6 KiB
JavaScript
67 lines
1.6 KiB
JavaScript
import { Ionicons } from "@expo/vector-icons";
|
|
import _ from "lodash";
|
|
import React, { useMemo } from "react";
|
|
import {
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import * as Progress from "react-native-progress";
|
|
export default function UploadProgress({ uploads, setUploads }) {
|
|
const uploadKeys = useMemo(() => {
|
|
if (uploads) return Object.keys(uploads);
|
|
return [];
|
|
}, [uploads]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView>
|
|
{uploadKeys.map((key) => (
|
|
<View key={key} style={styles.progressItem}>
|
|
<Text style={styles.progressText}>{key}</Text>
|
|
<View style={styles.progressBarContainer}>
|
|
<Progress.Bar
|
|
style={styles.progress}
|
|
height={10}
|
|
width={null}
|
|
progress={uploads[key].percent}
|
|
color={uploads[key].percent === 1 ? "green" : "blue"}
|
|
/>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
setUploads((prevUploads) => _.omit(prevUploads, key))
|
|
}
|
|
>
|
|
<Ionicons name="ios-close" size={32} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
display: "flex",
|
|
},
|
|
progressItem: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
progressText: {
|
|
flex: 1,
|
|
},
|
|
progressBarContainer: {
|
|
flex: 3,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
});
|