From 9f2f0a10e9801987029528acbf437decf8f698a1 Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Tue, 4 Dec 2018 14:52:55 +0200 Subject: [PATCH 1/4] fix(igx-combo): disable checkbox animations on scroll #3243 --- .../src/lib/combo/combo-dropdown.component.ts | 23 +++++++++++++++++-- .../src/lib/combo/combo-item.component.ts | 1 + .../src/lib/combo/combo.component.html | 2 +- .../src/lib/drop-down/drop-down.base.ts | 5 ++++ 4 files changed, 28 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index 2dc6bda8506..36382272410 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectorRef, Component, ContentChild, - ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy + ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy, AfterViewInit } from '@angular/core'; import { takeUntil, take } from 'rxjs/operators'; import { IgxComboItemComponent } from './combo-item.component'; @@ -18,7 +18,7 @@ import { Navigate } from '../drop-down/drop-down.common'; templateUrl: '../drop-down/drop-down.component.html', providers: [{ provide: IgxDropDownBase, useExisting: IgxComboDropDownComponent }] }) -export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDestroy { +export class IgxComboDropDownComponent extends IgxDropDownBase implements AfterViewInit, OnDestroy { private _children: QueryList; private _scrollPosition = 0; private destroy$ = new Subject(); @@ -30,6 +30,11 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest super(elementRef, cdr, selection); } + /** + * @hidden + */ + private _vScrollListener = null; + /** * @hidden */ @@ -331,6 +336,14 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest } protected scrollToHiddenItem(newItem: any): void {} + + /** + * @hidden + */ + protected verticalScrollHandler(event) { + this.disableTransitions = true; + } + /** * @hidden */ @@ -377,10 +390,16 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest this.verticalScrollContainer.getVerticalScroll().scrollTop = this._scrollPosition; } + public ngAfterViewInit() { + this._vScrollListener = this.verticalScrollHandler.bind(this); + this.verticalScrollContainer.getVerticalScroll().addEventListener('scroll', this._vScrollListener); + } + /** *@hidden */ public ngOnDestroy(): void { + this.verticalScrollContainer.getVerticalScroll().removeEventListener('scroll', this._vScrollListener); this.destroy$.next(true); this.destroy$.complete(); } diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts index c6d0b574ac7..f1f29759527 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts @@ -54,6 +54,7 @@ export class IgxComboItemComponent extends IgxDropDownItemBase { */ @HostListener('click', ['$event']) clicked(event) { + this.dropDown.disableTransitions = false; if (this.disabled || this.isHeader) { const focusedItem = this.dropDown.focusedItem; if (focusedItem) { diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html index e2fc4d7a9fb..4afc9c33fef 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.html +++ b/projects/igniteui-angular/src/lib/combo/combo.component.html @@ -43,7 +43,7 @@ (onChunkPreload)="dataLoading($event)" #virtualScrollContainer> - + diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 1f61391c386..9861c224448 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -271,6 +271,11 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView { return this.elementRef.nativeElement; } + /** + * @hidden + */ + public disableTransitions = false; + /** * Get dropdown's html element of it scroll container */ From 24ae9c5fee14a3cd194b32e565a518a50908e708 Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Tue, 4 Dec 2018 17:32:08 +0200 Subject: [PATCH 2/4] refactor(igx-combo): remove bind, move prop #3243 --- .../src/lib/combo/combo-dropdown.component.ts | 18 +++++++++--------- .../src/lib/combo/combo-item.component.ts | 5 +++-- .../src/lib/drop-down/drop-down.base.ts | 5 ----- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index 36382272410..0a389c0d53e 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -30,11 +30,6 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements AfterV super(elementRef, cdr, selection); } - /** - * @hidden - */ - private _vScrollListener = null; - /** * @hidden */ @@ -57,6 +52,12 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements AfterV this.items.length - 1; } + /** + * @hidden + * @internal + */ + public disableTransitions = false; + /** * Event emitter overrides * @@ -340,7 +341,7 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements AfterV /** * @hidden */ - protected verticalScrollHandler(event) { + protected scrollHandler: () => void = () => { this.disableTransitions = true; } @@ -391,15 +392,14 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements AfterV } public ngAfterViewInit() { - this._vScrollListener = this.verticalScrollHandler.bind(this); - this.verticalScrollContainer.getVerticalScroll().addEventListener('scroll', this._vScrollListener); + this.verticalScrollContainer.getVerticalScroll().addEventListener('scroll', this.scrollHandler); } /** *@hidden */ public ngOnDestroy(): void { - this.verticalScrollContainer.getVerticalScroll().removeEventListener('scroll', this._vScrollListener); + this.verticalScrollContainer.getVerticalScroll().removeEventListener('scroll', this.scrollHandler); this.destroy$.next(true); this.destroy$.complete(); } diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts index f1f29759527..bd8daaaa574 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts @@ -8,8 +8,9 @@ import { Input } from '@angular/core'; import { IgxSelectionAPIService } from '../core/selection'; -import { IgxDropDownBase, IgxDropDownItemBase } from '../drop-down/drop-down.base'; +import { IgxDropDownItemBase } from '../drop-down/drop-down.base'; import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common'; +import { IgxComboDropDownComponent } from './combo-dropdown.component'; /** @hidden */ @Component({ @@ -35,7 +36,7 @@ export class IgxComboItemComponent extends IgxDropDownItemBase { constructor( @Inject(IGX_COMBO_COMPONENT) private combo: IgxComboBase, - public dropDown: IgxDropDownBase, + public dropDown: IgxComboDropDownComponent, protected elementRef: ElementRef, protected selection: IgxSelectionAPIService ) { diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 9861c224448..1f61391c386 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -271,11 +271,6 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView { return this.elementRef.nativeElement; } - /** - * @hidden - */ - public disableTransitions = false; - /** * Get dropdown's html element of it scroll container */ From 1318e0a9f3d89f5fa4db42fe43bc3ebb02ceab24 Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Wed, 5 Dec 2018 12:10:08 +0200 Subject: [PATCH 3/4] refactor(igx-cobmo): refactor method signiture #3243 --- .../igniteui-angular/src/lib/combo/combo-dropdown.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index 0a389c0d53e..1ad4f51ad3e 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -341,7 +341,7 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements AfterV /** * @hidden */ - protected scrollHandler: () => void = () => { + protected scrollHandler = () => { this.disableTransitions = true; } From 74401f78bf99d5baae9f5eb48d07ff1bbb133bd4 Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Thu, 6 Dec 2018 14:15:59 +0200 Subject: [PATCH 4/4] refactor(igx-combo): revert prev move of property #3243 --- .../src/lib/combo/combo-dropdown.component.ts | 6 ------ .../igniteui-angular/src/lib/combo/combo-item.component.ts | 5 ++--- .../igniteui-angular/src/lib/drop-down/drop-down.base.ts | 6 ++++++ 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index 1ad4f51ad3e..eb9e410a264 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -52,12 +52,6 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements AfterV this.items.length - 1; } - /** - * @hidden - * @internal - */ - public disableTransitions = false; - /** * Event emitter overrides * diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts index bd8daaaa574..f1f29759527 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts @@ -8,9 +8,8 @@ import { Input } from '@angular/core'; import { IgxSelectionAPIService } from '../core/selection'; -import { IgxDropDownItemBase } from '../drop-down/drop-down.base'; +import { IgxDropDownBase, IgxDropDownItemBase } from '../drop-down/drop-down.base'; import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common'; -import { IgxComboDropDownComponent } from './combo-dropdown.component'; /** @hidden */ @Component({ @@ -36,7 +35,7 @@ export class IgxComboItemComponent extends IgxDropDownItemBase { constructor( @Inject(IGX_COMBO_COMPONENT) private combo: IgxComboBase, - public dropDown: IgxComboDropDownComponent, + public dropDown: IgxDropDownBase, protected elementRef: ElementRef, protected selection: IgxSelectionAPIService ) { diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index cefdd64da0a..4eae00d0b80 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -271,6 +271,12 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView { return this.elementRef.nativeElement; } + /** + * @hidden + * @internal + */ + public disableTransitions = false; + /** * Get dropdown's html element of it scroll container */