fix(drag-drop): enterPredicate being called with wrong drop container (#13578)

Fixes the `enterPredicate` being called with the item's current container, rather than the one it is being moved into. Also tweaks the function signature to avoid unnecessary null checks and expands the description.
This commit is contained in:
Kristiyan Kostadinov
2018-10-15 23:15:45 +03:00
committed by Andrew Seguin
parent 6afe3f557f
commit 60b4a58bc3
2 changed files with 27 additions and 4 deletions
+22
View File
@@ -1437,6 +1437,28 @@ describe('CdkDrag', () => {
});
}));
it('should call the `enterPredicate` with the item and the container it is entering',
fakeAsync(() => {
const fixture = createComponent(ConnectedDropZones);
fixture.detectChanges();
const dropInstances = fixture.componentInstance.dropInstances.toArray();
const spy = jasmine.createSpy('enterPredicate spy').and.returnValue(true);
const groups = fixture.componentInstance.groupedDragItems.slice();
const dragItem = groups[0][1];
const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect();
dropInstances[1].enterPredicate = spy;
fixture.detectChanges();
dragElementViaMouse(fixture, dragItem.element.nativeElement,
targetRect.left + 1, targetRect.top + 1);
flush();
fixture.detectChanges();
expect(spy).toHaveBeenCalledWith(dragItem, dropInstances[1]);
}));
it('should be able to start dragging after an item has been transferred', fakeAsync(() => {
const fixture = createComponent(ConnectedDropZones);
fixture.detectChanges();
+5 -4
View File
@@ -77,11 +77,12 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
@Input('cdkDropLockAxis') lockAxis: 'x' | 'y';
/**
* Function that is used to determine whether an item
* is allowed to be moved into a drop container.
* Function that is used to determine whether an item is allowed to be moved
* into a drop container. The function will be called with the item that is
* being dragged and the container that it's being moved into.
*/
@Input('cdkDropEnterPredicate')
enterPredicate: (drag?: CdkDrag, drop?: CdkDrop) => boolean = () => true
enterPredicate: (drag: CdkDrag, drop: CdkDrop) => boolean = () => true
/** Emits when the user drops an item inside the container. */
@Output('cdkDropDropped')
@@ -315,7 +316,7 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
const result = this._positionCache.siblings
.find(sibling => isInsideClientRect(sibling.clientRect, x, y));
return result && result.drop.enterPredicate(item, this) ? result.drop : null;
return result && result.drop.enterPredicate(item, result.drop) ? result.drop : null;
}
/**