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, CardContent, Card } from '@material-ui/core';
  10 import { CustomizeTableIcon } from '../icon/icon';
  11
  12 export interface CollectionPanelFilesProps {
  13     items: Array<TreeItem<FileTreeData>>;
  14     onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
  15     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
  16     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
  17     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
  18 }
  19
  20 type CssRules = 'root' | 'nameHeader' | 'fileSizeHeader';
  21
  22 const styles: StyleRulesCallback<CssRules> = theme => ({
  23     root: {
  24         paddingBottom: theme.spacing.unit
  25     },
  26     nameHeader: {
  27         marginLeft: '75px'
  28     },
  29     fileSizeHeader: {
  30         marginRight: '50px'
  31     }
  32 });
  33
  34 export const CollectionPanelFiles = withStyles(styles)(
  35     ({ onItemMenuOpen, onOptionsMenuOpen, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
  36         <Card className={classes.root}>
  37             <CardHeader
  38                 title="Files"
  39                 action={
  40                     <IconButton onClick={onOptionsMenuOpen}>
  41                         <CustomizeTableIcon />
  42                     </IconButton>
  43                 } />
  44             <Grid container justify="space-between">
  45                 <Typography variant="caption" className={classes.nameHeader}>
  46                     Name
  47                     </Typography>
  48                 <Typography variant="caption" className={classes.fileSizeHeader}>
  49                     File size
  50                     </Typography>
  51             </Grid>
  52             <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
  53         </Card>);
  54