1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
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;
22 type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
24 const styles: StyleRulesCallback<CssRules> = theme => ({
26 paddingBottom: theme.spacing.unit
39 transform: 'rotate(180deg)'
42 marginRight: -theme.spacing.unit,
47 export const CollectionPanelFiles =
49 ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
50 <Card className={classes.root}>
53 classes={{ action: classes.button }}
55 <Button onClick={onUploadDataClick}
59 <DownloadIcon className={classes.uploadIcon} />
64 className={classes.cardSubheader}
66 <Tooltip title="More options" disableFocusListener>
67 <IconButton onClick={onOptionsMenuOpen}>
68 <CustomizeTableIcon />
72 <Grid container justify="space-between">
73 <Typography variant="caption" className={classes.nameHeader}>
76 <Typography variant="caption" className={classes.fileSizeHeader}>
80 <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />