Merge pull request #467 from brian-tagg/tma869-adjust-mentions

[TMA-869] adjust mentions

1 files changed, 65 insertions, 5 deletions

diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index 2fd2b41d..0965e318 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -1,13 +1,23 @@
-import React, {FC, MutableRefObject, useMemo, useRef, useState} from 'react';
+import React, {
+  FC,
+  MutableRefObject,
+  Ref,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
+  StyleProp,
   Text,
   TextInput,
+  TextInputProps,
   TextInputSelectionChangeEventData,
   View,
+  ViewStyle,
 } from 'react-native';
 import {
-  MentionInputProps,
+  PatternPartType,
   MentionPartType,
   Suggestion,
 } from 'react-native-controlled-mentions/dist/types';
@@ -20,7 +30,30 @@ import {
   parseValue,
 } from 'react-native-controlled-mentions/dist/utils';
 
-const MentionInputControlled: FC<MentionInputProps> = ({
+type PartType = MentionPartType | PatternPartType;
+
+type MentionInputControlledProps = Omit<TextInputProps, 'onChange'> & {
+  value: string;
+  onChange: (value: string) => any;
+
+  partTypes?: PartType[];
+
+  inputRef?: Ref<TextInput>;
+
+  containerStyle?: StyleProp<ViewStyle>;
+
+  addComment?: () => any | null;
+
+  NewText?: FC<any>;
+
+  theme?: 'dark' | 'white';
+
+  keyboardVisible?: boolean;
+
+  comment?: string;
+};
+
+const MentionInputControlled: FC<MentionInputControlledProps> = ({
   value,
   onChange,
 
@@ -32,6 +65,16 @@ const MentionInputControlled: FC<MentionInputProps> = ({
 
   onSelectionChange,
 
+  addComment,
+
+  NewText,
+
+  theme = 'white',
+
+  keyboardVisible = true,
+
+  comment = '',
+
   ...textInputProps
 }) => {
   const textInput = useRef<TextInput | null>(null);
@@ -147,7 +190,24 @@ const MentionInputControlled: FC<MentionInputProps> = ({
     return validRegex().test(testString);
   };
 
-  return (
+  return NewText ? (
+    <NewText
+      {...textInputProps}
+      containerStyle={containerStyle}
+      validateInput={validateInput}
+      keyboardText={keyboardText}
+      partTypes={partTypes}
+      renderMentionSuggestions={renderMentionSuggestions}
+      handleTextInputRef={handleTextInputRef}
+      onChangeInput={onChangeInput}
+      handleSelectionChange={handleSelectionChange}
+      parts={parts}
+      addComment={addComment}
+      theme={theme}
+      keyboardVisible={keyboardVisible}
+      comment={comment}
+    />
+  ) : (
     <View style={containerStyle}>
       {validateInput(keyboardText)
         ? (
@@ -195,4 +255,4 @@ const MentionInputControlled: FC<MentionInputProps> = ({
   );
 };
 
-export {MentionInputControlled};
+export default MentionInputControlled;