Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(drag-drop): allow entire group of drop lists to be disabled #14179

Merged
merged 1 commit into from
Dec 12, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 28 additions & 2 deletions src/cdk/drag-drop/directives/drag.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1917,7 +1917,31 @@ describe('CdkDrag', () => {
dispatchEvent(document, endEvent);
fixture.detectChanges();
}).not.toThrow();
}));

it('should not move the item if the group is disabled', fakeAsync(() => {
const fixture = createComponent(ConnectedDropZonesViaGroupDirective);
fixture.detectChanges();
const dragItems = fixture.componentInstance.groupedDragItems[0];

fixture.componentInstance.groupDisabled = true;
fixture.detectChanges();

expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
.toEqual(['Zero', 'One', 'Two', 'Three']);

const firstItem = dragItems[0];
const thirdItemRect = dragItems[2].element.nativeElement.getBoundingClientRect();

dragElementViaMouse(fixture, firstItem.element.nativeElement,
thirdItemRect.right + 1, thirdItemRect.top + 1);
flush();
fixture.detectChanges();

expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled();

expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
.toEqual(['Zero', 'One', 'Two', 'Three']);
}));

});
Expand Down Expand Up @@ -2743,7 +2767,7 @@ class ConnectedDropZones implements AfterViewInit {
}
`],
template: `
<div cdkDropListGroup>
<div cdkDropListGroup [cdkDropListGroupDisabled]="groupDisabled">
<div
cdkDropList
[cdkDropListData]="todo"
Expand All @@ -2760,7 +2784,9 @@ class ConnectedDropZones implements AfterViewInit {
</div>
`
})
class ConnectedDropZonesViaGroupDirective extends ConnectedDropZones {}
class ConnectedDropZonesViaGroupDirective extends ConnectedDropZones {
groupDisabled = false;
}


@Component({
Expand Down
11 changes: 10 additions & 1 deletion src/cdk/drag-drop/directives/drop-list-group.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/

import {Directive, OnDestroy} from '@angular/core';
import {Directive, OnDestroy, Input} from '@angular/core';
import {coerceBooleanProperty} from '@angular/cdk/coercion';

/**
* Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
Expand All @@ -22,6 +23,14 @@ export class CdkDropListGroup<T> implements OnDestroy {
/** Drop lists registered inside the group. */
readonly _items = new Set<T>();

/** Whether starting a dragging sequence from inside this group is disabled. */
@Input('cdkDropListGroupDisabled')
get disabled(): boolean { return this._disabled; }
set disabled(value: boolean) {
this._disabled = coerceBooleanProperty(value);
}
private _disabled = false;

ngOnDestroy() {
this._items.clear();
}
Expand Down
7 changes: 5 additions & 2 deletions src/cdk/drag-drop/directives/drop-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,13 @@ export class CdkDropList<T = any> implements CdkDropListContainer, OnDestroy {

/** Whether starting a dragging sequence from this container is disabled. */
@Input('cdkDropListDisabled')
get disabled(): boolean { return this._dropListRef.disabled; }
get disabled(): boolean {
return this._disabled || (!!this._group && this._group.disabled);
}
set disabled(value: boolean) {
this._dropListRef.disabled = coerceBooleanProperty(value);
this._disabled = coerceBooleanProperty(value);
}
private _disabled = false;

/**
* Function that is used to determine whether an item
Expand Down
1 change: 1 addition & 0 deletions tools/public_api_guard/cdk/drag-drop.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export interface CdkDropListContainer<T = any> {

export declare class CdkDropListGroup<T> implements OnDestroy {
readonly _items: Set<T>;
disabled: boolean;
ngOnDestroy(): void;
}

Expand Down