filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-28 19:42:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

remove dragging event collisions

Browse Source
This commit is contained in:
Aminejvm 2021-02-12 16:12:20 +01:00
parent 44746ee37d
commit cc6f91fdf0
1 changed files with 139 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/core/DataView.js
View File

@ -446,6 +446,29 @@ export default class DataView extends React.Component {
this.lastSelectedItemIndex = null;
};
/** Note(Amine): These methods will stop collision between
Drag to desktop event and drop to upload
*/
_stopPropagation = (e) => e.stopPropagation();
_disableDragAndDropUploadEvent = () => {
document.addEventListener("dragenter", this._stopPropagation);
document.addEventListener("drop", this._stopPropagation);
};
_enableDragAndDropUploadEvent = () => {
document.removeEventListener("dragenter", this._stopPropagation);
document.removeEventListener("drop", this._stopPropagation);
};
_handleDragToDesktop = (e, object) => {
const url = Strings.getCIDGatewayURL(object.cid);
const title = object.file || object.name;
const type = object.type;
console.log(e.dataTransfer, e.dataTransfer.setData);
e.dataTransfer.setData("DownloadURL", `${type}:${title}:${url}`);
};
render() {
let numChecked = Object.keys(this.state.checked).length || 0;
// const header = (
@ -530,17 +553,14 @@ export default class DataView extends React.Component {
{this.props.items.slice(0, this.state.viewLimit).map((each, i) => {
const cid = each.cid;
return (
<div
key={each.id}
draggable="true"
onDragStart={(e) => {
const url = Strings.getCIDGatewayURL(each.cid);
const title = each.file || each.name;
console.log(`${each.type}:${title}:${url}`);
e.dataTransfer.setData("DownloadURL", `${each.type}:${title}:${url}`);
}}
>
<Selectable
key={each.id}
draggable={!numChecked}
onDragStart={(e) => {
this._disableDragAndDropUploadEvent();
this._handleDragToDesktop(e, each);
}}
onDragEnd={this._enableDragAndDropUploadEvent}
selectableKey={i}
css={STYLES_IMAGE_BOX}
style={{
@ -655,7 +675,6 @@ export default class DataView extends React.Component {
) : null}
</span>
</Selectable>
</div>
);
})}
{[0, 1, 2, 3].map((i) => (