feat!: add ability for defined pattern list custom style - #13

Added `partTypes` property for defining list of possible mention types or patterns for parsing.
Updated README.md.
Added tests for new method for parsing value.

BREAKING CHANGES: `mentionTypes` renamed to `partTypes`. `MentionType` changed to `PartType` which can be either `MentionPartType` or `PatternPartType`. New types defined in README.md.

Author: dabakovich

README.md

@@ -34,14 +34,14 @@ Import the [MentionInput](#mentioninput-component-props) component:
 import { MentionInput } from 'react-native-controlled-mentions'
 ```
 
-Replace your [TextInput](https://reactnative.dev/docs/textinput) by [MentionInput](#mentioninput-component-props) component and add the `mentionTypes` property where you can define what mention types you want to support. It takes an array of [MentionType](#mentiontype-type-props) objects.
+Replace your [TextInput](https://reactnative.dev/docs/textinput) by [MentionInput](#mentioninput-component-props) component and add the `partTypes` property where you can define what mention or pattern types you want to support. It takes an array of [PartType](#parttype-type) objects.
 
 ```tsx
 <Mentions
   value={value}
   onChange={setValue}
 
-  mentionTypes={[
+  partTypes={[
     {
       trigger: '@', // Should be a single character like '@' or '#'
       renderSuggestions,
@@ -100,12 +100,15 @@ API
 |-------------------	|--------------------------------------------------------------------   |----------------------------------------   |------------   |------------   |
 | `value`             	| The same as in `TextInput`                                            | string                 	                | true     	    |               |
 | `onChange`          	| The same as in `TextInput`                                            | (value: string) => void 	                | true     	    |               |
-| `mentionTypes`      	| Declare what mention types you want to support (mentions, hashtags) 	| [MentionType](#mentiontype-type-props)[]  | false    	    | []            |
+| `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\<TextInput>          	                | false    	    |               |
 | `containerStyle`    	| Style to the `MentionInput`'s root component                 	        | StyleProp\<TextStyle>                     | false    	    |               |
 | ...textInputProps 	| Other text input props                                     	        | TextInputProps         	                | false    	    |               |
 
-### `MentionType` type props
+### `PartType` type
+[MentionPartType](#mentionparttype-type-props) | [PatternPartType](#patternparttype-type-props)
+
+### `MentionPartType` type props
 
 | **Property name**             | **Description**                                                                       | **Type**                                                                              | **Required** 	| **Default** 	|
 |---------------------------	|-----------------------------------------------------------------------------------	|-----------------------------------------------------------------------------------	|------------   |-----------    |
@@ -115,6 +118,13 @@ API
 | `textStyle`                 	| Text style for mentions in `TextInput`                                                | StyleProp\<TextStyle>                         	                                    | false    	    |               |
 | `getPlainString`            	| Function for generating custom mention text in text input                         	| (mention: [MentionData](#mentiondata-type-props)) => string              	            | false    	    |               |
 
+### `PatternPartType` type props
+
+| **Property name**             | **Description**                                                                       | **Type**                                                                              | **Required** 	| **Default** 	|
+|---------------------------	|-----------------------------------------------------------------------------------	|-----------------------------------------------------------------------------------	|------------   |-----------    |
+| `pattern`                   	| RegExp for parsing a pattern, should include global flag                              | RegExp                                        	                                    | true     	    |               |
+| `textStyle`                 	| Text style for pattern in `TextInput`                                                 | StyleProp\<TextStyle>                         	                                    | false    	    |               |
+
 ### `MentionSuggestionsProps` type props
 
 `keyword: string | undefined`
@@ -199,7 +209,7 @@ console.log(replaceMentionValues(value, ({name}) => `@${name}`)); // Hello @Davi
 To Do
 -
 
-* Add support for different text formatting (e.g. URLs)
+* ~~Add support for different text formatting (e.g. URLs)~~
 * ~~Add more customizations~~ DONE
 * ~~Add ability to handle few mention types ("#", "@" etc)~~ DONE
 

example/mentions-app.tsx

@@ -56,7 +56,7 @@ const App = () => {
         value={value}
         onChange={setValue}
 
-        mentionTypes={[
+        partTypes={[
           {
             trigger: '@',
             renderSuggestions: renderMentionSuggestions,
@@ -66,6 +66,10 @@ const App = () => {
             renderSuggestions: renderHashtagSuggestions,
             textStyle: {fontWeight: 'bold', color: 'grey'},
           },
+          {
+            pattern: /(https?:\/\/|www\.)[-a-zA-Z0-9@:%._\+~#=]{1,256}\.(xn--)?[a-z0-9-]{2,20}\b([-a-zA-Z0-9@:%_\+\[\],.~#?&\/=]*[-a-zA-Z0-9@:%_\+\]~#?&\/=])*/gi,
+            textStyle: {color: 'blue'},
+          },
         ]}
 
         placeholder="Type here..."

src/components/mention-input.tsx

@@ -7,20 +7,21 @@ import {
   View,
 } from 'react-native';
 
-import { MentionInputProps, MentionType, Suggestion } from '../types';
+import { MentionInputProps, MentionPartType, Suggestion } from '../types';
 import {
   defaultMentionTextStyle,
   generateValueFromPartsAndChangedText,
   generateValueWithAddedSuggestion,
-  getPartsFromValue,
+  isMentionPartType,
+  parseValue,
 } from '../utils';
 
 const MentionInput: FC<MentionInputProps> = (
   {
     value,
     onChange,
 
-    mentionTypes = [],
+    partTypes = [],
 
     inputRef: propInputRef,
 
@@ -35,7 +36,10 @@ const MentionInput: FC<MentionInputProps> = (
 
   const [selection, setSelection] = useState({start: 0, end: 0});
 
-  const {plainText, parts} = useMemo(() => getPartsFromValue(mentionTypes, value), [value]);
+  const {
+    plainText,
+    parts,
+  } = useMemo(() => parseValue(value, partTypes), [value, partTypes]);
 
   const handleSelectionChange = (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
     setSelection(event.nativeEvent.selection);
@@ -68,7 +72,7 @@ const MentionInput: FC<MentionInputProps> = (
   const keywordByTrigger = useMemo((): { [trigger: string]: string | undefined } => {
     const newKeywordByTrigger: { [trigger: string]: string | undefined } = {};
 
-    mentionTypes.forEach((mentionType) => {
+    partTypes.filter(isMentionPartType).forEach((mentionPartType) => {
       if (selection.end != selection.start) {
         return undefined;
       }
@@ -77,7 +81,7 @@ const MentionInput: FC<MentionInputProps> = (
         return undefined;
       }
 
-      const triggerIndex = plainText.lastIndexOf(mentionType.trigger, selection.end);
+      const triggerIndex = plainText.lastIndexOf(mentionPartType.trigger, selection.end);
       const spaceIndex = plainText.lastIndexOf(' ', selection.end - 1);
       const newLineIndex = plainText.lastIndexOf('\n', selection.end - 1);
 
@@ -99,22 +103,22 @@ const MentionInput: FC<MentionInputProps> = (
 
         // When we have a mention just after space
         case spaceIndex + 1 === triggerIndex:
-          newKeywordByTrigger[mentionType.trigger] = plainText.substring(
+          newKeywordByTrigger[mentionPartType.trigger] = plainText.substring(
             triggerIndex + 1,
             selection.end,
           );
       }
     });
 
     return newKeywordByTrigger;
-  }, [parts, plainText, selection, mentionTypes]);
+  }, [parts, plainText, selection, partTypes]);
 
   /**
    * Callback on mention suggestion press. We should:
    * - Get updated value
    * - Trigger onChange callback with new value
    */
-  const onSuggestionPress = (mentionType: MentionType) => (suggestion: Suggestion) => {
+  const onSuggestionPress = (mentionType: MentionPartType) => (suggestion: Suggestion) => {
     const newValue = generateValueWithAddedSuggestion(
       parts,
       mentionType,
@@ -157,8 +161,8 @@ const MentionInput: FC<MentionInputProps> = (
 
   return (
     <View style={containerStyle}>
-      {mentionTypes
-        .filter(one => one.renderSuggestions != null)
+      {(partTypes
+        .filter(one => isMentionPartType(one) && one.renderSuggestions != null) as MentionPartType[])
         .map((mentionType) => (
           <React.Fragment key={mentionType.trigger}>
             {mentionType.renderSuggestions && mentionType.renderSuggestions({
@@ -180,10 +184,10 @@ const MentionInput: FC<MentionInputProps> = (
         onSelectionChange={handleSelectionChange}
       >
         <Text>
-          {parts.map(({text, data}, index) => data ? (
+          {parts.map(({text, partType, data}, index) => partType ? (
             <Text
-              key={`${index}-${data.trigger}`}
-              style={mentionTypes?.find(one => one.trigger === data.trigger)?.textStyle ?? defaultMentionTextStyle}
+              key={`${index}-${data?.trigger ?? 'pattern'}`}
+              style={partType.textStyle ?? defaultMentionTextStyle}
             >
               {text}
             </Text>

src/types/types.ts

@@ -14,6 +14,9 @@ type MentionData = {
 };
 
 type RegexMatchResult = {
+  // Matched string
+  0: string;
+
   // Start position of matched text in whole string
   index: number;
 
@@ -27,18 +30,12 @@ type Position = {
   end: number;
 };
 
-type Part = {
-  text: string;
-  position: Position;
-  data?: MentionData;
-};
-
 type MentionSuggestionsProps = {
   keyword: string | undefined;
   onSuggestionPress: (suggestion: Suggestion) => void;
 };
 
-type MentionType = {
+type MentionPartType = {
   // single trigger character eg '@' or '#'
   trigger: string;
 
@@ -55,11 +52,29 @@ type MentionType = {
   getPlainString?: (mention: MentionData) => string;
 };
 
+type PatternPartType = {
+  // RexExp with global flag
+  pattern: RegExp;
+
+  textStyle?: StyleProp<TextStyle>;
+};
+
+type PartType = MentionPartType | PatternPartType;
+
+type Part = {
+  text: string;
+  position: Position;
+
+  partType?: PartType;
+
+  data?: MentionData;
+};
+
 type MentionInputProps = Omit<TextInputProps, 'onChange'> & {
   value: string;
   onChange: (value: string) => any;
 
-  mentionTypes?: MentionType[];
+  partTypes?: PartType[];
 
   inputRef?: Ref<TextInput>;
 
@@ -73,6 +88,8 @@ export {
   Position,
   Part,
   MentionSuggestionsProps,
-  MentionType,
+  MentionPartType,
+  PatternPartType,
+  PartType,
   MentionInputProps,
 };