Paul Frazee
874a528fcc
* WIP - adding expo * WIP - adding expo 2 * Fix tsc * Finish adding expo * Disable the 'require cycle' warning * Tweak plist * Modify some dependency versions to make expo happy * Fix icon fill * Get Web compiling for expo * 1.7 * Switch to react-navigation in expo2 (#287) * WIP Switch to react-navigation * WIP Switch to react-navigation 2 * WIP Switch to react-navigation 3 * Convert all screens to react navigation * Update BottomBar for react navigation * Update mobile menu to be react-native drawer * Fixes to drawer and bottombar * Factor out some helpers * Replace the navigation model with react-navigation * Restructure the shell folder and fix the header positioning * Restore the error boundary * Fix tsc * Implement not-found page * Remove react-native-gesture-handler (no longer used) * Handle notifee card presses * Handle all navigations from the state layer * Fix drawer behaviors * Fix two linking issues * Switch to our react-native-progress fork to fix an svg rendering issue * Get Web working with react-navigation * Refactor routes and navigation for a bit more clarity * Remove dead code * Rework Web shell to left/right nav to make this easier * Fix ViewHeader for desktop web * Hide profileheader back btn on desktop web * Move the compose button to the left nav * Implement reply prompt in threads for desktop web * Composer refactors * Factor out all platform-specific text input behaviors from the composer * Small fix * Update the web build to use tiptap for the composer * Tune up the mention autocomplete dropdown * Simplify the default avatar and banner * Fixes to link cards in web composer * Fix dropdowns on web * Tweak load latest on desktop * Add web beta message and feedback link * Fix up links in desktop web
97 lines
2.2 KiB
TypeScript
97 lines
2.2 KiB
TypeScript
import React, {useCallback} from 'react'
|
|
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
import Image from 'view/com/util/images/Image'
|
|
import {colors} from 'lib/styles'
|
|
|
|
export const SelectedPhotos = ({
|
|
selectedPhotos,
|
|
onSelectPhotos,
|
|
}: {
|
|
selectedPhotos: string[]
|
|
onSelectPhotos: (v: string[]) => void
|
|
}) => {
|
|
const imageStyle =
|
|
selectedPhotos.length === 1
|
|
? styles.image250
|
|
: selectedPhotos.length === 2
|
|
? styles.image175
|
|
: styles.image85
|
|
|
|
const handleRemovePhoto = useCallback(
|
|
item => {
|
|
onSelectPhotos(selectedPhotos.filter(filterItem => filterItem !== item))
|
|
},
|
|
[selectedPhotos, onSelectPhotos],
|
|
)
|
|
|
|
return selectedPhotos.length !== 0 ? (
|
|
<View testID="selectedPhotosView" style={styles.gallery}>
|
|
{selectedPhotos.length !== 0 &&
|
|
selectedPhotos.map((item, index) => (
|
|
<View
|
|
key={`selected-image-${index}`}
|
|
style={[styles.imageContainer, imageStyle]}>
|
|
<TouchableOpacity
|
|
testID="removePhotoButton"
|
|
onPress={() => handleRemovePhoto(item)}
|
|
style={styles.removePhotoButton}>
|
|
<FontAwesomeIcon
|
|
icon="xmark"
|
|
size={16}
|
|
style={{color: colors.white}}
|
|
/>
|
|
</TouchableOpacity>
|
|
|
|
<Image
|
|
testID="selectedPhotoImage"
|
|
style={[styles.image, imageStyle]}
|
|
source={{uri: item}}
|
|
/>
|
|
</View>
|
|
))}
|
|
</View>
|
|
) : null
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
gallery: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
marginTop: 16,
|
|
},
|
|
imageContainer: {
|
|
margin: 2,
|
|
},
|
|
image: {
|
|
resizeMode: 'cover',
|
|
borderRadius: 8,
|
|
},
|
|
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,
|
|
borderColor: colors.gray4,
|
|
borderWidth: 0.5,
|
|
},
|
|
})
|