// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { TreeItem, TreeItemStatus } from '../tree/tree';
-import { FileTreeData } from '../file-tree/file-tree-data';
-import { FileTree } from '../file-tree/file-tree';
+import { TreeItem, TreeItemStatus } from '~/components/tree/tree';
+import { FileTreeData } from '~/components/file-tree/file-tree-data';
+import { FileTree } from '~/components/file-tree/file-tree';
import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip } from '@material-ui/core';
-import { CustomizeTableIcon } from '../icon/icon';
+import { CustomizeTableIcon } from '~/components/icon/icon';
import { DownloadIcon } from '~/components/icon/icon';
export interface CollectionPanelFilesProps {
onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onCollapseToggle: (id: string, status: TreeItemStatus) => void;
+ onFileClick: (id: string) => void;
+ currentItemUuid?: string;
}
-type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon';
+type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
},
uploadIcon: {
transform: 'rotate(180deg)'
+ },
+ button: {
+ marginRight: -theme.spacing.unit,
+ marginTop: '0px'
}
});
<Card className={classes.root}>
<CardHeader
title="Files"
+ classes={{ action: classes.button }}
action={
<Button onClick={onUploadDataClick}
- variant='raised'
+ variant='contained'
color='primary'
size='small'>
- <DownloadIcon className={classes.uploadIcon}/>
+ <DownloadIcon className={classes.uploadIcon} />
Upload data
</Button>
} />
<CardHeader
className={classes.cardSubheader}
action={
- <Tooltip title="More options">
+ <Tooltip title="More options" disableFocusListener>
<IconButton onClick={onOptionsMenuOpen}>
<CustomizeTableIcon />
</IconButton>