Merge pull request #5726 from IgniteUI/SKrastev/drag-drop-migration

Add migrations for renamed interfaces. Move breaking changes for drag/drop in correct version.

Author: mpavlinov

CHANGELOG.md

@@ -37,7 +37,7 @@ For more information about the theming please read our [documentation](https://w
 - `IgxDrag`
     - Dragging without ghost. Now it is possible to drag the base element `igxDrag` is instanced on by setting the new input `ghost` to false.
     - Ghost template. A custom ghost template reference can be provided on the new `ghostTemplate` input.
-    - Dragging using a single or multiple handles. New `igxDragHandle` directive is exposed to specify a handle by which and element can be interacted with instead of the whole element `igxDrag` is instanced on.
+    - Dragging using a single or multiple handles. New `igxDragHandle` directive is exposed to specify a handle by which an element can be interacted with instead of the whole element `igxDrag` is instanced on.
     - Linking of drag and drop elements. This can be achieved by using the new provided `dragChannel` input, specifying each element to which channel it corresponds.
     - Drag animation improvements. Three new methods have been exposed in place of the old `animateToOrigin` input in order to provide more flexibility when wanting to have transition animation to specific position when dropping. `setLocation`, `transitionToOrigin` and `transitionTo` are all methods that provide a various way to animate a transition to a specific location for the dragged element.
     - New getters - `location` and `originLocation` to aid in applying transition animations.
@@ -78,10 +78,6 @@ For more information about the theming please read our [documentation](https://w
     ```
    - **Breaking Change** When using `[valueKey]`, combo methods, events and outputs **cannot** be handled with *data item references*.
    - For more information, visit the component's [readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/combo/README.md)
-
-## 8.1.4
-- `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component.
-
 - `IgxDrag`
     - Deprecated inputs - `hideBaseOnDrag`, `animateOnRelease`, `visible`.
     - Deprecated methods - `dropFinished`.
@@ -97,10 +93,13 @@ For more information about the theming please read our [documentation](https://w
     - **Breaking Change** `onOver` output is renamed to `over`.
     - **Breaking Change** `onLeave` output is renamed to `leave`.
     - **Breaking Change** `onDrop` output is renamed to `dropped`.
-    - **Breaking Change** Interfaces `IgxDropEnterEventArgs`, `IgxDropLeaveEventArgs` are both now called `IDragBaseEventArgs`.
+    - **Breaking Change** Interfaces `IgxDropEnterEventArgs`, `IgxDropLeaveEventArgs` are both now called `IDropBaseEventArgs`.
     - **Breaking Change** Interfaces `IgxDropEventArgs` is renamed to `IDropDroppedEventArgs`.
     - **Breaking Change** Outputs `enter`, `over`, `leave`(former `onEnter`, `onOver`, `onLeave`) now have arguments of type `IDropBaseEventArgs`
     - **Breaking Change** Output `dropped` (former `onDrop`) now have arguments of type `IDropDroppedEventArgs`
+    
+## 8.1.4
+- `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component.
 
 ## 8.1.3
 - `IgxCombo`

projects/igniteui-angular/migrations/update-8_2_0/changes/classes.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "../../common/schema/class.schema.json",
+    "changes": [
+        {
+            "name": "IgxDropEnterEventArgs",
+            "replaceWith": "IDropBaseEventArgs"
+        },
+        {
+            "name": "IgxDropLeaveEventArgs",
+            "replaceWith": "IDropBaseEventArgs"
+        },
+        {
+            "name": "IgxDropEventArgs",
+            "replaceWith": "IDropDroppedEventArgs"
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-8_2_0/index.spec.ts

@@ -66,16 +66,52 @@ describe('Update 8.2.0', () => {
     it('should update igxDrag and igxDrop outputs bindings', done => {
         appTree.create(
             '/testSrc/appPrefix/component/custom.component.html',
-            `<div igxDrag (onGhostCreate)="ghostCreateHandler($event)" (onGhostDestroy)="ghostDestroyHandler($event)" (returnMoveEnd)="moveEndHandler($event)" (dragClicked)="clickHandler($event)">Drag me</div>
+            `<div igxDrag (onGhostCreate)="ghostCreateHandler($event)"
+                (onGhostDestroy)="ghostDestroyHandler($event)"
+                (returnMoveEnd)="moveEndHandler($event)"
+                (dragClicked)="clickHandler($event)">
+                Drag me
+            </div>
             <div igxDrop (onEnter)="enterHandler($event)" (onLeave)="leaveHandler($event)" (onDrop)="dropHandler($event)">drop area</div>
             `);
-        const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
 
+        const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
         expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
             .toEqual(
-            `<div igxDrag (ghostCreate)="ghostCreateHandler($event)" (ghostDestroy)="ghostDestroyHandler($event)" (transitioned)="moveEndHandler($event)" (click)="clickHandler($event)">Drag me</div>
+            `<div igxDrag (ghostCreate)="ghostCreateHandler($event)"
+                (ghostDestroy)="ghostDestroyHandler($event)"
+                (transitioned)="moveEndHandler($event)"
+                (click)="clickHandler($event)">
+                Drag me
+            </div>
             <div igxDrop (enter)="enterHandler($event)" (leave)="leaveHandler($event)" (dropped)="dropHandler($event)">drop area</div>
             `);
         done();
     });
+
+    it('should update igxDrag and igxDrop event argument interfaces', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.ts',
+            `import { IgxDragDirective, IgxDropDirective, IgxDropEnterEventArgs,
+                IgxDropLeaveEventArgs, IgxDropEventArgs } from 'igniteui-angular';
+
+            export class DragDropSampleComponent {
+                public onEnterHandler(event: IgxDropEnterEventArgs) {}
+                public onLeaveHandler(event: IgxDropLeaveEventArgs) {}
+                public onDropHandler(event: IgxDropEventArgs) {}
+            }`);
+
+        const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.ts'))
+            .toEqual(
+            `import { IgxDragDirective, IgxDropDirective, IDropBaseEventArgs,
+                IDropBaseEventArgs, IDropDroppedEventArgs } from 'igniteui-angular';
+
+            export class DragDropSampleComponent {
+                public onEnterHandler(event: IDropBaseEventArgs) {}
+                public onLeaveHandler(event: IDropBaseEventArgs) {}
+                public onDropHandler(event: IDropDroppedEventArgs) {}
+            }`);
+        done();
+    });
 });

projects/igniteui-angular/src/lib/directives/drag-drop/README.md

@@ -61,7 +61,7 @@ The `ghost` input is set to `true` by default which means that the base element
 
 #### Dragging without ghost
 
-If `renderGhost` input is set to false the dragging logic for the `igxDrag` provides dragging ability for the initialized element itself. This means that it can freely move an element around by click and hold and when released it will keep its position where it was dragged.
+If `ghost` input is set to false the dragging logic for the `igxDrag` provides dragging ability for the initialized element itself. This means that it can freely move an element around by click and hold and when released it will keep its position where it was dragged.
 
 #### Dragging using a handle
 
@@ -119,11 +119,10 @@ If the user want to have other types of animations that involve element transfor
 
 | Name | Type | Default Value | Description |
 | :--- | :--- | :--- | :--- |
-| igxDrag          | any | - | Input used to save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element. |
-| dragTolerance    | number | 5 | Indicates when the drag should start (in pixels). By default the drag starts after the draggable element is moved by 5px |
-| dragGhostHost | any | null | Sets the element to which the dragged element will be appended.
-| ghostImageClass  | string | '' | Sets a custom class that will be added to the `dragGhost` element. |
-| animateOnRelease | boolean | false | Enables/disables the draggable element animation when the element is released. |
+| `igxDrag`          | any | - | Input used to save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element. |
+| `dragTolerance`    | number | 5 | Indicates when the drag should start (in pixels). By default the drag starts after the draggable element is moved by 5px |
+| `ghostHost` | any | null | Sets the element to which the dragged element will be appended.
+| `ghostClass`  | string | '' | Sets a custom class that will be added to the `igxDrag` element. |
 
 ### Outputs
 
@@ -185,7 +184,7 @@ public onAreaLeave() {
 
 For achieving a drop functionality with the `igxDrag` directive the `igxDrop` directive should be used. It can be applied on any kind of element and it specifies an area where the `igxDrag` can be dropped. 
 
-By default the `igxDrop` does not apply any logic to the dragged element when it is dropped onto it. The user could choose between a few different drop strategies if he would like the `igxDrop` to perform some action or he could implement his own drop logic using the provided `onDragDrop` events.
+By default the `igxDrop` does not apply any logic to the dragged element when it is dropped onto it. The user could choose between a few different drop strategies if he would like the `igxDrop` to perform some action or he could implement his own drop logic using the provided `dropped` event.
 
 #### Drop Strategies
 
@@ -215,7 +214,7 @@ HTML:
 
 #### Canceling a Drop Strategy
 
-When using a specific drop strategy, its behavior can be canceled in the `onDrop` or `onDragDrop` events by setting the cancel property to true. The `onDrop` event is specific to the `igxDrag` and the `onDragDrop` event to the `igxDrop`. If the user does not have drop strategy applied to the `igxDrop` canceling the event would have no side effects.
+When using a specific drop strategy, its behavior can be canceled in the [`dropped`]({environment:angularApiUrl}/classes/igxdropdirective.html#dropped) events by setting the `cancel` property to true. The `dropped` event is specific to the `igxDrop`. If you does not have drop strategy applied to the `igxDrop` canceling the event would have no side effects.
 
 *Example:*
 

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -1459,6 +1459,31 @@ export class IgxDropDirective implements OnInit, OnDestroy {
     @Input()
     public dropChannel: number | string | number[] | string[];
 
+    /**
+     * An @Input property that specifies a drop strategy type that will be executed when an `IgxDrag` element is released inside
+     *  the current drop area. The provided strategies are:
+     *  - IgxDefaultDropStrategy - This is the default base strategy and it doesn't perform any actions.
+     *  - IgxAppendDropStrategy - Appends the dropped element to last position as a direct child to the `igxDrop`.
+     *  - IgxPrependDropStrategy - Prepends the dropped element to first position as a direct child to the `igxDrop`.
+     *  - IgxInsertDropStrategy - If the dropped element is released above a child element of the `igxDrop`, it will be inserted
+     *      at that position. Otherwise the dropped element will be appended if released outside any child of the `igxDrop`.
+     * ```html
+     * <div igxDrag>
+     *      <span>DragMe</span>
+     * </div>
+     * <div igxDrop [dropStrategy]="myDropStrategy">
+     *         <span>Numbers drop area!</span>
+     * </div>
+     * ```
+     * ```typescript
+     * import { IgxAppendDropStrategy } from 'igniteui-angular';
+     *
+     * export class App {
+     *      public myDropStrategy = IgxAppendDropStrategy;
+     * }
+     * ```
+     * @memberof IgxDropDirective
+     */
     @Input()
     public set dropStrategy(classRef: any) {
         this._dropStrategy = new classRef(this._renderer);