Skip to content

Commit 9f2482d

Browse files
cipchkcipchk
authored
fix(abc:notice-icon): incorrect show list when popoverVisible control (#1869)
1 parent 1e1a837 commit 9f2482d

File tree

5 files changed

+56
-59
lines changed

5 files changed

+56
-59
lines changed

‎packages/abc/notice-icon/notice-icon-tab.component.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
@if (data.list && data.list.length > 0) {
1+
@let d = item();
2+
@let list = d.list;
3+
@if (list && list.length > 0) {
24
<ng-template [ngTemplateOutlet]="listTpl" />
35
} @else {
46
<div class="notice-icon__notfound">
5-
@if (data.emptyImage) {
6-
<img class="notice-icon__notfound-img" [attr.src]="data.emptyImage" alt="not found" />
7+
@if (d.emptyImage) {
8+
<img class="notice-icon__notfound-img" [attr.src]="d.emptyImage" alt="not found" />
79
}
810
<p>
9-
<ng-container *nzStringTemplateOutlet="data.emptyText">
10-
{{ data.emptyText || locale.emptyText }}
11+
<ng-container *nzStringTemplateOutlet="d.emptyText">
12+
{{ d.emptyText || locale().emptyText }}
1113
</ng-container>
1214
</p>
1315
</div>
1416
}
1517
<ng-template #listTpl>
16-
<nz-list [nzDataSource]="data.list" [nzRenderItem]="item">
18+
<nz-list [nzDataSource]="list" [nzRenderItem]="item">
1719
<ng-template #item let-item>
1820
<nz-list-item (click)="onClick(item)" [class.notice-icon__item-read]="item.read">
1921
<nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="nzDescription" [nzAvatar]="item.avatar">
@@ -43,5 +45,5 @@
4345
</nz-list-item>
4446
</ng-template>
4547
</nz-list>
46-
<div class="notice-icon__clear" (click)="onClear()">{{ data.clearText || locale.clearText }}</div>
48+
<div class="notice-icon__clear" (click)="onClear()">{{ d.clearText || locale().clearText }}</div>
4749
</ng-template>

‎packages/abc/notice-icon/notice-icon-tab.component.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { NgTemplateOutlet } from '@angular/common';
2-
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
2+
import { Component, input, output, ViewEncapsulation } from '@angular/core';
33

44
import { LocaleData } from '@delon/theme';
55
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
@@ -24,16 +24,16 @@ import { NoticeIconSelect, NoticeItem } from './notice-icon.types';
2424
]
2525
})
2626
export class NoticeIconTabComponent {
27-
@Input() locale: LocaleData = {};
28-
@Input() data!: NoticeItem;
29-
@Output() readonly select = new EventEmitter<NoticeIconSelect>();
30-
@Output() readonly clear = new EventEmitter<string>();
27+
locale = input.required<LocaleData>();
28+
item = input.required<NoticeItem>();
29+
readonly select = output<NoticeIconSelect>();
30+
readonly clear = output<string>();
3131

3232
onClick(item: NoticeItem): void {
33-
this.select.emit({ title: this.data.title, item });
33+
this.select.emit({ title: this.item().title, item });
3434
}
3535

3636
onClear(): void {
37-
this.clear.emit(this.data.title);
37+
this.clear.emit(this.item().title);
3838
}
3939
}

