Merge pull request #10127 from IgniteUI/sstoychev/for-of-margin

feat(for-of): allowing margins to properly size the internal v model (#10039)

Author: ChronosSF

CHANGELOG.md

@@ -22,6 +22,10 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
     - 'oddRowCSS' and 'evenRowCSS' properties has been deprecated
+- `IgxForOf` - now takes margins into account when calculating the space that each element takes.
+    _Note:_ If your virtualized items contain margins, please calculate them into the `itemSize` value for the best possible initial virtualized state.
+
+## 12.1.6
 
 ## 12.1.6
 

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts

@@ -324,6 +324,33 @@ describe('IgxForOf directive -', () => {
             chunkSize = (virtualContainer as any)._calcMaxChunkSize();
             expect(chunkSize).toEqual(10);
         });
+
+        it('should take item margins into account when calculating the size cache', async () => {
+            fix.componentInstance.height = '600px';
+            fix.componentInstance.itemSize = '100px';
+            const virtualContainer = fix.componentInstance.parentVirtDir;
+            virtualContainer.igxForSizePropName = 'height';
+            fix.componentInstance.data = [
+                { 1: '1', height: '100px', margin: '30px' },
+                { 1: '2', height: '100px', margin: '0px' },
+                { 1: '3', height: '100px', margin: '0px' },
+                { 1: '4', height: '100px', margin: '0px' },
+                { 1: '5', height: '100px', margin: '0px' },
+                { 1: '6', height: '100px', margin: '0px' },
+                { 1: '7', height: '100px', margin: '0px' },
+                { 1: '8', height: '100px', margin: '30px' },
+                { 1: '9', height: '100px', margin: '30px' },
+                { 1: '10', height: '100px', margin: '30px' }
+            ];
+            fix.detectChanges();
+            await wait(200);
+            const cache = (fix.componentInstance.parentVirtDir as any).heightCache;
+            expect(cache).toEqual([130, 100, 100, 100, 100, 100, 100, 100, 100, 100]);
+            fix.componentInstance.scrollTop(400);
+            fix.detectChanges();
+            await wait(200);
+            expect(cache).toEqual([130, 100, 100, 100, 100, 100, 100, 130, 130, 130]);
+        });
     });
 
     describe('vertical and horizontal virtual component', () => {
@@ -1185,7 +1212,7 @@ describe('IgxForOf directive -', () => {
             const secondForOf = fix.componentInstance.secondForOfDir;
             expect(secondForOf.state.startIndex).toBe(0);
         });
-});
+    });
 });
 
 class DataGenerator {
@@ -1401,7 +1428,9 @@ export class VirtualComponent {
                 [igxForScrollOrientation]="'vertical'"
                 [igxForContainerSize]='height'
                 [igxForItemSize]='itemSize'>
-                <div [style.display]="'flex'" [style.height]="rowData.height || itemSize || '50px'">
+                <div [style.display]="'flex'"
+                    [style.height]="rowData.height || itemSize || '50px'"
+                    [style.margin-top]="rowData.margin || '0px'">
                     <div [style.min-width]=cols[0].width>{{rowData['1']}}</div>
                     <div [style.min-width]=cols[1].width>{{rowData['2']}}</div>
                     <div [style.min-width]=cols[2].width>{{rowData['3']}}</div>

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -735,7 +735,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
     /**
      * @hidden
-     * Function that recaculates and updates cache sizes.
+     * Function that recalculates and updates cache sizes.
      */
     public recalcUpdateSizes() {
         const dimension = this.igxForScrollOrientation === 'horizontal' ?
@@ -753,8 +753,9 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 if (!this.isRemote && !this.igxForOf[index]) {
                     continue;
                 }
+                const margin = this.getMargin(rNode, dimension);
                 const oldVal = dimension === 'height' ? this.heightCache[index] : this.igxForOf[index][dimension];
-                const newVal = dimension === 'height' ? h : rNode.clientWidth;
+                const newVal = (dimension === 'height' ? h : rNode.clientWidth) + margin;
                 if (dimension === 'height') {
                     this.heightCache[index] = newVal;
                 } else {
@@ -855,6 +856,8 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
         this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
 
+        this._zone.onStable.pipe(first()).subscribe(this.recalcUpdateSizes.bind(this));
+
         this.dc.changeDetectorRef.detectChanges();
         if (prevStartIndex !== this.state.startIndex) {
             this.chunkLoad.emit(this.state);
@@ -1404,6 +1407,16 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             this.scrollPosition = newSize === this.scrollPosition ? newSize + 1 : newSize;
         }
     }
+
+    private getMargin(node, dimension: string): number {
+        const styles = window.getComputedStyle(node);
+        if (dimension === 'height') {
+            return parseFloat(styles['marginTop']) +
+                parseFloat(styles['marginBottom']) || 0;
+        }
+        return parseFloat(styles['marginLeft']) +
+            parseFloat(styles['marginRight']) || 0;
+    }
 }
 
 export const getTypeNameForDebugging = (type: any): string => type.name || typeof type;

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -3879,6 +3879,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             scrollbar.scrollTop = displayContainer.getBoundingClientRect().height / 2;
             await wait(200);
             fix.detectChanges();
+            await wait(100);
 
             // Type string in search box
             const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);