5e4c73ce-2f46-4d25-9e33-338622472a9c

Committed 16 May 2025 08:13AM UTC coverage: 90.346% (+0.02%) from 90.33%

Build # 5e4c73ce-2f46-4d25-9e33-338622472a9c

Build Type

push

circleci

Committed by

web-flow

Commit Message

refactor(empty): migrate to signal for empty #TINFR-1470 @wumeimin (#3428)

Run Details

5581 of 6841 branches covered (81.58%)

Branch coverage included in aggregate %.

10 of 11 new or added lines in 1 file covered. (90.91%)

2 existing lines in 1 file now uncovered.

13547 of 14331 relevant lines covered (94.53%)

911.61 hits per line

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

89.0

/src/empty/empty.component.ts

import {
    AfterViewInit,
    Component,
    computed,
    contentChild,
    effect,
    ElementRef,
    inject,
    input,
    NgZone,
    Signal,
    TemplateRef
} from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyTranslate } from 'ngx-tethys/core';

import { NgClass, NgTemplateOutlet } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
import { injectLocale, ThyEmptyLocale } from 'ngx-tethys/i18n';
import { ThyIcon } from 'ngx-tethys/icon';
import { SafeAny } from 'ngx-tethys/types';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { ThyEmptyConfig } from './empty.config';
import { PRESET_SVG } from './svgs';

const sizeClassMap = {
    lg: ['thy-empty-state', 'thy-empty-state--lg'],
    md: ['thy-empty-state'],
    sm: ['thy-empty-state', 'thy-empty-state--sm']
};

const sizeMap = {
    lg: {
        height: 168, // 空提示的高度
        offsetTop: 30, // 空提示图标和大小之间的空白距离，需要除去，否则会不居中
        defaultMarginTop: 120 // 不自动计算默认的 top 距离
    },
    md: {
        height: 118,
        offsetTop: 20,
        defaultMarginTop: 10
    },
    sm: {
        height: 78,
        offsetTop: 10,
        defaultMarginTop: 10
    }
};

/** https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading */
export type ThyEmptyImageLoading = 'eager' | 'lazy';

/** https://wicg.github.io/priority-hints/#idl-index */
export type ThyEmptyImageFetchPriority = 'high' | 'low' | 'auto';

/**
 * 空页面组件
 * @name thy-empty
 * @order 10
 */
@Component({
    selector: 'thy-empty',
    templateUrl: './empty.component.html',
    imports: [ThyIcon, NgClass, NgTemplateOutlet]
})
export class ThyEmpty implements AfterViewInit {
    private thyTranslate = inject(ThyTranslate);
    private thyEmptyConfig = inject(ThyEmptyConfig);
    private elementRef = inject(ElementRef);
    private ngZone = inject(NgZone);
    private sanitizer = inject(DomSanitizer);
    private locale: Signal<ThyEmptyLocale> = injectLocale('empty');

    /**
     * 显示文本提示信息。同时传入 thyMessage，thyTranslationKey，thyEntityName，thyEntityNameTranslateKey 时优先级最高
     * @default 暂无数据
     */
    readonly thyMessage = input<string>();

    /**
     * 已废弃。显示文本提示信息多语言 Key。同时传入 thyTranslationKey，thyEntityName，thyEntityNameTranslateKey 时优先级最高
     * @deprecated
     */
    readonly thyTranslationKey = input<string>();

    /**
     * 已废弃。显示文本提示信息多语言 Key 的 Values。传入 thyTranslationKey 后，传入这个才会生效
     * @deprecated
     */
    readonly thyTranslationValues = input<any>();

    /**
     * 已废弃。显示默认提示信息，替换默认提示信息的目标对象，比如：没有 {thyEntityName}。同时传入 thyEntityName，thyEntityNameTranslateKey 时优先级较高
     * @deprecated
     */
    readonly thyEntityName = input<string>();

    /**
     * 已废弃。thyEntityName 的多语言 Key。thyMessage，thyTranslationKey，thyEntityName 均未传入时才会生效
     * @deprecated
     */
    readonly thyEntityNameTranslateKey = input<string>();

    /**
     * 提示图标名
     */
    readonly thyIconName = input<string>();

    /**
     * 大小
     * @type sm | md | lg
     * @default md
     */
    readonly thySize = input<string>('md');

    /**
     * 距上距离
     */
    readonly thyMarginTop = input<number | string>();

