// Copyright (C) The Arvados Authors. All rights reserved. // // SPDX-License-Identifier: AGPL-3.0 import * as React from "react"; import { TreeItem } from "../tree/tree"; import { ProjectIcon, MoreOptionsIcon, DefaultIcon, CollectionIcon } from "../icon/icon"; import { Typography, IconButton, StyleRulesCallback, withStyles, WithStyles } from "@material-ui/core"; import { formatFileSize } from "../../common/formatters"; import { ListItemTextIcon } from "../list-item-text-icon/list-item-text-icon"; import { FileTreeData } from "./file-tree-data"; type CssRules = "root" | "spacer" | "sizeInfo" | "button"; const fileTreeItemStyle: StyleRulesCallback = theme => ({ root: { display: "flex", alignItems: "center", paddingRight: `${theme.spacing.unit * 1.5}px` }, spacer: { flex: "1" }, sizeInfo: { width: `${theme.spacing.unit * 8}px` }, button: { width: theme.spacing.unit * 3, height: theme.spacing.unit * 3, marginRight: theme.spacing.unit } }); export interface FileTreeItemProps { item: TreeItem; onMoreClick: (event: React.MouseEvent, item: TreeItem) => void; } export const FileTreeItem = withStyles(fileTreeItemStyle)( class extends React.Component> { render() { const { classes, item } = this.props; return
{formatFileSize(item.data.size)}
; } handleClick = (event: React.MouseEvent) => { this.props.onMoreClick(event, this.props.item); } }); const getIcon = (item: TreeItem) => { switch(item.data.type){ case 'directory': return ProjectIcon; case 'file': return CollectionIcon; default: return DefaultIcon; } };