src/components/file-tree/file-tree-item.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 } from "../tree/tree";
   7 import { ProjectIcon, MoreOptionsIcon, DefaultIcon, CollectionIcon } from "../icon/icon";
   8 import { Typography, IconButton, StyleRulesCallback, withStyles, WithStyles, Tooltip } from '@material-ui/core';
   9 import { formatFileSize } from "~/common/formatters";
  10 import { ListItemTextIcon } from "../list-item-text-icon/list-item-text-icon";
  11 import { FileTreeData } from "./file-tree-data";
  12
  13 type CssRules = "root" | "spacer" | "sizeInfo" | "button" | "moreOptions";
  14
  15 const fileTreeItemStyle: StyleRulesCallback<CssRules> = theme => ({
  16     root: {
  17         display: "flex",
  18         alignItems: "center",
  19         paddingRight: `${theme.spacing.unit * 1.5}px`
  20     },
  21     spacer: {
  22         flex: "1"
  23     },
  24     sizeInfo: {
  25         width: `${theme.spacing.unit * 8}px`
  26     },
  27     button: {
  28         width: theme.spacing.unit * 3,
  29         height: theme.spacing.unit * 3,
  30         marginRight: theme.spacing.unit,
  31     },
  32     moreOptions: {
  33         position: 'absolute'
  34     }
  35 });
  36
  37 export interface FileTreeItemProps {
  38     item: TreeItem<FileTreeData>;
  39     onMoreClick: (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => void;
  40 }
  41 export const FileTreeItem = withStyles(fileTreeItemStyle)(
  42     class extends React.Component<FileTreeItemProps & WithStyles<CssRules>> {
  43         render() {
  44             const { classes, item } = this.props;
  45             return <div className={classes.root}>
  46                 <ListItemTextIcon
  47                     icon={getIcon(item)}
  48                     name={item.data.name} />
  49                 <div className={classes.spacer} />
  50                 <Typography
  51                     className={classes.sizeInfo}
  52                     variant="caption">{formatFileSize(item.data.size)}</Typography>
  53                 <Tooltip title="More options" disableFocusListener>
  54                     <IconButton
  55                         className={classes.button}
  56                         onClick={this.handleClick}>
  57                         <MoreOptionsIcon className={classes.moreOptions}/>
  58                     </IconButton>
  59                 </Tooltip>
  60             </div >;
  61         }
  62
  63         handleClick = (event: React.MouseEvent<any>) => {
  64             this.props.onMoreClick(event, this.props.item);
  65         }
  66     });
  67
  68 const getIcon = (item: TreeItem<FileTreeData>) => {
  69     switch (item.data.type) {
  70         case 'directory':
  71             return ProjectIcon;
  72         case 'file':
  73             return CollectionIcon;
  74         default:
  75             return DefaultIcon;
  76     }
  77 };
  78