From 6b2134be629bba904da67282ac31d9281894c402 Mon Sep 17 00:00:00 2001 From: maxhudson Date: Tue, 23 Feb 2021 13:11:10 -0800 Subject: [PATCH 1/4] web working, space added after @name, restructured component hierarchy some --- src/components/mention-input.tsx | 61 ++++++++++++++++++-------------- src/types/types.ts | 1 + src/utils/utils.ts | 2 +- 3 files changed, 37 insertions(+), 27 deletions(-) diff --git a/src/components/mention-input.tsx b/src/components/mention-input.tsx index 3ee8149..2ea72c1 100644 --- a/src/components/mention-input.tsx +++ b/src/components/mention-input.tsx @@ -5,6 +5,7 @@ import { TextInput, TextInputSelectionChangeEventData, View, + Platform } from 'react-native'; import { MentionInputProps, MentionPartType, Suggestion } from '../types'; @@ -27,6 +28,7 @@ const MentionInput: FC = ( inputRef: propInputRef, containerStyle, + overlayContainerStyle, onSelectionChange, @@ -74,7 +76,7 @@ const MentionInput: FC = ( * - Get updated value * - Trigger onChange callback with new value */ - const onSuggestionPress = (mentionType: MentionPartType) => (suggestion: Suggestion) => { + const onSuggestionPress = (mentionType: MentionPartType, keyword: String) => (suggestion: Suggestion) => { const newValue = generateValueWithAddedSuggestion( parts, mentionType, @@ -90,17 +92,24 @@ const MentionInput: FC = ( 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 + * Refocus on the input that was just blurred by a click event on PLATFORM.OS web + * Not an issue for PLATFORM.OS ios|android because keyboard events are not handled */ - // const newCursorPosition = currentPart.position.start + triggerPartIndex + trigger.length + - // suggestion.name.length + 1; - - // textInput.current?.setNativeProps({selection: {start: newCursorPosition, end: newCursorPosition}}); + if (Platform.OS === 'web') { + textInput.current?.focus(); + + /** + * Move cursor to the end of just added mention - especially important for PLATFORM.OS web: + * - Previous selection position + * + Length of mention name + * - Length of trigger string + * - Keyword text (i.e. "mi" for @Mike) + * + Length of space after mention (1) + */ + const newCursorPosition = selection.start + suggestion.name.length - mentionType.trigger.length - keyword.length + 2; + + setSelection({start: newCursorPosition, end: newCursorPosition}); // { @@ -119,7 +128,7 @@ const MentionInput: FC = ( {mentionType.renderSuggestions && mentionType.renderSuggestions({ keyword: keywordByTrigger[mentionType.trigger], - onSuggestionPress: onSuggestionPress(mentionType), + onSuggestionPress: onSuggestionPress(mentionType, keywordByTrigger[mentionType.trigger] || ''), })} ); @@ -134,18 +143,19 @@ const MentionInput: FC = ( )) as MentionPartType[]) .map(renderMentionSuggestions) } - - - + + + {/** @ts-expect-error */} + {parts.map(({text, partType, data}, index) => partType ? ( = ( {text} ))} - - + {(partTypes .filter(one => ( isMentionPartType(one) diff --git a/src/types/types.ts b/src/types/types.ts index 8944c4d..9cf98a5 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -85,6 +85,7 @@ type MentionInputProps = Omit & { inputRef?: Ref; containerStyle?: StyleProp; + overlayContainerStyle?: StyleProp; }; export { diff --git a/src/utils/utils.ts b/src/utils/utils.ts index b4eb5a8..781c64a 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -271,7 +271,7 @@ const generateValueWithAddedSuggestion = ( generatePlainTextPart(`${isInsertSpaceToNextPart ? ' ' : ''}${currentPart.text.substring(newMentionPartPosition.end)}`), ...parts.slice(currentPartIndex + 1), - ]); + ]) + ' '; }; /** From bbd497e6d2f56cadbd4b88bc47cccae14605b492 Mon Sep 17 00:00:00 2001 From: maxhudson Date: Tue, 23 Feb 2021 13:15:21 -0800 Subject: [PATCH 2/4] cleanup --- src/components/mention-input.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/mention-input.tsx b/src/components/mention-input.tsx index 2ea72c1..c5fbb55 100644 --- a/src/components/mention-input.tsx +++ b/src/components/mention-input.tsx @@ -150,7 +150,6 @@ const MentionInput: FC = ( ref={handleTextInputRef} multiline {...Platform.OS === 'web' ? {selection} : {}} - // selection={selection} onChangeText={onChangeInput} onSelectionChange={handleSelectionChange} /> From 2cfb6a9a49b86ee2683aca076bb1a00e8e51425c Mon Sep 17 00:00:00 2001 From: Max Hudson Date: Wed, 24 Feb 2021 09:44:15 -0800 Subject: [PATCH 3/4] Update utils.ts --- src/utils/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 781c64a..b4eb5a8 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -271,7 +271,7 @@ const generateValueWithAddedSuggestion = ( generatePlainTextPart(`${isInsertSpaceToNextPart ? ' ' : ''}${currentPart.text.substring(newMentionPartPosition.end)}`), ...parts.slice(currentPartIndex + 1), - ]) + ' '; + ]); }; /** From c67fa48e365b2d60a7bf7f817672b7d71dd95c81 Mon Sep 17 00:00:00 2001 From: Max Hudson Date: Wed, 24 Feb 2021 09:45:12 -0800 Subject: [PATCH 4/4] Update mention-input.tsx --- src/components/mention-input.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/mention-input.tsx b/src/components/mention-input.tsx index c5fbb55..b71faf0 100644 --- a/src/components/mention-input.tsx +++ b/src/components/mention-input.tsx @@ -104,9 +104,9 @@ const MentionInput: FC = ( * + Length of mention name * - Length of trigger string * - Keyword text (i.e. "mi" for @Mike) - * + Length of space after mention (1) + * +? Length of space after mention (1) */ - const newCursorPosition = selection.start + suggestion.name.length - mentionType.trigger.length - keyword.length + 2; + const newCursorPosition = selection.start + suggestion.name.length - mentionType.trigger.length - keyword.length + (mentionType.isInsertSpaceAfterMention ? 1 : 0) + 1; setSelection({start: newCursorPosition, end: newCursorPosition}); //