diff options
Diffstat (limited to 'src/view/com/util/images')
| -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 |
3 files changed, 60 insertions, 23 deletions
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 |