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