Merge branch 'master' into tma923-image-cropper

4 files changed, 243 insertions, 37 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 9667046c..8a4ec082 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -7,19 +7,16 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useDispatch, useSelector} from 'react-redux';
-import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {useDispatch} from 'react-redux';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
 import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
-import {RootState} from '../../store/rootreducer';
 import {CommentThreadType, CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
-import {Avatar} from '../common';
-import {MentionInputControlled} from './MentionInputControlled';
+import {CommentTextField} from './CommentTextField';
+import MentionInputControlled from './MentionInputControlled';
 
 export interface AddCommentProps {
   momentId: string;
@@ -38,12 +35,11 @@ const AddComment: React.FC<AddCommentProps> = ({
   isKeyboardAvoiding = true,
   theme = 'white',
 }) => {
-  const {setShouldUpdateAllComments = () => null, commentTapped} =
+  const {setShouldUpdateAllComments, commentTapped} =
     useContext(CommentContext);
   const [inReplyToMention, setInReplyToMention] = useState('');
   const [comment, setComment] = useState('');
   const [keyboardVisible, setKeyboardVisible] = useState(false);
-  const {avatar} = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const ref = useRef<TextInput>(null);
   const isReplyingToComment =
@@ -120,7 +116,6 @@ const AddComment: React.FC<AddCommentProps> = ({
         keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
       ]}>
       <View style={styles.textContainer}>
-        <Avatar style={styles.avatar} uri={avatar} />
         <MentionInputControlled
           containerStyle={styles.text}
           placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
@@ -134,25 +129,17 @@ const AddComment: React.FC<AddCommentProps> = ({
             );
           }}
           inputRef={ref}
-          partTypes={mentionPartTypes('blue')}
+          partTypes={mentionPartTypes('blue', 'comment')}
+          addComment={addComment}
+          NewText={CommentTextField}
+          theme={theme}
+          keyboardVisible={keyboardVisible}
+          comment={comment}
         />
-        {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
-          <View style={styles.submitButton}>
-            <TouchableOpacity
-              style={
-                comment === ''
-                  ? [styles.submitButton, styles.greyButton]
-                  : styles.submitButton
-              }
-              disabled={comment === ''}
-              onPress={addComment}>
-              <UpArrowIcon width={35} height={35} color={'white'} />
-            </TouchableOpacity>
-          </View>
-        )}
       </View>
     </View>
   );
+
   return isKeyboardAvoiding ? (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -176,17 +163,15 @@ const styles = StyleSheet.create({
   },
   textContainer: {
     width: '95%',
-    flexDirection: 'row',
     backgroundColor: '#e8e8e8',
     alignItems: 'center',
     justifyContent: 'space-between',
     margin: '3%',
     borderRadius: 25,
+    height: normalize(45),
   },
   text: {
     flex: 1,
-    padding: '1%',
-    marginHorizontal: '1%',
     maxHeight: 100,
   },
   avatar: {
@@ -209,9 +194,6 @@ const styles = StyleSheet.create({
     marginVertical: '2%',
     alignSelf: 'flex-end',
   },
-  greyButton: {
-    backgroundColor: 'grey',
-  },
   whiteBackround: {
     backgroundColor: '#fff',
   },
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
new file mode 100644
index 00000000..6e92329c
--- /dev/null
+++ b/src/components/comments/CommentTextField.tsx
@@ -0,0 +1,164 @@
+import React, {FC, ReactFragment} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  StyleProp,
+  Text,
+  TextInput,
+  TextInputSelectionChangeEventData,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {useSelector} from 'react-redux';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {
+  Part,
+  PartType,
+  MentionPartType,
+} from 'react-native-controlled-mentions/dist/types';
+import {
+  defaultMentionTextStyle,
+  isMentionPartType,
+} from 'react-native-controlled-mentions/dist/utils';
+import {Avatar} from '../common';
+import {normalize} from '../../utils';
+
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+
+type CommentTextFieldProps = {
+  containerStyle: StyleProp<ViewStyle>;
+  validateInput: any;
+  keyboardText: string;
+  partTypes: PartType[];
+  renderMentionSuggestions: (mentionType: MentionPartType) => ReactFragment;
+  handleTextInputRef: (ref: TextInput) => null;
+  onChangeInput: (changedText: string) => null;
+  handleSelectionChange: (
+    event: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
+  ) => null;
+  parts: Part[];
+  addComment: () => any;
+  theme?: 'dark' | 'white';
+  keyboardVisible?: boolean;
+  comment?: string;
+};
+
+const CommentTextField: FC<CommentTextFieldProps> = ({
+  containerStyle,
+  validateInput,
+  keyboardText,
+  partTypes,
+  renderMentionSuggestions,
+  handleTextInputRef,
+  onChangeInput,
+  handleSelectionChange,
+  parts,
+  addComment,
+  theme = 'white',
+  keyboardVisible = true,
+  comment = '',
+  ...textInputProps
+}) => {
+  const {avatar} = useSelector((state: RootState) => state.user);
+
+  return (
+    <View style={containerStyle}>
+      {validateInput(keyboardText)
+        ? (
+            partTypes.filter(
+              (one) =>
+                isMentionPartType(one) &&
+                one.renderSuggestions != null &&
+                !one.isBottomMentionSuggestionsRender,
+            ) as MentionPartType[]
+          ).map(renderMentionSuggestions)
+        : null}
+
+      <View style={styles.containerStyle}>
+        <Avatar style={styles.avatar} uri={avatar} />
+        <TextInput
+          multiline
+          {...textInputProps}
+          ref={handleTextInputRef}
+          onChangeText={onChangeInput}
+          onSelectionChange={handleSelectionChange}
+          style={styles.text}>
+          <Text>
+            {parts.map(({text, partType, data}, index) =>
+              partType ? (
+                <Text
+                  key={`${index}-${data?.trigger ?? 'pattern'}`}
+                  style={partType.textStyle ?? defaultMentionTextStyle}>
+                  {text}
+                </Text>
+              ) : (
+                <Text key={index}>{text}</Text>
+              ),
+            )}
+          </Text>
+        </TextInput>
+        {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
+          <View style={styles.submitButton}>
+            <TouchableOpacity
+              style={
+                comment === ''
+                  ? [styles.submitButton, styles.greyButton]
+                  : styles.submitButton
+              }
+              disabled={comment === ''}
+              onPress={addComment}>
+              <UpArrowIcon width={35} height={35} color={'white'} />
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+
+      {validateInput(keyboardText) &&
+        (
+          partTypes.filter(
+            (one) =>
+              isMentionPartType(one) &&
+              one.renderSuggestions != null &&
+              one.isBottomMentionSuggestionsRender,
+          ) as MentionPartType[]
+        ).map(renderMentionSuggestions)}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  avatar: {
+    height: 35,
+    width: 35,
+    borderRadius: 30,
+    marginRight: 10,
+    marginLeft: '3%',
+    marginVertical: '2%',
+  },
+  containerStyle: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: normalize(45),
+  },
+  greyButton: {
+    backgroundColor: 'grey',
+  },
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  text: {flex: 1},
+});
+
+export {CommentTextField};
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;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index d715714a..77334cb3 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,3 +1,3 @@
 export {default as CommentTile} from './CommentTile';
 export {default as AddComment} from './AddComment';
-export {default as ImageCropper} from './ImageCropper';
+export {default as MentionInputControlled} from './MentionInputControlled';