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