Added collapsable text for text that's too long

2026-08-10 11:50:44 +08:00 · 2023-01-03 03:11:50 +02:00
parent a83eb7ffe1
commit 1fdb3c4876
3 changed files with 41 additions and 1 deletions
@@ -0,0 +1,37 @@
+import { Button, Container, useDisclosure } from "@chakra-ui/react"
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalBody,
+    ModalCloseButton,
+  } from '@chakra-ui/react'
+import React from "react";
+
+export const CollapsableText = ({text, maxLength=220}) => {
+        const { isOpen, onOpen, onClose } = useDisclosure()
+        if (typeof(text) != 'string' || text.length <= maxLength) {
+            return text;
+        } else {
+            return (
+                <>
+                    {text.substring(0, maxLength-3)}
+                    <Button style={{display: 'contents'}} onClick={onOpen}>...</Button>
+                    <Container maxW='full'>
+                        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={'inside'} > 
+                            <ModalOverlay>
+                                <ModalContent maxH="400">
+                                    <ModalHeader>Full Text</ModalHeader>
+                                    <ModalCloseButton />
+                                    <ModalBody>
+                                        {text}
+                                    </ModalBody>
+                                </ModalContent>
+                            </ModalOverlay>
+                        </Modal>
+                    </Container>
+                </>
+            );
+        }
+    }