From 438ac0d1f82a95367b374b56f9c61a7a5802735c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 17:13:12 -0400 Subject: Squashed commit of the following: commit 7711d92c8dab4f00e36ad3bbca9bc202fa313e43 Author: Brian Kim Date: Tue May 25 17:08:41 2021 -0400 Integrate with layering commit cbd01996ae4784b737fb4b634eb0048bb7d85967 Author: Brian Kim Date: Tue May 25 16:48:52 2021 -0400 Fix yarn commit 39164064b903df36b7373e177d00c3307a8a311a Author: Brian Kim Date: Tue May 25 16:46:34 2021 -0400 Add horizontal scroll commit 02841df862aa68dcf615d0264236d9a14b52befe Author: Brian Kim Date: Tue May 25 15:03:13 2021 -0400 Lint fixes commit 5c6e8e453026005f6621efe751d90c76f457a72f Author: Brian Kim Date: Tue May 25 14:46:39 2021 -0400 Set boundaries, fix offset calculation, fix length and height calculation to be individual commit 6d27d859fd5364556928e5a2feadad1aff4dc6b9 Author: Brian Kim Date: Tue May 25 11:32:08 2021 -0400 Pause --- src/components/common/MomentTags.tsx | 71 +++++++++++++++++++++------- src/components/moments/TagFriendsFoooter.tsx | 46 ++++++++++++------ src/components/profile/ProfilePreview.tsx | 4 +- src/components/taggs/TaggDraggable.tsx | 10 ++-- 4 files changed, 95 insertions(+), 36 deletions(-) (limited to 'src') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 9a6cd08b..75a81814 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -17,27 +17,56 @@ const MomentTags: React.FC = ({ deleteFromList, }) => { const [offset, setOffset] = useState([0, 0]); - const [curStart, setCurStart] = useState([0, 0]); + const [curStart, setCurStart] = useState({}); const [imageDimensions, setImageDimensions] = useState([0, 0]); const [maxZIndex, setMaxZIndex] = useState(1); + const editCurStart = (idName: number, coords: number[]) => { + setCurStart((prev) => ({...prev, [idName]: coords})); + }; + useEffect(() => { - imageRef.current.measure((fx, fy, width, height, px, py) => { - setOffset([px, py]); - setImageDimensions([width, height]); - }); + setTimeout(() => { + imageRef.current.measure( + ( + fx: number, + fy: number, + width: number, + height: number, + _x: number, + _y: number, + ) => { + setOffset([fx, fy]); + setImageDimensions([width, height]); + }, + ); + }, 250); }, []); + useEffect(() => {}, [curStart]); + if (!tags) { return null; } return editing && deleteFromList ? ( <> - {tags.map((tag) => ( + {tags.map((tag, index) => ( = ({ { - deleteFromList(tag.user); - }} - setStart={setCurStart} + deleteFromList={() => deleteFromList(tag.user)} + setStart={(coords: number[]) => editCurStart(index, coords)} /> ))} ) : ( <> - {tags.map((tag) => ( + {tags.map((tag, index) => ( = ({ taggedUser={tag.user} editingView={editing} deleteFromList={() => null} - setStart={setCurStart} + setStart={(coords: number[]) => editCurStart(index, coords)} /> ))} diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx index 7b109877..2a844680 100644 --- a/src/components/moments/TagFriendsFoooter.tsx +++ b/src/components/moments/TagFriendsFoooter.tsx @@ -1,9 +1,16 @@ import {useNavigation} from '@react-navigation/native'; import React, {Dispatch, SetStateAction} from 'react'; -import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import { + Image, + ScrollView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; import {ProfilePreview} from '..'; import {ProfilePreviewType, ScreenType} from '../../types'; -import {normalize} from '../../utils/layouts'; +import {normalize, SCREEN_HEIGHT} from '../../utils/layouts'; interface TagFriendsFooterProps { taggedUsers: ProfilePreviewType[]; @@ -80,10 +87,12 @@ const TagFriendsFooter: React.FC = ({ <> - {taggedUsers.map((user) => ( - - ))} - {taggedUsers.length !== 0 && } + + {taggedUsers.map((user) => ( + + ))} + {taggedUsers.length !== 0 && } + ); @@ -99,10 +108,9 @@ const styles = StyleSheet.create({ fontWeight: '600', }, tagFriendsContainer: { - flexDirection: 'row', - marginTop: '3%', - flexWrap: 'wrap', - justifyContent: 'flex-start', + height: SCREEN_HEIGHT * 0.1, + marginTop: 2, + marginBottom: 5, }, tagMoreLabel: { fontWeight: '500', @@ -111,7 +119,6 @@ const styles = StyleSheet.create({ letterSpacing: normalize(0.2), color: 'white', textAlign: 'center', - marginVertical: '5%', }, closeIconContainer: { width: 20, @@ -120,14 +127,25 @@ const styles = StyleSheet.create({ zIndex: 1, }, tagMoreContainer: { - flexDirection: 'column', + width: 60, alignItems: 'center', + justifyContent: 'flex-start', + marginTop: -12, + }, + tagMoreIcon: { + width: 38, + height: 38, + marginTop: 13, + marginBottom: '10%', + }, + taggedUserContainer: { + marginTop: -12, }, - tagMoreIcon: {width: 38, height: 38, top: -2}, - taggedUserContainer: {flexDirection: 'row-reverse'}, closeIcon: { width: 20, height: 20, + left: 15, + top: 10, }, tagFriendsTitleContainer: { flexDirection: 'row', diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 88c075e2..dd93a5fd 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -377,10 +377,8 @@ const styles = StyleSheet.create({ }, tagSelectionContainer: { width: 60, - flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', - margin: '1%', }, tagSelectionAvatar: { width: 34, @@ -389,7 +387,7 @@ const styles = StyleSheet.create({ }, tagSelectionNameContainer: { width: '100%', - marginVertical: '10%', + marginVertical: normalize(5), }, tagSelectionUsername: { fontWeight: '500', diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 55f8162b..3dd5f230 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -35,9 +35,13 @@ const TaggDraggable: React.FC = ( const draggableRef = useRef(null); useEffect(() => { - draggableRef.current.measure((width: number, height: number) => { - setStart([width, height]); - }); + setTimeout(() => { + draggableRef.current.measure( + (_1: number, _2: number, width: number, height: number) => { + setStart([width, height]); + }, + ); + }, 250); }, []); const user: UserType = { -- cgit v1.2.3-70-g09d2