Merge branch '14041-upload-icon'
[arvados-workbench2.git] / 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>);