Saves image on long press (#83)
* 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
GitHub
parent
adf328b50c
commit
eb33c3fa81
23 changed files with 1568 additions and 46 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
1
src/view/com/util/images/constants.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const DELAY_PRESS_IN = 500
|
||||
Loading…
Add table
Add a link
Reference in a new issue