685 lines
21 KiB
JavaScript
685 lines
21 KiB
JavaScript
import React, { PureComponent } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Typography from '@mui/material/Typography';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import InputBase from '@mui/material/InputBase';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import Menu from '@mui/material/Menu';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
|
|
import ClearRoundedIcon from '@mui/icons-material/ClearRounded';
|
|
import NoteAddRoundedIcon from '@mui/icons-material/NoteAddRounded';
|
|
import CloudUploadRoundedIcon from '@mui/icons-material/CloudUploadRounded';
|
|
import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
|
|
import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
|
|
import EditRoundedIcon from '@mui/icons-material/EditRounded';
|
|
import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
|
|
import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
|
|
import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
|
|
import FolderOpenRoundedIcon from '@mui/icons-material/FolderOpenRounded';
|
|
import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
|
|
import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
|
|
import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
|
|
import ChatBubbleOutlineRoundedIcon from '@mui/icons-material/ChatBubbleOutlineRounded';
|
|
|
|
import VfsFileIcon from './VfsFileIcon';
|
|
import { formatVfsSize, formatVfsDate } from './vfsUtils';
|
|
|
|
/**
|
|
* Returns all ancestor directory paths for a file or folder path.
|
|
* e.g. "docs/api/v1/spec.json" -> ["docs", "docs/api", "docs/api/v1"]
|
|
*/
|
|
function getParentFolderPaths(filePath) {
|
|
if (!filePath) return [];
|
|
const clean = String(filePath).replace(/^\/+/, '').replace(/\/+$/, '');
|
|
const parts = clean.split('/').filter(Boolean);
|
|
const paths = [];
|
|
for (let i = 0; i < parts.length - 1; i++) {
|
|
paths.push(parts.slice(0, i + 1).join('/'));
|
|
}
|
|
return paths;
|
|
}
|
|
|
|
/**
|
|
* Builds a hierarchical tree node structure from a flat list of VfsFiles.
|
|
* In every node, folders and files are separated and can be rendered recursively.
|
|
*/
|
|
function buildFileTree(files, searchQuery = '') {
|
|
const q = searchQuery ? searchQuery.trim().toLowerCase() : '';
|
|
const filtered = (files || []).filter((f) => {
|
|
if (!q) return true;
|
|
return f.name.toLowerCase().includes(q) || (f.mime && f.mime.toLowerCase().includes(q));
|
|
});
|
|
|
|
const root = {
|
|
name: '',
|
|
path: '',
|
|
isDirectory: true,
|
|
folders: new Map(),
|
|
files: [],
|
|
};
|
|
|
|
for (const file of filtered) {
|
|
const cleanPath = String(file.name || '').replace(/^\/+/, '').replace(/\/+$/, '');
|
|
if (!cleanPath) continue;
|
|
|
|
const parts = cleanPath.split('/').filter(Boolean);
|
|
let current = root;
|
|
|
|
for (let i = 0; i < parts.length - 1; i++) {
|
|
const folderName = parts[i];
|
|
const folderPath = parts.slice(0, i + 1).join('/');
|
|
|
|
if (!current.folders.has(folderName)) {
|
|
current.folders.set(folderName, {
|
|
name: folderName,
|
|
path: folderPath,
|
|
isDirectory: true,
|
|
folders: new Map(),
|
|
files: [],
|
|
});
|
|
}
|
|
current = current.folders.get(folderName);
|
|
}
|
|
|
|
const fileName = parts[parts.length - 1];
|
|
current.files.push({
|
|
name: fileName,
|
|
path: cleanPath,
|
|
isDirectory: false,
|
|
fileData: file,
|
|
});
|
|
}
|
|
|
|
// Calculate recursive file counts
|
|
function countFiles(node) {
|
|
let count = node.files.length;
|
|
for (const folder of node.folders.values()) {
|
|
count += countFiles(folder);
|
|
}
|
|
node.totalFileCount = count;
|
|
return count;
|
|
}
|
|
countFiles(root);
|
|
|
|
return { root, totalCount: filtered.length };
|
|
}
|
|
|
|
export default class VfsFileExplorer extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
const initialExpanded = new Set();
|
|
if (props.selectedFileName) {
|
|
for (const p of getParentFolderPaths(props.selectedFileName)) {
|
|
initialExpanded.add(p);
|
|
}
|
|
}
|
|
this.state = {
|
|
menuAnchor: null,
|
|
menuFile: null,
|
|
deleteConfirmFile: null,
|
|
isDraggingOver: false,
|
|
expandedFolders: initialExpanded,
|
|
};
|
|
this.fileInputRef = React.createRef();
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (this.props.selectedFileName && this.props.selectedFileName !== prevProps.selectedFileName) {
|
|
const parents = getParentFolderPaths(this.props.selectedFileName);
|
|
if (parents.length > 0) {
|
|
this.setState((prev) => {
|
|
const next = new Set(prev.expandedFolders);
|
|
let changed = false;
|
|
for (const p of parents) {
|
|
if (!next.has(p)) {
|
|
next.add(p);
|
|
changed = true;
|
|
}
|
|
}
|
|
return changed ? { expandedFolders: next } : null;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
toggleFolder = (folderPath) => {
|
|
this.setState((prev) => {
|
|
const next = new Set(prev.expandedFolders);
|
|
if (next.has(folderPath)) {
|
|
next.delete(folderPath);
|
|
} else {
|
|
next.add(folderPath);
|
|
}
|
|
return { expandedFolders: next };
|
|
});
|
|
};
|
|
|
|
|
|
handleOpenMenu = (e, file) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
this.setState({ menuAnchor: e.currentTarget, menuFile: file });
|
|
};
|
|
|
|
handleCloseMenu = () => {
|
|
this.setState({ menuAnchor: null, menuFile: null });
|
|
};
|
|
|
|
handleTriggerUpload = () => {
|
|
this.fileInputRef.current?.click();
|
|
};
|
|
|
|
handleFileInputChange = (e) => {
|
|
const files = e.target?.files;
|
|
if (files && files.length > 0) {
|
|
this.props.onUpload(Array.from(files));
|
|
}
|
|
if (e.target) e.target.value = '';
|
|
};
|
|
|
|
handleDragEnter = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (e.dataTransfer?.types?.includes('Files')) {
|
|
this.setState({ isDraggingOver: true });
|
|
}
|
|
};
|
|
|
|
handleDragOver = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!this.state.isDraggingOver && e.dataTransfer?.types?.includes('Files')) {
|
|
this.setState({ isDraggingOver: true });
|
|
}
|
|
};
|
|
|
|
handleDragLeave = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (e.currentTarget.contains(e.relatedTarget)) return;
|
|
this.setState({ isDraggingOver: false });
|
|
};
|
|
|
|
handleDrop = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.setState({ isDraggingOver: false });
|
|
const files = e.dataTransfer?.files;
|
|
if (files && files.length > 0) {
|
|
this.props.onUpload(Array.from(files));
|
|
}
|
|
};
|
|
|
|
handleCopyPath = (file) => {
|
|
if (!file) return;
|
|
navigator.clipboard?.writeText?.(file.name);
|
|
this.handleCloseMenu();
|
|
};
|
|
|
|
handleMentionInChat = (file) => {
|
|
if (!file) return;
|
|
if (this.props.onMentionInChat) {
|
|
this.props.onMentionInChat(file);
|
|
}
|
|
this.handleCloseMenu();
|
|
};
|
|
|
|
renderFolderNode = (folder, depth) => {
|
|
const { searchQuery } = this.props;
|
|
const isSearching = Boolean(searchQuery && searchQuery.trim());
|
|
const isExpanded = isSearching || this.state.expandedFolders.has(folder.path);
|
|
|
|
const subfolders = Array.from(folder.folders.values()).sort((a, b) =>
|
|
a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
|
|
);
|
|
const files = [...folder.files].sort((a, b) =>
|
|
a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
|
|
);
|
|
|
|
return (
|
|
<Box key={folder.path} sx={{ display: 'flex', flexDirection: 'column' }}>
|
|
{/* Folder Header Row */}
|
|
<Box
|
|
onClick={() => this.toggleFolder(folder.path)}
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
py: 0.5,
|
|
px: 1,
|
|
pl: `${depth * 14 + 6}px`,
|
|
borderRadius: 1.5,
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
transition: 'background-color 0.1s',
|
|
'&:hover': {
|
|
bgcolor: (theme) =>
|
|
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
|
|
},
|
|
}}
|
|
>
|
|
{/* Chevron */}
|
|
<Box
|
|
sx={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 18,
|
|
height: 18,
|
|
mr: 0.4,
|
|
color: 'text.secondary',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{isExpanded ? (
|
|
<KeyboardArrowDownRoundedIcon sx={{ fontSize: 17 }} />
|
|
) : (
|
|
<KeyboardArrowRightRoundedIcon sx={{ fontSize: 17 }} />
|
|
)}
|
|
</Box>
|
|
|
|
{/* Folder Icon */}
|
|
{isExpanded ? (
|
|
<FolderOpenRoundedIcon
|
|
sx={{ fontSize: 18, color: 'primary.main', mr: 0.8, flexShrink: 0 }}
|
|
/>
|
|
) : (
|
|
<FolderRoundedIcon
|
|
sx={{ fontSize: 18, opacity: 0.75, color: 'text.secondary', mr: 0.8, flexShrink: 0 }}
|
|
/>
|
|
)}
|
|
|
|
{/* Folder Name */}
|
|
<Typography
|
|
variant="body2"
|
|
noWrap
|
|
fontWeight={600}
|
|
sx={{ fontSize: '0.82rem', fontFamily: 'monospace', color: 'text.primary', flexGrow: 1 }}
|
|
>
|
|
{folder.name}
|
|
</Typography>
|
|
|
|
{/* Total Files Count in Folder */}
|
|
<Typography
|
|
variant="caption"
|
|
sx={{
|
|
fontSize: '0.7rem',
|
|
color: 'text.disabled',
|
|
ml: 1,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{folder.totalFileCount}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Folder Children (Directories FIRST, then files) */}
|
|
{isExpanded && (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
|
{/* 1. Subdirectories FIRST */}
|
|
{subfolders.map((sub) => this.renderFolderNode(sub, depth + 1))}
|
|
|
|
{/* 2. Files NEXT */}
|
|
{files.map((file) => this.renderFileNode(file, depth + 1))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
renderFileNode = (file, depth) => {
|
|
const { selectedFileName, onSelectFile } = this.props;
|
|
const isSelected = file.path === selectedFileName;
|
|
|
|
return (
|
|
<Box
|
|
key={file.path}
|
|
onClick={() => onSelectFile(file.path)}
|
|
sx={(theme) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
py: 0.5,
|
|
px: 1,
|
|
pl: `${depth * 14 + 26}px`,
|
|
borderRadius: 1.5,
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
bgcolor: isSelected
|
|
? theme.palette.mode === 'dark'
|
|
? 'primary.dark'
|
|
: 'action.selected'
|
|
: 'transparent',
|
|
border: '1px solid',
|
|
borderColor: isSelected ? 'primary.main' : 'transparent',
|
|
transition: 'background-color 0.1s, border-color 0.1s',
|
|
'&:hover': {
|
|
bgcolor: isSelected
|
|
? theme.palette.mode === 'dark'
|
|
? 'primary.dark'
|
|
: 'action.selected'
|
|
: 'action.hover',
|
|
},
|
|
})}
|
|
>
|
|
<VfsFileIcon
|
|
fileName={file.path}
|
|
mime={file.fileData.mime}
|
|
sx={{ mr: 1, flexShrink: 0, fontSize: 18 }}
|
|
/>
|
|
|
|
<Box sx={{ minWidth: 0, flexGrow: 1, pr: 1 }}>
|
|
<Typography
|
|
variant="body2"
|
|
fontWeight={isSelected ? 600 : 500}
|
|
noWrap
|
|
sx={{ fontFamily: 'monospace', fontSize: '0.82rem' }}
|
|
>
|
|
{file.name}
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mt: 0.15 }}>
|
|
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
|
|
{formatVfsSize(file.fileData.size)}
|
|
</Typography>
|
|
{file.fileData.updated_at && (
|
|
<Typography variant="caption" color="text.disabled" sx={{ fontSize: '0.68rem' }}>
|
|
{formatVfsDate(file.fileData.updated_at)}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Quick action buttons on hover / select */}
|
|
<Box
|
|
onClick={(e) => e.stopPropagation()}
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
opacity: isSelected ? 1 : 0.7,
|
|
'&:hover': { opacity: 1 },
|
|
}}
|
|
>
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => this.handleOpenMenu(e, file.fileData)}
|
|
aria-label="Weitere Optionen"
|
|
sx={{ p: 0.5 }}
|
|
>
|
|
<MoreVertRoundedIcon sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
renderTree() {
|
|
const { files, searchQuery } = this.props;
|
|
const { root, totalCount } = buildFileTree(files, searchQuery);
|
|
|
|
if (totalCount === 0) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
py: 6,
|
|
px: 2,
|
|
textAlign: 'center',
|
|
color: 'text.secondary',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: 1.5,
|
|
}}
|
|
>
|
|
<FolderRoundedIcon sx={{ fontSize: 44, opacity: 0.3 }} />
|
|
<Typography variant="body2">
|
|
{searchQuery ? `Keine Dateien für "${searchQuery}" gefunden` : 'Keine Dateien im VFS vorhanden'}
|
|
</Typography>
|
|
{!searchQuery && (
|
|
<Typography variant="caption" sx={{ maxWidth: 220 }}>
|
|
Klicke oben auf Upload oder erstelle eine neue Datei.
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const rootFolders = Array.from(root.folders.values()).sort((a, b) =>
|
|
a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
|
|
);
|
|
const rootFiles = [...root.files].sort((a, b) =>
|
|
a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
|
|
);
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
|
|
{/* Top-level directories FIRST */}
|
|
{rootFolders.map((folder) => this.renderFolderNode(folder, 0))}
|
|
|
|
{/* Top-level files NEXT */}
|
|
{rootFiles.map((file) => this.renderFileNode(file, 0))}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
loading,
|
|
onOpenNewDialog,
|
|
searchQuery,
|
|
onSearchChange,
|
|
} = this.props;
|
|
|
|
const { menuAnchor, menuFile, isDraggingOver } = this.state;
|
|
const isText = menuFile?.isText;
|
|
|
|
return (
|
|
<Box
|
|
onDragEnter={this.handleDragEnter}
|
|
onDragOver={this.handleDragOver}
|
|
onDragLeave={this.handleDragLeave}
|
|
onDrop={this.handleDrop}
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
bgcolor: isDraggingOver ? 'action.selected' : 'inherit',
|
|
transition: 'background-color 0.15s',
|
|
}}
|
|
>
|
|
{/* Hidden Upload Input */}
|
|
<input
|
|
ref={this.fileInputRef}
|
|
type="file"
|
|
multiple
|
|
onChange={this.handleFileInputChange}
|
|
style={{ display: 'none' }}
|
|
/>
|
|
|
|
{/* Drag & Drop Overlay */}
|
|
{isDraggingOver && (
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
inset: 8,
|
|
border: '2px dashed',
|
|
borderColor: 'primary.main',
|
|
borderRadius: 3,
|
|
bgcolor: 'background.paper',
|
|
opacity: 0.94,
|
|
zIndex: 10,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 1,
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
<CloudUploadRoundedIcon color="primary" sx={{ fontSize: 44 }} />
|
|
<Typography variant="subtitle1" fontWeight={700} color="primary.main">
|
|
Dateien im VFS ablegen
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
Die Dateien werden sofort auf den Server hochgeladen
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Explorer Header / Actions Row */}
|
|
<Box
|
|
sx={{
|
|
p: 1.25,
|
|
borderBottom: 1,
|
|
borderColor: 'divider',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 0.5,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{/* Search Filter Bar */}
|
|
<Box
|
|
sx={(theme) => ({
|
|
flexGrow: 1,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
px: 1,
|
|
py: 0.25,
|
|
borderRadius: 2,
|
|
bgcolor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
|
|
border: '1px solid transparent',
|
|
'&:focus-within': {
|
|
borderColor: 'primary.main',
|
|
bgcolor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.09)' : '#fff',
|
|
},
|
|
})}
|
|
>
|
|
<SearchRoundedIcon sx={{ fontSize: 18, color: 'text.secondary', mr: 0.75 }} />
|
|
<InputBase
|
|
fullWidth
|
|
placeholder="VFS durchsuchen…"
|
|
value={searchQuery || ''}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
sx={{ fontSize: '0.82rem' }}
|
|
/>
|
|
{loading && <CircularProgress size={14} thickness={4} sx={{ mr: 0.5 }} />}
|
|
{searchQuery && (
|
|
<IconButton size="small" onClick={() => onSearchChange('')} sx={{ p: 0.2 }}>
|
|
<ClearRoundedIcon sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Upload Icon Button (no word) */}
|
|
<IconButton
|
|
size="small"
|
|
onClick={this.handleTriggerUpload}
|
|
aria-label="Datei(en) hochladen"
|
|
sx={{ p: 0.75 }}
|
|
>
|
|
<CloudUploadRoundedIcon fontSize="small" />
|
|
</IconButton>
|
|
|
|
{/* New File Icon Button (no word) */}
|
|
<IconButton
|
|
size="small"
|
|
onClick={onOpenNewDialog}
|
|
aria-label="Neue Datei anlegen"
|
|
sx={{ p: 0.75 }}
|
|
>
|
|
<NoteAddRoundedIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
|
|
{/* Scrollable File List */}
|
|
<Box sx={{ flexGrow: 1, overflowY: 'auto', p: 1.5 }}>
|
|
{this.renderTree()}
|
|
</Box>
|
|
|
|
{/* Context Menu */}
|
|
<Menu
|
|
anchorEl={menuAnchor}
|
|
open={Boolean(menuAnchor)}
|
|
onClose={this.handleCloseMenu}
|
|
PaperProps={{ sx: { borderRadius: 2, minWidth: 180 } }}
|
|
>
|
|
{isText && (
|
|
<MenuItem
|
|
onClick={() => {
|
|
if (menuFile) this.props.onSelectFile(menuFile.name);
|
|
this.handleCloseMenu();
|
|
}}
|
|
>
|
|
<ListItemIcon>
|
|
<EditRoundedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Im Editor bearbeiten" />
|
|
</MenuItem>
|
|
)}
|
|
|
|
{!isText && (
|
|
<MenuItem
|
|
onClick={() => {
|
|
if (menuFile) this.props.onSelectFile(menuFile.name);
|
|
this.handleCloseMenu();
|
|
}}
|
|
>
|
|
<ListItemIcon>
|
|
<VisibilityRoundedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Vorschau" />
|
|
</MenuItem>
|
|
)}
|
|
|
|
<MenuItem
|
|
onClick={() => {
|
|
if (menuFile) this.props.onDownload(menuFile.name);
|
|
this.handleCloseMenu();
|
|
}}
|
|
>
|
|
<ListItemIcon>
|
|
<DownloadRoundedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Herunterladen" />
|
|
</MenuItem>
|
|
|
|
<MenuItem onClick={() => this.handleCopyPath(menuFile)}>
|
|
<ListItemIcon>
|
|
<ContentCopyRoundedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Pfad kopieren" />
|
|
</MenuItem>
|
|
|
|
{this.props.onMentionInChat && (
|
|
<MenuItem onClick={() => this.handleMentionInChat(menuFile)}>
|
|
<ListItemIcon>
|
|
<ChatBubbleOutlineRoundedIcon fontSize="small" color="primary" />
|
|
</ListItemIcon>
|
|
<ListItemText primary="In Chat erwähnen" />
|
|
</MenuItem>
|
|
)}
|
|
|
|
<MenuItem
|
|
onClick={() => {
|
|
if (menuFile && window.confirm(`Möchtest du "${menuFile.name}" wirklich aus dem VFS löschen?`)) {
|
|
this.props.onDelete(menuFile.name);
|
|
}
|
|
this.handleCloseMenu();
|
|
}}
|
|
sx={{ color: 'error.main' }}
|
|
>
|
|
<ListItemIcon sx={{ color: 'error.main' }}>
|
|
<DeleteOutlineRoundedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Datei löschen" />
|
|
</MenuItem>
|
|
</Menu>
|
|
</Box>
|
|
);
|
|
}
|
|
}
|