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 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 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}
  43                     className={classnames([classes.message, classMessage])}>{msg}</Typography>;
  44             })}
  45         </Typography>
  46 );