aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/common/MomentTags.tsx71
-rw-r--r--src/components/moments/TagFriendsFoooter.tsx46
-rw-r--r--src/components/profile/ProfilePreview.tsx4
-rw-r--r--src/components/taggs/TaggDraggable.tsx10
4 files changed, 95 insertions, 36 deletions
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 9a6cd08b..75a81814 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -17,27 +17,56 @@ const MomentTags: React.FC<MomentTagsProps> = ({
deleteFromList,
}) => {
const [offset, setOffset] = useState([0, 0]);
- const [curStart, setCurStart] = useState([0, 0]);
+ const [curStart, setCurStart] = useState({});
const [imageDimensions, setImageDimensions] = useState([0, 0]);
const [maxZIndex, setMaxZIndex] = useState(1);
+ const editCurStart = (idName: number, coords: number[]) => {
+ setCurStart((prev) => ({...prev, [idName]: coords}));
+ };
+
useEffect(() => {
- imageRef.current.measure((fx, fy, width, height, px, py) => {
- setOffset([px, py]);
- setImageDimensions([width, height]);
- });
+ setTimeout(() => {
+ imageRef.current.measure(
+ (
+ fx: number,
+ fy: number,
+ width: number,
+ height: number,
+ _x: number,
+ _y: number,
+ ) => {
+ setOffset([fx, fy]);
+ setImageDimensions([width, height]);
+ },
+ );
+ }, 250);
}, []);
+ useEffect(() => {}, [curStart]);
+
if (!tags) {
return null;
}
return editing && deleteFromList ? (
<>
- {tags.map((tag) => (
+ {tags.map((tag, index) => (
<Draggable
key={tag.user.id}
- x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
- y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+ x={
+ curStart[index]
+ ? (imageDimensions[0] * tag.x) / 100 +
+ offset[0] -
+ curStart[index][0] / 2
+ : (imageDimensions[0] * tag.x) / 100 + offset[0]
+ }
+ y={
+ curStart[index]
+ ? (imageDimensions[1] * tag.y) / 100 +
+ offset[1] -
+ curStart[index][1] / 2
+ : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1]
+ }
z={maxZIndex + 1}
minX={offset[0]}
minY={offset[1]}
@@ -51,21 +80,31 @@ const MomentTags: React.FC<MomentTagsProps> = ({
<TaggDraggable
taggedUser={tag.user}
editingView={true}
- deleteFromList={() => {
- deleteFromList(tag.user);
- }}
- setStart={setCurStart}
+ deleteFromList={() => deleteFromList(tag.user)}
+ setStart={(coords: number[]) => editCurStart(index, coords)}
/>
</Draggable>
))}
</>
) : (
<>
- {tags.map((tag) => (
+ {tags.map((tag, index) => (
<Draggable
key={tag.user.id}
- x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
- y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+ x={
+ curStart[index]
+ ? (imageDimensions[0] * tag.x) / 100 +
+ offset[0] -
+ curStart[index][0] / 2
+ : (imageDimensions[0] * tag.x) / 100 + offset[0]
+ }
+ y={
+ curStart[index]
+ ? (imageDimensions[1] * tag.y) / 100 +
+ offset[1] -
+ curStart[index][1] / 2
+ : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1]
+ }
z={tag.z}
minX={offset[0]}
minY={offset[1]}
@@ -76,7 +115,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
taggedUser={tag.user}
editingView={editing}
deleteFromList={() => null}
- setStart={setCurStart}
+ setStart={(coords: number[]) => editCurStart(index, coords)}
/>
</Draggable>
))}
diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
index 7b109877..2a844680 100644
--- a/src/components/moments/TagFriendsFoooter.tsx
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -1,9 +1,16 @@
import {useNavigation} from '@react-navigation/native';
import React, {Dispatch, SetStateAction} from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {
+ Image,
+ ScrollView,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from 'react-native';
import {ProfilePreview} from '..';
import {ProfilePreviewType, ScreenType} from '../../types';
-import {normalize} from '../../utils/layouts';
+import {normalize, SCREEN_HEIGHT} from '../../utils/layouts';
interface TagFriendsFooterProps {
taggedUsers: ProfilePreviewType[];
@@ -80,10 +87,12 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
<>
<TagFriendsTitle />
<View style={styles.tagFriendsContainer}>
- {taggedUsers.map((user) => (
- <TaggedUser {...user} />
- ))}
- {taggedUsers.length !== 0 && <TaggMoreButton />}
+ <ScrollView horizontal>
+ {taggedUsers.map((user) => (
+ <TaggedUser {...user} />
+ ))}
+ {taggedUsers.length !== 0 && <TaggMoreButton />}
+ </ScrollView>
</View>
</>
);
@@ -99,10 +108,9 @@ const styles = StyleSheet.create({
fontWeight: '600',
},
tagFriendsContainer: {
- flexDirection: 'row',
- marginTop: '3%',
- flexWrap: 'wrap',
- justifyContent: 'flex-start',
+ height: SCREEN_HEIGHT * 0.1,
+ marginTop: 2,
+ marginBottom: 5,
},
tagMoreLabel: {
fontWeight: '500',
@@ -111,7 +119,6 @@ const styles = StyleSheet.create({
letterSpacing: normalize(0.2),
color: 'white',
textAlign: 'center',
- marginVertical: '5%',
},
closeIconContainer: {
width: 20,
@@ -120,14 +127,25 @@ const styles = StyleSheet.create({
zIndex: 1,
},
tagMoreContainer: {
- flexDirection: 'column',
+ width: 60,
alignItems: 'center',
+ justifyContent: 'flex-start',
+ marginTop: -12,
+ },
+ tagMoreIcon: {
+ width: 38,
+ height: 38,
+ marginTop: 13,
+ marginBottom: '10%',
+ },
+ taggedUserContainer: {
+ marginTop: -12,
},
- tagMoreIcon: {width: 38, height: 38, top: -2},
- taggedUserContainer: {flexDirection: 'row-reverse'},
closeIcon: {
width: 20,
height: 20,
+ left: 15,
+ top: 10,
},
tagFriendsTitleContainer: {
flexDirection: 'row',
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 88c075e2..dd93a5fd 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -377,10 +377,8 @@ const styles = StyleSheet.create({
},
tagSelectionContainer: {
width: 60,
- flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start',
- margin: '1%',
},
tagSelectionAvatar: {
width: 34,
@@ -389,7 +387,7 @@ const styles = StyleSheet.create({
},
tagSelectionNameContainer: {
width: '100%',
- marginVertical: '10%',
+ marginVertical: normalize(5),
},
tagSelectionUsername: {
fontWeight: '500',
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 55f8162b..3dd5f230 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -35,9 +35,13 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
const draggableRef = useRef(null);
useEffect(() => {
- draggableRef.current.measure((width: number, height: number) => {
- setStart([width, height]);
- });
+ setTimeout(() => {
+ draggableRef.current.measure(
+ (_1: number, _2: number, width: number, height: number) => {
+ setStart([width, height]);
+ },
+ );
+ }, 250);
}, []);
const user: UserType = {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 12:05:24 +0000