f2387ab8-6fe4-4140-b09f-990c71f4bead

Committed 16 May 2025 10:24AM UTC coverage: 90.205% (-0.1%) from 90.323%

Build # f2387ab8-6fe4-4140-b09f-990c71f4bead

Build Type

push

circleci

Committed by

web-flow

Commit Message

refactor(skeleton): migrate to signal for skeleton #TINFR-1769 (#3407)

Run Details

5570 of 6835 branches covered (81.49%)

Branch coverage included in aggregate %.

21 of 43 new or added lines in 5 files covered. (48.84%)

10 existing lines in 5 files now uncovered.

13566 of 14379 relevant lines covered (94.35%)

908.71 hits per line

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

95.35

/src/skeleton/skeleton-rectangle.component.ts

import { Component, ChangeDetectionStrategy, ViewEncapsulation, inject, input, computed } from '@angular/core';
import { ThySkeleton } from './skeleton.component';
import { coerceBooleanProperty, helpers, ThyBooleanInput } from 'ngx-tethys/util';
import { THY_SKELETON_CONFIG } from './skeleton.config';
import { isUndefinedOrNull } from 'ngx-tethys/util';
import { NgStyle } from '@angular/common';
import { coerceCssPixelValue } from '@angular/cdk/coercion';
/**
 * 骨架屏矩形组件
 * @name thy-skeleton-rectangle
 * @order 20
 */
@Component({
    selector: 'thy-skeleton-rectangle',
    host: {
        '[class.thy-skeleton]': 'true',
        '[class.thy-skeleton-rectangle]': 'true',
        '[style.background]': 'primaryColor()',
        '[style.width]': 'thyRowWidth()',
        '[style.height]': 'thyRowHeight()',
        '[style.borderRadius]': 'thyBorderRadius()'
    },
    template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles()"></div> `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    imports: [NgStyle]
})
export class ThySkeletonRectangle {
    private skeletonConfigModel = inject(THY_SKELETON_CONFIG, { optional: true });

    private parent = inject(ThySkeleton, { optional: true })!;

    /**
     * 是否展示动画
     * @default true
     */
    readonly thyAnimated = input<boolean, ThyBooleanInput>(undefined, { transform: coerceBooleanProperty });

    /**
     * 动画速度
     * @default 1.5s
     */
    readonly thyAnimatedInterval = input<string | number>();

    /**
     * 骨架边框圆角
     * @default 4px
     */
    readonly thyBorderRadius = input<string, string | number>(undefined, { transform: coerceCssPixelValue });

    /**
     * 骨架宽度
     * @default 100%
     */
    readonly thyRowWidth = input<string, string | number>(undefined, { transform: coerceCssPixelValue });

    /**
     * 骨架高度
     * @default 20px
     */
    readonly thyRowHeight = input<string, string | number>(undefined, { transform: coerceCssPixelValue });

    /**
     * 骨架主色
     * @default #F7F7F7
     */
    readonly thyPrimaryColor = input<string>();

    /**
     * 骨架次色
     * @default #aaaaaa
     */
    readonly thySecondaryColor = input<string>();

    readonly animatedInterval = computed(() => {
        return this.thyAnimatedInterval() || this.parent?.thyAnimatedInterval() || this.skeletonConfigModel.thyAnimatedInterval;
    });

    readonly primaryColor = computed(() => {
        return this.thyPrimaryColor() || this.parent?.thyPrimaryColor() || this.skeletonConfigModel.thyPrimaryColor;
    });

    readonly secondaryColor = computed(() => {
        return this.thySecondaryColor() || this.parent?.thySecondaryColor() || this.skeletonConfigModel.thySecondaryColor;
    });

    readonly animated = computed(() => {
        if (!isUndefinedOrNull(this.thyAnimated())) {
            return this.thyAnimated();
        }
        if (!isUndefinedOrNull(this.parent?.thyAnimated())) {
            return this.parent.thyAnimated();
        }
        return this.skeletonConfigModel.thyAnimated;
    });

    readonly afterStyles = computed(() => {
        return {
            ...(this.secondaryColor() && {
                background: `linear-gradient(90deg, ${helpers.hexToRgb(this.secondaryColor(), 0)}, ${helpers.hexToRgb(
                    this.secondaryColor(),
                    0.15
                )}, ${helpers.hexToRgb(this.secondaryColor(), 0)}`
            }),
            animation: ![false, 'false'].includes(this.animated()) ? `thy-skeleton-animation ${this.animatedInterval()}s infinite` : 'none'
        };
    });
}

