diff --git a/components/popconfirm/doc/index.en-US.md b/components/popconfirm/doc/index.en-US.md index bee7afeeb53..b7d6c1eddf5 100644 --- a/components/popconfirm/doc/index.en-US.md +++ b/components/popconfirm/doc/index.en-US.md @@ -26,7 +26,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; | `[nzPopconfirmTrigger]` | Popconfirm trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | | `[nzPopconfirmPlacement]` | The position of the popconfirm relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` | | `[nzPopconfirmOrigin]` | Origin of the popconfirm | `ElementRef` | - | - +| `[nzPopconfirmVisible]` | Show or hide popconfirm | `boolean` | `false` | | Param | Description | Type | Default value | | ----- | ----------- | ---- | ------------- | @@ -37,6 +37,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; | `[nzIcon]` | Customize icon of confirmation | `string \| TemplateRef` | - | | `(nzOnCancel)` | Callback of cancel | `EventEmitter` | - | | `(nzOnConfirm)` | Callback of confirmation | `EventEmitter` | - | +| `(nzPopconfirmVisibleChange)` | Callback of hide or show | `EventEmitter` | - | Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs. diff --git a/components/popconfirm/doc/index.zh-CN.md b/components/popconfirm/doc/index.zh-CN.md index c81f44e4628..77ca443d8da 100644 --- a/components/popconfirm/doc/index.zh-CN.md +++ b/components/popconfirm/doc/index.zh-CN.md @@ -27,7 +27,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; | `[nzPopconfirmTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | | `[nzPopconfirmPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` | | `[nzPopconfirmOrigin]` | 气泡框定位元素 | `ElementRef` | - | - +| `[nzPopconfirmVisible]` | 显示隐藏气泡框 | `boolean` | `false` | | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | @@ -38,6 +38,8 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; | `[nzIcon]` | 自定义弹出框的 icon | `string \| TemplateRef` | - | | `(nzOnCancel)` | 点击取消的回调 | `EventEmitter` | - | | `(nzOnConfirm)` | 点击确认的回调 | `EventEmitter` | - | +| `(nzPopconfirmVisibleChange)` | 显示隐藏的回调 | `EventEmitter` | - | + 更多属性请参考 [Tooltip](/components/tooltip/zh#api)。 diff --git a/components/popconfirm/popconfirm.spec.ts b/components/popconfirm/popconfirm.spec.ts index 7ec8976487b..cb9b70a5bec 100644 --- a/components/popconfirm/popconfirm.spec.ts +++ b/components/popconfirm/popconfirm.spec.ts @@ -111,6 +111,20 @@ describe('NzPopconfirm', () => { expect(component.confirm).toHaveBeenCalledTimes(1); expect(component.cancel).toHaveBeenCalledTimes(0); })); + + it('should support changing visibility programmatically', fakeAsync(() => { + const title = 'program'; + + component.visible = true; + waitingForTooltipToggling(); + expect(overlayContainerElement.textContent).toContain(title); + expect(component.visibilityTogglingCount).toBe(1); + + component.visible = false; + waitingForTooltipToggling(); + expect(overlayContainerElement.textContent).not.toContain(title); + expect(component.visibilityTogglingCount).toBe(2); + })); }); @Component({ @@ -136,6 +150,10 @@ describe('NzPopconfirm', () => { Delete + + Manually + + title-template ` }) @@ -148,4 +166,11 @@ export class NzPopconfirmTestNewComponent { @ViewChild('stringTemplate', { static: false }) stringTemplate!: ElementRef; @ViewChild('templateTemplate', { static: false }) templateTemplate!: ElementRef; @ViewChild('iconTemplate', { static: false }) iconTemplate!: ElementRef; + + visible = false; + visibilityTogglingCount = 0; + + onVisibleChange(): void { + this.visibilityTogglingCount += 1; + } } diff --git a/components/popconfirm/popconfirm.ts b/components/popconfirm/popconfirm.ts index c37d625e9bf..a0f61a90aa6 100644 --- a/components/popconfirm/popconfirm.ts +++ b/components/popconfirm/popconfirm.ts @@ -59,6 +59,10 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective { */ @Input() nzTrigger: NzTooltipTrigger = 'click'; + @Input('nzPopconfirmVisible') specificVisible?: boolean; + + // tslint:disable-next-line:no-output-rename + @Output('nzPopconfirmVisibleChange') readonly specificVisibleChange = new EventEmitter(); @Output() readonly nzOnCancel = new EventEmitter(); @Output() readonly nzOnConfirm = new EventEmitter(); diff --git a/components/popover/doc/index.en-US.md b/components/popover/doc/index.en-US.md index 12aac9a9736..fb9c756c918 100644 --- a/components/popover/doc/index.en-US.md +++ b/components/popover/doc/index.en-US.md @@ -27,7 +27,8 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover'; | `[nzPopoverTrigger]` | Popover trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | | `[nzPopoverPlacement]` | The position of the popover relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` | | `[nzPopoverOrigin]` | Origin of the tooltip | `ElementRef` | - | - +| `[nzPopoverVisible]` | Show or hide popover | `boolean` | `false` | +| `(nzPopoverVisibleChange)` | Callback of hide or show | `EventEmitter` | - | Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs. diff --git a/components/popover/doc/index.zh-CN.md b/components/popover/doc/index.zh-CN.md index 8f261d1998e..83a6ad0b53f 100644 --- a/components/popover/doc/index.zh-CN.md +++ b/components/popover/doc/index.zh-CN.md @@ -28,7 +28,8 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover'; | `[nzPopoverTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | | `[nzPopoverPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` | | `[nzPopoverOrigin]` | 气泡框定位元素 | `ElementRef` | - | - +| `[nzPopoverVisible]` | 显示隐藏气泡框 | `boolean` | `false` | +| `(nzPopoverVisibleChange)` | 显示隐藏的回调 | `EventEmitter` | - | 更多属性请参考 [Tooltip](/components/tooltip/zh#api)。 diff --git a/components/popover/popover.spec.ts b/components/popover/popover.spec.ts index e4dcfd55df3..769748c7c9d 100644 --- a/components/popover/popover.spec.ts +++ b/components/popover/popover.spec.ts @@ -87,6 +87,20 @@ describe('NzPopover', () => { expect(getTitleTextContent()).toBeNull(); expect(getInnerTextContent()).toBeNull(); })); + + it('should support changing visibility programmatically', fakeAsync(() => { + const title = 'program'; + + component.visible = true; + waitingForTooltipToggling(); + expect(overlayContainerElement.textContent).toContain(title); + expect(component.visibilityTogglingCount).toBe(1); + + component.visible = false; + waitingForTooltipToggling(); + expect(overlayContainerElement.textContent).not.toContain(title); + expect(component.visibilityTogglingCount).toBe(2); + })); }); @Component({ @@ -99,6 +113,10 @@ describe('NzPopover', () => { Show + + Manually + + title-template @@ -116,4 +134,11 @@ export class NzPopoverTestComponent { @ViewChild('templatePopover', { static: false }) templatePopover!: ElementRef; @ViewChild('templatePopover', { static: false, read: NzPopoverDirective }) templatePopoverNzPopoverDirective!: NzPopoverDirective; + + visible = false; + visibilityTogglingCount = 0; + + onVisibleChange(): void { + this.visibilityTogglingCount += 1; + } } diff --git a/components/popover/popover.ts b/components/popover/popover.ts index 69919bc95c6..ce7c9bb22ee 100644 --- a/components/popover/popover.ts +++ b/components/popover/popover.ts @@ -11,9 +11,11 @@ import { ComponentFactoryResolver, Directive, ElementRef, + EventEmitter, Host, Input, Optional, + Output, Renderer2, ViewContainerRef, ViewEncapsulation @@ -38,6 +40,10 @@ export class NzPopoverDirective extends NzTooltipBaseDirective { @Input('nzPopoverTrigger') specificTrigger?: NzTooltipTrigger; @Input('nzPopoverPlacement') specificPlacement?: string; @Input('nzPopoverOrigin') specificOrigin?: ElementRef; + @Input('nzPopoverVisible') specificVisible?: boolean; + + // tslint:disable-next-line:no-output-rename + @Output('nzPopoverVisibleChange') readonly specificVisibleChange = new EventEmitter(); componentFactory: ComponentFactory = this.resolver.resolveComponentFactory(NzPopoverComponent); diff --git a/components/tooltip/base.ts b/components/tooltip/base.ts index 1f88a2bd237..87c9848a38f 100644 --- a/components/tooltip/base.ts +++ b/components/tooltip/base.ts @@ -39,7 +39,9 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnDestroy, Af specificTrigger?: NzTooltipTrigger; specificPlacement?: string; specificOrigin?: ElementRef; + specificVisible?: boolean; + specificVisibleChange = new EventEmitter(); /** * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0. * Please use a more specific API. Like `nzTooltipTitle`. @@ -95,18 +97,16 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnDestroy, Af return typeof this.specificTrigger !== 'undefined' ? this.specificTrigger : this.nzTrigger; } - protected needProxyProperties = [ - 'nzOverlayClassName', - 'nzOverlayStyle', - 'nzMouseEnterDelay', - 'nzMouseLeaveDelay', - 'nzVisible', - 'noAnimation' - ]; + protected get isVisible(): boolean { + return this.specificVisible || this.nzVisible || false; + } + + visible = false; + + protected needProxyProperties = ['nzOverlayClassName', 'nzOverlayStyle', 'nzMouseEnterDelay', 'nzMouseLeaveDelay', 'noAnimation']; @Output() readonly nzVisibleChange = new EventEmitter(); - visible = false; component?: NzTooltipBaseComponent; protected readonly destroy$ = new Subject(); @@ -162,6 +162,13 @@ Please use 'nzTooltipContent' instead. The same with 'nz-popover' and 'nz-popcon Please use 'nzTooltipTrigger' instead. The same with 'nz-popover' and 'nz-popconfirm'.` ); } + + if (changes.nzVisible && !this.specificVisible) { + warnDeprecation( + `'nzVisible' of 'nz-tooltip' is deprecated and will be removed in 10.0.0. +Please use 'specificVisible' instead. The same with 'nz-popover' and 'nz-popconfirm'.` + ); + } } ngAfterViewInit(): void { @@ -211,6 +218,7 @@ Please use 'nzTooltipTrigger' instead. The same with 'nz-popover' and 'nz-popcon this.component.nzVisibleChange.pipe(distinctUntilChanged(), takeUntil(this.destroy$)).subscribe((visible: boolean) => { this.visible = visible; + this.specificVisibleChange.emit(visible); this.nzVisibleChange.emit(visible); }); } @@ -280,6 +288,7 @@ Please use 'nzTooltipTrigger' instead. The same with 'nz-popover' and 'nz-popcon this.updateComponentValue('nzContent', this.content); this.updateComponentValue('nzPlacement', this.placement); this.updateComponentValue('nzTrigger', this.trigger); + this.updateComponentValue('nzVisible', this.isVisible); } else { const c = propertiesOrChanges as SimpleChanges; if (c.specificTitle || c.directiveNameTitle || c.nzTitle) { @@ -294,6 +303,9 @@ Please use 'nzTooltipTrigger' instead. The same with 'nz-popover' and 'nz-popcon if (c.specificPlacement || c.nzPlacement) { this.updateComponentValue('nzPlacement', this.placement); } + if (c.specificVisible || c.nzVisible) { + this.updateComponentValue('nzVisible', this.isVisible); + } } this.component?.updateByDirective(); diff --git a/components/tooltip/doc/index.en-US.md b/components/tooltip/doc/index.en-US.md index 04d624a91a5..285599e5332 100644 --- a/components/tooltip/doc/index.en-US.md +++ b/components/tooltip/doc/index.en-US.md @@ -25,7 +25,8 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; | `[nzTooltipTrigger]` | Tooltip trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | | `[nzTooltipPlacement]` | The position of the tooltip relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` | | `[nzTooltipOrigin]` | Origin of the tooltip | `ElementRef` | - | - +| `[nzTooltipVisible]` | Show or hide tooltip | `boolean` | `false` | +| `(nTooltipVisibleChange)` | Callback of hide or show | `EventEmitter` | - | ### Common API @@ -37,8 +38,6 @@ The following APIs are shared by `nz-tooltip`, `nz-popconfirm`, `nz-popover`. | `[nzMouseLeaveDelay]` | Delay in seconds, before tooltip is hidden on mouse leave | `number` | `0.1` | | `[nzOverlayClassName]` | Class name of the tooltip card | `string` | - | | `[nzOverlayStyle]` | Style of the tooltip card | `object` | - | -| `[nzVisible]` | Whether the floating tooltip card is visible or not | `boolean` | `false` | -| `(nzVisibleChange)` | Callback executed when visibility of the tooltip card is changed | `EventEmitter` | - | | Method | Description | | --- | --- | diff --git a/components/tooltip/doc/index.zh-CN.md b/components/tooltip/doc/index.zh-CN.md index 68302c0f0a6..d0861444659 100644 --- a/components/tooltip/doc/index.zh-CN.md +++ b/components/tooltip/doc/index.zh-CN.md @@ -27,7 +27,8 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; | `[nzTooltipTrigger]` | 触发行为，可选 `hover/focus/click`，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | | `[nzTooltipPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'` | `'top'` | | `[nzTooltipOrigin]` | 气泡框定位元素 | `ElementRef` | - | - +| `[nzTooltipVisible]` | 显示隐藏气泡框 | `boolean` | `false` | +| `(nzTooltipVisibleChange)` | 显示隐藏的回调 | `EventEmitter` | - | ### 共同的 API @@ -39,8 +40,6 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; | `[nzMouseLeaveDelay]` | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | `number` | `0.1` | | `[nzOverlayClassName]` | 卡片类名 | `string` | - | | `[nzOverlayStyle]` | 卡片样式 | `object` | - | -| `[nzVisible]` | 用于手动控制浮层显隐 | `boolean` | `false` | -| `(nzVisibleChange)` | 显示隐藏的回调 | `EventEmitter` | - | | 方法 | 说明 | | --- | --- | diff --git a/components/tooltip/tooltip.spec.ts b/components/tooltip/tooltip.spec.ts index f224b7586af..3166b2afab0 100644 --- a/components/tooltip/tooltip.spec.ts +++ b/components/tooltip/tooltip.spec.ts @@ -255,7 +255,14 @@ function getOverlayElementForTooltip(tooltip: NzTooltipBaseDirective): HTMLEleme Focus - + Manually diff --git a/components/tooltip/tooltip.ts b/components/tooltip/tooltip.ts index 03790f7f0ed..74a32bcb619 100644 --- a/components/tooltip/tooltip.ts +++ b/components/tooltip/tooltip.ts @@ -3,6 +3,14 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -11,9 +19,11 @@ import { ComponentFactoryResolver, Directive, ElementRef, + EventEmitter, Host, Input, Optional, + Output, Renderer2, ViewContainerRef, ViewEncapsulation @@ -37,7 +47,10 @@ export class NzTooltipDirective extends NzTooltipBaseDirective { @Input('nzTooltipTrigger') specificTrigger?: NzTooltipTrigger; @Input('nzTooltipPlacement') specificPlacement?: string; @Input('nzTooltipOrigin') specificOrigin?: ElementRef; + @Input('nzTooltipVisible') specificVisible?: boolean; + // tslint:disable-next-line:no-output-rename + @Output('nzTooltipVisibleChange') readonly specificVisibleChange = new EventEmitter(); componentFactory: ComponentFactory = this.resolver.resolveComponentFactory(NzToolTipComponent); constructor(