truncate long posts gradient

gallery-so · Apr 1, 2024 · 0e1f10f · 0e1f10f
1 parent 272545c
commit 0e1f10f
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 5 deletions.
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -36,6 +36,7 @@
     "expo-device": "~5.9.3",
     "expo-file-system": "~16.0.8",
     "expo-font": "~11.10.3",
+    "expo-linear-gradient": "^12.7.2",
     "expo-linking": "~6.2.2",
     "expo-notifications": "~0.27.6",
     "expo-secure-store": "~12.8.1",

diff --git a/apps/mobile/src/components/Feed/Posts/PostListCaption.tsx b/apps/mobile/src/components/Feed/Posts/PostListCaption.tsx
@@ -1,7 +1,10 @@
-import { useMemo } from 'react';
-import { View } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useCallback, useMemo } from 'react';
+import React, { useState } from 'react';
+import { NativeSyntheticEvent, StyleSheet, TextLayoutEventData, View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 
+import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity';
 import ProcessedText from '~/components/ProcessedText/ProcessedText';
 import { PostListCaptionFragment$key } from '~/generated/PostListCaptionFragment.graphql';
 import { removeNullValues } from '~/shared/relay/removeNullValues';
@@ -12,6 +15,13 @@ type Props = {
 };
 
 export function PostListCaption({ feedPostRef }: Props) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [textHeight, setTextHeight] = useState(0);
+
+  const toggleExpanded = () => {
+    setIsExpanded((prev) => !prev);
+  };
+
   const feedPost = useFragment(
     graphql`
       fragment PostListCaptionFragment on Post {
@@ -30,9 +40,56 @@ export function PostListCaption({ feedPostRef }: Props) {
 
   const nonNullMentions = useMemo(() => removeNullValues(feedPost.mentions), [feedPost.mentions]);
 
+  const handleTextLayout = useCallback((e: NativeSyntheticEvent<TextLayoutEventData>) => {
+    const { lines } = e.nativeEvent;
+    if (lines.length >= 4) {
+      setTextHeight(e.nativeEvent.lines[3]?.height || 0);
+    } else {
+      setTextHeight(0);
+    }
+  }, []);
+
+  const shouldShowGradient = textHeight > 0 && !isExpanded;
+
   return (
-    <View className="px-4 pb-4">
-      <ProcessedText text={captionWithMarkdownLinks} mentionsRef={nonNullMentions} />
-    </View>
+    <GalleryTouchableOpacity
+      onPress={toggleExpanded}
+      activeOpacity={0.7}
+      eventElementId="sa"
+      eventName="saaa"
+      eventContext="Feed"
+    >
+      <View key={isExpanded ? 'expanded' : 'collapsed'} className="px-4 pb-4">
+        <ProcessedText
+          numberOfLines={isExpanded ? undefined : 4}
+          text={captionWithMarkdownLinks}
+          mentionsRef={nonNullMentions}
+          onTextLayout={handleTextLayout}
+        />
+        {shouldShowGradient ? (
+          <LinearGradient
+            colors={['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 0, y: 1 }}
+            locations={[0.4, 1]}
+            style={styles.linearGradientContainer}
+          />
+        ) : null}
+      </View>
+    </GalleryTouchableOpacity>
   );
 }
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+    lineHeight: 18,
+  },
+  linearGradientContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
diff --git a/yarn.lock b/yarn.lock
@@ -17773,6 +17773,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-linear-gradient@npm:^12.7.2":
+  version: 12.7.2
+  resolution: "expo-linear-gradient@npm:12.7.2"
+  peerDependencies:
+    expo: "*"
+  checksum: afe4daf423dcaa02900a1252eb670a75089b9c9837bff2bd7f76199b7ad76f4b48efadaeec773b4d328456d9e8e3d56f68f9f665312681e1537adadbd97b54ff
+  languageName: node
+  linkType: hard
+
 "expo-linking@npm:~6.2.2":
   version: 6.2.2
   resolution: "expo-linking@npm:6.2.2"
@@ -24651,6 +24660,7 @@ __metadata:
     expo-device: ~5.9.3
     expo-file-system: ~16.0.8
     expo-font: ~11.10.3
+    expo-linear-gradient: ^12.7.2
     expo-linking: ~6.2.2
     expo-notifications: ~0.27.6
     expo-secure-store: ~12.8.1