feat(module:progress): support nzTooltipPlacement (#4007)

refactor(module:progress): not use deprecated API internally
NG-ZORRO · Sep 9, 2019 · d6a2968 · d6a2968
1 parent 272dc98
commit d6a2968
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 18 deletions.
diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts
@@ -46,6 +46,13 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective implements OnI
   @Input() nzCancelText: string;
   @Input() nzIcon: string | TemplateRef<void>;
   @Input() @InputBoolean() nzCondition: boolean;
+
+  /**
+   * @deprecated 9.0.0. This is deprecated and going to be removed in 9.0.0.
+   * Please use a more specific API. Like `nzTooltipTrigger`.
+   */
+  @Input() nzTrigger: NzTooltipTrigger = 'click';
+
   @Output() readonly nzOnCancel = new EventEmitter<void>();
   @Output() readonly nzOnConfirm = new EventEmitter<void>();
 

diff --git a/components/slider/doc/index.en-US.md b/components/slider/doc/index.en-US.md
@@ -36,5 +36,6 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';
 | `[ngModel]` | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | `number \| number[]` | - |
 | `[nzVertical]` | If true, the slider will be vertical. | `boolean` | `false` |
 | `[nzTooltipVisible]` | When set to `always` tooltips are always displayed. When set to `never` they are never displayed | `'default' \| 'always' \| 'never'` | `default` |
+| `[nzTooltipPlacement]` | Set the default placement of Tooltip | `string` | | 
 | `(nzOnAfterChange)` | Fire when `onmouseup` is fired. | `EventEmitter<number[]  \|  number>` | - |
 | `(ngModelChange)` | Callback function that is fired when the user changes the slider's value. | `EventEmitter<number[]  \|  number>` | - |
diff --git a/components/slider/doc/index.zh-CN.md b/components/slider/doc/index.zh-CN.md
@@ -37,5 +37,6 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';
 | `[ngModel]` | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | `number \| number[]` | - |
 | `[nzVertical]` | 值为 `true` 时，Slider 为垂直方向 | `boolean` | `false` |
 | `[nzTooltipVisible]` | 值为 `always` 时总是显示，值为 `never` 时在任何情况下都不显示 | `'default' \| 'always' \| 'never'` | `default` |
+| `[nzTooltipPlacement]` | 设置 Tooltip 的默认位置。 | `string` | |
 | `(nzOnAfterChange)` | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | `EventEmitter<number[]  \|  number>` | - |
 | `(ngModelChange)` | 当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。 | `EventEmitter<number[]  \|  number>>` | - |
diff --git a/components/slider/nz-slider-handle.component.html b/components/slider/nz-slider-handle.component.html
@@ -1,8 +1,10 @@
-<nz-tooltip
-  *ngIf="nzTipFormatter !== null && nzTooltipVisible !== 'never'"
-  [nzTitle]="tooltipTitle"
-  [nzTrigger]="null">
-  <!--TODO(wendzhue): [IVY] nz-tooltip[ngStyle] not work in ivy-->
-  <div nz-tooltip class="ant-slider-handle" [ngStyle]="style"></div>
-</nz-tooltip>
-<div *ngIf="nzTipFormatter === null || nzTooltipVisible === 'never'" class="ant-slider-handle" [ngStyle]="style"></div>
+<div nz-tooltip
+     *ngIf="nzTipFormatter !== null && nzTooltipVisible !== 'never'"
+     class="ant-slider-handle"
+     [ngStyle]="style"
+     [nzTitle]="tooltipTitle"
+     [nzTrigger]="null"
+     [nzPlacement]="nzTooltipPlacement"></div>
+<div *ngIf="nzTipFormatter === null || nzTooltipVisible === 'never'"
+     class="ant-slider-handle"
+     [ngStyle]="style"></div>
diff --git a/components/slider/nz-slider-handle.component.ts b/components/slider/nz-slider-handle.component.ts
@@ -20,7 +20,7 @@ import {
 import { Subscription } from 'rxjs';
 
 import { InputBoolean, NgStyleInterface } from 'ng-zorro-antd/core';
-import { NzToolTipComponent } from 'ng-zorro-antd/tooltip';
+import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 
 import { SliderShowTooltip } from './nz-slider-definitions';
 import { NzSliderComponent } from './nz-slider.component';
@@ -38,12 +38,13 @@ import { NzSliderComponent } from './nz-slider.component';
   }
 })
 export class NzSliderHandleComponent implements OnChanges, OnDestroy {
-  @ViewChild(NzToolTipComponent, { static: false }) tooltip: NzToolTipComponent;
+  @ViewChild(NzTooltipDirective, { static: false }) tooltip: NzTooltipDirective;
 
   @Input() nzVertical: string;
   @Input() nzOffset: number;
   @Input() nzValue: number;
   @Input() nzTooltipVisible: SliderShowTooltip = 'default';
+  @Input() nzTooltipPlacement: string;
   @Input() nzTipFormatter: (value: number) => string;
   @Input() @InputBoolean() nzActive = false;
 

diff --git a/components/slider/nz-slider.component.html b/components/slider/nz-slider.component.html
@@ -23,8 +23,10 @@
     [nzValue]="handle.value"
     [nzActive]="handle.active"
     [nzTipFormatter]="nzTipFormatter"
-    [nzTooltipVisible]="nzTooltipVisible"></nz-slider-handle>
-  <nz-slider-marks 
+    [nzTooltipVisible]="nzTooltipVisible"
+    [nzTooltipPlacement]="nzTooltipPlacement"
+    ></nz-slider-handle>
+  <nz-slider-marks
     *ngIf="marksArray"
     [nzVertical]="nzVertical"
     [nzMin]="nzMin"

diff --git a/components/slider/nz-slider.component.ts b/components/slider/nz-slider.component.ts
@@ -78,6 +78,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   @Input() nzMin = 0;
   @Input() nzStep = 1;
   @Input() nzTooltipVisible: SliderShowTooltip = 'default';
+  @Input() nzTooltipPlacement: string = 'top';
   @Input() nzTipFormatter: (value: number) => string;
 
   @Output() readonly nzOnAfterChange = new EventEmitter<SliderValue>();

diff --git a/components/tooltip/base/nz-tooltip-base.directive.ts b/components/tooltip/base/nz-tooltip-base.directive.ts
@@ -54,13 +54,13 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes
    * @deprecated 9.0.0. This is deprecated and going to be removed in 9.0.0.
    * Please use a more specific API. Like `nzTooltipTrigger`.
    */
-  @Input() nzTrigger: NzTooltipTrigger;
+  @Input() nzTrigger: NzTooltipTrigger = 'hover';
 
   /**
    * @deprecated 9.0.0. This is deprecated and going to be removed in 9.0.0.
    * Please use a more specific API. Like `nzTooltipPlacement`.
    */
-  @Input() nzPlacement: string;
+  @Input() nzPlacement: string = 'top';
 
   @Input() nzMouseEnterDelay: number;
   @Input() nzMouseLeaveDelay: number;
@@ -227,13 +227,14 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes
     this.updateChangedProperties(this.needProxyProperties);
   }
 
-  // TODO: support changing trigger.
   protected registerTriggers(): void {
     // When the method gets invoked, all properties has been synced to the dynamic component.
     // After removing the old API, we can just check the directive's own `nzTrigger`.
     const el = this.elementRef.nativeElement;
 
-    if (this.tooltip.nzTrigger === 'hover') {
+    const trigger = this.isDynamicTooltip ? this.trigger : this.tooltip.nzTrigger;
+
+    if (trigger === 'hover') {
       let overlayElement: HTMLElement;
       this.triggerUnlisteners.push(
         this.renderer.listen(el, 'mouseenter', () => {
@@ -258,10 +259,10 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnInit, OnDes
           }
         })
       );
-    } else if (this.tooltip.nzTrigger === 'focus') {
+    } else if (trigger === 'focus') {
       this.triggerUnlisteners.push(this.renderer.listen(el, 'focus', () => this.show()));
       this.triggerUnlisteners.push(this.renderer.listen(el, 'blur', () => this.hide()));
-    } else if (this.tooltip.nzTrigger === 'click') {
+    } else if (trigger === 'click') {
       this.triggerUnlisteners.push(
         this.renderer.listen(el, 'click', e => {
           e.preventDefault();