import { TreeItem, TreeItemStatus } from '../tree/tree';
import { FileTreeData } from '../file-tree/file-tree-data';
import { FileTree } from '../file-tree/file-tree';
-import { CollectionPanelFilesState } from '../../store/collection-panel/collection-panel-files/collection-panel-files-state';
+import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
+import { CustomizeTableIcon } from '../icon/icon';
export interface CollectionPanelFilesProps {
items: Array<TreeItem<FileTreeData>>;
- onItemContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
- onCommonContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+ onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
+ onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onCollapseToggle: (id: string, status: TreeItemStatus) => void;
}
-export const CollectionPanelFiles = ({ onItemContextMenu, onCommonContextMenu, ...treeProps }: CollectionPanelFilesProps) =>
- <div>
- <FileTree onContextMenu={onItemContextMenu} {...treeProps} />
- </div>;
+type CssRules = 'nameHeader' | 'fileSizeHeader';
+
+const styles: StyleRulesCallback<CssRules> = theme => ({
+ nameHeader: {
+ marginLeft: '75px'
+ },
+ fileSizeHeader: {
+ marginRight: '50px'
+ }
+});
+
+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,
active: false,
data: {
name: "File 1.1",
- type: "file"
+ type: "file",
+ size: 20033
},
id: "File 1.1",
open: false,
export interface FileTreeProps {
items: Array<TreeItem<FileTreeData>>;
- onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
+ onMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onCollapseToggle: (id: string, status: TreeItemStatus) => void;
}
handleContextMenu = (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => {
event.stopPropagation();
- this.props.onContextMenu(event, item);
+ this.props.onMenuOpen(event, item);
}
handleToggle = (id: string, status: TreeItemStatus) => {