-
-
Notifications
You must be signed in to change notification settings - Fork 303
/
Cell.tsx
80 lines (71 loc) · 2.31 KB
/
Cell.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
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
74
75
76
77
78
79
80
import * as React from "react";
import cn from "classnames";
import { GridCellProps } from "react-virtualized";
import { Text } from "@react-md/typography";
import { TooltipPosition } from "@react-md/tooltip";
import { positionRelativeTo, HorizontalPosition, VerticalPosition } from "@react-md/utils";
import CellTooltip from "./CellTooltip";
export interface ICellProps extends GridCellProps {
active: boolean;
portal: boolean;
}
export interface ICellState {
tooltipStyle?: React.CSSProperties;
visible: boolean;
}
export default class Cell extends React.Component<ICellProps, ICellState> {
private container: React.RefObject<HTMLDivElement>;
constructor(props: ICellProps) {
super(props);
this.state = { visible: false };
this.container = React.createRef();
}
public render() {
const { tooltipStyle, visible } = this.state;
const { style, columnIndex, rowIndex, portal, active } = this.props;
const id = `cell-${rowIndex}-${columnIndex}`;
const tooltipId = `cell-tooltip-${rowIndex}-${columnIndex}`;
return (
<div
id={id}
ref={this.container}
style={style}
role="gridcell"
aria-colcount={100}
aria-rowcount={100}
aria-colindex={columnIndex + 1}
aria-rowindex={rowIndex + 1}
className={cn("overflow-portal-example__cell", {
"overflow-portal-example__cell--active": active,
})}
onMouseEnter={this.showTooltip}
onMouseLeave={this.hideTooltip}
>
<Text type="body-2" aria-describedby={tooltipId} component="div">
{`Cell ${rowIndex}-${columnIndex}`}
<CellTooltip style={tooltipStyle} id={tooltipId} portal={portal} visible={visible} />
</Text>
</div>
);
}
private showTooltip = () => {
const container = this.container.current;
if (!container || this.state.visible) {
return;
}
const tooltip = document.getElementById(container.getAttribute("aria-describedby") as string);
this.setState({
tooltipStyle: positionRelativeTo(container, tooltip, {
verticalPosition: "below",
verticalSpacing: "1.5rem",
isPortalFixed: this.props.portal,
}),
visible: true,
});
};
private hideTooltip = () => {
if (this.state.visible) {
this.setState({ visible: false });
}
};
}