-export const CollectionPanelFiles = withStyles(styles)(
- ({ onItemMenuOpen, onOptionsMenuOpen, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
- <div>
- <Grid container justify="flex-end">
- <IconButton onClick={onOptionsMenuOpen}>
- <CustomizeTableIcon />
- </IconButton>
- </Grid>
- <Grid container justify="space-between">
- <Typography variant="caption" className={classes.nameHeader}>
- Name
- </Typography>
- <Typography variant="caption" className={classes.fileSizeHeader}>
- File size
- </Typography>
- </Grid>
- <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
- </div>);
-
-export const collectionPanelItems: Array<TreeItem<FileTreeData>> = [{
- active: false,
- data: {
- name: "Directory 1",
- type: "directory"
- },
- id: "Directory 1",
- open: true,
- status: TreeItemStatus.LOADED,
- items: [{
- active: false,
- data: {
- name: "Directory 1.1",
- type: "directory"
- },
- id: "Directory 1.1",
- open: false,
- status: TreeItemStatus.LOADED,
- items: []
- }, {
- active: false,
- data: {
- name: "File 1.1",
- type: "file",
- size: 20033
- },
- id: "File 1.1",
- open: false,
- status: TreeItemStatus.LOADED,
- items: []
- }]
-}, {
- active: false,
- data: {
- name: "Directory 2",
- type: "directory"
- },
- id: "Directory 2",
- open: false,
- status: TreeItemStatus.LOADED
-}];
+export const CollectionPanelFiles =
+ withStyles(styles)(
+ ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
+ <Card className={classes.root}>
+ <CardHeader
+ title="Files"
+ classes={{ action: classes.button }}
+ action={
+ <Button onClick={onUploadDataClick}
+ variant='raised'
+ color='primary'
+ size='small'>
+ <DownloadIcon className={classes.uploadIcon} />
+ Upload data
+ </Button>
+ } />
+ <CardHeader
+ className={classes.cardSubheader}
+ action={
+ <Tooltip title="More options">
+ <IconButton onClick={onOptionsMenuOpen}>
+ <CustomizeTableIcon />
+ </IconButton>
+ </Tooltip>
+ } />
+ <Grid container justify="space-between">
+ <Typography variant="caption" className={classes.nameHeader}>
+ Name
+ </Typography>
+ <Typography variant="caption" className={classes.fileSizeHeader}>
+ File size
+ </Typography>
+ </Grid>
+ <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
+ </Card>);