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 } from "../icon/icon";
   8 import { Typography, IconButton, StyleRulesCallback, withStyles, WithStyles } 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}px`
  20     },
  21     spacer: {
  22         flex: "1"
  23     },
  24     sizeInfo: {
  25         marginRight: `${theme.spacing.unit * 3}px`
  26     },
  27     button: {
  28         width: theme.spacing.unit * 3,
  29         height: theme.spacing.unit * 3
  30     }
  31 });
  32
  33 export interface FileTreeItemProps {
  34     item: TreeItem<FileTreeData>;
  35     onMoreClick: (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => void;
  36 }
  37 export const FileTreeItem = withStyles(fileTreeItemStyle)(
  38     class extends React.Component<FileTreeItemProps & WithStyles<CssRules>> {
  39         render() {
  40             const { classes, item } = this.props;
  41             return <div className={classes.root}>
  42                 <ListItemTextIcon
  43                     icon={ProjectIcon}
  44                     name={item.data.name} />
  45                 <div className={classes.spacer} />
  46                 <Typography
  47                     className={classes.sizeInfo}
  48                     variant="caption">{formatFileSize(item.data.size)}</Typography>
  49                 <IconButton
  50                     className={classes.button}
  51                     onClick={this.handleClick}>
  52                     <MoreOptionsIcon />
  53                 </IconButton>
  54             </div >;
  55         }
  56
  57         handleClick = (event: React.MouseEvent<any>) => {
  58             this.props.onMoreClick(event, this.props.item);
  59         }
  60     });
  61