Skip to content

Commit d36a461

Browse files
LafferyLaffery
authored
refactor(module:avatar): expose NzAvatarProps interface (#9037)
1 parent 8a62816 commit d36a461

File tree

8 files changed

+60
-58
lines changed

8 files changed

+60
-58
lines changed

‎components/avatar/avatar.component.ts

+9-11
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { PlatformModule } from '@angular/cdk/platform';
76
import {
87
ChangeDetectionStrategy,
98
ChangeDetectorRef,
@@ -20,16 +19,17 @@ import {
2019
numberAttribute
2120
} from '@angular/core';
2221

23-
import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
22+
import { NzConfigKey, WithConfig } from 'ng-zorro-antd/core/config';
2423
import { NzShapeSCType, NzSizeLDSType } from 'ng-zorro-antd/core/types';
24+
import { toCssPixel } from 'ng-zorro-antd/core/util';
2525
import { NzIconModule } from 'ng-zorro-antd/icon';
2626

2727
const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
2828

2929
@Component({
3030
selector: 'nz-avatar',
3131
exportAs: 'nzAvatar',
32-
imports: [NzIconModule, PlatformModule],
32+
imports: [NzIconModule],
3333
template: `
3434
@if (nzIcon && hasIcon) {
3535
<nz-icon [nzType]="nzIcon" />
@@ -77,17 +77,15 @@ export class NzAvatarComponent implements OnChanges {
7777
@ViewChild('textEl', { static: false }) textEl?: ElementRef<HTMLSpanElement>;
7878

7979
private el: HTMLElement = inject(ElementRef).nativeElement;
80+
private cdr = inject(ChangeDetectorRef);
8081

81-
constructor(
82-
public nzConfigService: NzConfigService,
83-
private cdr: ChangeDetectorRef
84-
) {
82+
constructor() {
8583
afterRender(() => this.calcStringSize());
8684
}
8785

88-
imgError($event: Event): void {
89-
this.nzError.emit($event);
90-
if (!$event.defaultPrevented) {
86+
imgError(event: Event): void {
87+
this.nzError.emit(event);
88+
if (!event.defaultPrevented) {
9189
this.hasSrc = false;
9290
this.hasIcon = false;
9391
this.hasText = false;
@@ -128,7 +126,7 @@ export class NzAvatarComponent implements OnChanges {
128126

129127
private setSizeStyle(): void {
130128
if (typeof this.nzSize === 'number') {
131-
this.customSize = `${this.nzSize}px`;
129+
this.customSize = toCssPixel(this.nzSize);
132130
} else {
133131
this.customSize = null;
134132
}

‎components/avatar/demo/badge.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
77
selector: 'nz-demo-avatar-badge',
88
imports: [NzBadgeModule, NzAvatarModule],
99
template: `
10-
<nz-badge [nzCount]="5" style="margin-right: 24px;">
11-
<nz-avatar nzIcon="user" [nzShape]="'square'"></nz-avatar>
10+
<nz-badge [nzCount]="5" style="margin-right: 24px">
11+
<nz-avatar nzIcon="user" nzShape="square"></nz-avatar>
1212
</nz-badge>
1313
<nz-badge nzDot>
14-
<nz-avatar nzIcon="user" [nzShape]="'square'"></nz-avatar>
14+
<nz-avatar nzIcon="user" nzShape="square"></nz-avatar>
1515
</nz-badge>
1616
`
1717
})

‎components/avatar/demo/basic.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar';
1313
<nz-avatar nzSize="small" nzIcon="user"></nz-avatar>
1414
</div>
1515
<div>
16-
<nz-avatar [nzShape]="'square'" [nzSize]="64" [nzIcon]="'user'"></nz-avatar>
17-
<nz-avatar [nzShape]="'square'" [nzSize]="'large'" [nzIcon]="'user'"></nz-avatar>
18-
<nz-avatar [nzShape]="'square'" [nzIcon]="'user'"></nz-avatar>
19-
<nz-avatar [nzShape]="'square'" [nzSize]="'small'" [nzIcon]="'user'"></nz-avatar>
16+
<nz-avatar nzShape="square" [nzSize]="64" nzIcon="user"></nz-avatar>
17+
<nz-avatar nzShape="square" nzSize="large" nzIcon="user"></nz-avatar>
18+
<nz-avatar nzShape="square" nzIcon="user"></nz-avatar>
19+
<nz-avatar nzShape="square" nzSize="small" nzIcon="user"></nz-avatar>
2020
</div>
2121
`,
2222
styles: [

‎components/avatar/demo/dynamic.ts

+10-25
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component, computed, model, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
33

44
import { NzAvatarModule } from 'ng-zorro-antd/avatar';
@@ -13,22 +13,12 @@ const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
1313
imports: [FormsModule, NzAvatarModule, NzButtonModule, NzInputNumberModule],
1414
template: `
1515
<div>
16-
<label>
17-
Gap:
18-
<nz-input-number [nzMin]="0" [nzMax]="16" [nzStep]="1" [(ngModel)]="gap"></nz-input-number>
19-
</label>
20-
<button nz-button (click)="change()">
21-
<span>Change Text</span>
22-
</button>
16+
<label>Gap: </label>
17+
<nz-input-number [nzMin]="0" [nzMax]="16" [nzStep]="1" [(ngModel)]="gap"></nz-input-number>
18+
<button nz-button (click)="change()">Change Text</button>
2319
</div>
2420
25-
<nz-avatar
26-
[nzGap]="gap"
27-
[style]="{ 'background-color': color }"
28-
[nzText]="text"
29-
nzSize="large"
30-
style="vertical-align: middle;"
31-
></nz-avatar>
21+
<nz-avatar [nzGap]="gap()" [nzText]="text()" nzSize="large" [style.background-color]="color()"></nz-avatar>
3222
`,
3323
styles: [
3424
`
@@ -42,16 +32,11 @@ const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
4232
]
4333
})
4434
export class NzDemoAvatarDynamicComponent {
45-
text: string = userList[3];
46-
color: string = colorList[3];
47-
gap = 4;
35+
index = signal(3);
36+
text = computed(() => userList[this.index()]);
37+
color = computed(() => colorList[this.index()]);
38+
gap = model(4);
4839
change(): void {
49-
let idx = userList.indexOf(this.text);
50-
++idx;
51-
if (idx === userList.length) {
52-
idx = 0;
53-
}
54-
this.text = userList[idx];
55-
this.color = colorList[idx];
40+
this.index.update(idx => (idx + 1) % userList.length);
5641
}
5742
}

‎components/avatar/doc/index.en-US.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar';
1616
### nz-avatar
1717

1818
| Property | Description | Type | Default | Global Config |
19-
| ------------ | -------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- | ------------- |
19+
|--------------|----------------------------------------------------------------------------------------------------|---------------------------------------------|-------------|---------------|
2020
| `[nzIcon]` | The `Icon` type for an icon avatar, see `Icon` | `string` | - |
2121
| `[nzShape]` | The shape of avatar | `'circle' \| 'square'` | `'circle'` | ✅ |
2222
| `[nzSize]` | The size of the avatar | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ |
@@ -30,8 +30,8 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar';
3030
### nz-avatar-group
3131

3232
```html
33-
<nz-avatar-group>
33+
<nz-avatar-group>
3434
<nz-avatar nzIcon="user"></nz-avatar>
35-
...
35+
<!-- ... -->
3636
</nz-avatar-group>
3737
```

‎components/avatar/doc/index.zh-CN.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,23 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar';
1616

1717
### nz-avatar
1818

19-
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
20-
| ------------ | ---------------------------------------------------------------------------- | ------------------------------------------- | ----------- | -------- |
21-
| `[nzIcon]` | 设置头像的图标类型，参考 `Icon` | `string` | - |
22-
| `[nzShape]` | 指定头像的形状 | `'circle' \| 'square'` | `'circle'` | ✅ |
23-
| `[nzSize]` | 设置头像的大小 | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ |
24-
| `[nzGap]` | 字符类型距离左右两侧边界单位像素 | `number` | `4` | ✅ |
25-
| `[nzSrc]` | 图片类头像的资源地址 | `string` | - |
26-
| `[nzSrcSet]` | 设置图片类头像响应式资源地址 | string | - |
27-
| `[nzAlt]` | 图像无法显示时的替代文本 | string | - |
28-
| `[nzText]` | 文本类头像 | `string` | - |
19+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
20+
|--------------|------------------------------------------------------|---------------------------------------------|-------------|------|
21+
| `[nzIcon]` | 设置头像的图标类型，参考 `Icon` | `string` | - |
22+
| `[nzShape]` | 指定头像的形状 | `'circle' \| 'square'` | `'circle'` | ✅ |
23+
| `[nzSize]` | 设置头像的大小 | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ |
24+
| `[nzGap]` | 字符类型距离左右两侧边界单位像素 | `number` | `4` | ✅ |
25+
| `[nzSrc]` | 图片类头像的资源地址 | `string` | - |
26+
| `[nzSrcSet]` | 设置图片类头像响应式资源地址 | string | - |
27+
| `[nzAlt]` | 图像无法显示时的替代文本 | string | - |
28+
| `[nzText]` | 文本类头像 | `string` | - |
2929
| `(nzError)` | 图片加载失败的事件，调用 `preventDefault` 方法会阻止组件默认的 fallback 行为 | `EventEmitter<Event>` | - |
3030

3131
### nz-avatar-group
3232

3333
```html
34-
<nz-avatar-group>
34+
<nz-avatar-group>
3535
<nz-avatar nzIcon="user"></nz-avatar>
36-
...
36+
<!-- ... -->
3737
</nz-avatar-group>
3838
```

‎components/avatar/public-api.ts

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@
66
export * from './avatar.component';
77
export * from './avatar-group.component';
88
export * from './avatar.module';
9+
export * from './types';

‎components/avatar/types.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Use of this source code is governed by an MIT-style license that can be
3+
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
4+
*/
5+
6+
import { NzShapeSCType, NzSizeLDSType } from 'ng-zorro-antd/core/types';
7+
8+
export interface NzAvatarProps {
9+
shape?: NzShapeSCType;
10+
size?: NzSizeLDSType | number;
11+
gap?: number;
12+
src?: string;
13+
srcSet?: string;
14+
alt?: string;
15+
icon?: string;
16+
text?: string;
17+
error?: (event: Event) => void;
18+
}

0 commit comments

Comments
 (0)