aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/common/Draggable.tsx2
-rw-r--r--src/components/taggs/TaggDraggable.tsx119
-rw-r--r--src/screens/profile/CaptionScreen.tsx30
3 files changed, 92 insertions, 59 deletions
diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index 347d2121..409ca6de 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -211,12 +211,14 @@ export default function Draggable(props: IProps) {
const positionCss: StyleProp<ViewStyle> = React.useMemo(() => {
const Window = Dimensions.get('window');
+
return {
position: 'absolute',
top: 0,
left: 0,
width: Window.width,
height: Window.height,
+ zIndex: z,
};
}, []);
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 6a93aee5..bb9949e4 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -8,12 +8,15 @@ import {
TouchableWithoutFeedback,
View,
} from 'react-native';
-import {ScreenType, UserType} from '../../types';
+import {ProfilePreviewType, ScreenType, UserType} from '../../types';
import {normalize} from '../../utils';
-import TaggAvatar from '../profile/TaggAvatar';
+import Avatar from '../../components/common/Avatar';
+import {navigateToProfile} from '../../utils/users';
+import {useDispatch, useSelector} from 'react-redux';
+import {RootState} from 'src/store/rootReducer';
interface TaggDraggableProps {
- taggedUser: UserType;
+ taggedUser: ProfilePreviewType;
editingView: boolean;
deleteFromList: () => void;
setStart: Function;
@@ -33,10 +36,13 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
};
const {taggedUser, editingView, deleteFromList, setStart} = props;
+ const state = useSelector((rs: RootState) => rs);
+
+ const dispatch = useDispatch();
let uriX = require('../../assets/images/draggableX.png');
+ let uriTip = require('../../assets/images/Tagg-Triangle.png');
const draggableRef = useRef(null);
-
useEffect(() => {
draggableRef.current.measure((fx, fy, width, height, px, py) => {
console.log('Drag Component width is: ' + width);
@@ -49,31 +55,49 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
});
}, []);
+ const user: UserType = {
+ userId: taggedUser.id,
+ username: taggedUser.username,
+ };
+
return (
<TouchableWithoutFeedback>
- <View style={styles.container}>
- <TouchableOpacity
- onPressIn={() => gotoTaggedProfile(taggedUser.userId)}
- disabled={editingView}
- style={[styles.button]}
- ref={draggableRef}>
- <TaggAvatar
- style={styles.avatar}
- screenType={ScreenType.Profile}
- editable={false}
- userXId={taggedUser.userId}
- />
- <Text style={editingView ? styles.buttonTitle : styles.buttonTitleX}>
- @{taggedUser.username}
- </Text>
- {editingView && (
- <TouchableOpacity
- disabled={false}
- onPressIn={() => deleteFromList()}>
- <Image style={styles.imageX} source={uriX} />
- </TouchableOpacity>
- )}
- </TouchableOpacity>
+ <View
+ style={{
+ height: 55,
+ flexDirection: 'column',
+ alignItems: 'center',
+ borderWidth: 1,
+ }}>
+ <Image style={styles.imageTip} source={uriTip} />
+ <View style={styles.container}>
+ <TouchableOpacity
+ onPressIn={() =>
+ navigateToProfile(
+ state,
+ dispatch,
+ navigation,
+ ScreenType.Profile,
+ user,
+ )
+ }
+ disabled={editingView}
+ style={[styles.button]}
+ 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()}>
+ <Image style={styles.imageX} source={uriX} />
+ </TouchableOpacity>
+ )}
+ </TouchableOpacity>
+ </View>
</View>
</TouchableWithoutFeedback>
);
@@ -81,24 +105,13 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
const styles = StyleSheet.create({
container: {
- color: 'red',
+ borderWidth: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
- height: normalize(42),
- marginBottom: '5%',
- },
- bodyContainer: {
- color: 'blue',
- flexDirection: 'column',
- height: normalize(42),
- justifyContent: 'space-around',
- },
- label: {
- fontWeight: '500',
- fontSize: normalize(14),
},
buttonTitle: {
+ borderWidth: 1,
color: 'white',
fontSize: normalize(11),
fontWeight: '700',
@@ -116,37 +129,33 @@ const styles = StyleSheet.create({
marginRight: '-10%',
},
avatar: {
+ borderWidth: 1,
+ borderRadius: 100 / 2,
+ overflow: 'hidden',
marginLeft: '4%',
marginRight: '-1%',
flex: 0.45,
aspectRatio: 1,
},
- inviteButton: {
- backgroundColor: 'transparent',
- },
- imageRectangle: {
- backgroundColor: 'black',
- borderWidth: 2,
- borderRadius: 2,
- },
imageX: {
+ borderWidth: 1,
width: normalize(15),
height: normalize(15),
- marginRight: '-15%',
},
- pendingButtonTitle: {
- color: 'white',
+ imageTip: {
+ borderWidth: 1,
+ bottom: -5,
+ width: normalize(15),
+ height: normalize(15),
},
button: {
+ borderWidth: 1,
paddingTop: 3,
paddingBottom: 3,
- // justifyContent: 'space-evenly',
- alignSelf: 'flex-start',
+ justifyContent: 'space-evenly',
alignItems: 'center',
- borderWidth: 1.5,
borderRadius: 20,
flexDirection: 'row',
- flexWrap: 'wrap',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
},
});
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index f77a2d23..1f49f917 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -59,9 +59,28 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
const dispatch = useDispatch();
const [caption, setCaption] = useState('');
const [loading, setLoading] = useState(false);
+ const [isTop, setIsTop] = useState(false);
+ const zIndex = [0, 999];
// created a state variable to keep track of every tag
// idea is that each element in the list
- const [taggList, setTaggList] = useState([]);
+ const [taggList, setTaggList] = useState([
+ {
+ first_name: 'Ivan',
+ id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58',
+ last_name: 'Chen',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg',
+ username: 'ivan.tagg',
+ },
+ {
+ first_name: 'Ankit',
+ id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
+ last_name: 'Thanekar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
+ username: 'ankit.thanekar',
+ },
+ ]);
const imageRef = useRef(null);
const [offset, setOffset] = useState([0, 0]);
const [curStart, setCurStart] = useState([0, 0]);
@@ -163,12 +182,15 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
<Draggable
x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+ z={isTop ? zIndex[1] : zIndex[0]}
minX={offset[0]}
minY={offset[1]}
- maxX={imageDimensions[0] + offset[0] + curStart[0] / 3}
- maxY={imageDimensions[1] + offset[1] + curStart[1]}>
+ maxX={imageDimensions[0] + offset[0]}
+ maxY={imageDimensions[1] + offset[1]}
+ onPressIn={() => setIsTop(true)}
+ onPressOut={() => setIsTop(false)}>
<TaggDraggable
- taggedUser={testUser}
+ taggedUser={taggList[1]}
editingView={true}
deleteFromList={() => console.log('Hello world')}
setStart={setCurStart}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:22:17 +0000