fix(cdk): fix failing unit test

SAP · Apr 5, 2023 · a5ba24a · a5ba24a
1 parent 420d941
commit a5ba24a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/libs/cdk/src/lib/utils/drag-and-drop/dnd-list/dnd-list.directive.spec.ts b/libs/cdk/src/lib/utils/drag-and-drop/dnd-list/dnd-list.directive.spec.ts
@@ -93,6 +93,7 @@ describe('DndListDirective', () => {
         directive.items = [...component.list];
 
         (directive as any)._closestItemIndex = 1;
+        (directive as any)._closestItemPosition = 'after';
         directive.dragEnd(3);
         expect(directive.itemDropped.emit).toHaveBeenCalledWith({
             replacedItemIndex: 1,

diff --git a/libs/docs/cdk/drag-n-drop/examples/default-example/default-example.component.html b/libs/docs/cdk/drag-n-drop/examples/default-example/default-example.component.html
@@ -16,7 +16,7 @@
 </p>
 <ng-template
     [ngTemplateOutlet]="listRenderer"
-    [ngTemplateOutletContext]="{ $implicit: values2, dropMode: 'auto', property: 'values2' }"
+    [ngTemplateOutletContext]="{ $implicit: values3, dropMode: 'auto', property: 'values3' }"
 ></ng-template>
 
 <ng-template let-items let-dropMode="dropMode" let-property="property" #listRenderer>
@@ -25,7 +25,6 @@
         fdkDndList
         [dropMode]="dropMode"
         [items]="items"
-        (itemsChange)="onItemsChange($event, property, dropMode)"
         (itemDropped)="onItemDropped($event, property)"
     >
         <ng-container *ngFor="let item of items">

diff --git a/libs/docs/cdk/drag-n-drop/examples/default-example/default-example.component.ts b/libs/docs/cdk/drag-n-drop/examples/default-example/default-example.component.ts
@@ -36,10 +36,6 @@ export class DefaultExampleComponent {
     values3 = generateItems();
     constructor() {}
 
-    onItemsChange(items: ListItem[], property: string, dropMode: FdDndDropType): void {
-        // this[property] = items;
-    }
-
     onItemDropped(event: FdDropEvent<ListItem>, property: string): void {
         const values = this[property] as ListItem[];
         const draggedItem = values[event.draggedItemIndex];
@@ -52,6 +48,8 @@ export class DefaultExampleComponent {
         }
 
         this._dragDropUpdateDropItemAttributes(draggedItem, droppedItem, event.mode, property);
+
+        this._cdr.detectChanges();
     }
 
     /** @hidden */
@@ -133,9 +131,30 @@ export class DefaultExampleComponent {
         };
     }
 
+    /** @hidden */
     private _findItemChildren(item: ListItem, property: string): ListItem[] {
-        const allItems = this[property] as ListItem[];
-        return allItems.filter((item) => item.parent === item);
+        const allItems = this[property];
+        const itemsLength = allItems.length;
+
+        /**
+         * Since we are dealing with a flat list
+         * it means all children go next right after the expandable item
+         * until the next item has a mutual parent
+         */
+
+        let index = allItems.indexOf(item);
+        const parents = this._getItemParents(item, property);
+        const children: ListItem[] = [];
+
+        while (index++ < itemsLength) {
+            const nextItem = allItems[index];
+            if (!nextItem?.parent || parents.includes(nextItem.parent)) {
+                break;
+            }
+            children.push(nextItem);
+        }
+
+        return children;
     }
 
     private _getItemParents(item: ListItem, property: string): ListItem[] {