121 lines
3.2 KiB
JavaScript
121 lines
3.2 KiB
JavaScript
import { Button, Container, Spinner, Text as NBText, View } from "native-base";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
FlatList,
|
|
Image,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
removeAllPhotos,
|
|
uploadAllPhotos,
|
|
} from "../../redux/photos/photos.actions";
|
|
import {
|
|
selectPhotos,
|
|
selectUploadInProgress,
|
|
} from "../../redux/photos/photos.selectors";
|
|
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
photos: selectPhotos,
|
|
uploadInProgress: selectUploadInProgress,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
removeAllPhotos: () => dispatch(removeAllPhotos()),
|
|
uploadAllphotos: () => dispatch(uploadAllPhotos()),
|
|
});
|
|
|
|
export function ScreenMediaCache({
|
|
photos,
|
|
removeAllPhotos,
|
|
uploadAllphotos,
|
|
uploadInProgress,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|
const [imgIndex, setImgIndex] = useState(0);
|
|
const [imagesInDir, setImagesInDir] = useState([]);
|
|
|
|
console.log("Photos", photos);
|
|
|
|
return (
|
|
<Container>
|
|
<View style={styles.actions}>
|
|
<Button onPress={() => removeAllPhotos()}>
|
|
<NBText>{t("mediacache.actions.deleteall")}</NBText>
|
|
</Button>
|
|
<Button onPress={() => uploadAllphotos()}>
|
|
<NBText>{t("mediacache.actions.uploadall")}</NBText>
|
|
{uploadInProgress && <Spinner />}
|
|
</Button>
|
|
</View>
|
|
|
|
<FlatList
|
|
data={photos}
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={styles.listContentContainer}
|
|
keyExtractor={(item) => item.id}
|
|
numColumns={4}
|
|
renderItem={(object) =>
|
|
object.item.video ? (
|
|
<Text>Video</Text>
|
|
) : (
|
|
<TouchableOpacity
|
|
style={{
|
|
flex: 1 / 4, //here you can use flex:1 also
|
|
aspectRatio: 1,
|
|
}}
|
|
onPress={() => {
|
|
setImgIndex(object.index);
|
|
setPreviewVisible(true);
|
|
}}
|
|
>
|
|
<Image
|
|
source={{ uri: object.item.uri }}
|
|
style={{ flex: 1 }}
|
|
resizeMode="cover"
|
|
/>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
/>
|
|
<MediaCacheOverlay
|
|
imgIndex={imgIndex}
|
|
setImgIndex={setImgIndex}
|
|
previewVisible={previewVisible}
|
|
setPreviewVisible={setPreviewVisible}
|
|
/>
|
|
<Text>{`${photos.length} Photos`}</Text>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
actions: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-evenly",
|
|
},
|
|
listContentContainer: {
|
|
//flex: 1,
|
|
justifyContent: "flex-start",
|
|
//flexDirection: "row",
|
|
},
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);
|
|
|
|
// <FlatList
|
|
// data={imagesInDir}
|
|
// style={{}}
|
|
// keyExtractor={(item) => item.id}
|
|
// renderItem={(object) => <Text>{object.item}</Text>}
|
|
// />;
|