src/components/empty-state/empty-state.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 Typography from '@material-ui/core/Typography';
   7 import { WithStyles, withStyles, StyleRulesCallback } from '@material-ui/core/styles';
   8 import { ArvadosTheme } from 'src/common/custom-theme';
   9 import { IconType } from '../icon/icon';
  10
  11 export interface EmptyStateDataProps {
  12     message: string;
  13     icon: IconType;
  14     details?: string;
  15 }
  16
  17 type EmptyStateProps = EmptyStateDataProps & WithStyles<CssRules>;
  18
  19 class EmptyState extends React.Component<EmptyStateProps, {}> {
  20
  21     render() {
  22         const { classes, message, details, icon: Icon, children } = this.props;
  23         return (
  24             <Typography className={classes.container} component="div">
  25                 <Icon className={classes.icon} />
  26                 <Typography variant="body1" gutterBottom>{message}</Typography>
  27                 { details && <Typography gutterBottom>{details}</Typography> }
  28                 { children && <Typography gutterBottom>{children}</Typography> }
  29             </Typography>
  30         );
  31     }
  32
  33 }
  34
  35 type CssRules = 'container' | 'icon';
  36 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  37     container: {
  38         textAlign: 'center'
  39     },
  40     icon: {
  41         color: theme.palette.grey["500"],
  42         fontSize: '72px'
  43     }
  44 });
  45
  46 export default withStyles(styles)(EmptyState);