From b4824d976babcb8dbb70c25cf1ae1a0bedb40f33 Mon Sep 17 00:00:00 2001 From: Wilson Zeng Date: Thu, 16 Nov 2017 16:26:31 +0800 Subject: [PATCH] feat(module:tooltip): support usage like: test (#545) close #345 --- .../popconfirm/nz-popconfirm.component.ts | 10 +-- .../popconfirm/nz-popconfirm.directive.ts | 21 +++++- .../popover/nz-popover.component.ts | 7 +- .../popover/nz-popover.directive.ts | 21 +++++- .../tooltip/nz-tooltip.component.ts | 32 +++------ .../tooltip/nz-tooltip.directive.ts | 71 ++++++++++++++++++- .../nz-demo-tooltip-basic.component.ts | 2 + 7 files changed, 119 insertions(+), 45 deletions(-) diff --git a/src/components/popconfirm/nz-popconfirm.component.ts b/src/components/popconfirm/nz-popconfirm.component.ts index faa8897c2c1..cad91f995fc 100644 --- a/src/components/popconfirm/nz-popconfirm.component.ts +++ b/src/components/popconfirm/nz-popconfirm.component.ts @@ -4,11 +4,8 @@ import { Input, Output, EventEmitter, - ContentChild, - Renderer2, ChangeDetectorRef, } from '@angular/core'; -import { NzPopconfirmDirective } from './nz-popconfirm.directive'; import { FadeAnimation } from '../core/animation/fade-animations'; import { NzToolTipComponent } from '../tooltip/nz-tooltip.component'; import { NzLocaleService } from '../locale/index'; @@ -23,7 +20,7 @@ import { NzLocaleService } from '../locale/index'; = new EventEmitter(); @Output() nzOnConfirm: EventEmitter = new EventEmitter(); - @ContentChild(NzPopconfirmDirective) nzOrigin; - constructor(renderer: Renderer2, cdr: ChangeDetectorRef, private _locale: NzLocaleService) { - super(renderer, cdr); + constructor(cdr: ChangeDetectorRef, private _locale: NzLocaleService) { + super(cdr); } show(): void { diff --git a/src/components/popconfirm/nz-popconfirm.directive.ts b/src/components/popconfirm/nz-popconfirm.directive.ts index 63692b5409d..e073a044014 100644 --- a/src/components/popconfirm/nz-popconfirm.directive.ts +++ b/src/components/popconfirm/nz-popconfirm.directive.ts @@ -1,8 +1,23 @@ -import { Directive, ElementRef } from '@angular/core'; +import { + Directive, + ElementRef, + ViewContainerRef, + ComponentFactoryResolver, + Renderer2 +} from '@angular/core'; +import { NzPopconfirmComponent } from './nz-popconfirm.component'; +import { NzTooltipDirective } from '../tooltip/nz-tooltip.directive'; + @Directive({ selector: '[nz-popconfirm]', }) -export class NzPopconfirmDirective { - constructor(public elementRef: ElementRef) { +export class NzPopconfirmDirective extends NzTooltipDirective { + constructor( + elementRef: ElementRef, + hostView: ViewContainerRef, + resolver: ComponentFactoryResolver, + renderer: Renderer2, + tooltip: NzPopconfirmComponent) { + super(elementRef, hostView, resolver, renderer, tooltip); } } diff --git a/src/components/popover/nz-popover.component.ts b/src/components/popover/nz-popover.component.ts index df957582014..1bfa76d1016 100644 --- a/src/components/popover/nz-popover.component.ts +++ b/src/components/popover/nz-popover.component.ts @@ -1,10 +1,8 @@ import { Component, ViewEncapsulation, - Input, - ContentChild + Input } from '@angular/core'; -import { NzPopoverDirective } from './nz-popover.directive'; import { FadeAnimation } from '../core/animation/fade-animations'; import { NzToolTipComponent } from '../tooltip/nz-tooltip.component'; @Component({ @@ -17,7 +15,7 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component'; = new EventEmitter(); - @ContentChild(NzTooltipDirective) nzOrigin; @ContentChild('nzTemplate') nzTemplate: TemplateRef; @ViewChild('overlay') overlay: ConnectedOverlayDirective; + protected overlayOrigin: OverlayOrigin; + @Input() set nzVisible(value) { if (this.visibleSource.value !== value) { @@ -90,7 +90,6 @@ export class NzToolTipComponent implements AfterViewInit { this._trigger = value; this._hasBackdrop = this._trigger === 'click'; } - get nzTrigger() { return this._trigger; } @@ -135,12 +134,10 @@ export class NzToolTipComponent implements AfterViewInit { show(): void { this.nzVisible = true; - this.nzOrigin.isTooltipOpen = true; } hide(): void { this.nzVisible = false; - this.nzOrigin.isTooltipOpen = false; } _afterVisibilityAnimation(e: AnimationEvent): void { @@ -159,22 +156,9 @@ export class NzToolTipComponent implements AfterViewInit { }; } - constructor(private _renderer: Renderer2, private _cdr: ChangeDetectorRef) { + setOverlayOrigin(origin: OverlayOrigin) { + this.overlayOrigin = origin; } - ngAfterViewInit() { - if (this._trigger === 'hover') { - this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'mouseenter', () => this.show()); - this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'mouseleave', () => this.hide()); - } else if (this._trigger === 'focus') { - this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'focus', () => this.show()); - this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'blur', () => this.hide()); - } else if (this._trigger === 'click') { - this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'click', (e) => { - e.preventDefault(); - this.show() - }); - } - - } + constructor(private _cdr: ChangeDetectorRef) { } } diff --git a/src/components/tooltip/nz-tooltip.directive.ts b/src/components/tooltip/nz-tooltip.directive.ts index 13414491f69..849a1860b41 100644 --- a/src/components/tooltip/nz-tooltip.directive.ts +++ b/src/components/tooltip/nz-tooltip.directive.ts @@ -1,11 +1,76 @@ -import { Directive, ElementRef, HostBinding } from '@angular/core'; +import { + Directive, + Input, + SimpleChanges, + AfterViewInit, + ViewContainerRef, + ComponentFactoryResolver, + ElementRef, + HostBinding, + Optional, + Renderer2 +} from '@angular/core'; +import { NzToolTipComponent } from './nz-tooltip.component'; @Directive({ selector: '[nz-tooltip]', }) -export class NzTooltipDirective { +export class NzTooltipDirective implements AfterViewInit { + // [NOTE] Here hard coded, and nzTitle used only under NzTooltipDirective currently. + // The inherited class such as NzPopconfirmDirective should override this property if want using this property. + @Input('nz-tooltip') + get nzTitle() { + return this.tooltip.nzTitle; + } + set nzTitle(title: string) { + if (this.isDynamicTooltip) { + this.tooltip.nzTitle = title; + } + } + @HostBinding('class.ant-tooltip-open') isTooltipOpen; - constructor(public elementRef: ElementRef) { + private tooltip: NzToolTipComponent; + private isDynamicTooltip = false; // Indicate whether current tooltip is dynamic created + + constructor( + public elementRef: ElementRef, + private hostView: ViewContainerRef, + private resolver: ComponentFactoryResolver, + private renderer: Renderer2, + @Optional() tooltip: NzToolTipComponent) { + // Support faster tooltip mode: . [NOTE] Used only under NzTooltipDirective currently. + if (!tooltip) { + const factory = this.resolver.resolveComponentFactory(NzToolTipComponent); + tooltip = this.hostView.createComponent(factory).instance; + this.isDynamicTooltip = true; + } + tooltip.setOverlayOrigin(this); + this.tooltip = tooltip; + } + + ngAfterViewInit() { + if (this.tooltip.nzTrigger === 'hover') { + this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => this.show()); + this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', () => this.hide()); + } else if (this.tooltip.nzTrigger === 'focus') { + this.renderer.listen(this.elementRef.nativeElement, 'focus', () => this.show()); + this.renderer.listen(this.elementRef.nativeElement, 'blur', () => this.hide()); + } else if (this.tooltip.nzTrigger === 'click') { + this.renderer.listen(this.elementRef.nativeElement, 'click', (e) => { + e.preventDefault(); + this.show() + }); + } + } + + private show() { + this.tooltip.show(); + this.isTooltipOpen = true; + } + + private hide() { + this.tooltip.hide(); + this.isTooltipOpen = false; } } diff --git a/src/showcase/nz-demo-tooltip/nz-demo-tooltip-basic.component.ts b/src/showcase/nz-demo-tooltip/nz-demo-tooltip-basic.component.ts index 3217c8073d0..c2f9ce44c8a 100644 --- a/src/showcase/nz-demo-tooltip/nz-demo-tooltip-basic.component.ts +++ b/src/showcase/nz-demo-tooltip/nz-demo-tooltip-basic.component.ts @@ -5,6 +5,8 @@ import { Component, OnInit } from '@angular/core'; Tooltip will show when mouse enter. +
+ Most simple way to trigger a tooltip! `, styles : [] })