-
Notifications
You must be signed in to change notification settings - Fork 3.2k
/
CollapsableText.tsx
28 lines (27 loc) · 986 Bytes
/
CollapsableText.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { Button, 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>
<Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"} >
<ModalOverlay style={{ width: "100%", height: "100%" }}>
<ModalContent maxH="400">
<ModalHeader>Full Text</ModalHeader>
<ModalCloseButton />
<ModalBody>{text}</ModalBody>
</ModalContent>
</ModalOverlay>
</Modal>
</>
);
}
};