d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    Component,
    ChangeDetectionStrategy,
    ViewEncapsulation,
    Input,
    OnInit,
    Optional,
    OnChanges,
    SimpleChanges,
    Inject
} from '@angular/core';
import { ThySkeletonComponent } from './skeleton.component';
import { helpers } from 'ngx-tethys/util';
import { InputBoolean, InputCssPixel } from 'ngx-tethys/core';
import { THY_SKELETON_CONFIG, ThySkeletonConfigModel } from './skeleton.config';
import { isUndefinedOrNull } from 'ngx-tethys/util';
import { NgStyle } from '@angular/common';

interface Style {
    background?: string;
    animation?: string;
}

/**
 * 骨架屏圆形组件
 * @name thy-skeleton-circle
 * @order 30
 */
@Component({
    selector: 'thy-skeleton-circle',
    host: {
        '[class.thy-skeleton]': 'true',
        '[class.thy-skeleton-circle]': 'true',
        '[style.background]': 'thyPrimaryColor',
        '[style.width]': 'thySize',
        '[style.height]': 'thySize'
    },
    template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles"></div> `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [NgStyle]
})
export class ThySkeletonCircleComponent implements OnInit, OnChanges {
    /**
     * 动画速度
     * @default 1.5s
     */
    @Input() thyAnimatedInterval: string | number;

    /**
     * 骨架尺寸
     * @default 20px
     */
    @Input()
    @InputCssPixel()
    thySize: string | number = 20;

    /**
     * 骨架主色
     * @default #F7F7F7
     */
    @Input() thyPrimaryColor: string;

    /**
     * 骨架次色
     * @default #aaaaaa
     */
    @Input() thySecondaryColor: string;

    /**
     * 是否展示动画
     * @default true
     */
    @Input()
    @InputBoolean()
    thyAnimated: boolean;

    public afterStyles: Style = {};

    constructor(
        @Optional()
        @Inject(THY_SKELETON_CONFIG)
        private skeletonConfigModel: ThySkeletonConfigModel,
        @Optional() private _parent: ThySkeletonComponent
    ) {}

    ngOnInit() {
        const config = {
            ...this.skeletonConfigModel,
            ...(this._parent || {}),
            ...(!isUndefinedOrNull(this._parent?.thyAnimated) && { thyAnimated: this._parent.thyAnimated }) // do it because @InputBoolean() lead to cannot get thyAnimated from _parent inject
        };
        const { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated } = config;
        for (let key in { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated }) {
            this[key] = !isUndefinedOrNull(this[key]) ? this[key] : config[key];
        }
        this.crateAfterStyles();
    }

    crateAfterStyles() {
        this.afterStyles = {
            ...(this.thySecondaryColor && {
                background: `linear-gradient(90deg, ${helpers.hexToRgb(this.thySecondaryColor, 0)}, ${helpers.hexToRgb(
                    this.thySecondaryColor,
                    0.15
                )}, ${helpers.hexToRgb(this.thySecondaryColor, 0)}`
            }),
            animation: ![false, 'false'].includes(this.thyAnimated)
                ? `thy-skeleton-animation ${this.thyAnimatedInterval}s infinite`
                : 'none'
        };
    }

    ngOnChanges(changes: SimpleChanges): void {
        const { thySecondaryColor, thyAnimated, thyAnimatedInterval } = changes;
        if (
            (thySecondaryColor && !thySecondaryColor?.firstChange) ||
            (thyAnimated && !thyAnimated?.firstChange) ||
            (thyAnimatedInterval && !thyAnimatedInterval?.firstChange)
        ) {
            this.crateAfterStyles();
        }
    }
}

