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-rectangle
 * @order 20
 */
@Component({
    selector: 'thy-skeleton-rectangle',
    host: {
        '[class.thy-skeleton]': 'true',
        '[class.thy-skeleton-rectangle]': 'true',
        '[style.background]': 'thyPrimaryColor',
        '[style.width]': 'thyRowWidth',
        '[style.height]': 'thyRowHeight',
        '[style.borderRadius]': 'thyBorderRadius'
    },
    template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles"></div> `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [NgStyle]
})
export class ThySkeletonRectangleComponent implements OnInit, OnChanges {
    /**
     * 是否开启动画
     * @default false
     */
    @Input()
    @InputBoolean()
    thyAnimated: boolean;

    /**
     * 动画速度
     * @default 1.5s
     */
    @Input() thyAnimatedInterval: number;

    /**
     * 骨架边框圆角
     * @default 4px
     */
    @Input()
    @InputCssPixel()
    thyBorderRadius: string | number;

    /**
     * 骨架宽度
     * @default 100%
     */
    @Input()
    @InputCssPixel()
    thyRowWidth: string | number;

    /**
     * 骨架高度
     * @default 20px
     */
    @Input()
    @InputCssPixel()
    thyRowHeight: string | number;

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

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

    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 })
        };
        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-rectangle	×
27	* @order 20	×
28	*/	×
29	@Component({
30	selector: 'thy-skeleton-rectangle',	×
31	host: {
32	'[class.thy-skeleton]': 'true',
33	'[class.thy-skeleton-rectangle]': 'true',	×
34	'[style.background]': 'thyPrimaryColor',	×
35	'[style.width]': 'thyRowWidth',
36	'[style.height]': 'thyRowHeight',
37	'[style.borderRadius]': 'thyBorderRadius'	×
38	},
39	template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles"></div> `,
40	changeDetection: ChangeDetectionStrategy.OnPush,
41	encapsulation: ViewEncapsulation.None,
42	standalone: true,
43	imports: [NgStyle]	×
44	})	×
45	export class ThySkeletonRectangleComponent implements OnInit, OnChanges {
46	/**
47	* 是否开启动画	×
48	* @default false
49	*/
50	@Input()	1✔
51	@InputBoolean()
52	thyAnimated: boolean;
53
54	/**	1✔
55	* 动画速度
56	* @default 1.5s
57	*/
58	@Input() thyAnimatedInterval: number;
59
60	/**
61	* 骨架边框圆角
62	* @default 4px
63	*/
64	@Input()	1✔
65	@InputCssPixel()
66	thyBorderRadius: string \| number;
67
68	/**	1✔
69	* 骨架宽度
70	* @default 100%
71	*/
72	@Input()	1✔
73	@InputCssPixel()
74	thyRowWidth: string \| number;
75
76	/**	1✔
77	* 骨架高度
78	* @default 20px
79	*/
80	@Input()	1✔
81	@InputCssPixel()
82	thyRowHeight: string \| number;
83
84	/**
85	* 骨架主色
86	* @default #F7F7F7
87	*/
88	@Input() thyPrimaryColor: string;
89
90	/**
91	* 骨架次色
92	* @default #aaaaaa
93	*/
94	@Input() thySecondaryColor: string;
95
96	afterStyles: Style = {};
97
98	constructor(
99	@Optional()
100	@Inject(THY_SKELETON_CONFIG)
101	private skeletonConfigModel: ThySkeletonConfigModel,
102	@Optional() private _parent: ThySkeletonComponent
103	) {}
104
105	ngOnInit() {
106	const config = {
107	...this.skeletonConfigModel,
108	...(this._parent \|\| {}),
109	...(!isUndefinedOrNull(this._parent?.thyAnimated) && { thyAnimated: this._parent.thyAnimated })
110	};
111	const { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated } = config;
112
113	for (let key in { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated }) {
114	this[key] = !isUndefinedOrNull(this[key]) ? this[key] : config[key];
115	}
116	this.crateAfterStyles();
117	}
118
119	crateAfterStyles() {
120	this.afterStyles = {
121	...(this.thySecondaryColor && {
122	background: `linear-gradient(90deg, ${helpers.hexToRgb(this.thySecondaryColor, 0)}, ${helpers.hexToRgb(
123	this.thySecondaryColor,
124	0.15
125	)}, ${helpers.hexToRgb(this.thySecondaryColor, 0)}`
126	}),
127	animation: ![false, 'false'].includes(this.thyAnimated)
128	? `thy-skeleton-animation ${this.thyAnimatedInterval}s infinite`
129	: 'none'
130	};
131	}
132
133	ngOnChanges(changes: SimpleChanges): void {
134	const { thySecondaryColor, thyAnimated, thyAnimatedInterval } = changes;
135	if (
136	(thySecondaryColor && !thySecondaryColor?.firstChange) \|\|
137	(thyAnimated && !thyAnimated?.firstChange) \|\|
138	(thyAnimatedInterval && !thyAnimatedInterval?.firstChange)
139	) {
140	this.crateAfterStyles();
141	}
142	}
143	}

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