106 lines
3.4 KiB
JavaScript
106 lines
3.4 KiB
JavaScript
import React, { PureComponent } from 'react';
|
|
import Dialog from '@mui/material/Dialog';
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import DialogActions from '@mui/material/DialogActions';
|
|
import Button from '@mui/material/Button';
|
|
import Typography from '@mui/material/Typography';
|
|
import CreateNewFolderRoundedIcon from '@mui/icons-material/CreateNewFolderRounded';
|
|
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
|
|
|
export default class VfsNewFolderDialog extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
folderName: '',
|
|
error: '',
|
|
};
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (!prevProps.open && this.props.open) {
|
|
this.setState({ folderName: '', error: '' });
|
|
}
|
|
}
|
|
|
|
handleSubmit = (e) => {
|
|
e?.preventDefault();
|
|
const raw = this.state.folderName.trim();
|
|
if (!raw) {
|
|
this.setState({ error: 'Bitte gib einen Ordnernamen ein.' });
|
|
return;
|
|
}
|
|
if (raw.includes('..') || raw.includes('\\')) {
|
|
this.setState({ error: 'Ungültige Zeichen im Ordnernamen.' });
|
|
return;
|
|
}
|
|
|
|
const clean = raw.replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
|
|
const parent = String(this.props.parentFolder || '').trim().replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
|
|
const fullPath = parent ? `${parent}/${clean}` : clean;
|
|
|
|
this.props.onCreate?.(fullPath);
|
|
};
|
|
|
|
render() {
|
|
const { open, onClose, isCreating, parentFolder } = this.props;
|
|
const { folderName, error } = this.state;
|
|
const cleanParent = String(parentFolder || '').trim().replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
maxWidth="xs"
|
|
fullWidth
|
|
sx={{ zIndex: (theme) => theme.zIndex.modal + 20 }}
|
|
slotProps={{
|
|
paper: { sx: { borderRadius: 3, p: 1 } },
|
|
}}
|
|
>
|
|
<DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1.2, pb: 1 }}>
|
|
<CreateNewFolderRoundedIcon color="primary" />
|
|
<Typography variant="h6" fontWeight={700}>
|
|
Neuen Ordner erstellen
|
|
</Typography>
|
|
</DialogTitle>
|
|
|
|
<form onSubmit={this.handleSubmit} noValidate autoComplete="off">
|
|
<DialogContent sx={{ pt: 1 }}>
|
|
{cleanParent && (
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1, fontFamily: 'monospace' }}>
|
|
In: {cleanParent}/
|
|
</Typography>
|
|
)}
|
|
<SingleLineTextEdit
|
|
autoFocus
|
|
fullWidth
|
|
size="small"
|
|
label=""
|
|
value={folderName}
|
|
onChange={(nextVal) => this.setState({ folderName: nextVal, error: '' })}
|
|
error={Boolean(error)}
|
|
helperText={error}
|
|
disabled={isCreating}
|
|
/>
|
|
</DialogContent>
|
|
|
|
<DialogActions sx={{ px: 3, pb: 2, pt: 1 }}>
|
|
<Button onClick={onClose} disabled={isCreating} color="inherit">
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
disabled={isCreating || !folderName.trim()}
|
|
sx={{ borderRadius: 2 }}
|
|
>
|
|
{isCreating ? 'Erstelle…' : 'Erstellen'}
|
|
</Button>
|
|
</DialogActions>
|
|
</form>
|
|
</Dialog>
|
|
);
|
|
}
|
|
}
|