1	import {
2	Component,
3	ChangeDetectionStrategy,
4	ViewEncapsulation,
5	Input,
6	OnInit,
7	Optional,
8	OnChanges,
9	SimpleChanges,
10	Inject
11	} from '@angular/core';
12	import { ThySkeletonComponent } from './skeleton.component';
13	import { helpers } from 'ngx-tethys/util';
14	import { InputBoolean, InputCssPixel } from 'ngx-tethys/core';	1✔
15	import { THY_SKELETON_CONFIG, ThySkeletonConfigModel } from './skeleton.config';
16	import { isUndefinedOrNull } from 'ngx-tethys/util';	×
17	import { NgStyle } from '@angular/common';	×
18		×
19	interface Style {	×
20	background?: string;
21	animation?: string;
22	}	×
23
24	/**	×
25	* 骨架屏圆形组件	×
26	* @name thy-skeleton-circle
27	* @order 30	×
28	*/	×
29	@Component({	×
30	selector: 'thy-skeleton-circle',
31	host: {	×
32	'[class.thy-skeleton]': 'true',
33	'[class.thy-skeleton-circle]': 'true',
34	'[style.background]': 'thyPrimaryColor',	×
35	'[style.width]': 'thySize',	×
36	'[style.height]': 'thySize'
37	},
38	template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles"></div> `,	×
39	changeDetection: ChangeDetectionStrategy.OnPush,
40	encapsulation: ViewEncapsulation.None,
41	standalone: true,
42	imports: [NgStyle]
43	})
44	export class ThySkeletonCircleComponent implements OnInit, OnChanges {	×
45	/**	×
46	* 动画速度
47	* @default 1.5s
48	*/	×
49	@Input() thyAnimatedInterval: string \| number;
50
51	/**	1✔
52	* 骨架尺寸
53	* @default 20px
54	*/
55	@Input()	1✔
56	@InputCssPixel()
57	thySize: string \| number = 20;
58
59	/**
60	* 骨架主色
61	* @default #F7F7F7
62	*/
63	@Input() thyPrimaryColor: string;	1✔
64
65	/**
66	* 骨架次色
67	* @default #aaaaaa	1✔
68	*/
69	@Input() thySecondaryColor: string;
70
71	/**	1✔
72	* 是否展示动画
73	* @default true
74	*/
75	@Input()
76	@InputBoolean()
77	thyAnimated: boolean;
78
79	public afterStyles: Style = {};
80
81	constructor(
82	@Optional()
83	@Inject(THY_SKELETON_CONFIG)
84	private skeletonConfigModel: ThySkeletonConfigModel,
85	@Optional() private _parent: ThySkeletonComponent
86	) {}
87
88	ngOnInit() {
89	const config = {
90	...this.skeletonConfigModel,
91	...(this._parent \|\| {}),
92	...(!isUndefinedOrNull(this._parent?.thyAnimated) && { thyAnimated: this._parent.thyAnimated }) // do it because @InputBoolean() lead to cannot get thyAnimated from _parent inject
93	};
94	const { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated } = config;
95	for (let key in { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated }) {
96	this[key] = !isUndefinedOrNull(this[key]) ? this[key] : config[key];
97	}
98	this.crateAfterStyles();
99	}
100
101	crateAfterStyles() {
102	this.afterStyles = {
103	...(this.thySecondaryColor && {
104	background: `linear-gradient(90deg, ${helpers.hexToRgb(this.thySecondaryColor, 0)}, ${helpers.hexToRgb(
105	this.thySecondaryColor,
106	0.15
107	)}, ${helpers.hexToRgb(this.thySecondaryColor, 0)}`
108	}),
109	animation: ![false, 'false'].includes(this.thyAnimated)
110	? `thy-skeleton-animation ${this.thyAnimatedInterval}s infinite`
111	: 'none'
112	};
113	}
114
115	ngOnChanges(changes: SimpleChanges): void {
116	const { thySecondaryColor, thyAnimated, thyAnimatedInterval } = changes;
117	if (
118	(thySecondaryColor && !thySecondaryColor?.firstChange) \|\|
119	(thyAnimated && !thyAnimated?.firstChange) \|\|
120	(thyAnimatedInterval && !thyAnimatedInterval?.firstChange)
121	) {
122	this.crateAfterStyles();
123	}
124	}
125	}

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