// Copyright (C) The Arvados Authors. All rights reserved. // // SPDX-License-Identifier: AGPL-3.0 import React from "react"; import { TreeItem } from "../tree/tree"; import { DirectoryIcon, MoreOptionsIcon, DefaultIcon, FileIcon } from "../icon/icon"; import { Typography, IconButton, StyleRulesCallback, withStyles, WithStyles, Tooltip } 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" | "moreOptions"; 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, }, moreOptions: { position: 'absolute' } }); 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); } }); export const getIcon = (type: string) => { switch (type) { case 'directory': return DirectoryIcon; case 'file': return FileIcon; default: return DefaultIcon; } };