Skip to content

Commit

Permalink
perf(module:tree-view): do not run change detection on click events i…
Browse files Browse the repository at this point in the history
…f the `nz-tree-node-option` is disabled or there are no `nzClick` listeners (#7178)
  • Loading branch information
arturovt committed Feb 18, 2022
1 parent 95c7816 commit 0054f59
Showing 1 changed file with 29 additions and 11 deletions.
40 changes: 29 additions & 11 deletions components/tree-view/option.ts
Expand Up @@ -6,13 +6,19 @@
import {
ChangeDetectionStrategy,
Component,
ElementRef,
EventEmitter,
Input,
NgZone,
OnChanges,
OnInit,
Output,
SimpleChanges
} from '@angular/core';
import { fromEvent } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

import { NzDestroyService } from 'ng-zorro-antd/core/services';
import { BooleanInput } from 'ng-zorro-antd/core/types';
import { InputBoolean } from 'ng-zorro-antd/core/util';

Expand All @@ -25,30 +31,29 @@ import { NzTreeNodeComponent } from './node';
host: {
class: 'ant-tree-node-content-wrapper',
'[class.ant-tree-node-content-wrapper-open]': 'isExpanded',
'[class.ant-tree-node-selected]': 'nzSelected',
'(click)': 'onClick($event)'
}
'[class.ant-tree-node-selected]': 'nzSelected'
},
providers: [NzDestroyService]
})
export class NzTreeNodeOptionComponent<T> implements OnChanges {
export class NzTreeNodeOptionComponent<T> implements OnChanges, OnInit {
static ngAcceptInputType_nzSelected: BooleanInput;
static ngAcceptInputType_nzDisabled: BooleanInput;

@Input() @InputBoolean() nzSelected = false;
@Input() @InputBoolean() nzDisabled = false;
@Output() readonly nzClick = new EventEmitter<MouseEvent>();

constructor(private treeNode: NzTreeNodeComponent<T>) {}
constructor(
private ngZone: NgZone,
private host: ElementRef<HTMLElement>,
private destroy$: NzDestroyService,
private treeNode: NzTreeNodeComponent<T>
) {}

get isExpanded(): boolean {
return this.treeNode.isExpanded;
}

onClick(e: MouseEvent): void {
if (!this.nzDisabled) {
this.nzClick.emit(e);
}
}

ngOnChanges(changes: SimpleChanges): void {
const { nzDisabled, nzSelected } = changes;
if (nzDisabled) {
Expand All @@ -67,4 +72,17 @@ export class NzTreeNodeOptionComponent<T> implements OnChanges {
}
}
}

ngOnInit(): void {
this.ngZone.runOutsideAngular(() =>
fromEvent<MouseEvent>(this.host.nativeElement, 'click')
.pipe(
filter(() => !this.nzDisabled && this.nzClick.observers.length > 0),
takeUntil(this.destroy$)
)
.subscribe(event => {
this.ngZone.run(() => this.nzClick.emit(event));
})
);
}
}

0 comments on commit 0054f59

Please sign in to comment.