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