wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-08-17 11:13:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Ran pre-commit to make prettier happy.

Browse Source
This commit is contained in:
Kostia
2023-01-03 03:42:36 +02:00
parent 1fdb3c4876
commit c68bbe75d0
2 changed files with 31 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/CollapsableText.tsx
+28 -35
View File
@@ -1,37 +1,30 @@
import { Button, Container, useDisclosure } from "@chakra-ui/react"
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalCloseButton,
} from '@chakra-ui/react'
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>
</>
);
}
}
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>
</>
);
}
};