From 8560936e0dc21ee2d06677c766a0bbcbc93b6de0 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 16 Jun 2021 23:53:03 +0900
Subject: Further merges with master

---
 src/components/comments/AddComment.tsx             | 84 ++++++++++++++--------
 src/components/comments/CommentTextField.tsx       | 28 ++++++--
 src/components/comments/MentionInputControlled.tsx | 15 ++++
 3 files changed, 94 insertions(+), 33 deletions(-)

(limited to 'src')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index eda04752..a510c355 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -22,9 +22,20 @@ import {normalize} from 'react-native-elements';
 export interface AddCommentProps {
   momentId: string;
   placeholderText: string;
+  callback?: (message: string) => void;
+  onFocus?: () => void;
+  isKeyboardAvoiding?: boolean;
+  theme?: 'dark' | 'white';
 }
 
-const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
+const AddComment: React.FC<AddCommentProps> = ({
+  momentId,
+  placeholderText,
+  callback = (_) => null,
+  onFocus = () => null,
+  isKeyboardAvoiding = true,
+  theme = 'white',
+}) => {
   const {setShouldUpdateAllComments, commentTapped} =
     useContext(CommentContext);
   const [inReplyToMention, setInReplyToMention] = useState('');
@@ -47,13 +58,15 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
     if (trimmed === '') {
       return;
     }
+    const message = inReplyToMention + trimmed;
     const postedComment = await postComment(
-      inReplyToMention + trimmed,
+      message,
       objectId,
       isReplyingToComment || isReplyingToReply,
     );
 
     if (postedComment) {
+      callback(message);
       setComment('');
       setInReplyToMention('');
 
@@ -97,41 +110,56 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
     }
   }, [isReplyingToComment, isReplyingToReply, commentTapped]);
 
-  return (
+  const mainContent = () => (
+    <View
+      style={[
+        theme === 'white' ? styles.containerWhite : styles.containerDark,
+        keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
+      ]}>
+      <View style={styles.textContainer}>
+        <MentionInputControlled
+          containerStyle={styles.text}
+          placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
+          placeholder={placeholderText}
+          value={inReplyToMention + comment}
+          onFocus={onFocus}
+          onChange={(newText: string) => {
+            // skipping the `inReplyToMention` text
+            setComment(
+              newText.substring(inReplyToMention.length, newText.length),
+            );
+          }}
+          inputRef={ref}
+          partTypes={mentionPartTypes('blue', 'comment')}
+          addComment={addComment}
+          NewText={CommentTextField}
+          theme={theme}
+          keyboardVisible={keyboardVisible}
+          comment={comment}
+        />
+      </View>
+    </View>
+  );
+
+  return isKeyboardAvoiding ? (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
-      <View
-        style={[
-          styles.container,
-          keyboardVisible ? styles.whiteBackround : {},
-        ]}>
-        <View style={styles.textContainer}>
-          <MentionInputControlled
-            containerStyle={styles.text}
-            placeholder={placeholderText}
-            value={inReplyToMention + comment}
-            onChange={(newText: string) => {
-              // skipping the `inReplyToMention` text
-              setComment(
-                newText.substring(inReplyToMention.length, newText.length),
-              );
-            }}
-            inputRef={ref}
-            partTypes={mentionPartTypes('blue', 'comment')}
-            addComment={addComment}
-            NewText={CommentTextField}
-          />
-        </View>
-      </View>
+      {mainContent()}
     </KeyboardAvoidingView>
+  ) : (
+    mainContent()
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
+  containerDark: {
+    alignItems: 'center',
+    width: SCREEN_WIDTH,
+  },
+  containerWhite: {
+    backgroundColor: '#f7f7f7',
     alignItems: 'center',
-    justifyContent: 'center',
     width: SCREEN_WIDTH,
   },
   textContainer: {
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
index 3e97449c..a3a14ec8 100644
--- a/src/components/comments/CommentTextField.tsx
+++ b/src/components/comments/CommentTextField.tsx
@@ -40,6 +40,9 @@ type CommentTextFieldProps = {
   ) => null;
   parts: Part[];
   addComment: () => any;
+  theme?: 'dark' | 'white';
+  keyboardVisible?: boolean;
+  comment?: string;
 };
 
 const CommentTextField: FC<CommentTextFieldProps> = ({
@@ -53,6 +56,9 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
   handleSelectionChange,
   parts,
   addComment,
+  theme = 'white',
+  keyboardVisible = true,
+  comment = '',
   ...textInputProps
 }) => {
   const {avatar} = useSelector((state: RootState) => state.user);
@@ -93,11 +99,20 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
             )}
           </Text>
         </TextInput>
-        <View style={styles.submitButton}>
-          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
-            <UpArrowIcon width={35} height={35} color={'white'} />
-          </TouchableOpacity>
-        </View>
+        {(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)
@@ -130,6 +145,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: normalize(40),
   },
+  greyButton: {
+    backgroundColor: 'grey',
+  },
   submitButton: {
     height: 35,
     width: 35,
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index de52d1c1..0965e318 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -45,6 +45,12 @@ type MentionInputControlledProps = Omit<TextInputProps, 'onChange'> & {
   addComment?: () => any | null;
 
   NewText?: FC<any>;
+
+  theme?: 'dark' | 'white';
+
+  keyboardVisible?: boolean;
+
+  comment?: string;
 };
 
 const MentionInputControlled: FC<MentionInputControlledProps> = ({
@@ -63,6 +69,12 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
 
   NewText,
 
+  theme = 'white',
+
+  keyboardVisible = true,
+
+  comment = '',
+
   ...textInputProps
 }) => {
   const textInput = useRef<TextInput | null>(null);
@@ -191,6 +203,9 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
       handleSelectionChange={handleSelectionChange}
       parts={parts}
       addComment={addComment}
+      theme={theme}
+      keyboardVisible={keyboardVisible}
+      comment={comment}
     />
   ) : (
     <View style={containerStyle}>
-- 
cgit v1.2.3-70-g09d2