Playbooks SeeMoreText.tsx

0% Statements 0/11
0% Branches 0/5
0% Functions 0/3
0% Lines 0/11
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useState } from "react";
import { Button, Dialog, DialogContent, DialogActions } from "@mui/material";
 
const SeeMoreText = ({ title, text, truncSize = 50 }) => {
  const [open, setOpen] = useState(false);
 
  const TRUNC_SIZE = truncSize;
 
  const handleOpen = () => {
    setOpen(true);
  };
 
  const handleClose = () => {
    setOpen(false);
  };
 
  return (
    <>
      <p style={{ fontSize: "12px" }}>
        {text.length > TRUNC_SIZE
          ? `${text.substring(0, TRUNC_SIZE)}...`
          : text}
        {text.length > TRUNC_SIZE && (
          <span
            style={{
              color: "blue",
              textDecoration: "underline",
              cursor: "pointer",
              marginLeft: 5,
            }}
            onClick={handleOpen}>
            See full
          </span>
        )}
      </p>
      <Dialog open={open} onClose={handleClose}>
        <DialogContent>
          <h3 style={{ marginBottom: "5px" }}>
            <b>{title}</b>
          </h3>
          <p
            style={{
              fontSize: "12px",
              width: "100%",
              overflowWrap: "break-word",
            }}>
            {text}
          </p>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
};
 
export default SeeMoreText;