-
-
Notifications
You must be signed in to change notification settings - Fork 185
/
ErrorView.tsx
61 lines (56 loc) · 1.45 KB
/
ErrorView.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
import React from "react";
import clsx from "clsx";
import ErrorIcon from "@mui/icons-material/Error";
import { Theme, Tooltip } from "@mui/material";
import createStyles from "@mui/styles/createStyles";
import makeStyles from "@mui/styles/makeStyles";
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
flexCenter: {
display: "flex",
alignItems: "center"
},
smallMargin: {
margin: theme.spacing(1)
},
text: {
paddingLeft: theme.spacing(2)
}
})
);
/**
* @category Components
*/
export interface ErrorViewProps {
error: string,
tooltip?: string
}
/**
* Generic error view. Displayed for example when an unexpected value comes
* from the datasource in a collection view.
* @param error
* @param tooltip
* @constructor
* @category Components
*/
export function ErrorView({
error,
tooltip
}: ErrorViewProps): React.ReactElement {
const classes = useStyles();
const body = (
<div
className={clsx(classes.flexCenter, classes.smallMargin)}>
<ErrorIcon fontSize={"small"} color={"error"}/>
<div className={classes.text}>{error}</div>
</div>
);
if (tooltip) {
return (
<Tooltip title={tooltip}>
{body}
</Tooltip>
);
}
return body;
}