import { TreeItem, TreeItemStatus } from '../tree/tree';
import { FileTreeData } from '../file-tree/file-tree-data';
import { FileTree } from '../file-tree/file-tree';
-import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button } from '@material-ui/core';
+import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip } from '@material-ui/core';
import { CustomizeTableIcon } from '../icon/icon';
-import { connect, DispatchProp } from "react-redux";
-import { Dispatch } from "redux";
-import { RootState } from "~/store/store";
-import { ServiceRepository } from "~/services/services";
+import { DownloadIcon } from '~/components/icon/icon';
export interface CollectionPanelFilesProps {
items: Array<TreeItem<FileTreeData>>;
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;
}
-type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader';
+type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
},
fileSizeHeader: {
marginRight: '65px'
+ },
+ uploadIcon: {
+ transform: 'rotate(180deg)'
+ },
+ button: {
+ marginRight: -theme.spacing.unit,
+ marginTop: '0px'
}
});
-const renameFile = () => (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
- services.collectionFilesService.renameTest();
-};
-
-
export const CollectionPanelFiles =
- connect()(
withStyles(styles)(
- ({ onItemMenuOpen, onOptionsMenuOpen, classes, dispatch, ...treeProps }: CollectionPanelFilesProps & DispatchProp & WithStyles<CssRules>) =>
- <Card className={classes.root}>
- <CardHeader
- title="Files"
- action={
- <Button onClick={
- () => {
- dispatch<any>(renameFile());
- }}
- variant='raised'
- color='primary'
- size='small'>
- Upload data
+ ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
+ <Card className={classes.root}>
+ <CardHeader
+ title="Files"
+ classes={{ action: classes.button }}
+ action={
+ <Button onClick={onUploadDataClick}
+ variant='contained'
+ color='primary'
+ size='small'>
+ <DownloadIcon className={classes.uploadIcon} />
+ Upload data
</Button>
- } />
- <CardHeader
- className={classes.cardSubheader}
- action={
- <IconButton onClick={onOptionsMenuOpen}>
- <CustomizeTableIcon />
- </IconButton>
- } />
- <Grid container justify="space-between">
- <Typography variant="caption" className={classes.nameHeader}>
- Name
+ } />
+ <CardHeader
+ className={classes.cardSubheader}
+ action={
+ <Tooltip title="More options" disableFocusListener>
+ <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 variant="caption" className={classes.fileSizeHeader}>
+ File size
</Typography>
- </Grid>
- <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
- </Card>)
-);
+ </Grid>
+ <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
+ </Card>);