Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web #32

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

web #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6b2134b
web working, space added after @name, restructured component hierarch…
maxhudson Feb 23, 2021
bbd497e
cleanup
maxhudson Feb 23, 2021
2cfb6a9
Update utils.ts
maxhudson Feb 24, 2021
c67fa48
Update mention-input.tsx
maxhudson Feb 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 34 additions & 26 deletions src/components/mention-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
TextInput,
TextInputSelectionChangeEventData,
View,
Platform
} from 'react-native';

import { MentionInputProps, MentionPartType, Suggestion } from '../types';
Expand All @@ -27,6 +28,7 @@ const MentionInput: FC<MentionInputProps> = (
inputRef: propInputRef,

containerStyle,
overlayContainerStyle,

onSelectionChange,

Expand Down Expand Up @@ -74,7 +76,7 @@ const MentionInput: FC<MentionInputProps> = (
* - 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,
Expand All @@ -90,17 +92,24 @@ const MentionInput: FC<MentionInputProps> = (
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 + (mentionType.isInsertSpaceAfterMention ? 1 : 0) + 1;

setSelection({start: newCursorPosition, end: newCursorPosition}); //<TextInput selection doesn't seem to work on mobile
}
};

const handleTextInputRef = (ref: TextInput) => {
Expand All @@ -119,7 +128,7 @@ const MentionInput: FC<MentionInputProps> = (
<React.Fragment key={mentionType.trigger}>
{mentionType.renderSuggestions && mentionType.renderSuggestions({
keyword: keywordByTrigger[mentionType.trigger],
onSuggestionPress: onSuggestionPress(mentionType),
onSuggestionPress: onSuggestionPress(mentionType, keywordByTrigger[mentionType.trigger] || ''),
})}
</React.Fragment>
);
Expand All @@ -134,18 +143,18 @@ const MentionInput: FC<MentionInputProps> = (
)) as MentionPartType[])
.map(renderMentionSuggestions)
}

<TextInput
{...textInputProps}

ref={handleTextInputRef}

multiline

onChangeText={onChangeInput}
onSelectionChange={handleSelectionChange}
>
<Text>
<View>
<TextInput
{...textInputProps}
value={plainText}
ref={handleTextInputRef}
multiline
{...Platform.OS === 'web' ? {selection} : {}}
onChangeText={onChangeInput}
onSelectionChange={handleSelectionChange}
/>
{/** @ts-expect-error */}
Copy link
Author

@maxhudson maxhudson Feb 23, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not familiar with ts, so I'm not sure how to address the fact that it doesn't like these spreads properly

<Text style={{position: 'absolute', paddingTop: Platform.OS === 'web' ? 0 : 5, ...textInputProps.style, ...overlayContainerStyle}} pointerEvents={'none'}>
{parts.map(({text, partType, data}, index) => partType ? (
<Text
key={`${index}-${data?.trigger ?? 'pattern'}`}
Expand All @@ -157,8 +166,7 @@ const MentionInput: FC<MentionInputProps> = (
<Text key={index}>{text}</Text>
))}
</Text>
</TextInput>

</View>
{(partTypes
.filter(one => (
isMentionPartType(one)
Expand Down
1 change: 1 addition & 0 deletions src/types/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ type MentionInputProps = Omit<TextInputProps, 'onChange'> & {
inputRef?: Ref<TextInput>;

containerStyle?: StyleProp<ViewStyle>;
overlayContainerStyle?: StyleProp<ViewStyle>;
};

export {
Expand Down