From fb461c034472bae891ff3f99cc0133bfd7a8fd22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreiro?= Date: Tue, 29 Nov 2022 15:35:49 +0000 Subject: [PATCH] further refactoring code into different components --- src/view/com/composer/ComposePost.tsx | 27 ++- src/view/com/composer/PhotoCarouselPicker.tsx | 191 +++++------------- src/view/com/composer/SelectedPhoto.tsx | 83 ++++++++ 3 files changed, 147 insertions(+), 154 deletions(-) create mode 100644 src/view/com/composer/SelectedPhoto.tsx diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index 2f8c29e7c9..114586f478 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -23,8 +23,9 @@ import * as apilib from '../../../state/lib/api' import {ComposerOpts} from '../../../state/models/shell-ui' import {s, colors, gradients} from '../../lib/styles' import {detectLinkables} from '../../../lib/strings' -import {PhotoCarouselPicker} from './PhotoCarouselPicker' import {UserLocalPhotosModel} from '../../../state/models/user-local-photos' +import {PhotoCarouselPicker} from './PhotoCarouselPicker' +import {SelectedPhoto} from './SelectedPhoto' const MAX_TEXT_LENGTH = 256 const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH @@ -60,7 +61,7 @@ export const ComposePost = observer(function ComposePost({ useEffect(() => { localPhotos.setup() - }, []) + }, [localPhotos]) useEffect(() => { // HACK @@ -130,6 +131,10 @@ export const ComposePost = observer(function ComposePost({ const canPost = text.length <= MAX_TEXT_LENGTH const progressColor = text.length > DANGER_TEXT_LENGTH ? '#e60000' : undefined + const selectTextInputLayout = + selectedPhotos.length !== 0 + ? styles.textInputLayoutWithPhoto + : styles.textInputLayoutWithoutPhoto const textDecorated = useMemo(() => { let i = 0 @@ -207,13 +212,7 @@ export const ComposePost = observer(function ComposePost({ ) : undefined} - + + + @@ -339,4 +343,9 @@ const styles = StyleSheet.create({ paddingRight: 8, }, contentCenter: {alignItems: 'center'}, + separator: { + borderBottomColor: 'black', + borderBottomWidth: StyleSheet.hairlineWidth, + width: '100%', + }, }) diff --git a/src/view/com/composer/PhotoCarouselPicker.tsx b/src/view/com/composer/PhotoCarouselPicker.tsx index f3c3b89c06..17be8a5f5e 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 && ( - - {selectedPhotos.length !== 0 && - selectedPhotos.map((item, index) => ( - - { - setSelectedPhotos( - selectedPhotos.filter(filterItem => filterItem !== item), - ) - }} - style={styles.removePhotoButton}> - - - - - - ))} - - )} - {localPhotos.photos != null && - inputText === '' && - selectedPhotos.length === 0 && ( - - { - openCamera({multiple: true, maxFiles: 4}).then() - }}> - - - {localPhotos.photos.map((item: any, index: number) => ( - { - setSelectedPhotos([item.node.image.uri, ...selectedPhotos]) - }}> - - - ))} - { - openPicker({multiple: true, maxFiles: 4}).then(items => { - setSelectedPhotos([ - ...items.reduce( - (accum, cur) => accum.concat(cur.sourceURL!), - [] as string[], - ), - ...selectedPhotos, - ]) - }) - }}> - - - - )} - - - ) + return localPhotos.photos != null && + inputText === '' && + selectedPhotos.length === 0 ? ( + + { + openCamera({multiple: true, maxFiles: 4}).then() + }}> + + + {localPhotos.photos.map((item: any, index: number) => ( + { + setSelectedPhotos([item.node.image.uri, ...selectedPhotos]) + }}> + + + ))} + { + openPicker({multiple: true, maxFiles: 4}).then(items => { + setSelectedPhotos([ + ...items.reduce( + (accum, cur) => accum.concat(cur.sourceURL!), + [] as string[], + ), + ...selectedPhotos, + ]) + }) + }}> + + + + ) : 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%', - }, }) diff --git a/src/view/com/composer/SelectedPhoto.tsx b/src/view/com/composer/SelectedPhoto.tsx new file mode 100644 index 0000000000..1fe1474833 --- /dev/null +++ b/src/view/com/composer/SelectedPhoto.tsx @@ -0,0 +1,83 @@ +import React from 'react' +import {Image, StyleSheet, TouchableOpacity, View} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {colors} from '../../lib/styles' +import {observer} from 'mobx-react-lite' + +export const SelectedPhoto = ({ + selectedPhotos, + setSelectedPhotos, +}: { + selectedPhotos: string[] + setSelectedPhotos: React.Dispatch> +}) => { + const imageStyle = + selectedPhotos.length === 1 + ? styles.image250 + : selectedPhotos.length === 2 + ? styles.image175 + : styles.image85 + + return selectedPhotos.length !== 0 ? ( + + {selectedPhotos.length !== 0 && + selectedPhotos.map((item, index) => ( + + { + setSelectedPhotos( + selectedPhotos.filter(filterItem => filterItem !== item), + ) + }} + style={styles.removePhotoButton}> + + + + + + ))} + + ) : null +} + +const styles = StyleSheet.create({ + imageContainer: { + flex: 1, + flexDirection: 'row', + marginTop: 16, + }, + image: { + borderRadius: 8, + margin: 2, + }, + image250: { + width: 250, + height: 250, + }, + image175: { + width: 175, + height: 175, + }, + image85: { + width: 85, + height: 85, + }, + removePhotoButton: { + position: 'absolute', + top: 8, + right: 8, + width: 24, + height: 24, + borderRadius: 12, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: colors.black, + zIndex: 1, + }, +})