Skip to content

Commit

Permalink
refactor(module:dropdown): improve performance (#148)
Browse files Browse the repository at this point in the history
1. use Observable to replace Subject, which could dispose eventListener.
2. use ChangeDetectionStrategy.OnPush to reduce check times.
  • Loading branch information
Brooooooklyn authored and trotyl committed Aug 29, 2017
1 parent 2f2c9ac commit 29a5cbf
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 38 deletions.
25 changes: 11 additions & 14 deletions src/components/dropdown/nz-dropdown-button.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,24 +74,21 @@ export class NzDropDownButtonComponent extends NzDropDownComponent implements On
@Output() nzClick = new EventEmitter();
@ViewChild(NzDropDownDirective) _nzOrigin;

ngOnInit() {
debounceTime.call(this._$mouseSubject, 300).subscribe((data: boolean) => {
if (this.nzDisable) {
return;
_onVisibleChange = (visible: boolean) => {
if (this.nzDisable) {
return;
}
if (visible) {
if (!this._triggerWidth) {
this._setTriggerWidth();
}
this.nzVisible = data;
if (this.nzVisible) {
if (!this._triggerWidth) {
this._setTriggerWidth();
}
}
this.nzVisibleChange.emit(this.nzVisible);
});
this._nzMenu.setDropDown(true);
}
this.nzVisible = visible;
this._changeDetector.markForCheck();
}

/** rewrite afterViewInit hook */
ngAfterViewInit() {

this._startSubscribe(this.nzVisibleChange.asObservable());
}
}
81 changes: 57 additions & 24 deletions src/components/dropdown/nz-dropdown.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,16 @@ import {
Renderer2,
ContentChild,
Output,
EventEmitter, AfterViewInit
EventEmitter,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef
} from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { merge } from 'rxjs/observable/merge';
import { debounceTime } from 'rxjs/operator/debounceTime';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { Observer } from 'rxjs/Observer'
import { NzMenuComponent } from '../menu/nz-menu.component';
import { DropDownAnimation } from '../core/animation/dropdown-animations';
import { NzDropDownDirective } from './nz-dropdown.directive';
Expand All @@ -25,6 +31,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLe
animations : [
DropDownAnimation
],
changeDetection: ChangeDetectionStrategy.OnPush,
template : `
<div>
<ng-content></ng-content>
Expand Down Expand Up @@ -57,10 +64,10 @@ export type NzPlacement = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLe

export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
_triggerWidth = 0;
_$mouseSubject = new Subject();
_placement: NzPlacement = 'bottomLeft';
_dropDownPosition: 'top' | 'bottom' = 'bottom';
_positions: ConnectionPositionPair[] = [ ...DEFAULT_DROPDOWN_POSITIONS ];
_subscription: Subscription;
@ContentChild(NzDropDownDirective) _nzOrigin;
@ContentChild(NzMenuComponent) _nzMenu;
@Input() nzTrigger: 'click' | 'hover' = 'hover';
Expand Down Expand Up @@ -97,6 +104,14 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
}
}

_hide() {
this.nzVisibleChange.emit(false);
}

_show() {
this.nzVisibleChange.emit(true);
}

_onPositionChange(position) {
this._dropDownPosition = position.connectionPair.originY;
}
Expand All @@ -112,49 +127,67 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
this._triggerWidth = this._nzOrigin.elementRef.nativeElement.getBoundingClientRect().width;
}

_show() {
this._$mouseSubject.next(true);
_onVisibleChange = (visible: boolean) => {
if (visible) {
if (!this._triggerWidth) {
this._setTriggerWidth();
}
}
this.nzVisible = visible;
this._changeDetector.markForCheck();
}

_hide() {
this._$mouseSubject.next(false);
_startSubscribe(observable$: Observable<boolean>) {
this._subscription = observable$
.subscribe(this._onVisibleChange)
}

ngOnInit() {
debounceTime.call(this._$mouseSubject, 300).subscribe((data: boolean) => {
this.nzVisible = data;
if (this.nzVisible) {
if (!this._triggerWidth) {
this._setTriggerWidth();
}
}
this.nzVisibleChange.emit(this.nzVisible);
});
this._nzMenu.setDropDown(true);
}

ngOnDestroy() {
this._$mouseSubject.unsubscribe();
this._subscription.unsubscribe();
}


ngAfterViewInit() {
let mouse$: Observable<boolean>
if (this.nzTrigger === 'hover') {
this._renderer.listen(this._nzOrigin.elementRef.nativeElement, 'mouseenter', () => this._show());
this._renderer.listen(this._nzOrigin.elementRef.nativeElement, 'mouseleave', () => this._hide());
mouse$ = Observable.create((observer: Observer<boolean>) => {
const disposeMouseEnter = this._renderer.listen(this._nzOrigin.elementRef.nativeElement, 'mouseenter', () => {
observer.next(true);
});
const disposeMouseLeave = this._renderer.listen(this._nzOrigin.elementRef.nativeElement, 'mouseleave', () => {
observer.next(false);
});
return () => {
disposeMouseEnter();
disposeMouseLeave();
}
});
}
if (this.nzTrigger === 'click') {
this._renderer.listen(this._nzOrigin.elementRef.nativeElement, 'click', (e) => {
e.preventDefault();
this._show()
mouse$ = Observable.create((observer: Observer<boolean>) => {
const dispose = this._renderer.listen(this._nzOrigin.elementRef.nativeElement, 'click', (e) => {
e.preventDefault();
observer.next(true);
});
return () => dispose();
});
}
const observable$ = debounceTime.call(
merge(
mouse$,
this.nzVisibleChange.asObservable()
)
, 300);
this._startSubscribe(observable$);
}

get _hasBackdrop() {
return this.nzTrigger === 'click';
}

constructor(private _renderer: Renderer2) {
constructor(private _renderer: Renderer2, protected _changeDetector: ChangeDetectorRef) {
}
}

0 comments on commit 29a5cbf

Please sign in to comment.