diff options
| -rw-r--r-- | src/components/comments/MentionInputControlled.tsx | 97 | ||||
| -rw-r--r-- | src/components/common/BottomDrawer.tsx | 11 | ||||
| -rw-r--r-- | src/components/moments/MomentPostHeader.tsx | 16 | ||||
| -rw-r--r-- | src/components/profile/ProfileHeader.tsx | 4 |
4 files changed, 61 insertions, 67 deletions
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index 6abcb566..2fd2b41d 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -6,7 +6,6 @@ import { TextInputSelectionChangeEventData, View, } from 'react-native'; - import { MentionInputProps, MentionPartType, @@ -43,16 +42,16 @@ const MentionInputControlled: FC<MentionInputProps> = ({ const validRegex = () => { if (partTypes.length === 0) { - return /.*\@[^ ]*$/; + return /.*@[^ ]*$/; } else { - return new RegExp(`.*\@${keywordByTrigger[partTypes[0].trigger]}.*$`); + return new RegExp(`.*@${keywordByTrigger[partTypes[0].trigger]}.*$`); } }; - const {plainText, parts} = useMemo(() => parseValue(value, partTypes), [ - value, - partTypes, - ]); + const {plainText, parts} = useMemo( + () => parseValue(value, partTypes), + [value, partTypes], + ); const handleSelectionChange = ( event: NativeSyntheticEvent<TextInputSelectionChangeEventData>, @@ -91,36 +90,35 @@ const MentionInputControlled: FC<MentionInputProps> = ({ * - Get updated value * - Trigger onChange callback with new value */ - const onSuggestionPress = (mentionType: MentionPartType) => ( - suggestion: Suggestion, - ) => { - const newValue = generateValueWithAddedSuggestion( - parts, - mentionType, - plainText, - selection, - suggestion, - ); - - if (!newValue) { - return; - } + const onSuggestionPress = + (mentionType: MentionPartType) => (suggestion: Suggestion) => { + const newValue = generateValueWithAddedSuggestion( + parts, + mentionType, + plainText, + selection, + suggestion, + ); + + if (!newValue) { + return; + } - onChange(newValue); + onChange(newValue); - /** - * Move cursor to the end of just added mention starting from trigger string and including: - * - Length of trigger string - * - Length of mention name - * - Length of space after mention (1) - * - * Not working now due to the RN bug - */ - // const newCursorPosition = currentPart.position.start + triggerPartIndex + trigger.length + - // suggestion.name.length + 1; + /** + * Move cursor to the end of just added mention starting from trigger string and including: + * - Length of trigger string + * - Length of mention name + * - Length of space after mention (1) + * + * Not working now due to the RN bug + */ + // const newCursorPosition = currentPart.position.start + triggerPartIndex + trigger.length + + // suggestion.name.length + 1; - // textInput.current?.setNativeProps({selection: {start: newCursorPosition, end: newCursorPosition}}); - }; + // textInput.current?.setNativeProps({selection: {start: newCursorPosition, end: newCursorPosition}}); + }; const handleTextInputRef = (ref: TextInput) => { textInput.current = ref as TextInput; @@ -129,7 +127,8 @@ const MentionInputControlled: FC<MentionInputProps> = ({ if (typeof propInputRef === 'function') { propInputRef(ref); } else { - (propInputRef as MutableRefObject<TextInput>).current = ref as TextInput; + (propInputRef as MutableRefObject<TextInput>).current = + ref as TextInput; } } }; @@ -151,12 +150,14 @@ const MentionInputControlled: FC<MentionInputProps> = ({ return ( <View style={containerStyle}> {validateInput(keyboardText) - ? (partTypes.filter( - (one) => - isMentionPartType(one) && - one.renderSuggestions != null && - !one.isBottomMentionSuggestionsRender, - ) as MentionPartType[]).map(renderMentionSuggestions) + ? ( + partTypes.filter( + (one) => + isMentionPartType(one) && + one.renderSuggestions != null && + !one.isBottomMentionSuggestionsRender, + ) as MentionPartType[] + ).map(renderMentionSuggestions) : null} <TextInput @@ -181,12 +182,14 @@ const MentionInputControlled: FC<MentionInputProps> = ({ </TextInput> {validateInput(keyboardText) - ? (partTypes.filter( - (one) => - isMentionPartType(one) && - one.renderSuggestions != null && - one.isBottomMentionSuggestionsRender, - ) as MentionPartType[]).map(renderMentionSuggestions) + ? ( + partTypes.filter( + (one) => + isMentionPartType(one) && + one.renderSuggestions != null && + one.isBottomMentionSuggestionsRender, + ) as MentionPartType[] + ).map(renderMentionSuggestions) : null} </View> ); diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx index 3d9c0471..16e98690 100644 --- a/src/components/common/BottomDrawer.tsx +++ b/src/components/common/BottomDrawer.tsx @@ -71,15 +71,14 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => { enabledContentGestureInteraction={false} callbackNode={bgAlpha} onCloseEnd={() => { - setModalVisible(false); - setIsOpen(false); + if (!isOpen) { + setModalVisible(false); + setIsOpen(false); + } }} /> - <TouchableWithoutFeedback - onPress={() => { - setIsOpen(false); - }}> + <TouchableWithoutFeedback onPress={() => setIsOpen(false)}> <Animated.View style={[styles.backgroundView, {backgroundColor}]} /> </TouchableWithoutFeedback> </Modal> diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx index d2e9fc49..3c3ee4c3 100644 --- a/src/components/moments/MomentPostHeader.tsx +++ b/src/components/moments/MomentPostHeader.tsx @@ -1,4 +1,5 @@ -import React, {useEffect, useState} from 'react'; +import {useNavigation} from '@react-navigation/native'; +import React, {useState} from 'react'; import { StyleSheet, Text, @@ -6,14 +7,13 @@ import { View, ViewProps, } from 'react-native'; -import {MomentMoreInfoDrawer} from '../profile'; -import {loadUserMoments} from '../../store/actions'; import {useDispatch, useSelector, useStore} from 'react-redux'; -import {ScreenType} from '../../types'; -import TaggAvatar from '../profile/TaggAvatar'; -import {useNavigation} from '@react-navigation/native'; +import {loadUserMoments} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; +import {ScreenType} from '../../types'; import {fetchUserX, userXInStore} from '../../utils'; +import {MomentMoreInfoDrawer} from '../profile'; +import TaggAvatar from '../profile/TaggAvatar'; interface MomentPostHeaderProps extends ViewProps { userXId?: string; @@ -51,10 +51,6 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({ }); }; - useEffect(() => { - setDrawerVisible(drawerVisible); - }, [drawerVisible]); - return ( <View style={[styles.container, style]}> <TouchableOpacity onPress={navigateToProfile} style={styles.header}> diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 14f7dc71..db5308b9 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -85,10 +85,6 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({ } }; - useEffect(() => { - setDrawerVisible(drawerVisible); - }, [drawerVisible]); - return ( <View ref={containerRef} style={styles.container}> <ProfileMoreInfoDrawer |