Functionality to manually expand text

AletheiaFact · Jan 18, 2025 · 17b522d · 17b522d
1 parent d343716
commit 17b522d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 4 deletions.
diff --git a/public/locales/en/verificationRequest.json b/public/locales/en/verificationRequest.json
@@ -50,5 +50,6 @@
     "topicsFilterOption": "Topics",
     "contentFilterOption": "Content",
     "filterByContentLabel": "Filter by Content",
-    "applyButtonLabel": "Apply"
+    "applyButtonLabel": "Apply",
+    "showText": "Show"
 }
diff --git a/public/locales/pt/verificationRequest.json b/public/locales/pt/verificationRequest.json
@@ -50,5 +50,6 @@
     "topicsFilterOption": "Tópicos",
     "contentFilterOption": "Conteudo",
     "filterByContentLabel": "Filtrar por Conteudo",
-    "applyButtonLabel": "Aplicar"
+    "applyButtonLabel": "Aplicar",
+    "showText": "Mostrar"
 }
diff --git a/src/components/VerificationRequest/VerificationRequestCard.tsx b/src/components/VerificationRequest/VerificationRequestCard.tsx
@@ -1,5 +1,5 @@
-import { Grid, Chip, Typography } from "@mui/material";
-import React from "react";
+import { Grid, Chip, Typography, Button } from "@mui/material";
+import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import CardBase from "../CardBase";
 import Link from "next/link";
@@ -62,9 +62,25 @@ const truncateUrl = (url) => {
 const VerificationRequestCard = ({
     verificationRequest,
     actions = [],
+    expandable = true,
     t,
     style = {},
 }) => {
+    const [visible, setVisible] = useState(false);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const textRef = useRef(null);
+
+    const handleToggle = () => {
+        setVisible(true);
+    };
+
+    useEffect(() => {
+        if (textRef.current) {
+            const isOverflow = textRef.current.scrollHeight > textRef.current.clientHeight;
+            setIsOverflowing(isOverflow);
+        }
+    }, [verificationRequest.content]);
+
     const getTags = (verificationRequest) => {
         const tags = [];
         if (verificationRequest.publicationDate) {
@@ -156,15 +172,31 @@ const VerificationRequestCard = ({
         <CardBase style={{ padding: 32, ...style }}>
             <ContentWrapper>
                 <Typography
+                    ref={textRef}
                     variant="body1"
                     style={{
                         color: colors.black,
                         margin: 0,
                         lineHeight: 1.6,
+                        display: "-webkit-box",
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        WebkitLineClamp: visible ? "none" : 3,
                     }}
+
                 >
                     {verificationRequest.content}
                 </Typography>
+                {expandable && !visible && isOverflowing && (
+                    <Button
+                        variant="text"
+                        style={{ marginLeft: "auto", color: colors.lightPrimary, textDecoration: 'underline', padding: 0 }}
+                        onClick={handleToggle}
+                    >
+                        {t("verificationRequest:showText")}
+                    </Button>
+                )}
                 <TagContainer>{getTags(verificationRequest)}</TagContainer>
             </ContentWrapper>
 

diff --git a/src/components/VerificationRequest/VerificationRequestResultList.tsx b/src/components/VerificationRequest/VerificationRequestResultList.tsx
@@ -33,6 +33,7 @@ const VerificationRequestResultList = ({ results }) => {
                     >
                         <VerificationRequestCard
                             verificationRequest={verificationRequest}
+                            expandable={false}
                             t={t}
                             style={{ minHeight: "100%" }}
                             actions={[