diff options
| -rw-r--r-- | src/components/comments/AddComment.tsx | 85 | ||||
| -rw-r--r-- | src/components/moments/MomentPostContent.tsx | 18 | ||||
| -rw-r--r-- | src/screens/profile/IndividualMoment.tsx | 17 |
3 files changed, 64 insertions, 56 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 9d9824db..9667046c 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -26,6 +26,7 @@ export interface AddCommentProps { placeholderText: string; callback?: (message: string) => void; onFocus?: () => void; + isKeyboardAvoiding?: boolean; theme?: 'dark' | 'white'; } @@ -34,6 +35,7 @@ const AddComment: React.FC<AddCommentProps> = ({ placeholderText, callback = (_) => null, onFocus = () => null, + isKeyboardAvoiding = true, theme = 'white', }) => { const {setShouldUpdateAllComments = () => null, commentTapped} = @@ -111,49 +113,54 @@ const AddComment: React.FC<AddCommentProps> = ({ } }, [isReplyingToComment, isReplyingToReply, commentTapped]); - return ( + const mainContent = () => ( + <View + style={[ + theme === 'white' ? styles.containerWhite : styles.containerDark, + keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {}, + ]}> + <View style={styles.textContainer}> + <Avatar style={styles.avatar} uri={avatar} /> + <MentionInputControlled + containerStyle={styles.text} + placeholderTextColor={theme === 'dark' ? '#828282' : undefined} + placeholder={placeholderText} + value={inReplyToMention + comment} + onFocus={onFocus} + onChange={(newText: string) => { + // skipping the `inReplyToMention` text + setComment( + newText.substring(inReplyToMention.length, newText.length), + ); + }} + inputRef={ref} + partTypes={mentionPartTypes('blue')} + /> + {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && ( + <View style={styles.submitButton}> + <TouchableOpacity + style={ + comment === '' + ? [styles.submitButton, styles.greyButton] + : styles.submitButton + } + disabled={comment === ''} + onPress={addComment}> + <UpArrowIcon width={35} height={35} color={'white'} /> + </TouchableOpacity> + </View> + )} + </View> + </View> + ); + return isKeyboardAvoiding ? ( <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}> - <View - style={[ - theme === 'white' ? styles.containerWhite : styles.containerDark, - keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {}, - ]}> - <View style={styles.textContainer}> - <Avatar style={styles.avatar} uri={avatar} /> - <MentionInputControlled - containerStyle={styles.text} - placeholderTextColor={theme === 'dark' ? '#828282' : undefined} - placeholder={placeholderText} - value={inReplyToMention + comment} - onFocus={onFocus} - onChange={(newText: string) => { - // skipping the `inReplyToMention` text - setComment( - newText.substring(inReplyToMention.length, newText.length), - ); - }} - inputRef={ref} - partTypes={mentionPartTypes('blue')} - /> - {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && ( - <View style={styles.submitButton}> - <TouchableOpacity - style={ - comment === '' - ? [styles.submitButton, styles.greyButton] - : styles.submitButton - } - disabled={comment === ''} - onPress={addComment}> - <UpArrowIcon width={35} height={35} color={'white'} /> - </TouchableOpacity> - </View> - )} - </View> - </View> + {mainContent()} </KeyboardAvoidingView> + ) : ( + mainContent() ); }; diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index da04211f..89f2a281 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -49,8 +49,8 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({ ); const [commentPreview, setCommentPreview] = useState<MomentCommentPreviewType | null>(moment.comment_preview); - const {keyboardVisible, currentScrollToIndex, scrollTo} = - useContext(MomentContext); + const {keyboardVisible, scrollTo} = useContext(MomentContext); + const [hideText, setHideText] = useState(false); useEffect(() => { setTags(momentTags); @@ -67,6 +67,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({ fade(); }, [fadeValue]); + useEffect(() => { + if (!keyboardVisible && hideText) { + setHideText(false); + } + }, [keyboardVisible, hideText]); + return ( <View style={[styles.container, style]}> <TouchableWithoutFeedback @@ -97,7 +103,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({ /> </Animated.View> )} - {(!keyboardVisible || currentScrollToIndex !== index) && ( + {!hideText && ( <> {moment.caption !== '' && renderTextWithMentions({ @@ -130,7 +136,11 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({ comment: message, }) } - onFocus={() => scrollTo(index)} + onFocus={() => { + setHideText(true); + scrollTo(index); + }} + isKeyboardAvoiding={false} theme={'dark'} /> <Text style={styles.text}>{getTimePosted(moment.date_created)}</Text> diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index ddf4c478..b14b31fa 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -17,7 +17,6 @@ import {normalize, StatusBarHeight} from '../../utils'; type MomentContextType = { keyboardVisible: boolean; - currentScrollToIndex: number; scrollTo: (index: number) => void; }; @@ -52,8 +51,6 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({ (m) => m.moment_category === moment_category, ); const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id); - const [currentScrollToIndex, setCurrentScrollToIndex] = - useState<number>(initialIndex); const [keyboardVisible, setKeyboardVisible] = useState(false); useEffect(() => { @@ -68,22 +65,16 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({ }, []); const scrollTo = (index: number) => { - setCurrentScrollToIndex(index); - setTimeout(() => { - console.log('scrolling to', index); - scrollRef.current?.scrollToIndex({ - index: index, - // viewOffset: -(AVATAR_DIM + normalize(120)), - viewOffset: -(AVATAR_DIM + normalize(90)), - }); - }, 100); + scrollRef.current?.scrollToIndex({ + index: index, + viewOffset: -(AVATAR_DIM + normalize(90)), + }); }; return ( <MomentContext.Provider value={{ keyboardVisible, - currentScrollToIndex, scrollTo, }}> <BlurView |