From 3a585b1bee36168fb2f33ae889bc5f207f25f793 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Tue, 18 May 2021 14:13:40 -0700 Subject: add draggable component for tagging --- src/assets/images/tagg-rectangle.png | Bin 0 -> 521 bytes src/assets/images/tagg-tip.png | Bin 0 -> 233 bytes src/assets/images/tagg-x-button.png | Bin 0 -> 549 bytes src/components/taggs/TaggDraggable.tsx | 144 +++++++++++++++++++++++++++++++++ src/types/types.ts | 1 + 5 files changed, 145 insertions(+) create mode 100644 src/assets/images/tagg-rectangle.png create mode 100644 src/assets/images/tagg-tip.png create mode 100644 src/assets/images/tagg-x-button.png create mode 100644 src/components/taggs/TaggDraggable.tsx (limited to 'src') diff --git a/src/assets/images/tagg-rectangle.png b/src/assets/images/tagg-rectangle.png new file mode 100644 index 00000000..24bfd67e Binary files /dev/null and b/src/assets/images/tagg-rectangle.png differ diff --git a/src/assets/images/tagg-tip.png b/src/assets/images/tagg-tip.png new file mode 100644 index 00000000..eb3c5bad Binary files /dev/null and b/src/assets/images/tagg-tip.png differ diff --git a/src/assets/images/tagg-x-button.png b/src/assets/images/tagg-x-button.png new file mode 100644 index 00000000..5ce3846d Binary files /dev/null and b/src/assets/images/tagg-x-button.png differ diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx new file mode 100644 index 00000000..0990d924 --- /dev/null +++ b/src/components/taggs/TaggDraggable.tsx @@ -0,0 +1,144 @@ +import {useNavigation} from '@react-navigation/native'; +import React, {useState} from 'react'; +import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import Draggable from 'react-native-draggable'; +import {ScreenType} from 'src/types'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import TaggAvatar from '../profile/TaggAvatar'; + +interface TaggDraggableProps { + draggable?: boolean; + minX: number; + minY: number; + maxX: number; + maxY: number; + taggedUser: string; + redirect: boolean; + deleteFromList: Function; +} + +const TaggDraggable: React.FC = (props) => { + const [xCoord, setXcoord] = useState(SCREEN_HEIGHT / 2); + const [yCoord, setYcoord] = useState(SCREEN_WIDTH / 2); + const navigation = useNavigation(); + const { + draggable, + minX, + minY, + maxX, + maxY, + taggedUser, + redirect, + deleteFromList, + } = props; + let uriTip = require('../../assets/images/tagg-tip.png'); + let uriX = require('../../assets/images/tagg-x-button.png'); + + // + + /** + * This function returns x,y pairing for each tagg. + */ + const getCoords = () => { + return [xCoord, yCoord]; + }; + const renderTagg = () => { + + {/* user profile pic */} + + + {/* @username */} + + {taggedUser} + + {/* x button */} + + deleteFromList()}> + + + + ; + }; + if (redirect) { + if (draggable) { + return ( + + { + setXcoord(gestureState.moveX); + setYcoord(gestureState.moveY); + }}> + + + {taggedUser} + + deleteFromList()}> + + + + + + {taggedUser} + + deleteFromList()}> + + + + + ); + } else { + renderTagg; + } + } else { + } +}; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + height: normalize(42), + marginBottom: '5%', + }, + bodyContainer: { + flexDirection: 'column', + height: normalize(42), + justifyContent: 'space-around', + }, + inviteButton: { + backgroundColor: 'transparent', + }, + imageRectangle: { + width: '100%', + height: '100%', + backgroundColor: 'black', + borderWidth: 2, + borderRadius: 2, + }, + imageTip: { + backgroundColor: 'black', + }, + imageX: { + width: '100%', + height: '100%', + }, +}); + +export default TaggDraggable; diff --git a/src/types/types.ts b/src/types/types.ts index e9975529..5aae9a6d 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -150,6 +150,7 @@ export enum ScreenType { Notifications, SuggestedPeople, Chat, + Tagging, } /** -- cgit v1.2.3-70-g09d2 From 7e93ac3f0b2b6b1509d95d020a3138968ac1cfc7 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 18 May 2021 16:21:21 -0700 Subject: Messing around with captionscreen --- package.json | 3 +- src/assets/icons/tag-icon.png | Bin 0 -> 1708 bytes src/components/taggs/TaggDraggable.tsx | 81 ++++++++++++++++++++------------- src/screens/profile/CaptionScreen.tsx | 13 ++++++ yarn.lock | 7 +++ 5 files changed, 72 insertions(+), 32 deletions(-) create mode 100644 src/assets/icons/tag-icon.png (limited to 'src') diff --git a/package.json b/package.json index 16932be4..f917ab4e 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "react-native-date-picker": "^3.2.5", "react-native-device-info": "^7.3.1", "react-native-document-picker": "^5.0.3", + "react-native-draggable": "^3.3.0", "react-native-elements": "^2.3.2", "react-native-fs": "^2.16.6", "react-native-gesture-handler": "^1.10.3", @@ -102,4 +103,4 @@ "./node_modules/react-native-gesture-handler/jestSetup.js" ] } -} \ No newline at end of file +} diff --git a/src/assets/icons/tag-icon.png b/src/assets/icons/tag-icon.png new file mode 100644 index 00000000..9111b036 Binary files /dev/null and b/src/assets/icons/tag-icon.png differ diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 0990d924..a0872c2d 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -2,9 +2,16 @@ import {useNavigation} from '@react-navigation/native'; import React, {useState} from 'react'; import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import Draggable from 'react-native-draggable'; -import {ScreenType} from 'src/types'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {ScreenType, UserType} from '../../types'; +import { + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, + navigateToProfile, +} from '../../utils'; import TaggAvatar from '../profile/TaggAvatar'; +import {RootState} from '../../store/rootReducer'; +import {useStore, useDispatch} from 'react-redux'; interface TaggDraggableProps { draggable?: boolean; @@ -12,15 +19,19 @@ interface TaggDraggableProps { minY: number; maxX: number; maxY: number; - taggedUser: string; + taggedUser: UserType; redirect: boolean; deleteFromList: Function; } -const TaggDraggable: React.FC = (props) => { +const TaggDraggable: React.FC = ( + props: TaggDraggableProps, +) => { const [xCoord, setXcoord] = useState(SCREEN_HEIGHT / 2); const [yCoord, setYcoord] = useState(SCREEN_WIDTH / 2); + const dispatch = useDispatch(); const navigation = useNavigation(); + const state: RootState = useStore().getState(); const { draggable, minX, @@ -39,33 +50,40 @@ const TaggDraggable: React.FC = (props) => { /** * This function returns x,y pairing for each tagg. */ - const getCoords = () => { - return [xCoord, yCoord]; - }; + // const getCoords = () => { + // return [xCoord, yCoord]; + // }; const renderTagg = () => { - - {/* user profile pic */} - - - {/* @username */} - - {taggedUser} - - {/* x button */} - - deleteFromList()}> - + return ( + + {/* user profile pic */} + + + {/* @username */} + + navigateToProfile( + state, + dispatch, + navigation, + ScreenType.Profile, + taggedUser, + ) + }> + {taggedUser} + + {/* x button */} + + deleteFromList()}> + + - - ; + + ); }; if (redirect) { if (draggable) { @@ -84,7 +102,7 @@ const TaggDraggable: React.FC = (props) => { {taggedUser} @@ -103,9 +121,10 @@ const TaggDraggable: React.FC = (props) => { ); } else { - renderTagg; + return renderTagg(); } } else { + return renderTagg(); } }; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index a41abba6..50b60024 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -29,6 +29,8 @@ import {RootState} from '../../store/rootReducer'; import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; +import TaggDraggable from '../../components/taggs/TaggDraggable'; + /** * Upload Screen to allow users to upload posts to Tagg */ @@ -47,6 +49,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const { user: {userId}, } = useSelector((state: RootState) => state.user); + console.log(userId); const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); @@ -118,6 +121,16 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> + console.log('Hello world')} + /> diff --git a/yarn.lock b/yarn.lock index 29248e92..ca0cf2d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6278,6 +6278,13 @@ react-native-document-picker@^5.0.3: resolved "https://registry.yarnpkg.com/react-native-document-picker/-/react-native-document-picker-5.0.3.tgz#f31f18ee7a90fb8ea94f301d7a5fdb069322dcd8" integrity sha512-OLTUB9SvY2J6bYZ6F/b4FKwDfEimP+sRsEP3OSp1oosYD4+G9C5J3CKiJ69B7CCXmA89Bi/QBr5j2lW9y9rWlQ== +react-native-draggable@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/react-native-draggable/-/react-native-draggable-3.3.0.tgz#6f07c3ad4cff018bf0455fc48dbfe5f0af9b72cd" + integrity sha512-aU20CaKBmzXrwE9eTJZ+GDOr52mXLchg5Vydbx5rz8nYXlN+ppHIoTPgyXduyWNwpZ/DR6tyFtMwdgUHpuN6oA== + dependencies: + prop-types "^15.7.2" + react-native-elements@^2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/react-native-elements/-/react-native-elements-2.3.2.tgz#f6b974127a3484bb46ebd98fbc012fb2208decd7" -- cgit v1.2.3-70-g09d2