Skip to content

Commit

Permalink
feat(module:cdkconnectedoverlay): supports disabling click on mask
Browse files Browse the repository at this point in the history
  • Loading branch information
OriginRing committed Nov 13, 2024
1 parent 472bb34 commit d55ccf5
Show file tree
Hide file tree
Showing 10 changed files with 33 additions and 14 deletions.
4 changes: 2 additions & 2 deletions components/popconfirm/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';

## API


### [nz-popconfirm]:standalone

| Param | Description | Type | Default value |
Expand All @@ -38,14 +37,15 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
| `[nzPopconfirmOverlayClassName]` | Class name of the popconfirm card | `string` | - |
| `[nzPopconfirmOverlayStyle]` | Style of the popconfirm card | `object` | - |
| `[nzPopconfirmBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
| `[nzPopconfirmOverlayClickable]` | Disable clicking the mask to close the panel | `boolean` | `false` |

| Param | Description | Type | Default value | Global Config |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------- | ------------- |
| `[nzCancelText]` | Text of the Cancel button | `string` | `'Cancel'` | - |
| `[nzOkText]` | Text of the Confirm button | `string` | `'Confirm'` | - |
| `[nzOkType]` | Button `type` of the Confirm button | `'primary' \| 'ghost' \| 'dashed' \| 'danger' \| 'default'` | `'primary'` | - |
| `[nzOkDanger]` | Danger status of the OK button. <i>Consistent with the `nzDanger` of the `nz-button`.</i> | `boolean` | `false` | - |
| `[nzOkDisabled]` | prevents a user from interacting with the OK button. <i>Consistent with the `disabled` of the `nz-button`.</i> | `boolean` | `false` | - |
| `[nzOkDisabled]` | prevents a user from interacting with the OK button. <i>Consistent with the `disabled` of the `nz-button`.</i> | `boolean` | `false` | - |
| `[nzCondition]` | Whether to directly emit `onConfirm` without showing Popconfirm | `boolean` | `false` | - |
| `[nzIcon]` | Customize icon of confirmation | `string \| TemplateRef<void>` | - | - |
| `[nzAutoFocus]` | Autofocus a button | `null \| 'ok' \| 'cancel'` | `null` | ✅ |
Expand Down
1 change: 1 addition & 0 deletions components/popconfirm/doc/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
| `[nzPopconfirmOverlayClassName]` | 卡片类名 | `string` | - |
| `[nzPopconfirmOverlayStyle]` | 卡片样式 | `object` | - |
| `[nzPopconfirmBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
| `[nzPopconfirmOverlayClickable]` | 禁止点击蒙板关闭面板 | `boolean` | `false` |

| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
| ------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------- | ----------- | -------- |
Expand Down
1 change: 1 addition & 0 deletions components/popconfirm/popconfirm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
@Input('nzPopconfirmMouseLeaveDelay') override mouseLeaveDelay?: number;
@Input('nzPopconfirmOverlayClassName') override overlayClassName?: string;
@Input('nzPopconfirmOverlayStyle') override overlayStyle?: NgStyleInterface;
@Input('nzPopconfirmOverlayClickable') override overlayClickable?: boolean;
@Input('nzPopconfirmVisible') override visible?: boolean;
@Input() nzOkText?: string;
@Input() nzOkType?: string;
Expand Down
1 change: 1 addition & 0 deletions components/popover/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
| `[nzPopoverMouseLeaveDelay]` | Delay in seconds, before popover is hidden on mouse leave | `number` | `0.1` |
| `[nzPopoverOverlayClassName]` | Class name of the popover card | `string` | - |
| `[nzPopoverOverlayStyle]` | Style of the popover card | `object` | - |
| `[nzPopoverOverlayClickable]` | Disable clicking the mask to close the panel | `boolean` | `false` |

Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs.
| `[nzPopoverBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
Expand Down
1 change: 1 addition & 0 deletions components/popover/doc/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
| `[nzPopoverOverlayClassName]` | 卡片类名 | `string` | - |
| `[nzPopoverOverlayStyle]` | 卡片样式 | `object` | - |
| `[nzPopoverBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
| `[nzPopoverOverlayClickable]` | 禁止点击蒙板关闭面板 | `boolean` | `false` |

更多属性请参考 [Tooltip](/components/tooltip/zh#api)。

Expand Down
1 change: 1 addition & 0 deletions components/popover/popover.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
@Input('nzPopoverMouseLeaveDelay') override mouseLeaveDelay?: number;
@Input('nzPopoverOverlayClassName') override overlayClassName?: string;
@Input('nzPopoverOverlayStyle') override overlayStyle?: NgStyleInterface;
@Input('nzPopoverOverlayClickable') override overlayClickable?: boolean;

@Input() @WithConfig() nzPopoverBackdrop?: boolean = false;

Expand Down
11 changes: 11 additions & 0 deletions components/tooltip/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges
mouseLeaveDelay?: number;
overlayClassName?: string;
overlayStyle?: NgStyleInterface;
overlayClickable?: boolean;
cdkConnectedOverlayPush?: boolean;
visibleChange = new EventEmitter<boolean>();

Expand Down Expand Up @@ -99,6 +100,10 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges
return this.overlayStyle || null;
}

protected get _overlayClickable(): boolean {
return this.overlayClickable ?? false;
}

private internalVisible = false;

protected getProxyPropertyMap(): PropertyMapping {
Expand Down Expand Up @@ -272,6 +277,7 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges
mouseLeaveDelay: ['nzMouseLeaveDelay', () => this._mouseLeaveDelay],
overlayClassName: ['nzOverlayClassName', () => this._overlayClassName],
overlayStyle: ['nzOverlayStyle', () => this._overlayStyle],
overlayClickable: ['nzOverlayClickable', () => this._overlayClickable],
arrowPointAtCenter: ['nzArrowPointAtCenter', () => this.arrowPointAtCenter],
cdkConnectedOverlayPush: ['cdkConnectedOverlayPush', () => this.cdkConnectedOverlayPush],
...this.getProxyPropertyMap()
Expand Down Expand Up @@ -342,6 +348,7 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit {
nzArrowPointAtCenter: boolean = false;
nzOverlayClassName!: string;
nzOverlayStyle: NgStyleInterface = {};
nzOverlayClickable: boolean = false;
nzBackdrop = false;
nzMouseEnterDelay?: number;
nzMouseLeaveDelay?: number;
Expand Down Expand Up @@ -425,6 +432,10 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit {
}

hide(): void {
if (this.nzOverlayClickable) {
return;
}

if (!this.nzVisible) {
return;
}
Expand Down
1 change: 1 addition & 0 deletions components/tooltip/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
| `[nzTooltipMouseLeaveDelay]` | Delay in seconds, before tooltip is hidden on mouse leave | `number` | `0.1` |
| `[nzTooltipOverlayClassName]` | Class name of the tooltip card | `string` | - |
| `[nzTooltipOverlayStyle]` | Style of the tooltip card | `object` | - |
| `[nzTooltipOverlayClickable]` | Disable clicking the mask to close the panel | `boolean` | `false` |

### Common API

Expand Down
Loading

0 comments on commit d55ccf5

Please sign in to comment.