    /**
     * 是否自动根据父容器计算高度，垂直居中
     * @default false
     */
    readonly thyTopAuto = input(false, { transform: coerceBooleanProperty });

    /**
     * 自动计算高度垂直居中(即 thyTopAuto 为 true)时，支持传入自定义父容器
     */
    readonly thyContainer = input<ElementRef>();

    /**
     * 提示图片链接
     */
    readonly thyImageUrl = input<string>();

    readonly thyImageLoading = input<ThyEmptyImageLoading>();

    readonly thyImageFetchPriority = input<ThyEmptyImageFetchPriority>();

    /**
     * 显示文本描述
     */
    readonly thyDescription = input<string>();

    private hostRenderer = useHostRenderer();

    /**
     * 除提示图片，文本外的其他信息传入模板
     * @type TemplateRef
     */
    readonly extraTemplateRef = contentChild<TemplateRef<SafeAny>>('extra');

    protected readonly presetSvg = computed(() => {
        let presetSvg = this.thyIconName() ? PRESET_SVG[this.thyIconName() as keyof typeof PRESET_SVG] : PRESET_SVG.default;

        return presetSvg ? this.sanitizer.bypassSecurityTrustHtml(presetSvg) : '';
    });

    protected readonly displayText = computed(() => {
        if (this.thyMessage()) {
            return this.thyMessage();
        } else if (this.thyTranslationKey()) {
            return this.thyTranslate.instant(this.thyTranslationKey(), this.thyTranslationValues());
        } else if (this.thyEntityName()) {
            return this.thyTranslate.instant(this.thyEmptyConfig.noResultWithTargetTranslateKey, {
                target: this.thyEntityName()
            });
        } else if (this.thyEntityNameTranslateKey()) {
            return this.thyTranslate.instant(this.thyEmptyConfig.noResultWithTargetTranslateKey, {
                target: this.thyTranslate.instant(this.thyEntityNameTranslateKey())
            });
        } else if (this.thyTranslate.instant(this.thyEmptyConfig.noResultTranslateKey) !== 'common.tips.NO_RESULT') {
            return this.thyTranslate.instant(this.thyEmptyConfig.noResultTranslateKey);
        } else {
            return this.locale().noDataText;
        }
    });

    constructor() {
        effect(() => {
            this.updateClass();
        });
    }

    private _calculatePosition() {
        const sizeOptions = sizeMap[(this.thySize() as keyof typeof sizeMap) || 'md'];
        let marginTop = null;
        if (this.thyTopAuto()) {
            // 选择参考父容器居中
            const thyContainer = this.thyContainer();
            const containerElement = thyContainer ? thyContainer.nativeElement : this.elementRef.nativeElement.parentElement;
            // containerElement.height;
            let emptyStateHeight = this.elementRef.nativeElement.offsetHeight;
            // 高度没有自动计算出来使用默认值
            if (emptyStateHeight <= 10) {
                emptyStateHeight = sizeOptions.height;
            }
            marginTop = (containerElement.offsetHeight - emptyStateHeight) / 2 - sizeOptions.offsetTop;
            // marginTop = (containerElement.offsetHeight - emptyStateHeight) / 2;
            if (marginTop < 0) {
                marginTop = 0; // sizeOptions.defaultMarginTop;
            }
        } else {
            const thyMarginTop = this.thyMarginTop();
            if (thyMarginTop) {
                marginTop = thyMarginTop;
            } else {
                marginTop = 0; // sizeOptions.defaultMarginTop;
            }
        }
        if (marginTop) {
            this.hostRenderer.setStyle('marginTop', marginTop + 'px');
        }
    }

    updateClass() {
        const classList = sizeClassMap[(this.thySize() as keyof typeof sizeClassMap) || 'md'];
        if (classList) {
            this.hostRenderer.updateClass(classList);
        }
    }

    ngAfterViewInit() {
        this.ngZone.runOutsideAngular(() => {
            setTimeout(() => {
                this._calculatePosition();
            }, 50);
        });
    }
}

