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 } from '@material-ui/core';
10 import { CustomizeTableIcon } from '../icon/icon';
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;
20 type CssRules = 'nameHeader' | 'fileSizeHeader';
22 const styles: StyleRulesCallback<CssRules> = theme => ({
31 export const CollectionPanelFiles = withStyles(styles)(
32 ({ onItemMenuOpen, onOptionsMenuOpen, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
34 <Grid container justify="flex-end">
35 <IconButton onClick={onOptionsMenuOpen}>
36 <CustomizeTableIcon />
39 <Grid container justify="space-between">
40 <Typography variant="caption" className={classes.nameHeader}>
43 <Typography variant="caption" className={classes.fileSizeHeader}>
47 <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />