Created
January 31, 2020 16:52
-
-
Save tamunoibi/f40abe882ea48662f8d5e6df29c9d1a2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState } from 'react'; | |
import { ImageBackground, View, StyleSheet, TouchableOpacity } from 'react-native'; | |
import ImagePreview from './ImagePreview'; | |
import { Ionicons } from '@expo/vector-icons'; | |
import Shimmer from './Shimmer'; | |
const RemoveImage = ({ onPress }) => { | |
return ( | |
<View style={styles.removeContainer}> | |
<TouchableOpacity style={styles.remove} onPress={onPress}> | |
<Ionicons name="ios-close" size={30} color={'white'} /> | |
</TouchableOpacity> | |
</View> | |
); | |
}; | |
const handleRemove = (images, image, setImages) => { | |
const newImages = images.filter(img => img.uri !== image.uri); | |
setImages(newImages); | |
}; | |
export const OneTile = ({ | |
image, | |
images, | |
singleImageWidth, | |
longImageHeight, | |
setImages, | |
showCancel, | |
imageArray, | |
previewVisibility, | |
toggleVisibility, | |
showPreview | |
}) => { | |
/** | |
* imageArray should be specified when Onetile is used | |
* as a single component and not within the context of imageGrid | |
*/ | |
const imageContainer = imageArray || images; | |
const imageTobeRemoved = imageArray ? image : images[0]; | |
const [shimmer, setShimmer] = useState(false); | |
return ( | |
<TouchableOpacity | |
style={{ ...styles.container }} | |
onPress={() => toggleVisibility(!previewVisibility)} | |
disabled={!showPreview} | |
> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer} | |
style={{ width: singleImageWidth, height: longImageHeight }} | |
> | |
<ImageBackground | |
onLoad={() => setShimmer(true)} | |
source={{ uri: (image && image.uri) || images[0].uri || images[0].url }} | |
style={{ width: singleImageWidth, height: longImageHeight }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(imageContainer, imageTobeRemoved, setImages)} /> | |
) : null} | |
</View> | |
{showPreview ? ( | |
<ImagePreview | |
visibility={previewVisibility} | |
toggleVisibility={() => toggleVisibility(!previewVisibility)} | |
images={images} | |
/> | |
) : null} | |
</TouchableOpacity> | |
); | |
}; | |
const TwoTiles = ({ | |
images, | |
longImageHeight, | |
longImageWidth, | |
showCancel, | |
setImages, | |
previewVisibility, | |
toggleVisibility, | |
showPreview | |
}) => { | |
const [shimmer, setShimmer] = useState({ | |
imageOne: false, | |
imageTwo: false | |
}); | |
return ( | |
<TouchableOpacity | |
style={{ ...styles.container }} | |
onPress={() => toggleVisibility(!previewVisibility)} | |
disabled={!showPreview} | |
> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer.imageOne} | |
style={{ height: longImageHeight, width: longImageWidth }} | |
> | |
<ImageBackground | |
onLoad={() => | |
setShimmer(prevState => { | |
return { ...prevState, imageOne: true }; | |
}) | |
} | |
source={{ uri: images[0].uri || images[0].url }} | |
style={{ height: longImageHeight, width: longImageWidth }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(images, images[0], setImages)} /> | |
) : null} | |
</View> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer.imageTwo} | |
style={{ height: longImageHeight, width: longImageWidth }} | |
> | |
<ImageBackground | |
onLoad={() => | |
setShimmer(prevState => { | |
return { ...prevState, imageTwo: true }; | |
}) | |
} | |
source={{ uri: images[1].uri || images[1].url }} | |
style={{ height: longImageHeight, width: longImageWidth }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(images, images[1], setImages)} /> | |
) : null} | |
</View> | |
{showPreview ? ( | |
<ImagePreview | |
visibility={previewVisibility} | |
toggleVisibility={() => toggleVisibility(!previewVisibility)} | |
images={images} | |
/> | |
) : null} | |
</TouchableOpacity> | |
); | |
}; | |
const ThreeTiles = ({ | |
images, | |
longImageHeight, | |
longImageWidth, | |
shortImageHeight, | |
shortImageWidth, | |
showCancel, | |
setImages, | |
previewVisibility, | |
toggleVisibility, | |
showPreview | |
}) => { | |
const [shimmer, setShimmer] = useState({ | |
imageOne: false, | |
imageTwo: false, | |
imageThree: false | |
}); | |
return ( | |
<TouchableOpacity | |
style={{ ...styles.container }} | |
onPress={() => toggleVisibility(!previewVisibility)} | |
disabled={!showPreview} | |
> | |
<View> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer.imageOne} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
> | |
<ImageBackground | |
onLoad={() => | |
setShimmer(prevState => { | |
return { ...prevState, imageOne: true }; | |
}) | |
} | |
source={{ uri: images[0].uri || images[0].url }} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(images, images[0], setImages)} /> | |
) : null} | |
</View> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer.imageTwo} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
> | |
<ImageBackground | |
onLoad={() => | |
setShimmer(prevState => { | |
return { ...prevState, imageTwo: true }; | |
}) | |
} | |
source={{ uri: images[1].uri || images[1].url }} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(images, images[1], setImages)} /> | |
) : null} | |
</View> | |
</View> | |
<View> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer.imageThree} | |
style={{ height: longImageHeight, width: longImageWidth }} | |
> | |
<ImageBackground | |
onLoad={() => | |
setShimmer(prevState => { | |
return { ...prevState, imageThree: true }; | |
}) | |
} | |
source={{ uri: images[2].uri || images[2].url }} | |
style={{ height: longImageHeight, width: longImageWidth }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(images, images[2], setImages)} /> | |
) : null} | |
</View> | |
</View> | |
{showPreview ? ( | |
<ImagePreview | |
visibility={previewVisibility} | |
toggleVisibility={() => toggleVisibility(!previewVisibility)} | |
images={images} | |
/> | |
) : null} | |
</TouchableOpacity> | |
); | |
}; | |
const FourTiles = ({ | |
images, | |
shortImageHeight, | |
shortImageWidth, | |
showCancel, | |
setImages, | |
previewVisibility, | |
toggleVisibility, | |
showPreview | |
}) => { | |
const [shimmer, setShimmer] = useState({ | |
imageOne: false, | |
imageTwo: false, | |
imageThree: false, | |
imageFour: false | |
}); | |
return ( | |
<TouchableOpacity | |
style={{ ...styles.container }} | |
onPress={() => toggleVisibility(!previewVisibility)} | |
disabled={!showPreview} | |
> | |
<View> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer.imageOne} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
> | |
<ImageBackground | |
onLoad={() => | |
setShimmer(prevState => { | |
return { ...prevState, imageOne: true }; | |
}) | |
} | |
source={{ uri: images[0].uri || images[0].url }} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(images, images[0], setImages)} /> | |
) : null} | |
</View> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer.imageTwo} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
> | |
<ImageBackground | |
onLoad={() => | |
setShimmer(prevState => { | |
return { ...prevState, imageTwo: true }; | |
}) | |
} | |
source={{ uri: images[1].uri || images[1].url }} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(images, images[1], setImages)} /> | |
) : null} | |
</View> | |
</View> | |
<View> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer.imageThree} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
> | |
<ImageBackground | |
onLoad={() => | |
setShimmer(prevState => { | |
return { ...prevState, imageThree: true }; | |
}) | |
} | |
source={{ uri: images[2].uri || images[2].url }} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(images, images[2], setImages)} /> | |
) : null} | |
</View> | |
<View style={styles.gutter}> | |
<Shimmer | |
autoRun={true} | |
visible={shimmer.imageFour} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
> | |
<ImageBackground | |
onLoad={() => | |
setShimmer(prevState => { | |
return { ...prevState, imageFour: true }; | |
}) | |
} | |
source={{ uri: images[3].uri || images[3].url }} | |
style={{ height: shortImageHeight, width: shortImageWidth }} | |
/> | |
</Shimmer> | |
{showCancel ? ( | |
<RemoveImage onPress={() => handleRemove(images, images[3], setImages)} /> | |
) : null} | |
</View> | |
</View> | |
{showPreview ? ( | |
<ImagePreview | |
visibility={previewVisibility} | |
toggleVisibility={() => toggleVisibility(!previewVisibility)} | |
images={images} | |
/> | |
) : null} | |
</TouchableOpacity> | |
); | |
}; | |
const ImageGrid = ({ | |
number, | |
images, | |
longImageHeight, | |
shortImageHeight, | |
longImageWidth, | |
shortImageWidth, | |
singleImageWidth, | |
setImages, | |
showCancel, | |
previewVisibility, | |
toggleVisibility, | |
showPreview | |
}) => { | |
return number ? ( | |
number == 1 ? ( | |
<OneTile | |
images={images} | |
longImageHeight={longImageHeight} | |
singleImageWidth={singleImageWidth} | |
setImages={setImages} | |
showCancel={showCancel} | |
previewVisibility={previewVisibility} | |
toggleVisibility={toggleVisibility} | |
showPreview={showPreview} | |
/> | |
) : number == 2 ? ( | |
<TwoTiles | |
images={images} | |
longImageHeight={longImageHeight} | |
longImageWidth={longImageWidth} | |
setImages={setImages} | |
showCancel={showCancel} | |
previewVisibility={previewVisibility} | |
toggleVisibility={toggleVisibility} | |
showPreview={showPreview} | |
/> | |
) : number == 3 ? ( | |
<ThreeTiles | |
images={images} | |
longImageHeight={longImageHeight} | |
longImageWidth={longImageWidth} | |
shortImageHeight={shortImageHeight} | |
shortImageWidth={shortImageWidth} | |
setImages={setImages} | |
showCancel={showCancel} | |
previewVisibility={previewVisibility} | |
toggleVisibility={toggleVisibility} | |
showPreview={showPreview} | |
/> | |
) : ( | |
<FourTiles | |
images={images} | |
shortImageHeight={shortImageHeight} | |
shortImageWidth={shortImageWidth} | |
setImages={setImages} | |
showCancel={showCancel} | |
previewVisibility={previewVisibility} | |
toggleVisibility={toggleVisibility} | |
showPreview={showPreview} | |
/> | |
) | |
) : null; | |
}; | |
const styles = StyleSheet.create({ | |
container: { | |
flexDirection: 'row', | |
alignItems: 'center', | |
justifyContent: 'center' | |
}, | |
gutter: { | |
margin: 3 | |
}, | |
remove: { | |
height: 30, | |
width: 30, | |
borderRadius: 15, | |
backgroundColor: 'rgba(0,0,0,0.5)', | |
alignItems: 'center', | |
justifyContent: 'center' | |
}, | |
removeContainer: { position: 'absolute', top: 5, right: 5 } | |
}); | |
export default ImageGrid; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment