src/components/collection-panel-files/collection-panel-files.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   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';
  11
  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;
  18 }
  19
  20 type CssRules = 'nameHeader' | 'fileSizeHeader';
  21
  22 const styles: StyleRulesCallback<CssRules> = theme => ({
  23     nameHeader: {
  24         marginLeft: '75px'
  25     },
  26     fileSizeHeader: {
  27         marginRight: '50px'
  28     }
  29 });
  30
  31 export const CollectionPanelFiles = withStyles(styles)(
  32     ({ onItemMenuOpen, onOptionsMenuOpen, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
  33         <div>
  34             <Grid container justify="flex-end">
  35                 <IconButton onClick={onOptionsMenuOpen}>
  36                     <CustomizeTableIcon />
  37                 </IconButton>
  38             </Grid>
  39             <Grid container justify="space-between">
  40                 <Typography variant="caption" className={classes.nameHeader}>
  41                     Name
  42                 </Typography>
  43                 <Typography variant="caption" className={classes.fileSizeHeader}>
  44                     File size
  45             </Typography>
  46             </Grid>
  47             <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
  48         </div>);
  49
  50 export const collectionPanelItems: Array<TreeItem<FileTreeData>> = [{
  51     active: false,
  52     data: {
  53         name: "Directory 1",
  54         type: "directory"
  55     },
  56     id: "Directory 1",
  57     open: true,
  58     status: TreeItemStatus.LOADED,
  59     items: [{
  60         active: false,
  61         data: {
  62             name: "Directory 1.1",
  63             type: "directory"
  64         },
  65         id: "Directory 1.1",
  66         open: false,
  67         status: TreeItemStatus.LOADED,
  68         items: []
  69     }, {
  70         active: false,
  71         data: {
  72             name: "File 1.1",
  73             type: "file",
  74             size: 20033
  75         },
  76         id: "File 1.1",
  77         open: false,
  78         status: TreeItemStatus.LOADED,
  79         items: []
  80     }]
  81 }, {
  82     active: false,
  83     data: {
  84         name: "Directory 2",
  85         type: "directory"
  86     },
  87     id: "Directory 2",
  88     open: false,
  89     status: TreeItemStatus.LOADED
  90 }];