1 files changed, 129 insertions, 0 deletions
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
new file mode 100644
index 00000000..e4448642
--- /dev/null
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -0,0 +1,129 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useRef} from 'react';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {useDispatch, useSelector} from 'react-redux';
+import Avatar from '../../components/common/Avatar';
+import {RootState} from '../../store/rootReducer';
+import {ProfilePreviewType, ScreenType, UserType} from '../../types';
+import {normalize} from '../../utils';
+import {navigateToProfile} from '../../utils/users';
+
+interface TaggDraggableProps {
+  taggedUser: ProfilePreviewType;
+  editingView: boolean;
+  deleteFromList: () => void;
+  setStart: Function;
+}
+
+const TaggDraggable: React.FC<TaggDraggableProps> = (
+  props: TaggDraggableProps,
+) => {
+  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,
+  };
+
+  return (
+    <TouchableWithoutFeedback>
+      <View style={styles.container}>
+        <Image style={styles.imageTip} source={uriTip} />
+        <TouchableOpacity
+          onPressIn={() =>
+            navigateToProfile(
+              state,
+              dispatch,
+              navigation,
+              ScreenType.Profile,
+              user,
+            )
+          }
+          disabled={editingView}
+          style={styles.content}
+          ref={draggableRef}>
+          <Avatar style={styles.avatar} uri={taggedUser.thumbnail_url} />
+          <Text style={editingView ? styles.buttonTitle : styles.buttonTitleX}>
+            @{taggedUser.username}
+          </Text>
+          {editingView && (
+            <TouchableOpacity
+              disabled={false}
+              onPressIn={deleteFromList}
+              style={styles.imageX}>
+              <Image style={styles.imageX} source={uriX} />
+            </TouchableOpacity>
+          )}
+        </TouchableOpacity>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const styles = StyleSheet.create({
+  imageTip: {
+    height: normalize(12),
+    aspectRatio: 12 / 8,
+  },
+  container: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonTitle: {
+    color: 'white',
+    fontSize: normalize(11),
+    fontWeight: '700',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '1%',
+  },
+  buttonTitleX: {
+    color: 'white',
+    fontSize: normalize(11),
+    fontWeight: '700',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '1%',
+  },
+  avatar: {
+    height: normalize(20),
+    width: normalize(20),
+    borderRadius: normalize(20) / 2,
+  },
+  imageX: {
+    width: normalize(15),
+    height: normalize(15),
+  },
+  content: {
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderRadius: 20,
+    paddingVertical: normalize(5),
+    paddingHorizontal: normalize(8),
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  },
+});
+
+export default TaggDraggable;