refs #master Merge branch 'origin/master' into 14007-ts-paths
[arvados-workbench2.git] / src / components / default-view / default-view.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import * as React from 'react';
6 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
7 import { ArvadosTheme } from '../../common/custom-theme';
8 import { Typography } from '@material-ui/core';
9 import { IconType } from '../icon/icon';
10 import * as classnames from "classnames";
11
12 type CssRules = 'root' | 'icon' | 'message';
13
14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
15     root: {
16         textAlign: 'center'
17     },
18     icon: {
19         color: theme.palette.grey["500"],
20         fontSize: '4.5rem'
21     },
22     message: {
23         color: theme.palette.grey["500"]
24     }
25 });
26
27 export interface DefaultViewDataProps {
28     classRoot?: string;
29     messages: string[];
30     classMessage?: string;
31     icon: IconType;
32     classIcon?: string;
33 }
34
35 type DefaultViewProps = DefaultViewDataProps & WithStyles<CssRules>;
36
37 export const DefaultView = withStyles(styles)(
38     ({ classes, classRoot, messages, classMessage, icon: Icon, classIcon }: DefaultViewProps) =>
39         <Typography className={classnames([classes.root, classRoot])} component="div">
40             <Icon className={classnames([classes.icon, classIcon])} />
41             {messages.map((msg: string, index: number) => {
42                 return <Typography key={index} variant="body1" 
43                     className={classnames([classes.message, classMessage])}>{msg}</Typography>;
44             })}
45         </Typography>
46 );