feat(drag-drop): convert cdk-drop into a directive #13441
Conversation
crisbeto
added
P2
googlebot
added
the
cla: yes
|
Marking as P2, because it's a breaking change that would be good to get in before the API is considered stable. @jelbourn since this a breaking in an API that isn't stable yet, I haven't included a backwards-compatibility layer. I can do one if necessary, since we also just entered into RC. |
| @@ -155,25 +155,15 @@ describe('DragDropRegistry', () => { | |||
| expect(dispatchTouchEvent(document, 'touchmove').defaultPrevented).toBe(true); | |||
| }); | |||
|
|
|||
| it('should disable the native interactions on the body while dragging', () => { | |||
There was a problem hiding this comment.
I've dropped this test and I haven't added new ones for the other elements that need to get these styles at runtime, because not all of the properties that are added are supported on the browsers that we test against, which will lead to flakes.
| @@ -1,15 +1,27 @@ | |||
| <div class="container"> | |||
| <h2>To do</h2> | |||
|
|
|||
| <cdk-drop #todoList [data]="todo" [connectedTo]="doneList" class="list" (dropped)="drop($event)"> | |||
| <div | |||
| cdkDrop | |||
There was a problem hiding this comment.
Should this be indented by four spaces? It feels odd that the attributes align with the child element.
See: https://google.github.io/styleguide/htmlcssguide.html#HTML_Line-Wrapping
I just see that other schematic components use that formatting as well. I'll switch them to 4 fours spaces in an upcoming PR.
There was a problem hiding this comment.
I'm not sure about that. Should we be matching the indentation to other components in the repo or the Google guidelines?
There was a problem hiding this comment.
I don't think it matters for the other components. It just would be good if the components that will be generated by the schematics, are consistent and easy to understand.
And since this change now wraps the HTML attributes, it would be good to change it while being at it. I didn't have a chance to update the other components. The drag-drop schematic was fine because we didn't need to wrap before this change.
Converts `cdk-drop` into a directive and moves the handful of structural styles into JS. Fixes angular#13341.
crisbeto
force-pushed
the
13341/drop-directive
branch
from
a12abbb to
475dc21
Compare
vivian-hu-zz
added
the
merge: fix commit message
|
|
||
| /** | ||
| * Function that is used to determine whether an item | ||
| * is allowed to be moved into a drop container. | ||
| */ | ||
| @Input() enterPredicate: (drag?: CdkDrag, drop?: CdkDrop) => boolean = () => true; | ||
| @Input('cdkDropEnterPredication') |
There was a problem hiding this comment.
Why is it renamed from predicate to predication?
There was a problem hiding this comment.
Good question, it's a typo. I'll sort it out.
Converts `cdk-drop` into a directive and moves the handful of structural styles into JS. Fixes angular#13341.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Converts
cdk-dropinto a directive and moves the handful of structural styles into JS.Fixes #13341.