fix drop effect (#5925)

* fix drop effect

* remove old comment

* update tests
This commit is contained in:
Denys Vuika 2020-07-30 11:54:42 +01:00 committed by GitHub
parent bf7a0902c6
commit 6dde9779cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 10 deletions

View File

@ -33,7 +33,7 @@ describe('FileDraggableDirective', () => {
it('should not allow drag and drop when disabled', () => { it('should not allow drag and drop when disabled', () => {
component.enabled = false; component.enabled = false;
const event = new CustomEvent('custom-event'); const event = new DragEvent('custom-event');
spyOn(event, 'preventDefault').and.stub(); spyOn(event, 'preventDefault').and.stub();
component.onDropFiles(event); component.onDropFiles(event);
component.onDragEnter(event); component.onDragEnter(event);

View File

@ -20,9 +20,6 @@
import { FileUtils } from '@alfresco/adf-core'; import { FileUtils } from '@alfresco/adf-core';
import { Directive, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core'; import { Directive, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ @Directive({
selector: '[adf-file-draggable]' selector: '[adf-file-draggable]'
}) })
@ -32,17 +29,17 @@ export class FileDraggableDirective implements OnInit, OnDestroy {
/** Enables/disables drag-and-drop functionality. */ /** Enables/disables drag-and-drop functionality. */
@Input('adf-file-draggable') @Input('adf-file-draggable')
enabled: boolean = true; enabled = true;
/** Emitted when one or more files are dragged and dropped onto the draggable element. */ /** Emitted when one or more files are dragged and dropped onto the draggable element. */
@Output() @Output()
filesDropped: EventEmitter<File[]> = new EventEmitter<File[]>(); filesDropped = new EventEmitter<File[]>();
/** Emitted when a directory is dragged and dropped onto the draggable element. */ /** Emitted when a directory is dragged and dropped onto the draggable element. */
@Output() @Output()
folderEntityDropped: EventEmitter<any> = new EventEmitter(); folderEntityDropped = new EventEmitter<any>();
private cssClassName: string = 'adf-file-draggable__input-focus'; private cssClassName = 'adf-file-draggable__input-focus';
private element: HTMLElement; private element: HTMLElement;
constructor(el: ElementRef, private ngZone: NgZone) { constructor(el: ElementRef, private ngZone: NgZone) {
@ -113,9 +110,10 @@ export class FileDraggableDirective implements OnInit, OnDestroy {
* *
* @param event - DOM event. * @param event - DOM event.
*/ */
onDragEnter(event: Event): void { onDragEnter(event: DragEvent): void {
if (this.enabled && !event.defaultPrevented) { if (this.enabled && !event.defaultPrevented) {
this.preventDefault(event); this.preventDefault(event);
event.dataTransfer.dropEffect = 'copy';
this.element.classList.add(this.cssClassName); this.element.classList.add(this.cssClassName);
} }
} }
@ -137,9 +135,10 @@ export class FileDraggableDirective implements OnInit, OnDestroy {
* *
* @param event * @param event
*/ */
onDragOver(event: Event): void { onDragOver(event: DragEvent): void {
if (this.enabled && !event.defaultPrevented) { if (this.enabled && !event.defaultPrevented) {
this.preventDefault(event); this.preventDefault(event);
event.dataTransfer.dropEffect = 'copy';
this.element.classList.add(this.cssClassName); this.element.classList.add(this.cssClassName);
} }
} }