86 lines
2.0 KiB
JavaScript
86 lines
2.0 KiB
JavaScript
import { Button, View } from "native-base";
|
|
import React from "react";
|
|
import { Alert, Modal, StyleSheet, Text } from "react-native";
|
|
import ImageViewer from "react-native-image-zoom-viewer";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { removePhotos } from "../../redux/photos/photos.actions";
|
|
import { selectPhotos } from "../../redux/photos/photos.selectors";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
photos: selectPhotos,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
removePhotos: (ids) => dispatch(removePhotos(ids)),
|
|
});
|
|
|
|
export function MediaCacheOverlay({
|
|
photos,
|
|
removePhotos,
|
|
previewVisible,
|
|
setPreviewVisible,
|
|
imgIndex,
|
|
setImgIndex,
|
|
}) {
|
|
return (
|
|
<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={{
|
|
marginleft: "auto",
|
|
backgroundColor: "tomato",
|
|
}}
|
|
>
|
|
<Text>{index} This is the thing.</Text>
|
|
<Button
|
|
onPress={() => {
|
|
removePhotos([photos[index].id]);
|
|
}}
|
|
>
|
|
<Text>Delete</Text>
|
|
</Button>
|
|
</View>
|
|
)}
|
|
enableSwipeDown
|
|
enablePreload
|
|
imageUrls={photos.map((p) => {
|
|
return { url: p.uri };
|
|
})}
|
|
/>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
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)(MediaCacheOverlay);
|