Merge branch '14684-image-file-preview-in-details-panel'
[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     onFileClick: (id: string) => void;
21 }
22
23 type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
24
25 const styles: StyleRulesCallback<CssRules> = theme => ({
26     root: {
27         paddingBottom: theme.spacing.unit
28     },
29     cardSubheader: {
30         paddingTop: 0,
31         paddingBottom: 0
32     },
33     nameHeader: {
34         marginLeft: '75px'
35     },
36     fileSizeHeader: {
37         marginRight: '65px'
38     },
39     uploadIcon: {
40         transform: 'rotate(180deg)'
41     },
42     button: {
43         marginRight: -theme.spacing.unit,
44         marginTop: '0px'
45     }
46 });
47
48 export const CollectionPanelFiles =
49     withStyles(styles)(
50         ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
51             <Card className={classes.root}>
52                 <CardHeader
53                     title="Files"
54                     classes={{ action: classes.button }}
55                     action={
56                         <Button onClick={onUploadDataClick}
57                             variant='raised'
58                             color='primary'
59                             size='small'>
60                             <DownloadIcon className={classes.uploadIcon} />
61                             Upload data
62                     </Button>
63                     } />
64                 <CardHeader
65                     className={classes.cardSubheader}
66                     action={
67                         <Tooltip title="More options" disableFocusListener>
68                             <IconButton onClick={onOptionsMenuOpen}>
69                                 <CustomizeTableIcon />
70                             </IconButton>
71                         </Tooltip>
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>);