108 lines
3.3 KiB
JavaScript
108 lines
3.3 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 DriveFileRenameOutlineRoundedIcon from '@mui/icons-material/DriveFileRenameOutlineRounded';
|
|
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
|
|
|
export default class VfsRenameDialog extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
targetPath: props.item?.path || '',
|
|
error: '',
|
|
};
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (!prevProps.open && this.props.open) {
|
|
this.setState({
|
|
targetPath: this.props.item?.path || '',
|
|
error: '',
|
|
});
|
|
}
|
|
}
|
|
|
|
handleSubmit = (e) => {
|
|
e?.preventDefault();
|
|
const raw = this.state.targetPath.trim();
|
|
if (!raw) {
|
|
this.setState({ error: 'Bitte gib einen neuen Namen bzw. Pfad ein.' });
|
|
return;
|
|
}
|
|
if (raw.includes('..') || raw.includes('\\')) {
|
|
this.setState({ error: 'Ungültige Zeichen im Pfad.' });
|
|
return;
|
|
}
|
|
|
|
const cleanNew = raw.replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
|
|
const cleanOld = String(this.props.item?.path || '').replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
|
|
|
|
if (cleanNew === cleanOld) {
|
|
this.props.onClose?.();
|
|
return;
|
|
}
|
|
|
|
this.props.onRename?.(cleanOld, cleanNew);
|
|
};
|
|
|
|
render() {
|
|
const { open, onClose, isRenaming, item } = this.props;
|
|
const { targetPath, error } = this.state;
|
|
const isDir = Boolean(item?.isDirectory);
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
maxWidth="xs"
|
|
fullWidth
|
|
sx={{ zIndex: (theme) => theme.zIndex.modal + 20 }}
|
|
PaperProps={{
|
|
sx: { borderRadius: 3, p: 1 },
|
|
}}
|
|
>
|
|
<DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1.2, pb: 1 }}>
|
|
<DriveFileRenameOutlineRoundedIcon color="primary" />
|
|
<Typography variant="h6" fontWeight={700}>
|
|
{isDir ? 'Ordner umbenennen' : 'Datei umbenennen'}
|
|
</Typography>
|
|
</DialogTitle>
|
|
|
|
<form onSubmit={this.handleSubmit} noValidate autoComplete="off">
|
|
<DialogContent sx={{ pt: 1 }}>
|
|
<SingleLineTextEdit
|
|
autoFocus
|
|
fullWidth
|
|
size="small"
|
|
label=""
|
|
value={targetPath}
|
|
onChange={(nextVal) => this.setState({ targetPath: nextVal, error: '' })}
|
|
error={Boolean(error)}
|
|
helperText={error}
|
|
disabled={isRenaming}
|
|
/>
|
|
</DialogContent>
|
|
|
|
<DialogActions sx={{ px: 3, pb: 2, pt: 1 }}>
|
|
<Button onClick={onClose} disabled={isRenaming} color="inherit">
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
disabled={isRenaming || !targetPath.trim()}
|
|
sx={{ borderRadius: 2 }}
|
|
>
|
|
{isRenaming ? 'Speichere…' : 'Umbenennen'}
|
|
</Button>
|
|
</DialogActions>
|
|
</form>
|
|
</Dialog>
|
|
);
|
|
}
|
|
}
|