aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/common/Draggable.tsx29
-rw-r--r--src/components/common/MomentTags.tsx17
-rw-r--r--src/components/moments/MomentPostContent.tsx40
-rw-r--r--src/screens/profile/CaptionScreen.tsx1
-rw-r--r--src/types/types.ts1
5 files changed, 63 insertions, 25 deletions
diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index edd29b78..1253fed4 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -59,7 +59,7 @@ interface IProps {
minY?: number;
maxX?: number;
maxY?: number;
- onDragStart?: () => void;
+ onDragStart?: () => number;
}
export default function Draggable(props: IProps) {
@@ -103,8 +103,8 @@ export default function Draggable(props: IProps) {
// Whether we're currently dragging or not
const isDragging = React.useRef(false);
- // const [zIndex, setZIndex] = React.useState(z);
- const zIndex = z;
+ const [zIndex, setZIndex] = React.useState(z);
+ // const zIndex = z;
const getBounds = React.useCallback(() => {
const left = x + offsetFromStart.current.x;
@@ -147,18 +147,17 @@ export default function Draggable(props: IProps) {
[onDragRelease, shouldReverse, onRelease, reversePosition],
);
- const onPanResponderGrant = React.useCallback(
- (_: GestureResponderEvent) => {
- startBounds.current = getBounds();
- isDragging.current = true;
- if (!shouldReverse) {
- pan.current.setOffset(offsetFromStart.current);
- pan.current.setValue({x: 0, y: 0});
- }
- onDragStart();
- },
- [getBounds, shouldReverse],
- );
+ const onPanResponderGrant = (_: GestureResponderEvent) => {
+ startBounds.current = getBounds();
+ isDragging.current = true;
+ if (!shouldReverse) {
+ pan.current.setOffset(offsetFromStart.current);
+ pan.current.setValue({x: 0, y: 0});
+ }
+ if (onDragStart) {
+ setZIndex(onDragStart());
+ }
+ };
const handleOnDrag = React.useCallback(
(e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 04b0558b..9a6cd08b 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -19,6 +19,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
const [offset, setOffset] = useState([0, 0]);
const [curStart, setCurStart] = useState([0, 0]);
const [imageDimensions, setImageDimensions] = useState([0, 0]);
+ const [maxZIndex, setMaxZIndex] = useState(1);
useEffect(() => {
imageRef.current.measure((fx, fy, width, height, px, py) => {
@@ -34,17 +35,25 @@ const MomentTags: React.FC<MomentTagsProps> = ({
<>
{tags.map((tag) => (
<Draggable
+ key={tag.user.id}
x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+ z={maxZIndex + 1}
minX={offset[0]}
minY={offset[1]}
maxX={imageDimensions[0] + offset[0]}
maxY={imageDimensions[1] + offset[1]}
- onDragStart={() => null}>
+ onDragStart={() => {
+ const currZIndex = maxZIndex;
+ setMaxZIndex(currZIndex + 1);
+ return currZIndex;
+ }}>
<TaggDraggable
taggedUser={tag.user}
editingView={true}
- deleteFromList={() => deleteFromList(tag.user)}
+ deleteFromList={() => {
+ deleteFromList(tag.user);
+ }}
setStart={setCurStart}
/>
</Draggable>
@@ -54,13 +63,15 @@ const MomentTags: React.FC<MomentTagsProps> = ({
<>
{tags.map((tag) => (
<Draggable
+ key={tag.user.id}
x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+ z={tag.z}
minX={offset[0]}
minY={offset[1]}
maxX={imageDimensions[0] + offset[0]}
maxY={imageDimensions[1] + offset[1]}
- onDragStart={() => null}>
+ disabled={true}>
<TaggDraggable
taggedUser={tag.user}
editingView={editing}
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index e702cb68..df7f4e68 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,6 +1,8 @@
import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useRef, useState} from 'react';
import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
+import Animated, {Easing} from 'react-native-reanimated';
import {useDispatch, useStore} from 'react-redux';
import {getCommentsCount, loadMomentTags} from '../../services';
import {RootState} from '../../store/rootReducer';
@@ -58,15 +60,36 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
fetchCommentsCount();
}, [dateTime, momentId]);
+ useEffect(() => {
+ const fade = async () => {
+ Animated.timing(fadeValue, {
+ toValue: 1,
+ duration: 250,
+ easing: Easing.linear,
+ }).start();
+ };
+ fade();
+ }, [fadeValue]);
+
return (
<View style={[styles.container, style]}>
- <Image
- ref={imageRef}
- style={styles.image}
- source={{uri: pathHash}}
- resizeMode={'cover'}
- />
- <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+ <TouchableWithoutFeedback
+ onPress={() => {
+ setVisible(!visible);
+ setFadeValue(new Animated.Value(0));
+ }}>
+ <Image
+ ref={imageRef}
+ style={styles.image}
+ source={{uri: pathHash}}
+ resizeMode={'cover'}
+ />
+ </TouchableWithoutFeedback>
+ {visible && (
+ <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
+ <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+ </Animated.View>
+ )}
<View style={styles.footerContainer}>
<CommentsCount
commentsCount={comments_count}
@@ -95,6 +118,9 @@ const styles = StyleSheet.create({
aspectRatio: 1,
marginBottom: '3%',
},
+ tapTag: {
+ position: 'absolute',
+ },
footerContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 188ccc1f..731e001c 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -118,6 +118,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
taggedUsers.map((u, index) => ({
x: index * 50 - 150,
y: index * 50 - 150,
+ z: 1,
user_id: u.id,
})),
);
diff --git a/src/types/types.ts b/src/types/types.ts
index e957483b..b294e3f1 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -123,6 +123,7 @@ export interface MomentTagType {
user: ProfilePreviewType;
x: number;
y: number;
+ z: number;
}
export interface CommentBaseType {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:41:41 +0000