zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Saves image on long press (#83)

Browse source 
* Saves image on long press

* Adds save on long press

* Forking lightbox

* move to wrapper only to the bottom sheet to reduce impact of this change

* lint

* lint

* lint

* Use official `share` API

* Clean up cache after download

* comment

* comment

* Reduce swipe close velocity

* Updates per feedback

* lint

* bugfix

* Adds delayed press-in for TouchableOpacity
This commit is contained in:
Aryan Goharzad 2023-01-25 18:25:34 -05:00 • committed by GitHub
parent adf328b50c
commit eb33c3fa81
23 changed files with 1568 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/view/com/util/images/AutoSizedImage.tsx
View file

@ -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>
)
}

71
src/view/com/util/images/ImageLayoutGrid.tsx
View file

@ -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>
)

1
src/view/com/util/images/constants.ts Normal file
View file

@ -0,0 +1 @@
export const DELAY_PRESS_IN = 500