84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
import { Container, Content, Thumbnail } from "native-base";
|
|
import React, { useState } from "react";
|
|
import {
|
|
FlatList,
|
|
RefreshControl,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
|
|
|
|
const REACT_APP_CLOUDINARY_IMAGE_ENDPOINT =
|
|
"https://res.cloudinary.com/bodyshop/image/upload";
|
|
const REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS = "c_fill,f_auto,h_250,w_250";
|
|
|
|
export default function JobDocumentsComponent({ job, loading, refetch }) {
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|
const [imgIndex, setImgIndex] = useState(0);
|
|
const onRefresh = async () => {
|
|
return refetch();
|
|
};
|
|
return (
|
|
<Container>
|
|
<Content
|
|
padder
|
|
refreshControl={
|
|
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
|
}
|
|
>
|
|
<FlatList
|
|
data={job.documents}
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={styles.listContentContainer}
|
|
keyExtractor={(item) => item.id}
|
|
numColumns={4}
|
|
renderItem={(object) => (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
// setImgIndex(object.index);
|
|
// setPreviewVisible(true);
|
|
}}
|
|
>
|
|
<Thumbnail
|
|
square
|
|
large
|
|
style={{ margin: 5 }}
|
|
source={{
|
|
uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`,
|
|
}}
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
<Text>{job.documents.length}</Text>
|
|
<MediaCacheOverlay
|
|
imgIndex={imgIndex}
|
|
setImgIndex={setImgIndex}
|
|
previewVisible={previewVisible}
|
|
setPreviewVisible={setPreviewVisible}
|
|
/>
|
|
</Content>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
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",
|
|
},
|
|
});
|