-
Notifications
You must be signed in to change notification settings - Fork 5.5k
/
NumberedLines.tsx
66 lines (62 loc) · 1.72 KB
/
NumberedLines.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
import { Table, TableBody, TableCell, TableRow, Theme } from "@mui/material";
import { WithStyles } from "@mui/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import classNames from "classnames";
import React from "react";
const styles = (theme: Theme) =>
createStyles({
root: {
overflowX: "auto",
},
cell: {
borderWidth: 0,
fontFamily: "SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace",
padding: 0,
"&:last-child": {
paddingRight: 0,
},
},
lineNumber: {
color: theme.palette.text.secondary,
paddingRight: theme.spacing(2),
textAlign: "right",
verticalAlign: "top",
width: "1%",
// Use a ::before pseudo-element for the line number so that it won't
// interact with user selections or searching.
"&::before": {
content: "attr(data-line-number)",
},
},
line: {
textAlign: "left",
whiteSpace: "pre-wrap",
},
});
type Props = {
lines: string[];
};
class NumberedLines extends React.Component<Props & WithStyles<typeof styles>> {
render() {
const { classes, lines } = this.props;
return (
<Table>
<TableBody>
{lines.map((line, index) => (
<TableRow key={index}>
<TableCell
className={classNames(classes.cell, classes.lineNumber)}
data-line-number={index + 1}
/>
<TableCell className={classNames(classes.cell, classes.line)}>
{line}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
}
export default withStyles(styles)(NumberedLines);