diff options
Diffstat (limited to 'src/view/com/composer/ComposePost.tsx')
| -rw-r--r-- | src/view/com/composer/ComposePost.tsx | 197 |
1 files changed, 28 insertions, 169 deletions
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index ce42ee17e..2f8c29e7c 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -9,13 +9,10 @@ import { TextInput, TouchableOpacity, View, - ScrollView, - Image, } from 'react-native' import LinearGradient from 'react-native-linear-gradient' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view' -import {UserLocalPhotosModel} from '../../../state/models/user-local-photos' import {Autocomplete} from './Autocomplete' import * as Toast from '../util/Toast' import ProgressCircle from '../util/ProgressCircle' @@ -26,7 +23,8 @@ 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 {openPicker, openCamera} from 'react-native-image-crop-picker' +import {PhotoCarouselPicker} from './PhotoCarouselPicker' +import {UserLocalPhotosModel} from '../../../state/models/user-local-photos' const MAX_TEXT_LENGTH = 256 const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH @@ -45,7 +43,8 @@ export const ComposePost = observer(function ComposePost({ const [isProcessing, setIsProcessing] = useState(false) const [error, setError] = useState('') const [text, setText] = useState('') - const [photoUris, setPhotoUris] = useState<string[]>([]) + const [selectedPhotos, setSelectedPhotos] = useState<string[]>([]) + const autocompleteView = useMemo<UserAutocompleteViewModel>( () => new UserAutocompleteViewModel(store), [], @@ -58,6 +57,11 @@ export const ComposePost = observer(function ComposePost({ useEffect(() => { autocompleteView.setup() }) + + useEffect(() => { + localPhotos.setup() + }, []) + useEffect(() => { // HACK // wait a moment before focusing the input to resolve some layout bugs with the keyboard-avoiding-view @@ -75,10 +79,6 @@ export const ComposePost = observer(function ComposePost({ } }, [textInput.current]) - useEffect(() => { - localPhotos.setup() - }, []) - const onChangeText = (newText: string) => { setText(newText) @@ -207,7 +207,13 @@ export const ComposePost = observer(function ComposePost({ </View> </View> ) : undefined} - <View style={styles.textInputLayout}> + <View + style={[ + styles.textInputLayout, + selectedPhotos.length !== 0 + ? styles.textInputLayoutWithPhoto + : styles.textInputLayoutWithoutPhoto, + ]}> <UserAvatar handle={store.me.handle || ''} displayName={store.me.displayName} @@ -223,100 +229,12 @@ export const ComposePost = observer(function ComposePost({ {textDecorated} </TextInput> </View> - {photoUris.length !== 0 && ( - <View style={styles.selectedImageContainer}> - {photoUris.length !== 0 && - photoUris.map((item, index) => ( - <View - key={`selected-image-${index}`} - style={[ - styles.selectedImage, - photoUris.length === 1 - ? styles.selectedImage250 - : photoUris.length === 2 - ? styles.selectedImage175 - : styles.selectedImage85, - ]}> - <TouchableOpacity - onPress={() => { - setPhotoUris( - photoUris.filter(filterItem => filterItem !== item), - ) - }} - style={styles.removePhotoButton}> - <FontAwesomeIcon - icon="xmark" - size={16} - style={{color: colors.white}} - /> - </TouchableOpacity> - - <Image - style={[ - styles.selectedImage, - photoUris.length === 1 - ? styles.selectedImage250 - : photoUris.length === 2 - ? styles.selectedImage175 - : styles.selectedImage85, - ]} - source={{uri: item}} - /> - </View> - ))} - </View> - )} - {localPhotos.photos != null && text === '' && photoUris.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, index) => ( - <TouchableOpacity - key={`local-image-${index}`} - style={styles.photoButton} - onPress={() => { - setPhotoUris([item.node.image.uri, ...photoUris]) - }}> - <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 => { - setPhotoUris([ - ...items.reduce( - (accum, cur) => accum.concat(cur.sourceURL!), - [] as string[], - ), - ...photoUris, - ]) - }) - }}> - <FontAwesomeIcon - icon="image" - style={{color: colors.blue3}} - size={24} - /> - </TouchableOpacity> - </ScrollView> - )} - <View style={styles.separator} /> + <PhotoCarouselPicker + selectedPhotos={selectedPhotos} + setSelectedPhotos={setSelectedPhotos} + localPhotos={localPhotos} + inputText={text} + /> <View style={[s.flexRow, s.pt10, s.pb10, s.pr5, styles.contentCenter]}> <View style={s.flex1} /> <Text style={[s.mr10, {color: progressColor}]}> @@ -390,9 +308,14 @@ const styles = StyleSheet.create({ justifyContent: 'center', marginRight: 5, }, + textInputLayoutWithPhoto: { + flexWrap: 'wrap', + }, + textInputLayoutWithoutPhoto: { + flex: 1, + }, textInputLayout: { flexDirection: 'row', - flex: 1, borderTopWidth: 1, borderTopColor: colors.gray2, paddingTop: 16, @@ -416,68 +339,4 @@ const styles = StyleSheet.create({ paddingRight: 8, }, contentCenter: {alignItems: 'center'}, - selectedImageContainer: { - flex: 10, - flexDirection: 'row', - }, - 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, - alignItems: 'center', - justifyContent: 'center', - }, - photoButton: { - width: 75, - height: 75, - marginRight: 8, - borderWidth: 1, - borderRadius: 16, - borderColor: colors.gray3, - }, - photo: { - width: 75, - height: 75, - marginRight: 8, - borderRadius: 16, - }, - separator: { - borderBottomColor: 'black', - borderBottomWidth: StyleSheet.hairlineWidth, - width: '110%', - marginLeft: -16, - }, }) |