121 lines
3.4 KiB
JavaScript
121 lines
3.4 KiB
JavaScript
import { StyleSheet, Text, View } from "react-native";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectPhotos } from "../../redux/photos/photos.selectors";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
photos: selectPhotos,
|
|
});
|
|
|
|
export default connect(mapStateToProps, null)(UploadProgress);
|
|
|
|
export function UploadProgress({ photos }) {
|
|
if (photos?.length === 0) return null;
|
|
return (
|
|
<View style={styles.modalContainer}>
|
|
<Text>Upload Progress.</Text>
|
|
<Text>{JSON.stringify(photos)}</Text>
|
|
{/*
|
|
<View style={styles.modal}>
|
|
{Object.keys(progress.files).map((key) => (
|
|
<View key={key} style={styles.progressItem}>
|
|
<Text style={styles.progressText}>
|
|
{progress.files[key].filename}
|
|
</Text>
|
|
<View style={styles.progressBarContainer}>
|
|
<ProgressBar
|
|
progress={progress.files[key].percent}
|
|
style={styles.progress}
|
|
color={progress.files[key].percent === 1 ? "green" : "blue"}
|
|
/>
|
|
<View
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text>{`${formatBytes(
|
|
progress.files[key].loaded /
|
|
(((progress.files[key].uploadEnd || new Date()) -
|
|
progress.files[key].uploadStart) /
|
|
1000)
|
|
)}/sec`}</Text>
|
|
{progress.files[key].percent === 1 && (
|
|
<>
|
|
<ActivityIndicator style={{ marginLeft: 12 }} />
|
|
<Text style={{ marginLeft: 4 }}>Processing...</Text>
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))}
|
|
<View style={styles.centeredView}>
|
|
{progress.statusText ? (
|
|
<>
|
|
<ActivityIndicator style={{ marginLeft: 12 }} />
|
|
<Text style={{ marginLeft: 4 }}>{progress.statusText}</Text>
|
|
<Divider />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Text>{`${progress.totalFilesCompleted} of ${progress.totalFiles} uploaded.`}</Text>
|
|
<Text>{`${formatBytes(progress.totalUploaded)} of ${formatBytes(
|
|
progress.totalToUpload
|
|
)} uploaded.`}</Text>
|
|
</>
|
|
)}
|
|
|
|
</View>
|
|
</View>
|
|
*/}
|
|
</View>
|
|
);
|
|
}
|
|
const styles = StyleSheet.create({
|
|
modalContainer: {
|
|
display: "flex",
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
},
|
|
modal: {
|
|
//flex: 1,
|
|
display: "flex",
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
backgroundColor: "white",
|
|
borderRadius: 20,
|
|
padding: 18,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5,
|
|
},
|
|
centeredView: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginTop: 22,
|
|
},
|
|
progressItem: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
progressText: {
|
|
flex: 1,
|
|
},
|
|
progressBarContainer: {
|
|
flex: 3,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
});
|