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
62
63
64
65
66
67
68
69
70
71
72
73
|
import React, { useRef, useEffect, useState } from "react";
import { connect } from "react-redux";
import Tooltip from "@material-ui/core/Tooltip";
import Fade from "@material-ui/core/Fade";
import Box from "@material-ui/core/Box";
import IconButton from "@material-ui/core/IconButton";
import AddCircleOutline from "@material-ui/icons/AddCircleOutline";
import Typography from "@material-ui/core/Typography";
import { socket } from "./connect";
import { updateCheckbox } from "./redux/nodes";
const OverflowTip = (props) => {
const textElementRef = useRef(null);
const [hoverStatus, setHover] = useState(false);
const compareSize = (textElementRef) => {
if (textElementRef.current != null) {
const compare =
textElementRef.current.scrollWidth > textElementRef.current.offsetWidth;
setHover(compare);
}
};
useEffect(() => {
compareSize(textElementRef);
window.addEventListener("resize", compareSize);
return function () {
window.removeEventListener("resize", compareSize);
};
}, [props, textElementRef.current]);
return (
<Tooltip
title={props.value}
interactive
disableHoverListener={!hoverStatus}
style={{ fontSize: "1em" }}
enterDelay={500}
TransitionComponent={Fade}
>
<Box
style={{
fontSize: "1em",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
<Typography noWrap variant={"body2"} gutterBottom>
{props.button && (
<IconButton
size="small"
color="secondary"
onClick={(event) => {
props.updateCheckbox({ node: props.text, value: "flip" });
socket.emit("row_selected", {
data: { node: props.text, name: props.name },
isSelected: "flip",
});
}}
>
<AddCircleOutline style={{ height: "15px", width: "15px" }} />
</IconButton>
)}
<span ref={textElementRef}>{props.text}</span>
</Typography>
</Box>
</Tooltip>
);
};
export default connect(null, { updateCheckbox })(OverflowTip);
|
