Merge pull request #5109 from urbit/hm/feed-ref-rendering

PostContent: height detect and fade for truncation

pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx

@@ -1,17 +1,20 @@
 import { Col, ColProps } from '@tlon/indigo-react';
 import { Post } from '@urbit/api';
-import React, { ReactElement } from 'react';
-import styled from 'styled-components';
+import React, { ReactElement, useCallback, useState } from 'react';
+import styled, { css } from 'styled-components';
 import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 
 type TruncateProps = ColProps & {
-  truncate?: number;
+  truncate: boolean;
 }
 
 const TruncatedBox = styled(Col)<TruncateProps>`
   display: -webkit-box;
-  -webkit-line-clamp: ${p => p.truncate ?? 'unset'};
   -webkit-box-orient: vertical;
+  ${p => p.truncate && css`
+    max-height: 300px;
+    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%);
+  `}
 `;
 
 interface PostContentProps {
@@ -20,16 +23,24 @@ interface PostContentProps {
   isReply: boolean;
 }
 
-const PostContent = (props: PostContentProps): ReactElement => {
-  const { post, isParent } = props;
+const PostContent = ({ post, isParent }: PostContentProps): ReactElement => {
+  const [height, setHeight] = useState(0);
+  const showFade = !isParent && height >= 300;
+
+  const measuredRef = useCallback((node) => {
+    if (node !== null) {
+      setHeight(node.getBoundingClientRect().height);
+    }
+  }, []);
 
   return (
     <TruncatedBox
+      ref={measuredRef}
+      truncate={showFade}
       display="-webkit-box"
       width="90%"
       px={2}
       pb={2}
-      truncate={isParent ? null : 8}
       textOverflow="ellipsis"
       overflow="hidden"
     >