Fixed issue with mentions not collapsing when deleting '@' too quickly

2 files changed, 191 insertions, 1 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 9cf10b5e..28e1a40e 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -20,6 +20,7 @@ import {CommentThreadType, CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 import {Avatar} from '../common';
+import {MentionInputControlled} from './MentionInputControlled';
 
 export interface AddCommentProps {
   momentId: string;
@@ -112,7 +113,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
         ]}>
         <View style={styles.textContainer}>
           <Avatar style={styles.avatar} uri={avatar} />
-          <MentionInput
+          <MentionInputControlled
             containerStyle={styles.text}
             placeholder={placeholderText}
             value={inReplyToMention + comment}
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
new file mode 100644
index 00000000..642ef64c
--- /dev/null
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -0,0 +1,189 @@
+import React, { FC, MutableRefObject, useMemo, useRef, useState } from 'react';
+import {
+  NativeSyntheticEvent,
+  Text,
+  TextInput,
+  TextInputSelectionChangeEventData,
+  View,
+} from 'react-native';
+
+import { 
+    MentionInputProps, 
+    MentionPartType, 
+    Suggestion 
+} from 'react-native-controlled-mentions/dist/types';
+import {
+  defaultMentionTextStyle,
+  generateValueFromPartsAndChangedText,
+  generateValueWithAddedSuggestion,
+  getMentionPartSuggestionKeywords,
+  isMentionPartType,
+  parseValue,
+} from 'react-native-controlled-mentions/dist/utils';
+
+const MentionInputControlled: FC<MentionInputProps> = (
+  {
+    value,
+    onChange,
+
+    partTypes = [],
+
+    inputRef: propInputRef,
+
+    containerStyle,
+
+    onSelectionChange,
+
+    ...textInputProps
+  },
+) => {
+  const textInput = useRef<TextInput | null>(null);
+
+  const [selection, setSelection] = useState({start: 0, end: 0});
+
+  const [keyboardText, setKeyboardText] = useState<string>('');
+
+  const validRegex = /.*\@[^ ]*$/;
+
+  const {
+    plainText,
+    parts,
+  } = useMemo(() => parseValue(value, partTypes), [value, partTypes]);
+
+  const handleSelectionChange = (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+    setSelection(event.nativeEvent.selection);
+
+    onSelectionChange && onSelectionChange(event);
+  };
+
+  /**
+   * Callback that trigger on TextInput text change
+   *
+   * @param changedText
+   */
+  const onChangeInput = (changedText: string) => {
+    setKeyboardText(changedText);
+    onChange(generateValueFromPartsAndChangedText(parts, plainText, changedText));
+  };
+
+  /**
+   * We memoize the keyword to know should we show mention suggestions or not
+   */
+  const keywordByTrigger = useMemo(() => {
+    return getMentionPartSuggestionKeywords(
+      parts,
+      plainText,
+      selection,
+      partTypes,
+    );
+  }, [parts, plainText, selection, partTypes]);
+
+  /**
+   * Callback on mention suggestion press. We should:
+   * - 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;
+    }
+
+    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;
+
+    // textInput.current?.setNativeProps({selection: {start: newCursorPosition, end: newCursorPosition}});
+  };
+
+  const handleTextInputRef = (ref: TextInput) => {
+    textInput.current = ref as TextInput;
+
+    if (propInputRef) {
+      if (typeof propInputRef === 'function') {
+        propInputRef(ref);
+      } else {
+        (propInputRef as MutableRefObject<TextInput>).current = ref as TextInput;
+      }
+    }
+  };
+
+  const renderMentionSuggestions = (mentionType: MentionPartType) => (
+    <React.Fragment key={mentionType.trigger}>
+      {mentionType.renderSuggestions && mentionType.renderSuggestions({
+        keyword: keywordByTrigger[mentionType.trigger],
+        onSuggestionPress: onSuggestionPress(mentionType),
+      })}
+    </React.Fragment>
+  );
+
+  const validateInput = (testString: string) => {
+      return validRegex.test(testString);
+  }
+
+  return (
+    <View style={containerStyle}>
+      {validateInput(keyboardText) ? (partTypes
+        .filter(one => (
+          isMentionPartType(one)
+          && one.renderSuggestions != null
+          && !one.isBottomMentionSuggestionsRender
+        )) as MentionPartType[])
+        .map(renderMentionSuggestions)
+        : null
+      }
+
+      <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) ? (partTypes
+        .filter(one => (
+          isMentionPartType(one)
+          && one.renderSuggestions != null
+          && one.isBottomMentionSuggestionsRender
+        )) as MentionPartType[])
+        .map(renderMentionSuggestions)
+        : null
+      }
+    </View>
+  );
+};
+
+export { MentionInputControlled };
\ No newline at end of file