aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/comments/AddComment.tsx44
-rw-r--r--src/components/comments/CommentTextField.tsx164
-rw-r--r--src/components/comments/MentionInputControlled.tsx70
-rw-r--r--src/components/comments/index.ts2
-rw-r--r--src/components/common/TaggTypeahead.tsx74
-rw-r--r--src/screens/profile/CaptionScreen.tsx6
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx5
-rw-r--r--src/utils/comments.tsx11
8 files changed, 301 insertions, 75 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 9667046c..8a4ec082 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -7,19 +7,16 @@ import {
TextInput,
View,
} from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useDispatch, useSelector} from 'react-redux';
-import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {useDispatch} from 'react-redux';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
import {postComment} from '../../services';
import {updateReplyPosted} from '../../store/actions';
-import {RootState} from '../../store/rootreducer';
import {CommentThreadType, CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils';
import {mentionPartTypes} from '../../utils/comments';
-import {Avatar} from '../common';
-import {MentionInputControlled} from './MentionInputControlled';
+import {CommentTextField} from './CommentTextField';
+import MentionInputControlled from './MentionInputControlled';
export interface AddCommentProps {
momentId: string;
@@ -38,12 +35,11 @@ const AddComment: React.FC<AddCommentProps> = ({
isKeyboardAvoiding = true,
theme = 'white',
}) => {
- const {setShouldUpdateAllComments = () => null, commentTapped} =
+ const {setShouldUpdateAllComments, commentTapped} =
useContext(CommentContext);
const [inReplyToMention, setInReplyToMention] = useState('');
const [comment, setComment] = useState('');
const [keyboardVisible, setKeyboardVisible] = useState(false);
- const {avatar} = useSelector((state: RootState) => state.user);
const dispatch = useDispatch();
const ref = useRef<TextInput>(null);
const isReplyingToComment =
@@ -120,7 +116,6 @@ const AddComment: React.FC<AddCommentProps> = ({
keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
]}>
<View style={styles.textContainer}>
- <Avatar style={styles.avatar} uri={avatar} />
<MentionInputControlled
containerStyle={styles.text}
placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
@@ -134,25 +129,17 @@ const AddComment: React.FC<AddCommentProps> = ({
);
}}
inputRef={ref}
- partTypes={mentionPartTypes('blue')}
+ partTypes={mentionPartTypes('blue', 'comment')}
+ addComment={addComment}
+ NewText={CommentTextField}
+ theme={theme}
+ keyboardVisible={keyboardVisible}
+ comment={comment}
/>
- {(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'}
@@ -176,17 +163,15 @@ const styles = StyleSheet.create({
},
textContainer: {
width: '95%',
- flexDirection: 'row',
backgroundColor: '#e8e8e8',
alignItems: 'center',
justifyContent: 'space-between',
margin: '3%',
borderRadius: 25,
+ height: normalize(45),
},
text: {
flex: 1,
- padding: '1%',
- marginHorizontal: '1%',
maxHeight: 100,
},
avatar: {
@@ -209,9 +194,6 @@ const styles = StyleSheet.create({
marginVertical: '2%',
alignSelf: 'flex-end',
},
- greyButton: {
- backgroundColor: 'grey',
- },
whiteBackround: {
backgroundColor: '#fff',
},
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
new file mode 100644
index 00000000..6e92329c
--- /dev/null
+++ b/src/components/comments/CommentTextField.tsx
@@ -0,0 +1,164 @@
+import React, {FC, ReactFragment} from 'react';
+import {
+ NativeSyntheticEvent,
+ StyleSheet,
+ StyleProp,
+ Text,
+ TextInput,
+ TextInputSelectionChangeEventData,
+ TouchableOpacity,
+ View,
+ ViewStyle,
+} from 'react-native';
+import {useSelector} from 'react-redux';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {
+ Part,
+ PartType,
+ MentionPartType,
+} from 'react-native-controlled-mentions/dist/types';
+import {
+ defaultMentionTextStyle,
+ isMentionPartType,
+} from 'react-native-controlled-mentions/dist/utils';
+import {Avatar} from '../common';
+import {normalize} from '../../utils';
+
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+
+type CommentTextFieldProps = {
+ containerStyle: StyleProp<ViewStyle>;
+ validateInput: any;
+ keyboardText: string;
+ partTypes: PartType[];
+ renderMentionSuggestions: (mentionType: MentionPartType) => ReactFragment;
+ handleTextInputRef: (ref: TextInput) => null;
+ onChangeInput: (changedText: string) => null;
+ handleSelectionChange: (
+ event: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
+ ) => null;
+ parts: Part[];
+ addComment: () => any;
+ theme?: 'dark' | 'white';
+ keyboardVisible?: boolean;
+ comment?: string;
+};
+
+const CommentTextField: FC<CommentTextFieldProps> = ({
+ containerStyle,
+ validateInput,
+ keyboardText,
+ partTypes,
+ renderMentionSuggestions,
+ handleTextInputRef,
+ onChangeInput,
+ handleSelectionChange,
+ parts,
+ addComment,
+ theme = 'white',
+ keyboardVisible = true,
+ comment = '',
+ ...textInputProps
+}) => {
+ const {avatar} = useSelector((state: RootState) => state.user);
+
+ return (
+ <View style={containerStyle}>
+ {validateInput(keyboardText)
+ ? (
+ partTypes.filter(
+ (one) =>
+ isMentionPartType(one) &&
+ one.renderSuggestions != null &&
+ !one.isBottomMentionSuggestionsRender,
+ ) as MentionPartType[]
+ ).map(renderMentionSuggestions)
+ : null}
+
+ <View style={styles.containerStyle}>
+ <Avatar style={styles.avatar} uri={avatar} />
+ <TextInput
+ multiline
+ {...textInputProps}
+ ref={handleTextInputRef}
+ onChangeText={onChangeInput}
+ onSelectionChange={handleSelectionChange}
+ style={styles.text}>
+ <Text>
+ {parts.map(({text, partType, data}, index) =>
+ partType ? (
+ <Text
+ key={`${index}-${data?.trigger ?? 'pattern'}`}
+ style={partType.textStyle ?? defaultMentionTextStyle}>
+ {text}
+ </Text>
+ ) : (
+ <Text key={index}>{text}</Text>
+ ),
+ )}
+ </Text>
+ </TextInput>
+ {(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>
+
+ {validateInput(keyboardText) &&
+ (
+ partTypes.filter(
+ (one) =>
+ isMentionPartType(one) &&
+ one.renderSuggestions != null &&
+ one.isBottomMentionSuggestionsRender,
+ ) as MentionPartType[]
+ ).map(renderMentionSuggestions)}
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ avatar: {
+ height: 35,
+ width: 35,
+ borderRadius: 30,
+ marginRight: 10,
+ marginLeft: '3%',
+ marginVertical: '2%',
+ },
+ containerStyle: {
+ flexDirection: 'row',
+ alignSelf: 'center',
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: normalize(45),
+ },
+ greyButton: {
+ backgroundColor: 'grey',
+ },
+ submitButton: {
+ height: 35,
+ width: 35,
+ backgroundColor: TAGG_LIGHT_BLUE,
+ borderRadius: 999,
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginRight: '3%',
+ marginVertical: '2%',
+ alignSelf: 'flex-end',
+ },
+ text: {flex: 1},
+});
+
+export {CommentTextField};
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index 2fd2b41d..0965e318 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -1,13 +1,23 @@
-import React, {FC, MutableRefObject, useMemo, useRef, useState} from 'react';
+import React, {
+ FC,
+ MutableRefObject,
+ Ref,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
import {
NativeSyntheticEvent,
+ StyleProp,
Text,
TextInput,
+ TextInputProps,
TextInputSelectionChangeEventData,
View,
+ ViewStyle,
} from 'react-native';
import {
- MentionInputProps,
+ PatternPartType,
MentionPartType,
Suggestion,
} from 'react-native-controlled-mentions/dist/types';
@@ -20,7 +30,30 @@ import {
parseValue,
} from 'react-native-controlled-mentions/dist/utils';
-const MentionInputControlled: FC<MentionInputProps> = ({
+type PartType = MentionPartType | PatternPartType;
+
+type MentionInputControlledProps = Omit<TextInputProps, 'onChange'> & {
+ value: string;
+ onChange: (value: string) => any;
+
+ partTypes?: PartType[];
+
+ inputRef?: Ref<TextInput>;
+
+ containerStyle?: StyleProp<ViewStyle>;
+
+ addComment?: () => any | null;
+
+ NewText?: FC<any>;
+
+ theme?: 'dark' | 'white';
+
+ keyboardVisible?: boolean;
+
+ comment?: string;
+};
+
+const MentionInputControlled: FC<MentionInputControlledProps> = ({
value,
onChange,
@@ -32,6 +65,16 @@ const MentionInputControlled: FC<MentionInputProps> = ({
onSelectionChange,
+ addComment,
+
+ NewText,
+
+ theme = 'white',
+
+ keyboardVisible = true,
+
+ comment = '',
+
...textInputProps
}) => {
const textInput = useRef<TextInput | null>(null);
@@ -147,7 +190,24 @@ const MentionInputControlled: FC<MentionInputProps> = ({
return validRegex().test(testString);
};
- return (
+ return NewText ? (
+ <NewText
+ {...textInputProps}
+ containerStyle={containerStyle}
+ validateInput={validateInput}
+ keyboardText={keyboardText}
+ partTypes={partTypes}
+ renderMentionSuggestions={renderMentionSuggestions}
+ handleTextInputRef={handleTextInputRef}
+ onChangeInput={onChangeInput}
+ handleSelectionChange={handleSelectionChange}
+ parts={parts}
+ addComment={addComment}
+ theme={theme}
+ keyboardVisible={keyboardVisible}
+ comment={comment}
+ />
+ ) : (
<View style={containerStyle}>
{validateInput(keyboardText)
? (
@@ -195,4 +255,4 @@ const MentionInputControlled: FC<MentionInputProps> = ({
);
};
-export {MentionInputControlled};
+export default MentionInputControlled;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index d715714a..77334cb3 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,3 +1,3 @@
export {default as CommentTile} from './CommentTile';
export {default as AddComment} from './AddComment';
-export {default as ImageCropper} from './ImageCropper';
+export {default as MentionInputControlled} from './MentionInputControlled';
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 747e0bb5..7967fdbc 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,21 +1,29 @@
import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet} from 'react-native';
-import {MentionSuggestionsProps} from 'react-native-controlled-mentions';
+import {ScrollView, StyleSheet, View} from 'react-native';
+import {Suggestion} from 'react-native-controlled-mentions';
import {useSelector} from 'react-redux';
import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
import {loadSearchResults} from '../../services';
import {RootState} from '../../store/rootReducer';
import {ProfilePreviewType} from '../../types';
-import {SCREEN_WIDTH, shuffle} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
import TaggUserRowCell from './TaggUserRowCell';
-const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
+type TaggTypeaheadProps = {
+ keyword: string | undefined;
+ component: string | undefined;
+ onSuggestionPress: (suggestion: Suggestion) => void;
+};
+
+const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
keyword,
+ component,
onSuggestionPress,
}) => {
const {friends} = useSelector((state: RootState) => state.friends);
const [results, setResults] = useState<ProfilePreviewType[]>([]);
const [height, setHeight] = useState(0);
+ const margin = component === 'comment' ? -10 : 0;
useEffect(() => {
if (keyword === '') {
@@ -42,40 +50,50 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
}
return (
- <ScrollView
- style={[styles.container, {top: -(height + 30)}]}
- showsVerticalScrollIndicator={false}
- onLayout={(event) => {
- setHeight(event.nativeEvent.layout.height);
- }}
- keyboardShouldPersistTaps={'always'}>
- {results.map((user) => (
- <TaggUserRowCell
- onPress={() => {
- setResults([]);
- onSuggestionPress({
- id: user.id,
- name: user.username,
- });
- }}
- user={user}
- />
- ))}
- </ScrollView>
+ <View>
+ <View style={styles.overlay} />
+ <ScrollView
+ style={[styles.container, {top: -height, margin: margin}]}
+ showsVerticalScrollIndicator={false}
+ onLayout={(event) => {
+ setHeight(event.nativeEvent.layout.height);
+ }}
+ keyboardShouldPersistTaps={'always'}>
+ {results.map((user) => (
+ <TaggUserRowCell
+ onPress={() => {
+ setResults([]);
+ onSuggestionPress({
+ id: user.id,
+ name: user.username,
+ });
+ }}
+ user={user}
+ />
+ ))}
+ </ScrollView>
+ </View>
);
};
const styles = StyleSheet.create({
container: {
- marginLeft: SCREEN_WIDTH * 0.05,
- width: SCREEN_WIDTH * 0.9,
+ width: SCREEN_WIDTH,
maxHeight: 264,
- borderRadius: 10,
backgroundColor: 'white',
position: 'absolute',
alignSelf: 'center',
zIndex: 1,
- borderWidth: 1,
+ },
+ overlay: {
+ width: SCREEN_WIDTH,
+ height: SCREEN_HEIGHT,
+ backgroundColor: 'gray',
+ opacity: 0.4,
+ position: 'absolute',
+ alignSelf: 'center',
+ bottom: 10,
+ zIndex: -1,
},
});
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 74f774b9..75533a9b 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -13,7 +13,7 @@ import {
TouchableWithoutFeedback,
View,
} from 'react-native';
-import {MentionInput} from 'react-native-controlled-mentions';
+import {MentionInputControlled} from '../../components';
import {Button, normalize} from 'react-native-elements';
import {useDispatch, useSelector} from 'react-redux';
import FrontArrow from '../../assets/icons/front-arrow.svg';
@@ -199,13 +199,13 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
source={{uri: moment ? moment.moment_url : image?.path}}
resizeMode={'contain'}
/>
- <MentionInput
+ <MentionInputControlled
containerStyle={styles.text}
placeholder="Write something....."
placeholderTextColor="gray"
value={caption}
onChange={setCaption}
- partTypes={mentionPartTypes('blue')}
+ partTypes={mentionPartTypes('blue', 'caption')}
/>
<TouchableOpacity
onPress={() =>
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 7dfe8ae9..402e5f44 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -48,9 +48,8 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
React.useState(true);
//Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
- const [commentTapped, setCommentTapped] = useState<
- CommentType | CommentThreadType | undefined
- >();
+ const [commentTapped, setCommentTapped] =
+ useState<CommentType | CommentThreadType | undefined>();
useEffect(() => {
navigation.setOptions({
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 910b44e7..28879622 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -79,13 +79,16 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
);
};
-export const mentionPartTypes: (theme: 'blue' | 'white') => PartType[] = (
- theme,
-) => {
+export const mentionPartTypes: (
+ theme: 'blue' | 'white',
+ component: 'caption' | 'comment',
+) => PartType[] = (theme, component) => {
return [
{
trigger: '@',
- renderSuggestions: (props) => <TaggTypeahead {...props} />,
+ renderSuggestions: (props) => (
+ <TaggTypeahead component={component} {...props} />
+ ),
allowedSpacesCount: 0,
isInsertSpaceAfterMention: true,
textStyle: _textStyle(theme),
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:08:15 +0000