d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { InputBoolean, ThyTranslate } from 'ngx-tethys/core';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { useHostRenderer } from '@tethys/cdk/dom';
import {
    AfterViewInit,
    Component,
    ContentChild,
    ElementRef,
    OnChanges,
    Input,
    NgZone,
    OnInit,
    TemplateRef,
    SimpleChanges
} from '@angular/core';

import { ThyEmptyConfig } from './empty.config';
import { PRESET_SVG } from './svgs';
import { DomSanitizer } from '@angular/platform-browser';
import { SafeAny } from 'ngx-tethys/types';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common';

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',
    standalone: true,
    imports: [NgIf, ThyIconComponent, NgClass, NgTemplateOutlet]
})
export class ThyEmptyComponent implements OnInit, AfterViewInit, OnChanges {
    /**
     * 显示文本提示信息。同时传入 thyMessage，thyTranslationKey，thyEntityName，thyEntityNameTranslateKey 时优先级最高
     */
    @Input() thyMessage: string;

    /**
     * 显示文本提示信息多语言 Key。同时传入 thyTranslationKey，thyEntityName，thyEntityNameTranslateKey 时优先级最高
     */
    @Input() thyTranslationKey: string;

    /**
     * 显示文本提示信息多语言 Key 的 Values。传入 thyTranslationKey 后，传入这个才会生效
     */
    @Input() thyTranslationValues: any;

    /**
     * 显示默认提示信息，替换默认提示信息的目标对象，比如：没有 {thyEntityName}。同时传入 thyEntityName，thyEntityNameTranslateKey 时优先级较高
     */
    @Input() thyEntityName: string;

    /**
     * thyEntityName 的多语言 Key。thyMessage，thyTranslationKey，thyEntityName 均未传入时才会生效
     */
    @Input() thyEntityNameTranslateKey: string;

    /**
     * 提示图标名
     */
    @Input() thyIconName: string;

    /**
     * 大小
     * @type sm | md | lg
     * @default md
     */
    @Input()
    set thySize(value: string) {
        this.size = value;
        if (this._initialized) {
            this.updateClass();
        }
    }

    /**
     * 距上距离
     */
    @Input() thyMarginTop: number | string;

    /**
     * 是否自动根据父容器计算高度，垂直居中
     * @default false
     */
    @Input() @InputBoolean() thyTopAuto: boolean;

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

    /**
     * 提示图片链接
     */
    @Input() thyImageUrl: string;

    @Input() thyImageLoading?: ThyEmptyImageLoading;

    @Input() thyImageFetchPriority?: ThyEmptyImageFetchPriority;

    /**
     * 显示文本描述
     */
    @Input() thyDescription: string;

    private size: string = 'md';

    private _initialized = false;

    private hostRenderer = useHostRenderer();

    presetSvg: SafeAny;

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

    get displayText() {
        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 {
            return this.thyTranslate.instant(this.thyEmptyConfig.noResultTranslateKey);
        }
    }

    private _calculatePosition() {
        const sizeOptions = sizeMap[this.thySize || 'md'];
        const topAuto = coerceBooleanProperty(this.thyTopAuto);
        let marginTop = null;
        if (topAuto) {
            // 选择参考父容器居中
            const containerElement = this.thyContainer ? this.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 {
            if (this.thyMarginTop) {
                marginTop = this.thyMarginTop;
            } else {
                marginTop = 0; // sizeOptions.defaultMarginTop;
            }
        }
        if (marginTop) {
            this.hostRenderer.setStyle('marginTop', marginTop + 'px');
        }
    }

    constructor(
        private thyTranslate: ThyTranslate,
        private thyEmptyConfig: ThyEmptyConfig,
        private elementRef: ElementRef,
        private ngZone: NgZone,
        private sanitizer: DomSanitizer
    ) {}

    ngOnInit() {
        this.updateClass();
        this._initialized = true;
        this.setPresetSvg(this.thyIconName);
    }

    updateClass() {
        const classList = sizeClassMap[this.size] || sizeClassMap['md'];
        if (classList) {
            this.hostRenderer.updateClass(classList);
        }
    }

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

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.thyIconName && changes.thyIconName.currentValue && !changes.thyIconName.firstChange) {
            this.setPresetSvg(changes.thyIconName.currentValue);
        }
    }

    setPresetSvg(icon: string) {
        this.presetSvg = '';
        let presetSvg = icon ? PRESET_SVG[icon] : PRESET_SVG.default;

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

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

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