117 lines
3.1 KiB
JavaScript
117 lines
3.1 KiB
JavaScript
import { Button, Text as NBText, Thumbnail, View } from "native-base";
|
|
import React, { useState } from "react";
|
|
import {
|
|
Alert,
|
|
FlatList,
|
|
Modal,
|
|
SafeAreaView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import ImageViewer from "react-native-image-zoom-viewer";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
removeAllPhotos,
|
|
uploadAllPhotos,
|
|
} from "../../redux/photos/photos.actions";
|
|
import { selectPhotos } from "../../redux/photos/photos.selectors";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
photos: selectPhotos,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
removeAllPhotos: () => dispatch(removeAllPhotos()),
|
|
uploadAllphotos: () => dispatch(uploadAllPhotos()),
|
|
});
|
|
|
|
export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|
const [imgIndex, setImgIndex] = useState(0);
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<FlatList
|
|
data={photos}
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={styles.listContentContainer}
|
|
keyExtractor={(item) => item.id}
|
|
numColumns={5}
|
|
renderItem={(object) =>
|
|
object.item.video ? (
|
|
<Text>Video</Text>
|
|
) : (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
setImgIndex(object.index);
|
|
setPreviewVisible(true);
|
|
}}
|
|
>
|
|
<Thumbnail square large source={{ uri: object.item.uri }} />
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
/>
|
|
<Text>{`${photos.length} Photos`}</Text>
|
|
<View style={styles.actions}>
|
|
<Button onPress={() => removeAllPhotos()}>
|
|
<NBText>Delete all</NBText>
|
|
</Button>
|
|
<Button onPress={() => uploadAllphotos()}>
|
|
<NBText>Upload all</NBText>
|
|
</Button>
|
|
</View>
|
|
<Modal
|
|
animationType="slide"
|
|
onRequestClose={() => {
|
|
Alert.alert("Modal has been closed.");
|
|
}}
|
|
visible={previewVisible}
|
|
transparent={true}
|
|
>
|
|
<ImageViewer
|
|
onCancel={() => setPreviewVisible(false)}
|
|
index={imgIndex}
|
|
onChange={(index) => setImgIndex(index)}
|
|
style={{ display: "flex" }}
|
|
renderFooter={(index) => (
|
|
<View
|
|
style={{
|
|
backgroundColor: "tomato",
|
|
}}
|
|
>
|
|
<Text>{index} This is the thing.</Text>
|
|
</View>
|
|
)}
|
|
enableSwipeDown
|
|
enablePreload
|
|
imageUrls={photos.map((p) => {
|
|
return { url: p.uri };
|
|
})}
|
|
/>
|
|
</Modal>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
actions: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-evenly",
|
|
},
|
|
listContentContainer: {
|
|
flex: 1,
|
|
},
|
|
thumbnail: {
|
|
width: 10,
|
|
height: 10,
|
|
backgroundColor: "tomato",
|
|
},
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);
|