diff --git a/README.md b/README.md index b1ce52c..d00dc21 100644 --- a/README.md +++ b/README.md @@ -101,7 +101,7 @@ API | **Property name** | **Description** | **Type** | **Required** | **Default** | |------------------- |-------------------------------------------------------------------- |---------------------------------------- |------------ |------------ | | `value` | The same as in `TextInput` | string | true | | -| `onChange` | The same as in `TextInput` | (value: string) => void | true | | +| `onChange` | The same as in `TextInput` | (value: string, mentionExtraData?: any) => void | true | | | `partTypes` | Declare what part types you want to support (mentions, hashtags, urls)| [PartType](#parttype-type)[] | false | [] | | `inputRef` | Reference to the `TextInput` component inside `MentionInput` | Ref\ | false | | | `containerStyle` | Style to the `MentionInput`'s root component | StyleProp\ | false | | @@ -147,7 +147,7 @@ Examples where @name is just plain text yet, not mention and `|` is cursor posit 'abc @|name dfg' - keyword is against '' 'abc @name |dfg' - keyword is against undefined ``` -`onSuggestionPress: (suggestion: Suggestion) => void` +`onSuggestionPress: (suggestion: Suggestion, mentionExtraData?: any) => void` You should call that callback when user selects any suggestion. @@ -161,6 +161,11 @@ Unique id for each suggestion. Name that will be shown in `MentionInput` when user will select the suggestion. +`mentionExtraData: any` + +Any type of structure you desire to expose to the **onChange** method to handle extra mention manipulations + + ### `MentionData` type props For example, we have that mention value `@[David Tabaka](123)`. Then after parsing that string by `mentionRegEx` we will get next properties: @@ -277,6 +282,113 @@ const renderValue: FC = ( return {parts.map(renderPart)}; }; ``` +Using `mentionExtraData` example +- +If you want to make additional manipulations with mentions you can use the optional `mentionExtraData` param. + +Here is an example: + + +```tsx +import React from "react"; +import { Pressable, Text, View } from "react-native"; +import { + MentionInput, + MentionSuggestionsProps, +} from "react-native-controlled-mentions"; + +const randomSuggestions = [ + { + url: "google.com", + id: "123", + name: "Google", + avatar: "GoogleAvatarUrl", + }, + { + url: "bing.com", + id: "345", + name: "Bing", + avatar: "BingAvatarUrl", + }, +]; + +const MentionList = (props: MentionSuggestionsProps) => { + const { keyword, onSuggestionPress } = props; + + if (keyword == null) { + return null; + } + + const onAddMention = (mention: any) => { + const { name, id, url, avatar } = mention; + + // preview purpose, you can pass any data to mention + const extraMentionData = { + url, + avatar, + name, + id, + }; + // passes to MentionInput onChange, it's optional + onSuggestionPress({ id, name }, extraMentionData); + }; + + return ( + + {randomSuggestions + .filter((one) => + one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()) + ) + .map((suggestion) => ( + onAddMention(suggestion)} + style={{ padding: 12 }} + > + {suggestion.name} + {suggestion.url} + {suggestion.avatar} + {suggestion.id} + + ))} + + ); +}; + +export const ExtraMentionDataSample = () => { + const [textValue, setTextValue] = React.useState(""); + const [mentions, setMentions] = React.useState([]); + + const onChangeText = (text: string, mentionData?: any) => { + const newMentions = mentionData ? [...mentions, mentionData] : mentions; + // save newly selected mention + setMentions(newMentions); + setTextValue(text); + }; + + return ( + { + return ( + + ); + }, + }, + ]} + /> + ); +}; +``` + + To Do - diff --git a/src/components/mention-input.tsx b/src/components/mention-input.tsx index 5be83d4..23e9f5b 100644 --- a/src/components/mention-input.tsx +++ b/src/components/mention-input.tsx @@ -74,7 +74,7 @@ const MentionInput: FC = ( * - Get updated value * - Trigger onChange callback with new value */ - const onSuggestionPress = (mentionType: MentionPartType) => (suggestion: Suggestion) => { + const onSuggestionPress = (mentionType: MentionPartType) => (suggestion: Suggestion, mentionExtraData?: any) => { const newValue = generateValueWithAddedSuggestion( parts, mentionType, @@ -87,7 +87,7 @@ const MentionInput: FC = ( return; } - onChange(newValue); + onChange(newValue, mentionExtraData); /** * Move cursor to the end of just added mention starting from trigger string and including: diff --git a/src/types/types.ts b/src/types/types.ts index 5ec7d99..44d7fb2 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -7,6 +7,7 @@ type Suggestion = { name: string; }; + type MentionData = { original: string; trigger: string; @@ -47,7 +48,7 @@ type Position = { type MentionSuggestionsProps = { keyword: string | undefined; - onSuggestionPress: (suggestion: Suggestion) => void; + onSuggestionPress: (suggestion: Suggestion, mentionExtraData?: any) => void; }; type MentionPartType = { @@ -93,7 +94,7 @@ type Part = { type MentionInputProps = Omit & { value: string; - onChange: (value: string) => any; + onChange: (value: string, mentionExtraData?: any) => any; partTypes?: PartType[]; @@ -113,5 +114,5 @@ export type { MentionPartType, PatternPartType, PartType, - MentionInputProps, -}; + MentionInputProps +}; \ No newline at end of file