d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { NgClass, NgFor, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
import {
    AfterContentInit,
    Component,
    ContentChild,
    ContentChildren,
    HostBinding,
    Input,
    OnChanges,
    OnDestroy,
    QueryList,
    SimpleChanges,
    TemplateRef
} from '@angular/core';
import { UpdateHostClassService } from 'ngx-tethys/core';
import { SafeAny } from 'ngx-tethys/types';
import { Subject } from 'rxjs';
import { DEFAULT_SIZE, ThyAvatarComponent } from '../avatar.component';
import { takeUntil, startWith } from 'rxjs/operators';

export const THY_AVATAR_ITEM_SPACE = 4;

export const THY_OVERLAP_AVATAR_ITEM_SPACE = -8;

export const enum ThyAvatarListMode {
    overlap = 'overlap',
    default = 'default'
}

/**
 * 头像列表组件
 * @name thy-avatar-list
 * @order 20
 */
@Component({
    selector: 'thy-avatar-list',
    templateUrl: `./avatar-list.component.html`,
    host: {
        class: 'thy-avatar-list'
    },
    providers: [UpdateHostClassService],
    standalone: true,
    imports: [NgFor, NgStyle, ThyAvatarComponent, NgIf, NgClass, NgTemplateOutlet]
})
export class ThyAvatarListComponent implements OnChanges, OnDestroy, AfterContentInit {
    @HostBinding('class.thy-avatar-list-overlap') overlapMode = false;

    public avatarItems: ThyAvatarComponent[] = [];

    private ngUnsubscribe$ = new Subject<void>();

    /**
     * 展示方式
     * @type  overlap | default
     * @default default
     */
    @Input() thyMode: ThyAvatarListMode;

    /**
     * 头像大小
     * @type 16 | 22 | 24 | 28 | 32 | 36 | 44 | 48 | 68 | 110 | 160 | xxs(22px) | xs(24px) | sm(32px) | md(36px) | lg(48px)
     * @default 36
     */
    @Input() thyAvatarSize: number | string = DEFAULT_SIZE;

    /**
     *  append 自定义操作
     */
    @ContentChild('append', { static: false }) append: TemplateRef<SafeAny>;

    /**
     * @private
     */
    @ContentChildren(ThyAvatarComponent) avatarComponents: QueryList<ThyAvatarComponent>;

    constructor() {}

    ngOnChanges(changes: SimpleChanges) {
        if (changes.thyAvatarSize && !changes.thyAvatarSize.firstChange) {
            this.updateAvatarItems();
        }
        if (changes.thyMode) {
            this.overlapMode = changes.thyMode.currentValue === ThyAvatarListMode.overlap;
            if (!changes.thyMode.firstChange) {
                this.updateAvatarItems();
            }
        }
    }

    ngAfterContentInit() {
        this.avatarComponents.changes.pipe(startWith(this.avatarComponents), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
            this.updateAvatarItems();
        });
    }

    private updateAvatarItems() {
        this.avatarItems = this.avatarComponents.toArray();
        this.avatarItems.forEach((item, index) => {
            item.thySize = this.thyAvatarSize;
            item.elementRef.nativeElement.style.zIndex = this.avatarItems.length - index;
        });
    }

    ngOnDestroy() {
        this.ngUnsubscribe$.next();
        this.ngUnsubscribe$.complete();
    }
}

1	import { NgClass, NgFor, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
2	import {
3	AfterContentInit,
4	Component,
5	ContentChild,
6	ContentChildren,
7	HostBinding,
8	Input,
9	OnChanges,	1✔
10	OnDestroy,	1✔
11	QueryList,
12	SimpleChanges,
13	TemplateRef
14	} from '@angular/core';
15	import { UpdateHostClassService } from 'ngx-tethys/core';
16	import { SafeAny } from 'ngx-tethys/types';	1✔
17	import { Subject } from 'rxjs';
18	import { DEFAULT_SIZE, ThyAvatarComponent } from '../avatar.component';	×
19	import { takeUntil, startWith } from 'rxjs/operators';	×
20		×
21	export const THY_AVATAR_ITEM_SPACE = 4;	×
22
23	export const THY_OVERLAP_AVATAR_ITEM_SPACE = -8;
24		×
25	export const enum ThyAvatarListMode {	×
26	overlap = 'overlap',
27	default = 'default'	×
28	}	×
29		×
30	/**	×
31	* 头像列表组件
32	* @name thy-avatar-list
33	* @order 20
34	*/
35	@Component({	×
36	selector: 'thy-avatar-list',	×
37	templateUrl: `./avatar-list.component.html`,
38	host: {
39	class: 'thy-avatar-list'
40	},	×
41	providers: [UpdateHostClassService],	×
42	standalone: true,	×
43	imports: [NgFor, NgStyle, ThyAvatarComponent, NgIf, NgClass, NgTemplateOutlet]	×
44	})
45	export class ThyAvatarListComponent implements OnChanges, OnDestroy, AfterContentInit {
46	@HostBinding('class.thy-avatar-list-overlap') overlapMode = false;
47		×
48	public avatarItems: ThyAvatarComponent[] = [];	×
49
50	private ngUnsubscribe$ = new Subject<void>();	1✔
51		1✔
52	/**
53	* 展示方式
54	* @type overlap \| default
55	* @default default
56	*/
57	@Input() thyMode: ThyAvatarListMode;
58
59	/**	1✔
60	* 头像大小
61	* @type 16 \| 22 \| 24 \| 28 \| 32 \| 36 \| 44 \| 48 \| 68 \| 110 \| 160 \| xxs(22px) \| xs(24px) \| sm(32px) \| md(36px) \| lg(48px)
62	* @default 36
63	*/
64	@Input() thyAvatarSize: number \| string = DEFAULT_SIZE;
65
66	/**
67	* append 自定义操作
68	*/
69	@ContentChild('append', { static: false }) append: TemplateRef<SafeAny>;
70
71	/**
72	* @private
73	*/
74	@ContentChildren(ThyAvatarComponent) avatarComponents: QueryList<ThyAvatarComponent>;
75
76	constructor() {}
77
78	ngOnChanges(changes: SimpleChanges) {
79	if (changes.thyAvatarSize && !changes.thyAvatarSize.firstChange) {
80	this.updateAvatarItems();
81	}
82	if (changes.thyMode) {
83	this.overlapMode = changes.thyMode.currentValue === ThyAvatarListMode.overlap;
84	if (!changes.thyMode.firstChange) {
85	this.updateAvatarItems();
86	}
87	}
88	}
89
90	ngAfterContentInit() {
91	this.avatarComponents.changes.pipe(startWith(this.avatarComponents), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
92	this.updateAvatarItems();
93	});
94	}
95
96	private updateAvatarItems() {
97	this.avatarItems = this.avatarComponents.toArray();
98	this.avatarItems.forEach((item, index) => {
99	item.thySize = this.thyAvatarSize;
100	item.elementRef.nativeElement.style.zIndex = this.avatarItems.length - index;
101	});
102	}
103
104	ngOnDestroy() {
105	this.ngUnsubscribe$.next();
106	this.ngUnsubscribe$.complete();
107	}
108	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous