Merge branch '7.1.x' into rkaraivanov/displayDensity-refactor-master

IgniteUI · Jan 4, 2019 · b48f0fb · b48f0fb
2 parents 38ec2d0 + 3a9332a
commit b48f0fb
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 3 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts
@@ -1007,6 +1007,31 @@ describe('IgxForOf directive -', () => {
             }
         });
     });
+    describe('no width and height component', () => {
+        configureTestSuite();
+        let fix: ComponentFixture<NoWidthAndHeightComponent>;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    TestIgxForOfDirective,
+                    NoWidthAndHeightComponent
+                ],
+                imports: [IgxForOfModule]
+            }).compileComponents();
+        }));
+
+        it('should use itemSize when no width or height are provided', () => {
+            fix = TestBed.createComponent(NoWidthAndHeightComponent);
+            fix.componentRef.hostView.detectChanges();
+            fix.detectChanges();
+
+            const children = fix.componentInstance.childVirtDirs;
+            const instance = fix.componentInstance;
+            const expectedElementsLength = (parseInt(instance.width, 10) / instance.itemSize) + 2;
+            expect(children.length).toEqual(expectedElementsLength);
+        });
+    });
 });
 
 class DataGenerator {
@@ -1454,3 +1479,46 @@ export class RemoteVirtualizationComponent implements OnInit, AfterViewInit {
         });
     }
 }
+
+@Component({
+    template: `
+    <div class="container">
+        <ng-template igxForTest
+            let-item [igxForOf]="items"
+            [igxForScrollOrientation]="'horizontal'"
+            [igxForScrollContainer]="parentVirtDir"
+            [igxForContainerSize]='width'
+            [igxForItemSize]='itemSize'>
+                <div class="forOfElement" #child>{{item.text}}</div>
+        </ng-template>
+    </div>
+    `,
+    styles: [`.container {
+        display: flex;
+        flex-flow: column;
+        position: relative;
+        width: 300px;
+        height: 300px;
+        overflow: hidden;
+        border: 1px solid #000;
+    }`, `.forOfElement {
+        flex: 0 0 60px;
+        border-right: 1px solid #888;
+    }`]
+})
+
+export class NoWidthAndHeightComponent {
+    public items = [];
+    public width = '300px';
+    public itemSize = 60;
+    public height = '300px';
+
+    @ViewChildren('child')
+    public childVirtDirs: QueryList<any>;
+
+    constructor() {
+        for (let i = 0; i < 100; i++) {
+            this.items.push({text: i + ''});
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
@@ -903,7 +903,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 size = parseInt(this.igxForItemSize, 10) || 0;
                 this.heightCache.push(size);
             } else {
-                size = parseInt(items[i][dimension], 10) || 0;
+                size = this._getItemSize(items[i], dimension);
             }
             totalSize += size;
             this.sizesCache.push(totalSize);
@@ -922,7 +922,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         let sum = 0;
         const dimension = this.igxForScrollOrientation === 'horizontal' ?
             'width' : 'height';
-        const reducer = (accumulator, currentItem) => accumulator + parseInt(currentItem[dimension], 10);
+        const reducer = (accumulator, currentItem) => accumulator + this._getItemSize(currentItem, dimension);
         const availableSize = parseInt(this.igxForContainerSize, 10);
         for (i; i < this.igxForOf.length; i++) {
             let item = this.igxForOf[i];
@@ -931,7 +931,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             }
             const size = dimension === 'height' ?
                 this.heightCache[i] :
-                parseInt(item[dimension], 10);
+                this._getItemSize(item, dimension);
             sum = arr.reduce(reducer, size);
             if (sum <= availableSize) {
                 arr.push(item);
@@ -1108,6 +1108,11 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             this.hScroll.scrollLeft - this.sizesCache[this.state.startIndex] : 0;
         this.dc.instance._viewContainer.element.nativeElement.style.left = -scrollOffset + 'px';
     }
+
+    private _getItemSize(item, dimension: string): number {
+        const hasDimension = (item[dimension] !== null && item[dimension] !== undefined);
+        return hasDimension ? parseInt(item[dimension], 10) : this.igxForItemSize;
+    }
 }
 
 export function getTypeNameForDebugging(type: any): string {