Fix bug in caption screen of suggestions not disappearing

1 files changed, 42 insertions, 64 deletions

diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index c37d2182..50762ac0 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  ReactFragment,
 } from 'react';
 import {
   NativeSyntheticEvent,
@@ -51,7 +52,9 @@ type MentionInputControlledProps = Omit<TextInputProps, 'onChange'> & {
 
   containerStyle?: StyleProp<ViewStyle>;
 
-  addComment?: () => any;
+  addComment?: () => any | null;
+
+  NewText?: FC<any>;
 };
 
 const MentionInputControlled: FC<MentionInputControlledProps> = ({
@@ -68,6 +71,8 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
 
   addComment,
 
+  NewText,
+
   ...textInputProps
 }) => {
   const textInput = useRef<TextInput | null>(null);
@@ -76,8 +81,6 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
 
   const [keyboardText, setKeyboardText] = useState<string>('');
 
-  const {avatar} = useSelector((state: RootState) => state.user);
-
   const validRegex = () => {
     if (partTypes.length === 0) {
       return /.*@[^ ]*$/;
@@ -185,7 +188,21 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
     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}
+    />
+  ) : (
     <View style={containerStyle}>
       {validateInput(keyboardText)
         ? (
@@ -198,35 +215,26 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
           ).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>
-        <View style={styles.submitButton}>
-          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
-            <UpArrowIcon width={35} height={35} color={'white'} />
-          </TouchableOpacity>
-        </View>
-      </View>
+      <TextInput
+        multiline
+        {...textInputProps}
+        ref={handleTextInputRef}
+        onChangeText={onChangeInput}
+        onSelectionChange={handleSelectionChange}>
+        <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>
 
       {validateInput(keyboardText)
         ? (
@@ -242,34 +250,4 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
   );
 };
 
-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(40),
-  },
-  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 {MentionInputControlled};
+export default MentionInputControlled;