aboutsummaryrefslogtreecommitdiff
path: root/src/components/taggs
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/taggs')
-rw-r--r--src/components/taggs/TaggDraggable.tsx48
1 files changed, 22 insertions, 26 deletions
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index e31be729..e964d3d1 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, {useRef} 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,11 +16,13 @@ import {ProfilePreviewType, ScreenType, UserType} from '../../types';
import {normalize} from '../../utils';
import {navigateToProfile} from '../../utils/users';
-interface TaggDraggableProps {
+interface TaggDraggableProps extends ViewProps {
taggedUser: ProfilePreviewType;
editingView: boolean;
deleteFromList: () => void;
setStart: Function;
+ offset: {fx: number; fy: number};
+ imageDimensions: {width: number; height: number};
}
const TaggDraggable: React.FC<TaggDraggableProps> = (
@@ -28,42 +31,35 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
const navigation = useNavigation();
const dispatch = useDispatch();
const state = useSelector((rs: RootState) => rs);
- const {taggedUser, editingView, deleteFromList, setStart} = props;
+ const {
+ taggedUser,
+ editingView,
+ deleteFromList,
+ setStart,
+ offset,
+ imageDimensions,
+ } = props;
let uriX = require('../../assets/images/draggableX.png');
let uriTip = require('../../assets/images/Tagg-Triangle.png');
const draggableRef = useRef(null);
- useEffect(() => {
+ const getPositions = () =>
draggableRef.current.measure(
(
- fx: number, // location of ref relative to parent element
- fy: number,
- width: number,
- height: number,
+ _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,
) => {
- console.log(px);
- // TODO: george
+ return [
+ Math.floor(((px - offset.fx) / imageDimensions.width) * 100),
+ Math.floor(((py - offset.fy) / imageDimensions.height) * 100),
+ ];
},
);
- });
-
- const getCoords = () => {
- draggableRef.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,
- ) => {
- return [px, py];
- },
- );
- };
const user: UserType = {
userId: taggedUser.id,