aboutsummaryrefslogtreecommitdiff
path: root/src/components/common
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/common')
-rw-r--r--src/components/common/Draggable.tsx34
-rw-r--r--src/components/common/MomentTags.tsx100
-rw-r--r--src/components/common/TaggUserSelectionCell.tsx37
3 files changed, 123 insertions, 48 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>
);
};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 19:37:57 +0000