IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Files: removed custom dropzone function, refactoring

Browse Source
This commit is contained in:
Nikita Gopienko 2020-08-26 11:35:12 +03:00
parent 60bf8d02f1
commit 78e62b36fc
3 changed files with 13 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
products/ASC.Files/Client/src/components/pages/Home/FilesUploader.js
View File

@ -26,7 +26,8 @@ export const startUpload = (uploadFiles, folderId, t) => {
const convertFiles = [];
let convertFilesSize = 0;
for (let item of uploadFiles) {
for (let index of Object.keys(uploadFiles)) {
const item = uploadFiles[index];
if (item.size !== 0) {
const parts = item.name.split(".");
const ext = parts.length > 1 ? "." + parts.pop() : "";

40
products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js
View File

@ -12,7 +12,8 @@ import {
Row,
RowContainer,
toastr,
Link
Link,
DragAndDrop
} from "asc-web-components";
import EmptyFolderContainer from "./EmptyFolderContainer";
import FilesRowContent from "./FilesRowContent";
@ -20,7 +21,7 @@ import FilesTileContent from "./FilesTileContent";
import TileContainer from './TileContainer';
import Tile from './Tile';
import { api, constants, MediaViewer, DragAndDrop } from 'asc-web-common';
import { api, constants, MediaViewer } from 'asc-web-common';
import {
deleteFile,
deleteFolder,
@ -823,30 +824,11 @@ class SectionBodyContent extends React.Component {
}
}
onDragEnter = (item, e) => {
const isCurrentItem = this.props.selection.find(x => x.id === item.id && x.fileExst === item.fileExst);
if (!item.fileExst && (!isCurrentItem || e.dataTransfer.items.length)) {
e.currentTarget.style.background = backgroundDragColor;
}
}
onDragLeave = (item, e) => {
const { selection, dragging, setDragging } = this.props;
const isCurrentItem = selection.find(x => x.id === item.id && x.fileExst === item.fileExst);
if (!e.dataTransfer.items.length) {
e.currentTarget.style.background = "none";
} else if (!item.fileExst && !isCurrentItem) {
e.currentTarget.style.background = backgroundDragEnterColor;
}
if (dragging && !e.relatedTarget) { setDragging(false); }
}
onDrop = (item, e) => {
if (e.dataTransfer.items.length > 0 && !item.fileExst) {
onDrop = (item, items, e) => {
if (!item.fileExst) {
const { setDragging, onDropZoneUpload } = this.props;
e.currentTarget.style.background = backgroundDragEnterColor;
setDragging(false);
onDropZoneUpload(e, item.id);
onDropZoneUpload(items, e, item.id);
}
}
@ -868,13 +850,13 @@ class SectionBodyContent extends React.Component {
onMouseDown = e => {
const mouseButton = e.which ? e.which !== 1 : e.button ? e.button !== 0 : false;
const label = e.target.getAttribute('label');
if (mouseButton || e.target.tagName !== "DIV" || label) { return; }
const label = e.currentTarget.getAttribute('label');
if (mouseButton || e.currentTarget.tagName !== "DIV" || label) { return; }
document.addEventListener("mousemove", this.onMouseMove);
this.setTooltipPosition(e);
const { selection, setDragging } = this.props;
const elem = e.target.closest('.draggable');
const elem = e.currentTarget.closest('.draggable');
if (!elem) {
return;
}
@ -1196,8 +1178,6 @@ class SectionBodyContent extends React.Component {
<DragAndDrop
{...classNameProp}
onDrop={this.onDrop.bind(this, item)}
onDragEnter={this.onDragEnter.bind(this, item)}
onDragLeave={this.onDragLeave.bind(this, item)}
onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`}
@ -1259,8 +1239,6 @@ class SectionBodyContent extends React.Component {
<DragAndDrop
{...classNameProp}
onDrop={this.onDrop.bind(this, item)}
onDragEnter={this.onDragEnter.bind(this, item)}
onDragLeave={this.onDragLeave.bind(this, item)}
onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`}

97
products/ASC.Files/Client/src/components/pages/Home/index.js
View File

@ -94,105 +94,12 @@ class PureHome extends React.Component {
this.setState(newState);
};
onDrop = (e, uploadToFolder) => {
const items = e.dataTransfer.items;
let files = [];
onDrop = (files, e, uploadToFolder) => {
const { t, currentFolderId, startUpload } = this.props;
const folderId = uploadToFolder ? uploadToFolder : currentFolderId;
const inSeries = (queue, callback) => {
let i = 0;
let length = queue.length;
if (!queue || !queue.length) {
callback();
}
const callNext = i => {
if (typeof queue[i] === "function") {
queue[i](() => (i + 1 < length ? callNext(i + 1) : callback()));
}
};
callNext(i);
};
const readDirEntry = (dirEntry, callback) => {
let entries = [];
const dirReader = dirEntry.createReader();
// keep quering recursively till no more entries
const getEntries = func => {
dirReader.readEntries(moreEntries => {
if (moreEntries.length) {
entries = [...entries, ...moreEntries];
getEntries(func);
} else {
func();
}
});
};
getEntries(() => readEntries(entries, callback));
};
const readEntry = (entry, callback) => {
if (entry.isFile) {
entry.file(file => {
addFile(file, entry.fullPath);
callback();
});
} else if (entry.isDirectory) {
readDirEntry(entry, callback);
}
};
const readEntries = (entries, callback) => {
const queue = [];
loop(entries, entry => {
queue.push(func => readEntry(entry, func));
});
inSeries(queue, () => callback());
};
const addFile = (file, relativePath) => {
file.relativePath = relativePath || "";
files.push(file);
};
const loop = (items, callback) => {
let length;
if (items) {
length = items.length;
// Loop array items
for (let i = 0; i < length; i++) {
callback(items[i], i);
}
}
};
const readItems = (items, func) => {
const entries = [];
loop(items, item => {
const entry = item.webkitGetAsEntry();
if (entry) {
if (entry.isFile) {
addFile(item.getAsFile(), entry.fullPath);
} else {
entries.push(entry);
}
}
});
if (entries.length) {
readEntries(entries, func);
} else {
func();
}
};
this.props.setDragging(false);
readItems(items, () => startUpload(files, folderId, t));
startUpload(files, folderId, t);
};
onSectionHeaderContentCheck = checked => {