From d6a29686f46296107a292df888fa25d2ff6b0aac Mon Sep 17 00:00:00 2001 From: Wendell Date: Mon, 9 Sep 2019 11:47:46 +0800 Subject: [PATCH] feat(module:progress): support nzTooltipPlacement (#4007) refactor(module:progress): not use deprecated API internally --- .../popconfirm/nz-popconfirm.directive.ts | 7 +++++++ components/slider/doc/index.en-US.md | 1 + components/slider/doc/index.zh-CN.md | 1 + .../slider/nz-slider-handle.component.html | 18 ++++++++++-------- .../slider/nz-slider-handle.component.ts | 5 +++-- components/slider/nz-slider.component.html | 6 ++++-- components/slider/nz-slider.component.ts | 1 + .../tooltip/base/nz-tooltip-base.directive.ts | 13 +++++++------ 8 files changed, 34 insertions(+), 18 deletions(-) diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts index 0ad3d770dd5..f09d2384c58 100644 --- 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; @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(); @Output() readonly nzOnConfirm = new EventEmitter(); diff --git a/components/slider/doc/index.en-US.md b/components/slider/doc/index.en-US.md index a7ef98b99fc..955113f530e 100644 --- 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` | - | | `(ngModelChange)` | Callback function that is fired when the user changes the slider's value. | `EventEmitter` | - | diff --git a/components/slider/doc/index.zh-CN.md b/components/slider/doc/index.zh-CN.md index acb75d26fff..b60c4bab8ce 100644 --- 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` | - | | `(ngModelChange)` | 当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。 | `EventEmitter>` | - | diff --git a/components/slider/nz-slider-handle.component.html b/components/slider/nz-slider-handle.component.html index 6826922906d..6a312c685d9 100644 --- a/components/slider/nz-slider-handle.component.html +++ b/components/slider/nz-slider-handle.component.html @@ -1,8 +1,10 @@ - - -
- -
+
+
diff --git a/components/slider/nz-slider-handle.component.ts b/components/slider/nz-slider-handle.component.ts index 5a99abed0f6..f6119671c65 100644 --- 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 index 6d9a168471d..963d16e3bdb 100644 --- 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"> - + string; @Output() readonly nzOnAfterChange = new EventEmitter(); diff --git a/components/tooltip/base/nz-tooltip-base.directive.ts b/components/tooltip/base/nz-tooltip-base.directive.ts index a8a4eb05ebb..cc8810331c4 100644 --- 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();