diff options
| -rw-r--r-- | src/components/common/TaggTypeahead.tsx | 44 | ||||
| -rw-r--r-- | src/screens/profile/CaptionScreen.tsx | 53 | ||||
| -rw-r--r-- | src/utils/comments.tsx | 9 |
3 files changed, 75 insertions, 31 deletions
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 7967fdbc..7444e2d8 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -1,5 +1,5 @@ -import React, {Fragment, useEffect, useState} from 'react'; -import {ScrollView, StyleSheet, View} from 'react-native'; +import React, {Fragment, useEffect, useRef, useState} from 'react'; +import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'; import {Suggestion} from 'react-native-controlled-mentions'; import {useSelector} from 'react-redux'; import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; @@ -13,15 +13,19 @@ type TaggTypeaheadProps = { keyword: string | undefined; component: string | undefined; onSuggestionPress: (suggestion: Suggestion) => void; + isShowBelowStyle?: boolean; }; const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({ keyword, component, onSuggestionPress, + isShowBelowStyle = false, }) => { const {friends} = useSelector((state: RootState) => state.friends); const [results, setResults] = useState<ProfilePreviewType[]>([]); + const [viewPx, setViewPx] = useState<number>(0); + const viewRef = useRef<View>(null); const [height, setHeight] = useState(0); const margin = component === 'comment' ? -10 : 0; @@ -33,6 +37,22 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({ } }, [keyword]); + const onLayout = (e: LayoutChangeEvent) => { + setHeight(e.nativeEvent.layout.height); + viewRef.current?.measure( + ( + _fx: number, + _fy: number, + _width: number, + _height: number, + px: number, + _py: number, + ) => { + setViewPx(px); + }, + ); + }; + const getQuerySuggested = async () => { if (keyword === undefined || keyword === '@') { return; @@ -50,14 +70,17 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({ } return ( - <View> - <View style={styles.overlay} /> + <View ref={viewRef}> + {!isShowBelowStyle && <View style={styles.overlay} />} <ScrollView - style={[styles.container, {top: -height, margin: margin}]} + style={[ + styles.container, + isShowBelowStyle + ? [styles.topPadding, {left: -viewPx}] + : {top: -height, margin: margin}, + ]} showsVerticalScrollIndicator={false} - onLayout={(event) => { - setHeight(event.nativeEvent.layout.height); - }} + onLayout={onLayout} keyboardShouldPersistTaps={'always'}> {results.map((user) => ( <TaggUserRowCell @@ -78,10 +101,10 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({ const styles = StyleSheet.create({ container: { + position: 'absolute', width: SCREEN_WIDTH, maxHeight: 264, backgroundColor: 'white', - position: 'absolute', alignSelf: 'center', zIndex: 1, }, @@ -95,6 +118,9 @@ const styles = StyleSheet.create({ bottom: 10, zIndex: -1, }, + topPadding: { + top: 30, + }, }); export default TaggTypeahead; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 9a1878aa..02b8caf2 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {FC, useEffect, useState} from 'react'; +import React, {FC, useEffect, useMemo, useState} from 'react'; import { Alert, Image, @@ -293,27 +293,39 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { placeholderTextColor="white" value={caption} onChange={setCaption} - partTypes={mentionPartTypes('white', 'caption')} + partTypes={mentionPartTypes('white', 'caption', true)} /> </View> - <SelectableItem - text={'Category'} - imageUri={require('../../assets/images/images.png')} - onPress={() => navigation.navigate('ChoosingCategoryScreen', {})} - /> - <SelectableItem - text={'Tag Friends'} - imageUri={require('../../assets/icons/tagging/tag-icon.png')} - onPress={() => - navigation.navigate('TagFriendsScreen', { - media: { - uri: mediaUri, - isVideo: isMediaAVideo, - }, - selectedTags: tags, - }) - } - /> + {useMemo( + () => ( + <SelectableItem + text={'Category'} + imageUri={require('../../assets/images/images.png')} + onPress={() => + navigation.navigate('ChoosingCategoryScreen', {}) + } + /> + ), + [momentCategory], + )} + {useMemo( + () => ( + <SelectableItem + text={'Tag Friends'} + imageUri={require('../../assets/icons/tagging/tag-icon.png')} + onPress={() => + navigation.navigate('TagFriendsScreen', { + media: { + uri: mediaUri, + isVideo: isMediaAVideo, + }, + selectedTags: tags, + }) + } + /> + ), + [taggedUsersText], + )} {momentCategory ? ( <TaggSquareButton onPress={moment ? handleSubmitEditChanges : handleShare} @@ -371,6 +383,7 @@ const styles = StyleSheet.create({ borderColor: 'white', borderTopWidth: 1, borderBottomWidth: 1, + zIndex: 1, }, media: { height: normalize(150), diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index 28879622..504631f5 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -82,12 +82,17 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({ export const mentionPartTypes: ( theme: 'blue' | 'white', component: 'caption' | 'comment', -) => PartType[] = (theme, component) => { + isShowBelowStyle?: boolean, +) => PartType[] = (theme, component, isShowBelowStyle = false) => { return [ { trigger: '@', renderSuggestions: (props) => ( - <TaggTypeahead component={component} {...props} /> + <TaggTypeahead + component={component} + isShowBelowStyle={isShowBelowStyle} + {...props} + /> ), allowedSpacesCount: 0, isInsertSpaceAfterMention: true, |