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";
  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 });
  33
  34 export interface FileTreeItemProps {
  35     item: TreeItem<FileTreeData>;
  36     onMoreClick: (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => void;
  37 }
  38 export const FileTreeItem = withStyles(fileTreeItemStyle)(
  39     class extends React.Component<FileTreeItemProps & WithStyles<CssRules>> {
  40         render() {
  41             const { classes, item } = this.props;
  42             return <div className={classes.root}>
  43                 <ListItemTextIcon
  44                     icon={getIcon(item)}
  45                     name={item.data.name} />
  46                 <div className={classes.spacer} />
  47                 <Typography
  48                     className={classes.sizeInfo}
  49                     variant="caption">{formatFileSize(item.data.size)}</Typography>
  50                 <IconButton
  51                     className={classes.button}
  52                     onClick={this.handleClick}>
  53                     <Tooltip title="More options">
  54                         <MoreOptionsIcon />
  55                     </Tooltip>
  56                 </IconButton>
  57             </div >;
  58         }
  59
  60         handleClick = (event: React.MouseEvent<any>) => {
  61             this.props.onMoreClick(event, this.props.item);
  62         }
  63     });
  64
  65 const getIcon = (item: TreeItem<FileTreeData>) => {
  66     switch (item.data.type) {
  67         case 'directory':
  68             return ProjectIcon;
  69         case 'file':
  70             return CollectionIcon;
  71         default:
  72             return DefaultIcon;
  73     }
  74 };
  75