diff options
Diffstat (limited to 'src/view/com/composer/PhotoCarouselPicker.tsx')
| -rw-r--r-- | src/view/com/composer/PhotoCarouselPicker.tsx | 191 |
1 files changed, 46 insertions, 145 deletions
diff --git a/src/view/com/composer/PhotoCarouselPicker.tsx b/src/view/com/composer/PhotoCarouselPicker.tsx index f3c3b89c0..17be8a5f5 100644 --- a/src/view/com/composer/PhotoCarouselPicker.tsx +++ b/src/view/com/composer/PhotoCarouselPicker.tsx @@ -1,11 +1,5 @@ import React from 'react' -import { - Image, - StyleSheet, - TouchableOpacity, - View, - ScrollView, -} from 'react-native' +import {Image, StyleSheet, TouchableOpacity, ScrollView} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {colors} from '../../lib/styles' import {openPicker, openCamera} from 'react-native-image-crop-picker' @@ -22,148 +16,60 @@ export const PhotoCarouselPicker = observer(function PhotoCarouselPicker({ inputText: string localPhotos: any }) { - return ( - <> - {selectedPhotos.length !== 0 && ( - <View style={styles.selectedImageContainer}> - {selectedPhotos.length !== 0 && - selectedPhotos.map((item, index) => ( - <View - key={`selected-image-${index}`} - style={[ - styles.selectedImage, - selectedPhotos.length === 1 - ? styles.selectedImage250 - : selectedPhotos.length === 2 - ? styles.selectedImage175 - : styles.selectedImage85, - ]}> - <TouchableOpacity - onPress={() => { - setSelectedPhotos( - selectedPhotos.filter(filterItem => filterItem !== item), - ) - }} - style={styles.removePhotoButton}> - <FontAwesomeIcon - icon="xmark" - size={16} - style={{color: colors.white}} - /> - </TouchableOpacity> - - <Image - style={[ - styles.selectedImage, - selectedPhotos.length === 1 - ? styles.selectedImage250 - : selectedPhotos.length === 2 - ? styles.selectedImage175 - : styles.selectedImage85, - ]} - source={{uri: item}} - /> - </View> - ))} - </View> - )} - {localPhotos.photos != null && - inputText === '' && - selectedPhotos.length === 0 && ( - <ScrollView - horizontal - style={styles.photosContainer} - showsHorizontalScrollIndicator={false}> - <TouchableOpacity - style={[styles.galleryButton, styles.photo]} - onPress={() => { - openCamera({multiple: true, maxFiles: 4}).then() - }}> - <FontAwesomeIcon - icon="camera" - size={24} - style={{color: colors.blue3}} - /> - </TouchableOpacity> - {localPhotos.photos.map((item: any, index: number) => ( - <TouchableOpacity - key={`local-image-${index}`} - style={styles.photoButton} - onPress={() => { - setSelectedPhotos([item.node.image.uri, ...selectedPhotos]) - }}> - <Image - style={styles.photo} - source={{uri: item.node.image.uri}} - /> - </TouchableOpacity> - ))} - <TouchableOpacity - style={[styles.galleryButton, styles.photo]} - onPress={() => { - openPicker({multiple: true, maxFiles: 4}).then(items => { - setSelectedPhotos([ - ...items.reduce( - (accum, cur) => accum.concat(cur.sourceURL!), - [] as string[], - ), - ...selectedPhotos, - ]) - }) - }}> - <FontAwesomeIcon - icon="image" - style={{color: colors.blue3}} - size={24} - /> - </TouchableOpacity> - </ScrollView> - )} - <View style={styles.separator} /> - </> - ) + return localPhotos.photos != null && + inputText === '' && + selectedPhotos.length === 0 ? ( + <ScrollView + horizontal + style={styles.photosContainer} + showsHorizontalScrollIndicator={false}> + <TouchableOpacity + style={[styles.galleryButton, styles.photo]} + onPress={() => { + openCamera({multiple: true, maxFiles: 4}).then() + }}> + <FontAwesomeIcon + icon="camera" + size={24} + style={{color: colors.blue3}} + /> + </TouchableOpacity> + {localPhotos.photos.map((item: any, index: number) => ( + <TouchableOpacity + key={`local-image-${index}`} + style={styles.photoButton} + onPress={() => { + setSelectedPhotos([item.node.image.uri, ...selectedPhotos]) + }}> + <Image style={styles.photo} source={{uri: item.node.image.uri}} /> + </TouchableOpacity> + ))} + <TouchableOpacity + style={[styles.galleryButton, styles.photo]} + onPress={() => { + openPicker({multiple: true, maxFiles: 4}).then(items => { + setSelectedPhotos([ + ...items.reduce( + (accum, cur) => accum.concat(cur.sourceURL!), + [] as string[], + ), + ...selectedPhotos, + ]) + }) + }}> + <FontAwesomeIcon icon="image" style={{color: colors.blue3}} size={24} /> + </TouchableOpacity> + </ScrollView> + ) : null }) const styles = StyleSheet.create({ - selectedImageContainer: { - flex: 1, - flexDirection: 'row', - marginTop: 16, - }, - selectedImage: { - borderRadius: 8, - margin: 2, - }, - selectedImage250: { - width: 250, - height: 250, - }, - selectedImage175: { - width: 175, - height: 175, - }, - selectedImage85: { - width: 85, - height: 85, - }, photosContainer: { width: '100%', maxHeight: 96, padding: 8, overflow: 'hidden', }, - removePhotoButton: { - position: 'absolute', - top: 8, - right: 8, - width: 24, - height: 24, - borderRadius: 12, - alignItems: 'center', - justifyContent: 'center', - backgroundColor: colors.black, - zIndex: 1, - }, galleryButton: { borderWidth: 1, borderColor: colors.gray3, @@ -184,9 +90,4 @@ const styles = StyleSheet.create({ marginRight: 8, borderRadius: 16, }, - separator: { - borderBottomColor: 'black', - borderBottomWidth: StyleSheet.hairlineWidth, - width: '100%', - }, }) |