feat(module:tooltip,popconfirm): support OnPush

add subject to support changeDetection of OnPush change showcases’ changeDetection to OnPush
NG-ZORRO · Aug 24, 2017 · 1fb8d6e · 1fb8d6e
1 parent 143c080
commit 1fb8d6e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/src/components/popconfirm/nz-popconfirm.component.ts b/src/components/popconfirm/nz-popconfirm.component.ts
@@ -9,6 +9,7 @@ import {
 import { NzPopconfirmDirective } from './nz-popconfirm.directive';
 import { FadeAnimation } from '../core/animation/fade-animations';
 import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
+
 @Component({
   selector     : 'nz-popconfirm',
   encapsulation: ViewEncapsulation.None,
@@ -25,8 +26,8 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
       (detach)="hide()"
       (positionChange)="onPositionChange($event)"
       [positions]="_positions"
-      [open]="nzVisible">
-      <div class="ant-popover" [ngClass]="_classMap" [ngStyle]="nzOverlayStyle" [@fadeAnimation]="''+nzVisible"
+      [open]="visible$ | async">
+      <div class="ant-popover" [ngClass]="_classMap" [ngStyle]="nzOverlayStyle" [@fadeAnimation]="''+(visible$ | async)"
         (@fadeAnimation.done)="_afterVisibilityAnimation($event)">
         <div class="ant-popover-content">
           <div class="ant-popover-arrow"></div>
@@ -81,7 +82,7 @@ export class NzPopconfirmComponent extends NzToolTipComponent {
 
   show(): void {
     if (!this._condition) {
-      this._visible = true;
+      this.nzVisible = true;
     } else {
       this.onConfirm();
     }

diff --git a/src/components/tooltip/nz-tooltip.component.ts b/src/components/tooltip/nz-tooltip.component.ts
@@ -11,6 +11,8 @@ import {
   ContentChild,
   ViewChild
 } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Observable';
 import { NzTooltipDirective } from './nz-tooltip.directive';
 import {
   AnimationEvent,
@@ -39,8 +41,8 @@ import { POSITION_MAP, DEFAULT_4_POSITIONS } from '../core/overlay/overlay-posit
       (detach)="hide()"
       (positionChange)="onPositionChange($event)"
       [positions]="_positions"
-      [open]="nzVisible">
-      <div class="ant-tooltip" [ngClass]="_classMap" [ngStyle]="nzOverlayStyle" [@fadeAnimation]="''+nzVisible"
+      [open]="visible$ | async">
+      <div class="ant-tooltip" [ngClass]="_classMap" [ngStyle]="nzOverlayStyle" [@fadeAnimation]="''+(visible$ | async)"
         (@fadeAnimation.done)="_afterVisibilityAnimation($event)">
         <div class="ant-tooltip-content">
           <div class="ant-tooltip-arrow"></div>
@@ -70,15 +72,18 @@ export class NzToolTipComponent implements AfterViewInit {
 
   @Input()
   set nzVisible(value) {
-    this._visible = value;
-    if (this._visible !== value) {
+    if (this.visibleSource.value !== value) {
+      this.visibleSource.next(value);
       this.nzVisibleChange.emit(value);
     }
   };
 
   get nzVisible() {
-    return this._visible;
+    return this.visibleSource.value;
   }
+
+  visibleSource = new BehaviorSubject<boolean>(false);
+  visible$ = this.visibleSource.asObservable();
 
   @Input()
   set nzTrigger(value) {
@@ -96,7 +101,6 @@ export class NzToolTipComponent implements AfterViewInit {
   _placement = 'top';
   _trigger = 'hover';
   _hasBackdrop = false;
-  _visible = false;
 
   @Input()
   get nzPlacement() {
@@ -130,12 +134,12 @@ export class NzToolTipComponent implements AfterViewInit {
   }
 
   show(): void {
-    this._visible = true;
+    this.nzVisible = true;
     this.nzOrigin.isTooltipOpen = true;
   }
 
   hide(): void {
-    this._visible = false;
+    this.nzVisible = false;
     this.nzOrigin.isTooltipOpen = false;
   }
 

diff --git a/src/showcase/nz-demo-popconfirm/nz-demo-popconfirm.component.ts b/src/showcase/nz-demo-popconfirm/nz-demo-popconfirm.component.ts
@@ -1,8 +1,9 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector     : 'nz-demo-popconfirm',
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl  : './nz-demo-popconfirm.html'
 })
 

diff --git a/src/showcase/nz-demo-tooltip/nz-demo-tooltip.component.ts b/src/showcase/nz-demo-tooltip/nz-demo-tooltip.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 @Component({
   selector     : 'nz-demo-tooltip',
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl  : './nz-demo-tooltip.html',
   styleUrls    : [
     './nz-demo-tooltip.less',