Skip to content

Commit a401865

Browse files
author
Borislav Kulov
committed
Merge branch 'bkulov/radio-group' of github.com:IgniteUI/igniteui-angular into bkulov/radio-group
2 parents ea38f66 + 5d45e33 commit a401865

29 files changed

+486
-400
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,6 @@
424424
grid-row: 2;
425425
border-bottom: 1px dotted igx-color($palette, 'grays', 400);
426426
z-index: 2;
427-
display: table;
428427

429428
%grid__group-indentation {
430429
&::after {

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -237,13 +237,12 @@ describe('IgxVirtual directive - simple template', () => {
237237
// scroll to the last right pos
238238
fix.componentInstance.scrollLeft(90000);
239239
fix.detectChanges();
240-
241240
const rowChildren = displayContainer.querySelectorAll('igx-display-container');
242241
for (let i = 0; i < rowChildren.length; i++) {
243-
expect(rowChildren[i].children.length).toBe(2);
244-
expect(rowChildren[i].children[0].textContent)
242+
expect(rowChildren[i].children.length).toBe(7);
243+
expect(rowChildren[i].children[5].textContent)
245244
.toBe(fix.componentInstance.data[i][298].toString());
246-
expect(rowChildren[i].children[1].textContent)
245+
expect(rowChildren[i].children[6].textContent)
247246
.toBe(fix.componentInstance.data[i][299].toString());
248247
}
249248
});
@@ -264,7 +263,7 @@ describe('IgxVirtual directive - simple template', () => {
264263
let rows = displayContainer.querySelectorAll('igx-display-container');
265264
expect(rows.length).toBe(9);
266265
for (let i = 0; i < rows.length; i++) {
267-
expect(rows[i].children.length).toBe(4);
266+
expect(rows[i].children.length).toBe(7);
268267
expect(rows[i].children[3].textContent)
269268
.toBe(fix.componentInstance.data[i][3].toString());
270269
}
@@ -276,7 +275,7 @@ describe('IgxVirtual directive - simple template', () => {
276275
rows = displayContainer.querySelectorAll('igx-display-container');
277276
expect(rows.length).toBe(9);
278277
for (let i = 0; i < rows.length; i++) {
279-
expect(rows[i].children.length).toBe(5);
278+
expect(rows[i].children.length).toBe(9);
280279
expect(rows[i].children[4].textContent)
281280
.toBe(fix.componentInstance.data[i][4].toString());
282281
}
@@ -298,7 +297,7 @@ describe('IgxVirtual directive - simple template', () => {
298297
let rows = displayContainer.querySelectorAll('igx-display-container');
299298
expect(rows.length).toBe(9);
300299
for (let i = 0; i < rows.length; i++) {
301-
expect(rows[i].children.length).toBe(4);
300+
expect(rows[i].children.length).toBe(7);
302301
expect(rows[i].children[2].textContent)
303302
.toBe(fix.componentInstance.data[i][2].toString());
304303
}
@@ -310,7 +309,7 @@ describe('IgxVirtual directive - simple template', () => {
310309
rows = displayContainer.querySelectorAll('igx-display-container');
311310
expect(rows.length).toBe(15);
312311
for (let i = 0; i < rows.length; i++) {
313-
expect(rows[i].children.length).toBe(4);
312+
expect(rows[i].children.length).toBe(7);
314313
expect(rows[i].children[2].textContent)
315314
.toBe(fix.componentInstance.data[i][2].toString());
316315
}
@@ -448,7 +447,7 @@ describe('IgxVirtual directive - simple template', () => {
448447
expect(fix.componentInstance.isVerticalScrollbarVisible()).toBe(true);
449448
expect(fix.componentInstance.isHorizontalScrollbarVisible()).toBe(true);
450449
expect(rowsRendered.length).toBe(9);
451-
expect(colsRendered.length).toBe(4);
450+
expect(colsRendered.length).toBe(7);
452451

453452
/** Step 1. Scroll to the right. */
454453
fix.componentInstance.scrollLeft(1000);
@@ -519,7 +518,7 @@ describe('IgxVirtual directive - simple template', () => {
519518
expect(fix.componentInstance.isVerticalScrollbarVisible()).toBe(true);
520519
expect(fix.componentInstance.isHorizontalScrollbarVisible()).toBe(true);
521520
expect(rowsRendered.length).toBe(9);
522-
expect(colsRendered.length).toBe(4);
521+
expect(colsRendered.length).toBe(7);
523522

524523
/** Step 1. Lower the amount of cols to 3 so there would be no horizontal scrollbar */
525524
expect(() => {
@@ -530,7 +529,6 @@ describe('IgxVirtual directive - simple template', () => {
530529
fix.componentInstance.scrollTop(verticalScroller.scrollTop);
531530
fix.detectChanges();
532531
}).not.toThrow();
533-
534532
rowsRendered = displayContainer.querySelectorAll('igx-display-container');
535533
colsRendered = rowsRendered[0].children;
536534

@@ -573,7 +571,7 @@ describe('IgxVirtual directive - simple template', () => {
573571
expect(fix.componentInstance.isVerticalScrollbarVisible()).toBe(true);
574572
expect(fix.componentInstance.isHorizontalScrollbarVisible()).toBe(true);
575573
expect(rowsRendered.length).toBe(9);
576-
expect(colsRendered.length).toBe(4);
574+
expect(colsRendered.length).toBe(7);
577575
});
578576

579577
it('should scroll down when using touch events', () => {

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

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -415,15 +415,18 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
415415
}
416416

417417
protected fixedUpdateAllCols(inScrollLeft) {
418-
this.state.startIndex = this.getHorizontalIndexAt(
418+
const startIndex = this.getHorizontalIndexAt(
419419
inScrollLeft,
420420
this.hCache,
421421
0
422422
);
423423
this.onChunkPreload.emit(this.state);
424424
/*recalculate and apply page size.*/
425-
this.applyChunkSizeChange();
426-
425+
if (startIndex + this.state.chunkSize > this.igxForOf.length) {
426+
this.state.startIndex = this.igxForOf.length - this.state.chunkSize;
427+
} else {
428+
this.state.startIndex = startIndex;
429+
}
427430
const embeddedViewCopy = Object.assign([], this._embeddedViews);
428431
const endingIndex = this.state.chunkSize + this.state.startIndex;
429432
for (let i = this.state.startIndex; i < endingIndex && this.igxForOf[i] !== undefined; i++) {
@@ -598,27 +601,12 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
598601
let chunkSize = 0;
599602
if (this.igxForContainerSize !== null && this.igxForContainerSize !== undefined) {
600603
if (this.igxForScrollOrientation === 'horizontal') {
601-
const vc = this.igxForScrollContainer ?
602-
this.igxForScrollContainer._viewContainer :
603-
this._viewContainer;
604-
const hScroll = this.getElement(vc, 'igx-horizontal-virtual-helper');
605-
606-
const left = hScroll && hScroll.scrollLeft !== 0 ?
607-
hScroll.scrollLeft + parseInt(this.igxForContainerSize, 10) :
608-
parseInt(this.igxForContainerSize, 10);
609-
610604
if (!this.hCache) {
611605
this.initHCache(this.igxForOf);
612606
}
613-
614-
const endIndex = this.getHorizontalIndexAt(
615-
left,
616-
this.hCache,
617-
0
618-
) + 1;
619-
chunkSize = endIndex - this.state.startIndex;
607+
chunkSize = this._calcMaxChunkSize();
620608
if (this.igxForOf && chunkSize > this.igxForOf.length) {
621-
chunkSize = this.igxForOf.length;
609+
chunkSize = this.igxForOf.length;
622610
}
623611
} else {
624612
chunkSize = Math.ceil(parseInt(this.igxForContainerSize, 10) /
@@ -658,6 +646,32 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
658646
return totalWidth;
659647
}
660648

649+
protected _calcMaxChunkSize() {
650+
let i = 0;
651+
let length = 0;
652+
let maxLength = 0;
653+
const arr = [];
654+
let sum = 0;
655+
const reducer = (accumulator, currentItem) => accumulator + parseInt(currentItem.width, 10);
656+
const availableSize = parseInt(this.igxForContainerSize, 10);
657+
for (i; i < this.igxForOf.length; i++) {
658+
const item = this.igxForOf[i];
659+
sum = arr.reduce(reducer, parseInt(item.width, 10));
660+
if (sum <= availableSize) {
661+
arr.push(item);
662+
length = arr.length;
663+
} else {
664+
arr.push(item);
665+
length = arr.length + 1;
666+
arr.splice(0, 1);
667+
}
668+
if (length > maxLength) {
669+
maxLength = length;
670+
}
671+
}
672+
return maxLength;
673+
}
674+
661675
protected getHorizontalIndexAt(left, set, index) {
662676
let midIdx;
663677
let midLeft;
@@ -701,6 +715,8 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
701715
this.dc.instance._viewContainer.element.nativeElement.style.top = '0px';
702716
this.dc.instance._viewContainer.element.nativeElement.style.left = '0px';
703717

718+
this.applyChunkSizeChange();
719+
this._recalcScrollBarSize();
704720
if (this.hCache) {
705721
this.state.startIndex = 0;
706722
if (this.hScroll.scrollLeft !== 0) {
@@ -711,8 +727,6 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
711727
this.cdr.detectChanges();
712728
return;
713729
}
714-
this.applyChunkSizeChange();
715-
this._recalcScrollBarSize();
716730
}
717731

718732
/** Removes an elemenet from the embedded views and updates chunkSize */

‎projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,13 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
7373
public open(fireEvents?: boolean, overlaySettings?: OverlaySettings) {
7474
if (!this.collapsed) { return; }
7575

76+
this.collapsed = false;
77+
this.cdr.detectChanges();
78+
7679
if (fireEvents) {
7780
this.onOpening.emit();
7881
}
7982

80-
this.collapsed = false;
81-
8283
this._overlayId = this.overlayService.show(this.elementRef, overlaySettings);
8384
this._overlayClosedSub = this.overlayService.onClosed
8485
.pipe(...this._overlaySubFilter)

‎projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import {
55
HostBinding,
66
HostListener,
77
Inject,
8-
Input } from '@angular/core';
8+
Input
9+
} from '@angular/core';
910
import { IgxDropDownComponent, ISelectionEventArgs } from './drop-down.component';
1011

1112
/**
@@ -52,7 +53,7 @@ export class IgxDropDownItemComponent {
5253
}
5354

5455
if (value && !this.dropDown.collapsed) {
55-
this.elementRef.nativeElement.focus();
56+
this.elementRef.nativeElement.focus({ preventScroll: true });
5657
}
5758
this._isFocused = value;
5859
}

‎projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ContentChildren, DebugElement, ViewChild } from '@angular/core';
1+
import { Component, ContentChildren, DebugElement, ViewChild, OnInit } from '@angular/core';
22
import { async, fakeAsync, TestBed, tick } from '@angular/core/testing';
33
import { By } from '@angular/platform-browser';
44
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -29,7 +29,8 @@ describe('IgxDropDown ', () => {
2929
IgxDropDownTestScrollComponent,
3030
IgxDropDownTestDisabledComponent,
3131
IgxDropDownTestDisabledAnyComponent,
32-
IgxDropDownTestEmptyListComponent
32+
IgxDropDownTestEmptyListComponent,
33+
IgxDropDownWithScrollComponent
3334
],
3435
imports: [
3536
IgxDropDownModule,
@@ -807,6 +808,19 @@ describe('IgxDropDown ', () => {
807808
expect(igxDropDown.collapsed).toEqual(true);
808809
});
809810
}));
811+
812+
it('#1663 drop down flickers on open', () => {
813+
const fixture = TestBed.createComponent(IgxDropDownWithScrollComponent);
814+
fixture.detectChanges();
815+
const button = fixture.debugElement.query(By.css('button')).nativeElement;
816+
const igxDropDown = fixture.componentInstance.dropdownScroll;
817+
button.click();
818+
igxDropDown.open();
819+
fixture.whenStable().then(() => {
820+
fixture.detectChanges();
821+
expect((<any>igxDropDown).toggleDirective.element.scrollTop).toEqual(44);
822+
});
823+
});
810824
});
811825

812826
@Component({
@@ -997,3 +1011,35 @@ class IgxDropDownTestEmptyListComponent {
9971011
this.dropdownEmpty.toggle();
9981012
}
9991013
}
1014+
@Component({
1015+
template: `
1016+
<button (click)="selectItem5()">Select 5</button>
1017+
<igx-drop-down #scrollDropDown>
1018+
<igx-drop-down-item *ngFor="let item of items">
1019+
{{ item.field }}
1020+
</igx-drop-down-item>
1021+
</igx-drop-down>
1022+
`
1023+
})
1024+
class IgxDropDownWithScrollComponent implements OnInit {
1025+
1026+
@ViewChild('scrollDropDown', { read: IgxDropDownComponent })
1027+
public dropdownScroll: IgxDropDownComponent;
1028+
1029+
public items: any[] = [];
1030+
1031+
public toggleDropDown() {
1032+
this.dropdownScroll.toggle();
1033+
}
1034+
1035+
public selectItem5() {
1036+
this.dropdownScroll.setSelectedItem(4);
1037+
}
1038+
1039+
ngOnInit() {
1040+
this.dropdownScroll.height = '200px';
1041+
for (let index = 1; index < 100; index++) {
1042+
this.items.push({ field: 'Item ' + index });
1043+
}
1044+
}
1045+
}

‎projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -402,8 +402,6 @@ export class IgxDropDownComponent implements OnInit {
402402
* @hidden
403403
*/
404404
onToggleOpening() {
405-
this.toggleDirective.collapsed = false;
406-
this.cdr.detectChanges();
407405
this.scrollToItem(this.selectedItem);
408406
this.onOpening.emit();
409407
}

‎projects/igniteui-angular/src/lib/grid/cell.component.ts

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,16 @@ import { DataType } from '../data-operations/data-util';
1919
import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
2020
import { IgxGridAPIService } from './api.service';
2121
import { IgxColumnComponent } from './column.component';
22-
import { autoWire, IGridBus } from './grid.common';
2322
import { IGridEditEventArgs } from './grid.component';
2423
import { IgxGridGroupByRowComponent } from './groupby-row.component';
2524

2625
@Component({
27-
changeDetection: ChangeDetectionStrategy.OnPush,
26+
changeDetection: ChangeDetectionStrategy.Default,
2827
preserveWhitespaces: false,
2928
selector: 'igx-grid-cell',
3029
templateUrl: './cell.component.html'
3130
})
32-
export class IgxGridCellComponent implements IGridBus, OnInit, OnDestroy, AfterViewInit {
31+
export class IgxGridCellComponent implements OnInit, OnDestroy, AfterViewInit {
3332
@Input()
3433
public column: IgxColumnComponent;
3534

@@ -111,8 +110,7 @@ export class IgxGridCellComponent implements IGridBus, OnInit, OnDestroy, AfterV
111110
}
112111
}
113112

114-
@autoWire(true)
115-
set inEditMode(value: boolean) {
113+
set inEditMode(value: boolean) {
116114
if (this.column.editable && value) {
117115
this.editValue = this.value;
118116
this.gridAPI.set_cell_inEditMode(this.gridID, this, value);
@@ -179,7 +177,6 @@ export class IgxGridCellComponent implements IGridBus, OnInit, OnDestroy, AfterV
179177
return this.inEditMode;
180178
}
181179

182-
@autoWire(true)
183180
get focused(): boolean {
184181
return this.isFocused;
185182
}
@@ -215,7 +212,6 @@ export class IgxGridCellComponent implements IGridBus, OnInit, OnDestroy, AfterV
215212

216213
@HostBinding('attr.aria-selected')
217214
@HostBinding('class.igx-grid__td--selected')
218-
@autoWire(true)
219215
set selected(val: boolean) {
220216
this.isSelected = val;
221217
}
@@ -289,7 +285,6 @@ export class IgxGridCellComponent implements IGridBus, OnInit, OnDestroy, AfterV
289285
return false;
290286
}
291287

292-
@autoWire(true)
293288
public ngOnInit() {
294289
this.cellSelectionID = this.gridID + '-cells';
295290
this.chunkLoadedHor = this.row.virtDirRow.onChunkLoad.subscribe(
@@ -308,7 +303,6 @@ export class IgxGridCellComponent implements IGridBus, OnInit, OnDestroy, AfterV
308303
});
309304
}
310305

311-
@autoWire(true)
312306
public update(val: any) {
313307
this.gridAPI.update_cell(this.gridID, this.cellID.rowIndex, this.cellID.columnID, val);
314308
}
@@ -362,7 +356,6 @@ export class IgxGridCellComponent implements IGridBus, OnInit, OnDestroy, AfterV
362356
}
363357

364358
@HostListener('focus', ['$event'])
365-
@autoWire()
366359
public onFocus(event) {
367360
this.isFocused = true;
368361
this.selected = true;
@@ -389,7 +382,6 @@ export class IgxGridCellComponent implements IGridBus, OnInit, OnDestroy, AfterV
389382
}
390383

391384
@HostListener('blur', ['$event'])
392-
@autoWire()
393385
public onBlur(event) {
394386
this.isFocused = false;
395387
this.row.focused = false;

0 commit comments

Comments
 (0)