Feature, expose extra mention data to onChange/onSuggestionPress

[vforvasile]

Hey!

Thanks for creating this project.

We had a use case where we needed a more complex data object to be saved when a mention was pressed but encountered some issues when we tried to implement it only with onSuggestionPress (some events not triggering).

As a solution, I added an optional param extraMentionData to be able to access the data from onChange event.

Added this example in README:

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 (
    <View>
      {randomSuggestions
        .filter((one) =>
          one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase())
        )
        .map((suggestion) => (
          <Pressable
            key={suggestion.id}
            onPress={() => onAddMention(suggestion)}
            style={{ padding: 12 }}
          >
            <Text>{suggestion.name}</Text>
            <Text>{suggestion.url}</Text>
            <Text>{suggestion.avatar}</Text>
            <Text>{suggestion.id}</Text>
          </Pressable>
        ))}
    </View>
  );
};

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 (
    <MentionInput
      value={textValue}
      onChange={onChangeText}
      partTypes={[
        {
          trigger: "@",
          renderSuggestions: (localProps) => {
            return (
              <MentionList
                onSuggestionPress={localProps.onSuggestionPress}
                keyword={localProps.keyword}
              />
            );
          },
        },
      ]}
    />
  );
};