src/components/collection-panel-files/collection-panel-files.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 { TreeItem, TreeItemStatus } from '../tree/tree';
   7 import { FileTreeData } from '../file-tree/file-tree-data';
   8 import { FileTree } from '../file-tree/file-tree';
   9 import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip } from '@material-ui/core';
  10 import { CustomizeTableIcon } from '../icon/icon';
  11
  12 export interface CollectionPanelFilesProps {
  13     items: Array<TreeItem<FileTreeData>>;
  14     onUploadDataClick: () => void;
  15     onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
  16     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
  17     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
  18     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
  19 }
  20
  21 type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader';
  22
  23 const styles: StyleRulesCallback<CssRules> = theme => ({
  24     root: {
  25         paddingBottom: theme.spacing.unit
  26     },
  27     cardSubheader: {
  28         paddingTop: 0,
  29         paddingBottom: 0
  30     },
  31     nameHeader: {
  32         marginLeft: '75px'
  33     },
  34     fileSizeHeader: {
  35         marginRight: '65px'
  36     }
  37 });
  38
  39 export const CollectionPanelFiles =
  40     withStyles(styles)(
  41         ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
  42             <Card className={classes.root}>
  43                 <CardHeader
  44                     title="Files"
  45                     action={
  46                         <Button onClick={onUploadDataClick}
  47                             variant='raised'
  48                             color='primary'
  49                             size='small'>
  50                             Upload data
  51                     </Button>
  52                     } />
  53                 <CardHeader
  54                     className={classes.cardSubheader}
  55                     action={
  56                         <Tooltip title="More options">
  57                             <IconButton onClick={onOptionsMenuOpen}>
  58                                 <CustomizeTableIcon />
  59                             </IconButton>
  60                         </Tooltip>
  61                     } />
  62                 <Grid container justify="space-between">
  63                     <Typography variant="caption" className={classes.nameHeader}>
  64                         Name
  65                     </Typography>
  66                     <Typography variant="caption" className={classes.fileSizeHeader}>
  67                         File size
  68                     </Typography>
  69                 </Grid>
  70                 <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
  71             </Card>);