1	import {
2	AfterViewInit,
3	Component,
4	computed,
5	contentChild,
6	effect,
7	ElementRef,
8	inject,
9	input,
10	NgZone,
11	Signal,
12	TemplateRef
13	} from '@angular/core';
14	import { useHostRenderer } from '@tethys/cdk/dom';	1✔
15	import { ThyTranslate } from 'ngx-tethys/core';
16
17	import { NgClass, NgTemplateOutlet } from '@angular/common';
18	import { DomSanitizer } from '@angular/platform-browser';
19	import { injectLocale, ThyEmptyLocale } from 'ngx-tethys/i18n';	1✔
20	import { ThyIcon } from 'ngx-tethys/icon';
21	import { SafeAny } from 'ngx-tethys/types';
22	import { coerceBooleanProperty } from 'ngx-tethys/util';
23	import { ThyEmptyConfig } from './empty.config';
24	import { PRESET_SVG } from './svgs';
25
26	const sizeClassMap = {
27	lg: ['thy-empty-state', 'thy-empty-state--lg'],
28	md: ['thy-empty-state'],
29	sm: ['thy-empty-state', 'thy-empty-state--sm']
30	};
31
32	const sizeMap = {
33	lg: {
34	height: 168, // 空提示的高度
35	offsetTop: 30, // 空提示图标和大小之间的空白距离，需要除去，否则会不居中
36	defaultMarginTop: 120 // 不自动计算默认的 top 距离
37	},
38	md: {
39	height: 118,
40	offsetTop: 20,
41	defaultMarginTop: 10	1✔
42	},
43	sm: {	33✔
44	height: 78,	33✔
45	offsetTop: 10,	33✔
46	defaultMarginTop: 10	33✔
47	}	33✔
48	};	33✔
49		33✔
50	/** https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading */	33✔
51	export type ThyEmptyImageLoading = 'eager' \| 'lazy';	33✔
52		33✔
53	/** https://wicg.github.io/priority-hints/#idl-index */	33✔
54	export type ThyEmptyImageFetchPriority = 'high' \| 'low' \| 'auto';	33✔
55		33✔
56	/**	33✔
57	* 空页面组件	33✔
58	* @name thy-empty	33✔
59	* @order 10	33✔
60	*/	33✔
61	@Component({	33✔
62	selector: 'thy-empty',	33✔
63	templateUrl: './empty.component.html',	33✔
64	imports: [ThyIcon, NgClass, NgTemplateOutlet]	33✔
65	})	33✔
66	export class ThyEmpty implements AfterViewInit {	33✔
67	private thyTranslate = inject(ThyTranslate);	33✔
68	private thyEmptyConfig = inject(ThyEmptyConfig);
69	private elementRef = inject(ElementRef);	33✔
70	private ngZone = inject(NgZone);	37✔
71	private sanitizer = inject(DomSanitizer);	31✔
72	private locale: Signal<ThyEmptyLocale> = injectLocale('empty');
73		6✔
74	/**	1✔
75	* 显示文本提示信息。同时传入 thyMessage，thyTranslationKey，thyEntityName，thyEntityNameTranslateKey 时优先级最高
76	* @default 暂无数据	5✔
77	*/	1✔
78	readonly thyMessage = input<string>();
79
80	/**
81	* 已废弃。显示文本提示信息多语言 Key。同时传入 thyTranslationKey，thyEntityName，thyEntityNameTranslateKey 时优先级最高	4✔
82	* @deprecated	1✔
83	*/
84	readonly thyTranslationKey = input<string>();
85
86	/**	3!
UNCOV 87	* 已废弃。显示文本提示信息多语言 Key 的 Values。传入 thyTranslationKey 后，传入这个才会生效	×
88	* @deprecated
89	*/
90	readonly thyTranslationValues = input<any>();	3✔
91
92	/**
93	* 已废弃。显示默认提示信息，替换默认提示信息的目标对象，比如：没有 {thyEntityName}。同时传入 thyEntityName，thyEntityNameTranslateKey 时优先级较高	33✔
94	* @deprecated	36✔
95	*/
96	readonly thyEntityName = input<string>();
97
98	/**	33✔
99	* 已废弃。thyEntityName 的多语言 Key。thyMessage，thyTranslationKey，thyEntityName 均未传入时才会生效	33✔
100	* @deprecated	33✔
101	*/
102	readonly thyEntityNameTranslateKey = input<string>();	11✔
103		11!
104	/**
105	* 提示图标名	11✔
106	*/
107	readonly thyIconName = input<string>();	11!
108		×
109	/**
110	* 大小	11✔
111	* @type sm \| md \| lg
112	* @default md	11!
113	*/	11✔
114	readonly thySize = input<string>('md');
115
116	/**
117	* 距上距离	22✔
118	*/	22!
NEW 119	readonly thyMarginTop = input<number \| string>();	×
120
121	/**
122	* 是否自动根据父容器计算高度，垂直居中	22✔
123	* @default false
124	*/
125	readonly thyTopAuto = input(false, { transform: coerceBooleanProperty });	33!
UNCOV 126		×
127	/**
128	* 自动计算高度垂直居中(即 thyTopAuto 为 true)时，支持传入自定义父容器
129	*/
130	readonly thyContainer = input<ElementRef>();	36✔
131		36!
132	/**	36✔
133	* 提示图片链接
134	*/
135	readonly thyImageUrl = input<string>();
136		33✔
137	readonly thyImageLoading = input<ThyEmptyImageLoading>();	33✔
138		33✔
139	readonly thyImageFetchPriority = input<ThyEmptyImageFetchPriority>();
140
141	/**
142	* 显示文本描述	1✔
143	*/	1✔
144	readonly thyDescription = input<string>();
145
146	private hostRenderer = useHostRenderer();
147
148	/**
149	* 除提示图片，文本外的其他信息传入模板
150	* @type TemplateRef
151	*/
152	readonly extraTemplateRef = contentChild<TemplateRef<SafeAny>>('extra');
153
154	protected readonly presetSvg = computed(() => {
155	let presetSvg = this.thyIconName() ? PRESET_SVG[this.thyIconName() as keyof typeof PRESET_SVG] : PRESET_SVG.default;
156
157	return presetSvg ? this.sanitizer.bypassSecurityTrustHtml(presetSvg) : '';
158	});
159
160	protected readonly displayText = computed(() => {
161	if (this.thyMessage()) {	1✔
162	return this.thyMessage();
163	} else if (this.thyTranslationKey()) {
164	return this.thyTranslate.instant(this.thyTranslationKey(), this.thyTranslationValues());
165	} else if (this.thyEntityName()) {
166	return this.thyTranslate.instant(this.thyEmptyConfig.noResultWithTargetTranslateKey, {
167	target: this.thyEntityName()
168	});
169	} else if (this.thyEntityNameTranslateKey()) {
170	return this.thyTranslate.instant(this.thyEmptyConfig.noResultWithTargetTranslateKey, {
171	target: this.thyTranslate.instant(this.thyEntityNameTranslateKey())
172	});
173	} else if (this.thyTranslate.instant(this.thyEmptyConfig.noResultTranslateKey) !== 'common.tips.NO_RESULT') {
174	return this.thyTranslate.instant(this.thyEmptyConfig.noResultTranslateKey);
175	} else {
176	return this.locale().noDataText;
177	}
178	});
179
180	constructor() {
181	effect(() => {
182	this.updateClass();
183	});
184	}
185
186	private _calculatePosition() {
187	const sizeOptions = sizeMap[(this.thySize() as keyof typeof sizeMap) \|\| 'md'];
188	let marginTop = null;
189	if (this.thyTopAuto()) {
190	// 选择参考父容器居中
191	const thyContainer = this.thyContainer();
192	const containerElement = thyContainer ? thyContainer.nativeElement : this.elementRef.nativeElement.parentElement;
193	// containerElement.height;
194	let emptyStateHeight = this.elementRef.nativeElement.offsetHeight;
195	// 高度没有自动计算出来使用默认值
196	if (emptyStateHeight <= 10) {
197	emptyStateHeight = sizeOptions.height;
198	}
199	marginTop = (containerElement.offsetHeight - emptyStateHeight) / 2 - sizeOptions.offsetTop;
200	// marginTop = (containerElement.offsetHeight - emptyStateHeight) / 2;
201	if (marginTop < 0) {
202	marginTop = 0; // sizeOptions.defaultMarginTop;
203	}
204	} else {
205	const thyMarginTop = this.thyMarginTop();
206	if (thyMarginTop) {
207	marginTop = thyMarginTop;
208	} else {
209	marginTop = 0; // sizeOptions.defaultMarginTop;
210	}
211	}
212	if (marginTop) {
213	this.hostRenderer.setStyle('marginTop', marginTop + 'px');
214	}
215	}
216
217	updateClass() {
218	const classList = sizeClassMap[(this.thySize() as keyof typeof sizeClassMap) \|\| 'md'];
219	if (classList) {
220	this.hostRenderer.updateClass(classList);
221	}
222	}
223
224	ngAfterViewInit() {
225	this.ngZone.runOutsideAngular(() => {
226	setTimeout(() => {
227	this._calculatePosition();
228	}, 50);
229	});
230	}
231	}

atinc / ngx-tethys / 5e4c73ce-2f46-4d25-9e33-338622472a9c

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