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