// Copyright (C) The Arvados Authors. All rights reserved. // // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; import { TreeItem, TreeItemStatus } from '~/components/tree/tree'; import { FileTreeData } from '~/components/file-tree/file-tree-data'; import { FileTree } from '~/components/file-tree/file-tree'; import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip, CircularProgress } from '@material-ui/core'; import { CustomizeTableIcon } from '~/components/icon/icon'; import { DownloadIcon } from '~/components/icon/icon'; import { SearchInput } from '../search-input/search-input'; export interface CollectionPanelFilesProps { items: Array>; isWritable: boolean; isLoading: boolean; tooManyFiles: boolean; onUploadDataClick: () => void; onSearchChange: (searchValue: string) => void; onItemMenuOpen: (event: React.MouseEvent, item: TreeItem, isWritable: boolean) => void; onOptionsMenuOpen: (event: React.MouseEvent, isWritable: boolean) => void; onSelectionToggle: (event: React.MouseEvent, item: TreeItem) => void; onCollapseToggle: (id: string, status: TreeItemStatus) => void; onFileClick: (id: string) => void; loadFilesFunc: () => void; currentItemUuid?: string; } export type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button' | 'centeredLabel' | 'cardHeaderContent' | 'cardHeaderContentTitle'; const styles: StyleRulesCallback = theme => ({ root: { paddingBottom: theme.spacing.unit, height: '100%' }, cardSubheader: { paddingTop: 0, paddingBottom: 0, minHeight: 8 * theme.spacing.unit, }, cardHeaderContent: { display: 'flex', paddingRight: 2 * theme.spacing.unit, justifyContent: 'space-between', }, cardHeaderContentTitle: { paddingLeft: theme.spacing.unit, paddingTop: 2 * theme.spacing.unit, paddingRight: 2 * theme.spacing.unit, }, nameHeader: { marginLeft: '75px' }, fileSizeHeader: { marginRight: '65px' }, uploadIcon: { transform: 'rotate(180deg)' }, button: { marginRight: -theme.spacing.unit, marginTop: '8px' }, centeredLabel: { fontSize: '0.875rem', textAlign: 'center' }, }); export const CollectionPanelFilesComponent = ({ onItemMenuOpen, onSearchChange, onOptionsMenuOpen, onUploadDataClick, classes, isWritable, isLoading, tooManyFiles, loadFilesFunc, ...treeProps }: CollectionPanelFilesProps & WithStyles) => { const { useState, useEffect } = React; const [searchValue, setSearchValue] = useState(''); useEffect(() => { onSearchChange(searchValue); }, [searchValue]); return ( Files } className={classes.cardSubheader} classes={{ action: classes.button }} action={<> {isWritable && } {!tooManyFiles && onOptionsMenuOpen(ev, isWritable)}> } } /> {tooManyFiles ?
File listing may take some time, please click to browse:
: <> Name File size {isLoading ?
:
onItemMenuOpen(ev, item, isWritable)} {...treeProps} />
} }
); }; export const CollectionPanelFiles = withStyles(styles)(CollectionPanelFilesComponent);