‎packages/abc/notice-icon/notice-icon.component.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
<ng-template #badgeTpl>
2-
<nz-badge [nzCount]="count" [class]="btnClass!" [nzStyle]="{ 'box-shadow': 'none' }">
3-
<nz-icon nzType="bell" [class]="btnIconClass!" />
2+
<nz-badge [nzCount]="count()" [class]="btnClass()" [nzStyle]="{ 'box-shadow': 'none' }">
3+
<nz-icon nzType="bell" [class]="btnIconClass()" />
44
</nz-badge>
55
</ng-template>
6-
@if (data!.length <= 0) {
6+
@let d = data();
7+
@if (d.length <= 0) {
78
<ng-template [ngTemplateOutlet]="badgeTpl" />
89
} @else {
910
<div
1011
nz-dropdown
11-
[nzVisible]="popoverVisible"
12+
[nzVisible]="popoverVisible()"
1213
(nzVisibleChange)="onVisibleChange($event)"
1314
nzTrigger="click"
1415
nzPlacement="bottomRight"
15-
[nzOverlayClassName]="overlayCls"
16+
[nzOverlayClassName]="overlayCls()"
1617
[nzDropdownMenu]="noticeMenu"
1718
>
1819
<ng-template [ngTemplateOutlet]="badgeTpl" />
1920
</div>
2021
<nz-dropdown-menu #noticeMenu="nzDropdownMenu">
21-
<nz-spin [nzSpinning]="loading" [nzDelay]="0">
22-
@if (delayShow) {
23-
<nz-tabset [nzSelectedIndex]="0" [nzCentered]="centered">
24-
@for (i of data; track $index) {
22+
<nz-spin [nzSpinning]="loading()" [nzDelay]="0">
23+
@if (delayShow()) {
24+
<nz-tabset [nzSelectedIndex]="0" [nzCentered]="centered()">
25+
@for (i of d; track $index) {
2526
<nz-tab [nzTitle]="i.title">
26-
<notice-icon-tab [locale]="locale" [data]="i" (select)="onSelect($event)" (clear)="onClear($event)" />
27+
<notice-icon-tab [locale]="locale()" [item]="i" (select)="onSelect($event)" (clear)="onClear($event)" />
2728
</nz-tab>
2829
}
2930
</nz-tabset>

‎packages/abc/notice-icon/notice-icon.component.ts

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import { NgTemplateOutlet } from '@angular/common';
22
import {
33
ChangeDetectionStrategy,
4-
ChangeDetectorRef,
54
Component,
6-
EventEmitter,
7-
Input,
8-
OnChanges,
95
OnDestroy,
106
OnInit,
11-
Output,
127
ViewEncapsulation,
138
booleanAttribute,
9+
effect,
1410
inject,
15-
numberAttribute
11+
input,
12+
numberAttribute,
13+
output,
14+
signal
1615
} from '@angular/core';
1716
import { Subscription } from 'rxjs';
1817

@@ -47,35 +46,35 @@ import { NoticeIconSelect, NoticeItem } from './notice-icon.types';
4746
NoticeIconTabComponent
4847
]
4948
})
50-
export class NoticeIconComponent implements OnInit, OnChanges, OnDestroy {
49+
export class NoticeIconComponent implements OnInit, OnDestroy {
5150
private readonly i18n = inject(DelonLocaleService);
52-
private readonly cdr = inject(ChangeDetectorRef);
5351
private i18n$?: Subscription;
54-
locale: LocaleData = {};
52+
locale = signal<LocaleData>({});
5553

56-
@Input() data: NoticeItem[] = [];
57-
@Input({ transform: numberAttribute }) count?: number;
58-
@Input({ transform: booleanAttribute }) loading = false;
59-
@Input({ transform: booleanAttribute }) popoverVisible = false;
60-
@Input() btnClass?: NgClassType;
61-
@Input() btnIconClass?: NgClassType;
62-
@Input({ transform: booleanAttribute }) centered = false;
63-
@Output() readonly select = new EventEmitter<NoticeIconSelect>();
64-
@Output() readonly clear = new EventEmitter<string>();
65-
@Output() readonly popoverVisibleChange = new EventEmitter<boolean>();
54+
data = input<NoticeItem[]>([]);
55+
count = input<number | undefined, number | string | null | undefined>(undefined, { transform: numberAttribute });
56+
loading = input<boolean, boolean | string | null | undefined>(false, { transform: booleanAttribute });
57+
popoverVisible = input<boolean, boolean | string | null | undefined>(false, { transform: booleanAttribute });
58+
btnClass = input<NgClassType>();
59+
btnIconClass = input<NgClassType>();
60+
centered = input<boolean, boolean | string | null | undefined>(false, { transform: booleanAttribute });
61+
readonly select = output<NoticeIconSelect>();
62+
readonly clear = output<string>();
63+
readonly popoverVisibleChange = output<boolean>();
6664

67-
get overlayCls(): string {
68-
return `header-dropdown notice-icon${!this.centered ? ' notice-icon__tab-left' : ''}`;
65+
overlayCls = signal<string>('');
66+
67+
constructor() {
68+
effect(() => {
69+
this.overlayCls.set(`header-dropdown notice-icon${!this.centered() ? ' notice-icon__tab-left' : ''}`);
70+
if (!this.popoverVisible()) this.delayShow.set(false);
71+
});
6972
}
7073

71-
delayShow = false;
74+
delayShow = signal(false);
7275
onVisibleChange(result: boolean): void {
73-
this.delayShow = result;
76+
this.delayShow.set(result);
7477
this.popoverVisibleChange.emit(result);
75-
if (result) {
76-
// Next tick run
77-
Promise.resolve().then(() => this.cdr.detectChanges());
78-
}
7978
}
8079

8180
onSelect(i: NoticeIconSelect): void {
@@ -88,15 +87,10 @@ export class NoticeIconComponent implements OnInit, OnChanges, OnDestroy {
8887

8988
ngOnInit(): void {
9089
this.i18n$ = this.i18n.change.subscribe(() => {
91-
this.locale = this.i18n.getData('noticeIcon');
92-
this.cdr.markForCheck();
90+
this.locale.set(this.i18n.getData('noticeIcon'));
9391
});
9492
}
9593

96-
ngOnChanges(): void {
97-
this.cdr.markForCheck();
98-
}
99-
10094
ngOnDestroy(): void {
10195
this.i18n$?.unsubscribe();
10296
}

‎packages/abc/notice-icon/notice-icon.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ describe('abc: notice-icon', () => {
4949
describe('should be show dropdown', () => {
5050
it('via popoverVisible property', () => {
5151
spyOn(context, 'popupVisibleChange');
52-
expect(context.comp.popoverVisible).toBe(false);
52+
expect(context.comp.popoverVisible()).toBe(false);
5353
context.popoverVisible = true;
5454
fixture.detectChanges();
55-
expect(context.comp.popoverVisible).toBe(true);
55+
expect(context.comp.popoverVisible()).toBe(true);
5656
});
5757
it('via click', done => {
5858
expect(context.popoverVisible).toBeUndefined();

0 commit comments

Comments
 (0)