1	import { Component, ChangeDetectionStrategy, ViewEncapsulation, inject, input, computed } from '@angular/core';
2	import { ThySkeleton } from './skeleton.component';
3	import { coerceBooleanProperty, helpers, ThyBooleanInput } from 'ngx-tethys/util';
4	import { THY_SKELETON_CONFIG } from './skeleton.config';
5	import { isUndefinedOrNull } from 'ngx-tethys/util';
6	import { NgStyle } from '@angular/common';
7	import { coerceCssPixelValue } from '@angular/cdk/coercion';
8	/**
9	* 骨架屏矩形组件
10	* @name thy-skeleton-rectangle
11	* @order 20
12	*/
13	@Component({
14	selector: 'thy-skeleton-rectangle',
15	host: {	1✔
16	'[class.thy-skeleton]': 'true',
17	'[class.thy-skeleton-rectangle]': 'true',	117✔
18	'[style.background]': 'primaryColor()',	117✔
19	'[style.width]': 'thyRowWidth()',	117✔
20	'[style.height]': 'thyRowHeight()',	117✔
21	'[style.borderRadius]': 'thyBorderRadius()'	117✔
22	},	117✔
23	template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles()"></div> `,	117✔
24	changeDetection: ChangeDetectionStrategy.OnPush,	117✔
25	encapsulation: ViewEncapsulation.None,	117✔
26	imports: [NgStyle]	117✔
27	})	116✔
28	export class ThySkeletonRectangle {
29	private skeletonConfigModel = inject(THY_SKELETON_CONFIG, { optional: true });	117✔
30		121✔
31	private parent = inject(ThySkeleton, { optional: true })!;
32		117✔
33	/**	117✔
34	* 是否展示动画
35	* @default true	117✔
36	*/	117✔
37	readonly thyAnimated = input<boolean, ThyBooleanInput>(undefined, { transform: coerceBooleanProperty });	115✔
38
39	/**	2!
40	* 动画速度	2✔
41	* @default 1.5s
UNCOV 42	*/	×
43	readonly thyAnimatedInterval = input<string \| number>();
44		117✔
45	/**	117✔
46	* 骨架边框圆角	122✔
47	* @default 4px
48	*/
49	readonly thyBorderRadius = input<string, string \| number>(undefined, { transform: coerceCssPixelValue });	117✔
50
51	/**
52	* 骨架宽度
53	* @default 100%	1✔
54	*/
55	readonly thyRowWidth = input<string, string \| number>(undefined, { transform: coerceCssPixelValue });
56
57	/**
58	* 骨架高度
59	* @default 20px
60	*/
61	readonly thyRowHeight = input<string, string \| number>(undefined, { transform: coerceCssPixelValue });
62
63	/**	1✔
64	* 骨架主色
65	* @default #F7F7F7
66	*/
67	readonly thyPrimaryColor = input<string>();
68
69	/**
70	* 骨架次色
71	* @default #aaaaaa
72	*/
73	readonly thySecondaryColor = input<string>();
74
75	readonly animatedInterval = computed(() => {
76	return this.thyAnimatedInterval() \|\| this.parent?.thyAnimatedInterval() \|\| this.skeletonConfigModel.thyAnimatedInterval;
77	});
78
79	readonly primaryColor = computed(() => {
80	return this.thyPrimaryColor() \|\| this.parent?.thyPrimaryColor() \|\| this.skeletonConfigModel.thyPrimaryColor;
81	});
82
83	readonly secondaryColor = computed(() => {
84	return this.thySecondaryColor() \|\| this.parent?.thySecondaryColor() \|\| this.skeletonConfigModel.thySecondaryColor;
85	});
86
87	readonly animated = computed(() => {
88	if (!isUndefinedOrNull(this.thyAnimated())) {
89	return this.thyAnimated();
90	}
91	if (!isUndefinedOrNull(this.parent?.thyAnimated())) {
92	return this.parent.thyAnimated();
93	}
94	return this.skeletonConfigModel.thyAnimated;
95	});
96
97	readonly afterStyles = computed(() => {
98	return {
99	...(this.secondaryColor() && {
100	background: `linear-gradient(90deg, ${helpers.hexToRgb(this.secondaryColor(), 0)}, ${helpers.hexToRgb(
101	this.secondaryColor(),
102	0.15
103	)}, ${helpers.hexToRgb(this.secondaryColor(), 0)}`
104	}),
105	animation: ![false, 'false'].includes(this.animated()) ? `thy-skeleton-animation ${this.animatedInterval()}s infinite` : 'none'
106	};
107	});
108	}

atinc / ngx-tethys / f2387ab8-6fe4-4140-b09f-990c71f4bead

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