diff options
Diffstat (limited to 'src/view/com/util')
| -rw-r--r-- | src/view/com/util/PostEmbeds.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/util/images/AutoSizedImage.tsx | 11 | ||||
| -rw-r--r-- | src/view/com/util/images/ImageLayoutGrid.tsx | 71 | ||||
| -rw-r--r-- | src/view/com/util/images/constants.ts | 1 |
4 files changed, 69 insertions, 23 deletions
diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx index e3fca2538..1d8df038b 100644 --- a/src/view/com/util/PostEmbeds.tsx +++ b/src/view/com/util/PostEmbeds.tsx @@ -10,6 +10,7 @@ import {ImagesLightbox} from '../../../state/models/shell-ui' import {useStores} from '../../../state' import {usePalette} from '../../lib/hooks/usePalette' import {gradients} from '../../lib/styles' +import {saveImageModal} from '../../../lib/images' type Embed = | AppBskyEmbedImages.Presented @@ -31,6 +32,10 @@ export function PostEmbeds({ const openLightbox = (index: number) => { store.shell.openLightbox(new ImagesLightbox(uris, index)) } + const onLongPress = (index: number) => { + saveImageModal({uri: uris[index]}) + } + if (embed.images.length === 4) { return ( <View style={[styles.imagesContainer, style]}> @@ -38,6 +43,7 @@ export function PostEmbeds({ type="four" uris={embed.images.map(img => img.thumb)} onPress={openLightbox} + onLongPress={onLongPress} /> </View> ) @@ -48,6 +54,7 @@ export function PostEmbeds({ type="three" uris={embed.images.map(img => img.thumb)} onPress={openLightbox} + onLongPress={onLongPress} /> </View> ) @@ -58,6 +65,7 @@ export function PostEmbeds({ type="two" uris={embed.images.map(img => img.thumb)} onPress={openLightbox} + onLongPress={onLongPress} /> </View> ) @@ -67,6 +75,7 @@ export function PostEmbeds({ <AutoSizedImage uri={embed.images[0].thumb} onPress={() => openLightbox(0)} + onLongPress={() => onLongPress(0)} containerStyle={styles.singleImage} /> </View> diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 648bb957f..cedd3bc90 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -5,13 +5,14 @@ import { LayoutChangeEvent, StyleProp, StyleSheet, - TouchableWithoutFeedback, + TouchableOpacity, View, ViewStyle, } from 'react-native' import {Text} from '../text/Text' import {useTheme} from '../../../lib/ThemeContext' import {usePalette} from '../../../lib/hooks/usePalette' +import {DELAY_PRESS_IN} from './constants' const MAX_HEIGHT = 300 @@ -23,6 +24,7 @@ interface Dim { export function AutoSizedImage({ uri, onPress, + onLongPress, style, containerStyle, }: { @@ -80,7 +82,10 @@ export function AutoSizedImage({ return ( <View style={style}> - <TouchableWithoutFeedback onPress={onPress}> + <TouchableOpacity + onPress={onPress} + onLongPress={onLongPress} + delayPressIn={DELAY_PRESS_IN}> {error ? ( <View style={[styles.errorContainer, errPal.view, containerStyle]}> <Text style={errPal.text}>{error}</Text> @@ -99,7 +104,7 @@ export function AutoSizedImage({ onLayout={onLayout} /> )} - </TouchableWithoutFeedback> + </TouchableOpacity> </View> ) } diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 8acab7109..dd0ea3775 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -5,14 +5,15 @@ import { LayoutChangeEvent, StyleProp, StyleSheet, - TouchableWithoutFeedback, + TouchableOpacity, View, ViewStyle, } from 'react-native' +import {DELAY_PRESS_IN} from './constants' interface Dim { width: number - height: number + height: numberPressIn } export type ImageLayoutGridType = 'two' | 'three' | 'four' @@ -21,6 +22,7 @@ export function ImageLayoutGrid({ type, uris, onPress, + onLongPress, style, }: { type: ImageLayoutGridType @@ -44,6 +46,7 @@ export function ImageLayoutGrid({ type={type} uris={uris} onPress={onPress} + onLongPress={onLongPress} containerInfo={containerInfo} /> ) : undefined} @@ -55,6 +58,7 @@ function ImageLayoutGridInner({ type, uris, onPress, + onLongPress, containerInfo, }: { type: ImageLayoutGridType @@ -84,31 +88,46 @@ function ImageLayoutGridInner({ if (type === 'two') { return ( <View style={styles.flexRow}> - <TouchableWithoutFeedback onPress={() => onPress?.(0)}> + <TouchableOpacity + delayPressIn={DELAY_PRESS_IN} + onPress={() => onPress?.(0)} + onLongPress={() => onLongPress(0)}> <Image source={{uri: uris[0]}} style={size1} /> - </TouchableWithoutFeedback> + </TouchableOpacity> <View style={styles.wSpace} /> - <TouchableWithoutFeedback onPress={() => onPress?.(1)}> + <TouchableOpacity + delayPressIn={DELAY_PRESS_IN} + onPress={() => onPress?.(1)} + onLongPress={() => onLongPress(1)}> <Image source={{uri: uris[1]}} style={size1} /> - </TouchableWithoutFeedback> + </TouchableOpacity> </View> ) } if (type === 'three') { return ( <View style={styles.flexRow}> - <TouchableWithoutFeedback onPress={() => onPress?.(0)}> + <TouchableOpacity + delayPressIn={DELAY_PRESS_IN} + onPress={() => onPress?.(0)} + onLongPress={() => onLongPress(0)}> <Image source={{uri: uris[0]}} style={size2} /> - </TouchableWithoutFeedback> + </TouchableOpacity> <View style={styles.wSpace} /> <View> - <TouchableWithoutFeedback onPress={() => onPress?.(1)}> + <TouchableOpacity + delayPressIn={DELAY_PRESS_IN} + onPress={() => onPress?.(1)} + onLongPress={() => onLongPress(1)}> <Image source={{uri: uris[1]}} style={size1} /> - </TouchableWithoutFeedback> + </TouchableOpacity> <View style={styles.hSpace} /> - <TouchableWithoutFeedback onPress={() => onPress?.(2)}> + <TouchableOpacity + delayPressIn={DELAY_PRESS_IN} + onPress={() => onPress?.(2)} + onLongPress={() => onLongPress(2)}> <Image source={{uri: uris[2]}} style={size1} /> - </TouchableWithoutFeedback> + </TouchableOpacity> </View> </View> ) @@ -117,23 +136,35 @@ function ImageLayoutGridInner({ return ( <View style={styles.flexRow}> <View> - <TouchableWithoutFeedback onPress={() => onPress?.(0)}> + <TouchableOpacity + delayPressIn={DELAY_PRESS_IN} + onPress={() => onPress?.(0)} + onLongPress={() => onLongPress(0)}> <Image source={{uri: uris[0]}} style={size1} /> - </TouchableWithoutFeedback> + </TouchableOpacity> <View style={styles.hSpace} /> - <TouchableWithoutFeedback onPress={() => onPress?.(1)}> + <TouchableOpacity + delayPressIn={DELAY_PRESS_IN} + onPress={() => onPress?.(1)} + onLongPress={() => onLongPress(1)}> <Image source={{uri: uris[1]}} style={size1} /> - </TouchableWithoutFeedback> + </TouchableOpacity> </View> <View style={styles.wSpace} /> <View> - <TouchableWithoutFeedback onPress={() => onPress?.(2)}> + <TouchableOpacity + delayPressIn={DELAY_PRESS_IN} + onPress={() => onPress?.(2)} + onLongPress={() => onLongPress(2)}> <Image source={{uri: uris[2]}} style={size1} /> - </TouchableWithoutFeedback> + </TouchableOpacity> <View style={styles.hSpace} /> - <TouchableWithoutFeedback onPress={() => onPress?.(3)}> + <TouchableOpacity + delayPressIn={DELAY_PRESS_IN} + onPress={() => onPress?.(3)} + onLongPress={() => onLongPress(3)}> <Image source={{uri: uris[3]}} style={size1} /> - </TouchableWithoutFeedback> + </TouchableOpacity> </View> </View> ) diff --git a/src/view/com/util/images/constants.ts b/src/view/com/util/images/constants.ts new file mode 100644 index 000000000..cb2c26cea --- /dev/null +++ b/src/view/com/util/images/constants.ts @@ -0,0 +1 @@ +export const DELAY_PRESS_IN = 500 |