src/views-components/details-panel/empty-details.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 { DefaultIcon, IconType, ProjectsIcon } from '~/components/icon/icon';
   7 import { EmptyResource } from '~/models/empty';
   8 import { DetailsData } from "./details-data";
   9 import Typography from "@material-ui/core/Typography";
  10 import { StyleRulesCallback, WithStyles, withStyles } from "@material-ui/core/styles";
  11 import { ArvadosTheme } from "~/common/custom-theme";
  12 import Icon from "@material-ui/core/Icon/Icon";
  13
  14 type CssRules = 'container' | 'icon';
  15
  16 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  17     container: {
  18         textAlign: 'center'
  19     },
  20     icon: {
  21         color: theme.palette.grey["500"],
  22         fontSize: '72px'
  23     }
  24 });
  25
  26 export interface EmptyStateDataProps {
  27     message: string;
  28     icon: IconType;
  29     details?: string;
  30     children?: React.ReactNode;
  31 }
  32
  33 type EmptyStateProps = EmptyStateDataProps & WithStyles<CssRules>;
  34
  35 const EmptyState = withStyles(styles)(
  36     ({ classes, details, message, children, icon: Icon }: EmptyStateProps) =>
  37         <Typography className={classes.container} component="div">
  38             <Icon className={classes.icon}/>
  39             <Typography variant="body1" gutterBottom>{message}</Typography>
  40             {details && <Typography gutterBottom>{details}</Typography>}
  41             {children && <Typography gutterBottom>{children}</Typography>}
  42         </Typography>
  43 );
  44
  45 export class EmptyDetails extends DetailsData<EmptyResource> {
  46     getIcon(className?: string) {
  47         return <ProjectsIcon className={className}/>;
  48     }
  49
  50     getDetails() {
  51        return <EmptyState icon={DefaultIcon} message='Select a file or folder to view its details.'/>;
  52     }
  53 }