//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
-import * as classnames from 'classnames';
+import React from 'react';
+import classnames from 'classnames';
import {
Grid,
StyleRulesCallback,
Table, TableBody, TableCell, TableHead, TableRow,
Typography,
- WithStyles
+ WithStyles,
+ IconButton
} from '@material-ui/core';
import { withStyles } from '@material-ui/core';
import Dropzone from 'react-dropzone';
-import { CloudUploadIcon } from "../icon/icon";
-import { formatFileSize, formatProgress, formatUploadSpeed } from "~/common/formatters";
-import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
+import { CloudUploadIcon, RemoveIcon } from "../icon/icon";
+import { formatFileSize, formatProgress, formatUploadSpeed } from "common/formatters";
+import { UploadFile } from 'store/file-uploader/file-uploader-actions';
type CssRules = "root" | "dropzone" | "dropzoneWrapper" | "container" | "uploadIcon"
| "dropzoneBorder" | "dropzoneBorderLeft" | "dropzoneBorderRight" | "dropzoneBorderTop" | "dropzoneBorderBottom"
- | "dropzoneBorderHorzActive" | "dropzoneBorderVertActive";
+ | "dropzoneBorderHorzActive" | "dropzoneBorderVertActive" | "deleteButton" | "deleteButtonDisabled" | "deleteIcon";
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
},
uploadIcon: {
verticalAlign: "middle"
+ },
+ deleteButton: {
+ cursor: "pointer"
+ },
+ deleteButtonDisabled: {
+ cursor: "not-allowed"
+ },
+ deleteIcon: {
+ marginLeft: "-6px"
}
});
files: UploadFile[];
disabled: boolean;
onDrop: (files: File[]) => void;
+ onDelete: (file: UploadFile) => void;
}
interface FileUploadState {
focused: false
};
}
+ onDelete = (event: React.MouseEvent<HTMLTableCellElement>, file: UploadFile): void => {
+ const { onDelete, disabled } = this.props;
+
+ event.stopPropagation();
+
+ if (!disabled) {
+ onDelete(file);
+ }
+
+ let interval = setInterval(() => {
+ const key = Object.keys((window as any).cancelTokens).find(key => key.indexOf(file.file.name) > -1);
+
+ if (key) {
+ clearInterval(interval);
+ (window as any).cancelTokens[key]();
+ delete (window as any).cancelTokens[key];
+ }
+ }, 100);
+
+ }
render() {
const { classes, onDrop, disabled, files } = this.props;
return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
- <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
- <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
- <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
- <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
<Dropzone className={classes.dropzone}
onDrop={files => onDrop(files)}
onClick={() => {
inputs[0].focus();
}
}}
+ data-cy="drag-and-drop"
disabled={disabled}
inputProps={{
onFocus: () => {
focused: false
});
}
- }}>
+ }}>
{files.length === 0 &&
<Grid container justify="center" alignItems="center" className={classes.container}>
<Grid item component={"span"}>
<TableCell>File size</TableCell>
<TableCell>Upload speed</TableCell>
<TableCell>Upload progress</TableCell>
+ <TableCell>Delete</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableCell>{formatFileSize(f.file.size)}</TableCell>
<TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
<TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
+ <TableCell>
+ <IconButton
+ aria-label="Remove"
+ onClick={(event: React.MouseEvent<HTMLTableCellElement>) => this.onDelete(event, f)}
+ className={disabled ? classnames(classes.deleteButtonDisabled, classes.deleteIcon) : classnames(classes.deleteButton, classes.deleteIcon)}
+ >
+ <RemoveIcon />
+ </IconButton>
+ </TableCell>
</TableRow>
)}
</TableBody>