[C-5153] Update ComposerInput to not render the display layer unless …

…there is highlighted text (#10042)
AudiusProject · Oct 14, 2024 · 7d7008c · 7d7008c
1 parent e5d827b
commit 7d7008c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 16 deletions.
diff --git a/packages/mobile/src/components/composer-input/ComposerInput.tsx b/packages/mobile/src/components/composer-input/ComposerInput.tsx
@@ -73,7 +73,9 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     lineHeight: spacing(6),
     justifyContent: 'center',
     alignItems: 'center',
-    paddingTop: 0,
+    paddingTop: 0
+  },
+  hideText: {
     color: 'transparent'
   },
   overlayTextContainer: {
@@ -394,6 +396,14 @@ export const ComposerInput = forwardRef(function ComposerInput(
     </TouchableOpacity>
   )
 
+  const isTextHighlighted = useMemo(() => {
+    const matches = getMatches(value) ?? []
+    const timestamps = getTimestamps(value)
+    const mentions = getUserMentions(value) ?? []
+    const fullMatches = [...matches, ...mentions, ...timestamps]
+    return Boolean(fullMatches.length || isAutocompleteActive)
+  }, [getMatches, getTimestamps, getUserMentions, isAutocompleteActive, value])
+
   const renderDisplayText = useCallback(
     (value: string) => {
       const matches = getMatches(value) ?? []
@@ -485,10 +495,8 @@ export const ComposerInput = forwardRef(function ComposerInput(
           root: [styles.composeTextContainer, propStyles?.container],
           input: [
             styles.composeTextInput,
-            Platform.OS === 'ios' ? { paddingBottom: spacing(1.5) } : null
-            // {
-            //   maxHeight: hasCurrentlyPlayingTrack ? spacing(70) : spacing(80)
-            // }
+            Platform.OS === 'ios' ? { paddingBottom: spacing(1.5) } : null,
+            isTextHighlighted ? styles.hideText : null
           ]
         }}
         onChangeText={handleChange}
@@ -501,15 +509,16 @@ export const ComposerInput = forwardRef(function ComposerInput(
         autoCorrect
         TextInputComponent={TextInputComponent}
       />
-      <View
-        style={[
-          styles.overlayTextContainer,
-          Platform.OS === 'ios' ? { paddingBottom: spacing(1.5) } : null
-          // { maxHeight: hasCurrentlyPlayingTrack ? spacing(70) : spacing(80) }
-        ]}
-      >
-        <Text style={styles.overlayText}>{renderDisplayText(value)}</Text>
-      </View>
+      {isTextHighlighted ? (
+        <View
+          style={[
+            styles.overlayTextContainer,
+            Platform.OS === 'ios' ? { paddingBottom: spacing(1.5) } : null
+          ]}
+        >
+          <Text style={styles.overlayText}>{renderDisplayText(value)}</Text>
+        </View>
+      ) : null}
     </>
   )
 })
diff --git a/packages/web/src/components/composer-input/ComposerInput.tsx b/packages/web/src/components/composer-input/ComposerInput.tsx
@@ -1,4 +1,11 @@
-import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
 
 import {
   useGetCurrentUserId,
@@ -351,6 +358,20 @@ export const ComposerInput = (props: ComposerInputProps) => {
     ]
   )
 
+  const isTextHighlighted = useMemo(() => {
+    const matches = getMatches(value) ?? []
+    const timestamps = getTimestamps(value)
+    const mentions = getUserMentions(value) ?? []
+    const fullMatches = [...matches, ...mentions, ...timestamps]
+    return Boolean(fullMatches.length || isUserAutocompleteActive)
+  }, [
+    getMatches,
+    getTimestamps,
+    getUserMentions,
+    isUserAutocompleteActive,
+    value
+  ])
+
   const renderDisplayText = useCallback(
     (value: string) => {
       const matches = getMatches(value) ?? []
@@ -471,7 +492,7 @@ export const ComposerInput = (props: ComposerInputProps) => {
       showMaxLength={
         !!value && value.length > maxLength * MAX_LENGTH_DISPLAY_PERCENT
       }
-      renderDisplayElement={renderDisplayText}
+      renderDisplayElement={isTextHighlighted ? renderDisplayText : undefined}
       grows
       {...other}
     >