diff --git a/src/lib/droppable.directive.ts b/src/lib/droppable.directive.ts index 43e83d5..e491f13 100644 --- a/src/lib/droppable.directive.ts +++ b/src/lib/droppable.directive.ts @@ -34,21 +34,27 @@ export class DroppableDirective handleDragover(e: Event) { e.preventDefault(); e.stopPropagation(); - this.element.nativeElement.classList.add(this.dragOverClass); + if (this.appendStatusClasses) { + this.element.nativeElement.classList.add(this.dragOverClass); + } } @HostListener('dragleave', ['$event']) handleDragleave(e: Event) { e.preventDefault(); e.stopPropagation(); - this.element.nativeElement.classList.remove(this.dragOverClass); + if (this.appendStatusClasses) { + this.element.nativeElement.classList.remove(this.dragOverClass); + } } @HostListener('drop', ['$event']) handleDrop(e: Event) { e.preventDefault(); e.stopPropagation(); - this.element.nativeElement.classList.remove(this.dragOverClass); + if (this.appendStatusClasses) { + this.element.nativeElement.classList.remove(this.dragOverClass); + } this.onDroppableElementChange(e); } diff --git a/src/lib/droppable.spec.ts b/src/lib/droppable.spec.ts index 3104cbd..5e0f06b 100644 --- a/src/lib/droppable.spec.ts +++ b/src/lib/droppable.spec.ts @@ -9,12 +9,14 @@ import { DroppableDirective } from './droppable.directive'; template: `
+ [appendStatusClasses]="appendStatusClasses" + > `, }) export class TestComponent { @ViewChild('droppable') droppable: DroppableDirective; acceptsMultipleFiles = true; + appendStatusClasses = true; files: File[] = []; handleFilesDropped(files: File[]) { this.files = files; @@ -83,5 +85,19 @@ describe('Droppable', () => { tc.droppable.handleDragleave(fakeEvent); expect(nc.querySelector('div').classList.contains(tc.droppable.dragOverClass)).toBe(false); })); + it('should not add the dragOverClass to the element when appendStatusClasses is false', async(() => { + const fixture = TestBed.createComponent(TestComponent); + fixture.detectChanges(); + const tc: TestComponent = fixture.debugElement.componentInstance; + tc.appendStatusClasses = false; + fixture.detectChanges(); + const nc = fixture.debugElement.nativeElement; + tc.droppable.handleDragover(fakeEvent); + expect(nc.querySelector('div').classList.contains(tc.droppable.dragOverClass)).toBe(false); + expect(fakeEvent.preventDefault).toHaveBeenCalled(); + expect(fakeEvent.stopPropagation).toHaveBeenCalled(); + tc.droppable.handleDragleave(fakeEvent); + expect(nc.querySelector('div').classList.contains(tc.droppable.dragOverClass)).toBe(false); + })); }); });