aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/Draggable.tsx34
-rw-r--r--src/components/common/MomentTags.tsx100
-rw-r--r--src/components/common/TaggUserSelectionCell.tsx37
-rw-r--r--src/components/moments/MomentPostContent.tsx2
-rw-r--r--src/components/moments/TagFriendsFoooter.tsx130
-rw-r--r--src/components/profile/ProfilePreview.tsx4
-rw-r--r--src/components/taggs/TaggDraggable.tsx17
7 files changed, 207 insertions, 117 deletions
diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index edd29b78..15ba3325 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;
@@ -136,7 +136,9 @@ export default function Draggable(props: IProps) {
isDragging.current = false;
if (onDragRelease) {
onDragRelease(e, gestureState);
- onRelease(e, true);
+ }
+ if (onRelease) {
+ onRelease(e, gestureState);
}
if (!shouldReverse) {
pan.current.flattenOffset();
@@ -147,18 +149,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) => {
@@ -194,6 +195,7 @@ export default function Draggable(props: IProps) {
listener: handleOnDrag,
useNativeDriver: false,
}),
+ onPanResponderRelease,
// onPanResponderRelease: (_) => {
// // console.log('end');
// // setZIndex(1);
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index defd4b4b..bdd1fbeb 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -1,4 +1,4 @@
-import React, {MutableRefObject, useEffect, useState} from 'react';
+import React, {createRef, MutableRefObject, useEffect, useState} from 'react';
import {MomentTagType, ProfilePreviewType} from '../../types';
import TaggDraggable from '../taggs/TaggDraggable';
import Draggable from './Draggable';
@@ -6,6 +6,7 @@ import Draggable from './Draggable';
interface MomentTagsProps {
editing: boolean;
tags: MomentTagType[];
+ setTags: (tag: MomentTagType[]) => void;
imageRef: MutableRefObject<null>;
deleteFromList?: (user: ProfilePreviewType) => void;
}
@@ -13,60 +14,127 @@ interface MomentTagsProps {
const MomentTags: React.FC<MomentTagsProps> = ({
editing,
tags,
+ setTags,
imageRef,
deleteFromList,
}) => {
const [offset, setOffset] = useState([0, 0]);
- const [curStart, setCurStart] = useState([0, 0]);
const [imageDimensions, setImageDimensions] = useState([0, 0]);
+ const [maxZIndex, setMaxZIndex] = useState(1);
+ const [draggableRefs, setDraggableRefs] = useState<
+ React.MutableRefObject<null>[]
+ >([]);
+
+ const updateTagPosition = (
+ ref: React.MutableRefObject<null>,
+ userId: string,
+ ) => {
+ if (ref !== null && ref.current !== null) {
+ ref.current.measure(
+ (
+ _fx: number, // location of ref relative to parent element
+ _fy: number,
+ _width: number,
+ _height: number,
+ px: number, // location of ref relative to entire screen
+ py: number,
+ ) => {
+ const x = ((px - offset[0]) / imageDimensions[0]) * 100;
+ const y = ((py - offset[1]) / imageDimensions[1]) * 100;
+ setTags(
+ tags.map((tag) =>
+ tag.user.id === userId
+ ? {
+ id: '',
+ x,
+ y,
+ z: maxZIndex - 1, // TODO: change this
+ user: tag.user,
+ }
+ : tag,
+ ),
+ );
+ },
+ );
+ }
+ };
+
+ useEffect(() => {
+ setDraggableRefs(tags.map((_) => createRef()));
+ }, [tags]);
useEffect(() => {
- imageRef.current.measure((fx, fy, width, height, px, py) => {
- setOffset([px, py]);
- setImageDimensions([width, height]);
- });
+ setTimeout(
+ () => {
+ imageRef.current.measure(
+ (
+ fx: number, // location of ref relative to parent element
+ fy: number,
+ width: number,
+ height: number,
+ _x: number, // location of ref relative to entire screen
+ _y: number,
+ ) => {
+ setOffset([fx, fy]);
+ setImageDimensions([width, height]);
+ },
+ );
+ },
+ editing ? 100 : 0,
+ );
}, []);
if (!tags) {
return null;
}
+
return editing && deleteFromList ? (
<>
- {tags.map((tag) => (
+ {tags.map((tag, index) => (
<Draggable
- x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
- y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+ key={tag.user.id + tag.x + tag.y}
+ x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
+ y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
+ z={tag.z}
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;
+ }}
+ onDragRelease={() =>
+ updateTagPosition(draggableRefs[index], tag.user.id)
+ }>
<TaggDraggable
+ draggableRef={draggableRefs[index]}
taggedUser={tag.user}
editingView={true}
deleteFromList={() => deleteFromList(tag.user)}
- setStart={setCurStart}
/>
</Draggable>
))}
</>
) : (
<>
- {tags.map((tag) => (
+ {tags.map((tag, index) => (
<Draggable
- x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
- y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+ key={tag.user.id}
+ x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
+ y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
+ z={tag.z}
minX={offset[0]}
minY={offset[1]}
maxX={imageDimensions[0] + offset[0]}
maxY={imageDimensions[1] + offset[1]}
- onDragStart={() => null}
disabled={true}>
<TaggDraggable
+ draggableRef={draggableRefs[index]}
taggedUser={tag.user}
editingView={editing}
deleteFromList={() => null}
- setStart={setCurStart}
/>
</Draggable>
))}
diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx
index 2ea1e4ce..72c98822 100644
--- a/src/components/common/TaggUserSelectionCell.tsx
+++ b/src/components/common/TaggUserSelectionCell.tsx
@@ -1,19 +1,20 @@
import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import {ProfilePreview} from '..';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import {MomentTagType, ProfilePreviewType, ScreenType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
import TaggRadioButton from './TaggRadioButton';
interface TaggUserSelectionCellProps {
item: ProfilePreviewType;
- selectedUsers: ProfilePreviewType[];
- setSelectedUsers: Function;
+ tags: MomentTagType[];
+ setTags: (tags: MomentTagType[]) => void;
}
const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
item,
- selectedUsers,
- setSelectedUsers,
+ tags,
+ setTags,
}) => {
const [pressed, setPressed] = useState<boolean>(false);
@@ -22,9 +23,7 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
*/
useEffect(() => {
const updatePressed = () => {
- const userSelected = selectedUsers.findIndex(
- (selectedUser) => item.id === selectedUser.id,
- );
+ const userSelected = tags.findIndex((tag) => item.id === tag.user.id);
setPressed(userSelected !== -1);
};
updatePressed();
@@ -37,18 +36,24 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
const handlePress = () => {
// Add to selected list of users
if (pressed === false) {
- setSelectedUsers([...selectedUsers, item]);
+ setTags([
+ ...tags,
+ {
+ id: '',
+ x: 50,
+ y: 50,
+ z: 1,
+ user: item,
+ },
+ ]);
}
// Remove item from selected list of users
else {
- const filteredSelection = selectedUsers.filter(
- (user) => user.id !== item.id,
- );
- setSelectedUsers(filteredSelection);
+ setTags(tags.filter((tag) => tag.user.id !== item.id));
}
};
return (
- <View style={styles.container}>
+ <TouchableWithoutFeedback onPress={handlePress} style={styles.container}>
<View style={{width: SCREEN_WIDTH * 0.8}}>
<ProfilePreview
profilePreview={item}
@@ -56,8 +61,8 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
screenType={ScreenType.Profile}
/>
</View>
- <TaggRadioButton pressed={pressed} onPress={handlePress} />
- </View>
+ <TaggRadioButton pressed={pressed} onPress={() => null} />
+ </TouchableWithoutFeedback>
);
};
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 6953dca4..67c086d3 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -41,6 +41,8 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
const navigation = useNavigation();
const dispatch = useDispatch();
const imageRef = useRef(null);
+ const [fadeValue, setFadeValue] = useState(new Animated.Value(0));
+ const [visible, setVisible] = useState(false);
const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
new Animated.Value(0),
diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
index 7b109877..365d709d 100644
--- a/src/components/moments/TagFriendsFoooter.tsx
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -1,39 +1,47 @@
import {useNavigation} from '@react-navigation/native';
-import React, {Dispatch, SetStateAction} from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {useMemo} from 'react';
+import {
+ Image,
+ ScrollView,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from 'react-native';
import {ProfilePreview} from '..';
-import {ProfilePreviewType, ScreenType} from '../../types';
-import {normalize} from '../../utils/layouts';
+import {MomentTagType, ProfilePreviewType, ScreenType} from '../../types';
+import {normalize, SCREEN_HEIGHT} from '../../utils/layouts';
interface TagFriendsFooterProps {
- taggedUsers: ProfilePreviewType[];
- setTaggedUsers: Dispatch<SetStateAction<ProfilePreviewType[]>>;
+ tags: MomentTagType[];
+ setTags: (tags: MomentTagType[]) => void;
}
-const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
- taggedUsers,
- setTaggedUsers,
-}) => {
+const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({tags, setTags}) => {
const navigation = useNavigation();
const handleRemoveTag = (user: ProfilePreviewType) => {
- const filteredSelection = taggedUsers.filter((item) => user.id !== item.id);
- setTaggedUsers(filteredSelection);
+ setTags(tags.filter((tag) => tag.user.id !== user.id));
};
- const TaggMoreButton = () => (
- <TouchableOpacity
- onPress={() =>
- navigation.navigate('TagSelectionScreen', {
- selectedUsers: taggedUsers,
- })
- }
- style={styles.tagMoreContainer}>
- <Image
- source={require('../../assets/icons/tagging/white-plus-icon.png')}
- style={styles.tagMoreIcon}
- />
- <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
- </TouchableOpacity>
+ const goToSelectionScreen = () => {
+ navigation.navigate('TagSelectionScreen', {
+ selectedTags: tags,
+ });
+ };
+
+ const taggMoreButton = useMemo(
+ () => (
+ <TouchableOpacity
+ onPress={goToSelectionScreen}
+ style={styles.tagMoreContainer}>
+ <Image
+ source={require('../../assets/icons/tagging/white-plus-icon.png')}
+ style={styles.tagMoreIcon}
+ />
+ <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
+ </TouchableOpacity>
+ ),
+ [tags],
);
const TaggedUser = (user: ProfilePreviewType) => (
@@ -59,31 +67,36 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
* If taggUsers is empty, title acts as a button
* Else, gets disabled and TaggMore button appears
*/
- const TagFriendsTitle = () => (
- <TouchableOpacity
- style={styles.tagFriendsTitleContainer}
- disabled={taggedUsers.length !== 0}
- onPress={() =>
- navigation.navigate('TagSelectionScreen', {
- selectedUsers: taggedUsers,
- })
- }>
- <Image
- source={require('../../assets/icons/tagging/tag-icon.png')}
- style={styles.tagIcon}
- />
- <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
- </TouchableOpacity>
+ const tagFriendsTitle = useMemo(
+ () => (
+ <TouchableOpacity
+ style={styles.tagFriendsTitleContainer}
+ disabled={tags.length !== 0}
+ onPress={() =>
+ navigation.navigate('TagSelectionScreen', {
+ selectedTags: tags,
+ })
+ }>
+ <Image
+ source={require('../../assets/icons/tagging/tag-icon.png')}
+ style={styles.tagIcon}
+ />
+ <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+ </TouchableOpacity>
+ ),
+ [tags.length],
);
return (
<>
- <TagFriendsTitle />
+ {tagFriendsTitle}
<View style={styles.tagFriendsContainer}>
- {taggedUsers.map((user) => (
- <TaggedUser {...user} />
- ))}
- {taggedUsers.length !== 0 && <TaggMoreButton />}
+ <ScrollView horizontal>
+ {tags.map((tag) => (
+ <TaggedUser key={tag.user.id} {...tag.user} />
+ ))}
+ {tags.length !== 0 && taggMoreButton}
+ </ScrollView>
</View>
</>
);
@@ -99,10 +112,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 +123,6 @@ const styles = StyleSheet.create({
letterSpacing: normalize(0.2),
color: 'white',
textAlign: 'center',
- marginVertical: '5%',
},
closeIconContainer: {
width: 20,
@@ -120,14 +131,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 12e8e1e1..d458fab6 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -1,5 +1,5 @@
import {useNavigation} from '@react-navigation/native';
-import React, {useEffect, useRef} from 'react';
+import React from 'react';
import {
Image,
StyleSheet,
@@ -7,6 +7,7 @@ import {
TouchableOpacity,
TouchableWithoutFeedback,
View,
+ ViewProps,
} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import Avatar from '../../components/common/Avatar';
@@ -15,31 +16,23 @@ import {ProfilePreviewType, ScreenType, UserType} from '../../types';
import {normalize} from '../../utils';
import {navigateToProfile} from '../../utils/users';
-interface TaggDraggableProps {
+interface TaggDraggableProps extends ViewProps {
+ draggableRef: React.MutableRefObject<null>;
taggedUser: ProfilePreviewType;
editingView: boolean;
deleteFromList: () => void;
- setStart: Function;
}
const TaggDraggable: React.FC<TaggDraggableProps> = (
props: TaggDraggableProps,
) => {
+ const {draggableRef, taggedUser, editingView, deleteFromList} = props;
const navigation = useNavigation();
const dispatch = useDispatch();
const state = useSelector((rs: RootState) => rs);
- const {taggedUser, editingView, deleteFromList, setStart} = props;
let uriX = require('../../assets/images/draggableX.png');
let uriTip = require('../../assets/images/Tagg-Triangle.png');
- const draggableRef = useRef(null);
-
- useEffect(() => {
- draggableRef.current.measure((width: number, height: number) => {
- setStart([width, height]);
- });
- }, []);
-
const user: UserType = {
userId: taggedUser.id,
username: taggedUser.username,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:21:20 +0000