feat: add isInsertSpaceAfterMention property

dabakovich · Dec 17, 2020 · 2ef3f04 · 2ef3f04
1 parent 89db1e9
commit 2ef3f04
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -98,15 +98,16 @@ export default App;
 
 The `Mentions` component supports next props:
 
-| Prop name         | Type                                              | Required | Default value | Description                       |
-|-------------------|---------------------------------------------------|----------|---------------|-----------------------------------|
-| value             | string                                            | true     |               |                                   |
-| onChange          | function (value)                                  | true     |               |                                   |
-| renderSuggestions | function ({keyword, onSuggestionPress}) ReactNode | false    |               |                                   |
-| trigger           | string                                            | false    | '@'           |                                   |
-| inputRef          | TextInput                                         | false    |               |                                   |
-| containerStyle    | StyleProp\<ViewStyle>                             | false    |               |                                   |
-| ...textInputProps | TextInputProps                                    | false    |               |  Other text input props           |
+| Property name             | Type                                              | Required | Default value | Description                                                                        |
+|---------------------------|---------------------------------------------------|----------|---------------|------------------------------------------------------------------------------------|
+| value                     | string                                            | true     |               |                                                                                    |
+| onChange                  | function (value)                                  | true     |               |                                                                                    |
+| renderSuggestions         | function ({keyword, onSuggestionPress}) ReactNode | false    |               |                                                                                    |
+| trigger                   | string                                            | false    | '@'           | Character that will trigger mentions                                               |
+| isInsertSpaceAfterMention | boolean                                           | false    | false         | Should we add a space after selected mentions if the mention is at the end of row  |
+| inputRef                  | TextInput                                         | false    |               |                                                                                    |
+| containerStyle            | StyleProp\<ViewStyle>                             | false    |               |                                                                                    |
+| ...textInputProps         | TextInputProps                                    | false    |               | Other text input props                                                             |
 
 ### Parsing `Mention`'s value
 
@@ -130,6 +131,7 @@ console.log(replaceMentionValues(value, ({name}) => `@${name}`)); // Hello @Davi
 ```
 
 ### To Do
+
 * Add more customizations
 * Add ability to handle few mention types ("#", "@" etc)
 

diff --git a/src/components/mentions.tsx b/src/components/mentions.tsx
@@ -26,6 +26,8 @@ const Mentions: FC<MentionsProps> = (
 
     trigger = '@',
 
+    isInsertSpaceAfterMention = false,
+
     containerStyle,
 
     inputRef: propInputRef,
@@ -119,7 +121,7 @@ const Mentions: FC<MentionsProps> = (
               partWithAddition,
               getPart(value, start),
               ...newParts.slice(partWithAdditionIndex + 1),
-            ]
+            ];
 
             return;
           }
@@ -210,24 +212,26 @@ const Mentions: FC<MentionsProps> = (
       return;
     }
 
-    const newMentionPart: Position = {
+    const newMentionPartPosition: Position = {
       start: triggerPartIndex,
       end: selection.end - currentPart.position.start,
     };
 
-    const isInsertSpaceToNextPart = !parts[currentPartIndex]?.text.startsWith(' ');
+    const isInsertSpaceToNextPart = isInsertSpaceAfterMention
+      // Cursor it at the very of parts or text row
+      && (plainText.length === selection.end || parts[currentPartIndex]?.text.startsWith('\n', newMentionPartPosition.end));
 
     const newParts = [
       ...parts.slice(0, currentPartIndex),
 
       // Create part with string before mention
-      getPart(currentPart.text.substring(0, newMentionPart.start)),
+      getPart(currentPart.text.substring(0, newMentionPartPosition.start)),
       getMentionPart(trigger, {
         ...suggestion,
         original: getMentionValue(suggestion),
       }),
       // Create part with rest of string after mention and add a space if needed
-      getPart(`${isInsertSpaceToNextPart ? ' ' : ''}${currentPart.text.substring(newMentionPart.end)}`),
+      getPart(`${isInsertSpaceToNextPart ? ' ' : ''}${currentPart.text.substring(newMentionPartPosition.end)}`),
 
       ...parts.slice(currentPartIndex + 1),
     ];

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -46,6 +46,9 @@ type MentionsProps = Omit<TextInputProps, 'onChange'> & {
   // Character that will trigger mentions (usually '@')
   trigger?: string;
 
+  // Should we add a space after selected mentions if the mention is at the end of row
+  isInsertSpaceAfterMention?: boolean;
+
   inputRef?: MutableRefObject<TextInput | null>;
 
   containerStyle?: StyleProp<ViewStyle>;