cd64db52-e563-41a3-85f3-a0adb87ce135

Committed 30 Oct 2024 08:03AM UTC coverage: 90.402% (-0.04%) from 90.438%

Build # cd64db52-e563-41a3-85f3-a0adb87ce135

Build Type

push

circleci

Committed by

web-flow

Commit Message

refactor: refactor constructor to the inject function (#3222)

Run Details

5503 of 6730 branches covered (81.77%)

Branch coverage included in aggregate %.

422 of 429 new or added lines in 170 files covered. (98.37%)

344 existing lines in 81 files now uncovered.

13184 of 13941 relevant lines covered (94.57%)

997.19 hits per line

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

93.68

/src/switch/switch.component.ts

import { NgClass } from '@angular/common';
import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    EventEmitter,
    forwardRef,
    Input,
    OnInit,
    Output,
    ViewChild,
    inject
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { TabIndexDisabledControlValueAccessorMixin } from 'ngx-tethys/core';
import { coerceBooleanProperty } from 'ngx-tethys/util';

/**
 * 开关组件
 * @name thy-switch
 * @order 10
 */
@Component({
    selector: 'thy-switch',
    templateUrl: './switch.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ThySwitch),
            multi: true
        }
    ],
    standalone: true,
    imports: [NgClass],
    host: {
        class: 'thy-switch',
        '[class.thy-switch-xs]': 'size === "xs"',
        '[class.thy-switch-sm]': 'size === "sm"'
    }
})
export class ThySwitch extends TabIndexDisabledControlValueAccessorMixin implements OnInit, ControlValueAccessor {
    cdr = inject(ChangeDetectorRef);

    public model: boolean;

    public type?: string = 'primary';

    public size?: string = '';

    public disabled?: boolean = false;

    public loading: boolean = false;

    public classNames: string[];

    public typeArray: string[] = ['primary', 'info', 'warning', 'danger'];

    public sizeArray: string[] = ['', 'sm', 'xs'];

    public loadingCircle: {
        viewBox?: string;
        cx?: number;
        cy?: number;
        r?: number;
        dasharray?: string;
    } = {};

    private initialized = false;

    private loadingInitialized = false;

    private isDisabledFirstChange = true;

    @ViewChild('switch', { static: true }) switchElementRef: ElementRef;

    /**
     * 类型，目前分为: 'primary' |'info' | 'warning' | 'danger'
     */
    @Input()
    set thyType(value: string) {
        if (!this.typeArray.includes(value)) {
            value = 'primary';
        }
        this.type = value;
        if (this.initialized) {
            this.setClassNames();
        }
    }

    /**
     * 大小
     * @type xs | sm | md
     * @default md
     */
    @Input()
    set thySize(value: string) {
        if (!this.sizeArray.includes(value)) {
            value = '';
        }
        this.size = value;
        if (this.initialized) {
            this.setClassNames();
        }

        if (this.loadingInitialized) {
            this.setLoadingCircle();
        }
    }

    /**
     * 是否属于禁用状态
     */
    @Input({ transform: coerceBooleanProperty })
    override set thyDisabled(value: boolean) {
        this.disabled = value;
        this.setClassNames();
    }
    override get thyDisabled(): boolean {
        return this.disabled;
    }

    /**
     * 是否加载中
     */
    @Input({ transform: coerceBooleanProperty }) set thyLoading(value: boolean) {
        this.loading = value;
        if (this.initialized) {
            this.setClassNames();
        }

        if (this.loading && !this.loadingInitialized) {
            this.setLoadingCircle();
            this.loadingInitialized = true;
        }
    }

    /**
     * 数据变化的回调事件，即将被弃用，请使用 ngModelChange
     * @deprecated
     */
    @Output() thyChange: EventEmitter<Event> = new EventEmitter<Event>();

    constructor() {
        super();
    }

    ngOnInit() {
        this.setClassNames();
        this.initialized = true;
    }

    public onModelChange: Function = () => {};

    public onModelTouched: Function = () => {};

    writeValue(value: boolean) {
        this.model = value;
        this.cdr.markForCheck();
        // this.setClassNames();
    }

    registerOnChange(fn: Function): void {
        this.onModelChange = fn;
    }

    registerOnTouched(fn: Function): void {
        this.onModelTouched = fn;
    }

    setDisabledState(isDisabled: boolean): void {
        this.disabled = (this.isDisabledFirstChange && this.thyDisabled) || isDisabled;
        this.isDisabledFirstChange = false;
        this.setClassNames();
    }

    toggle(event: Event) {
        this.model = !this.model;
        this.onModelChange(this.model);
        this.onModelTouched();
        this.thyChange.emit(event);
    }

    setClassNames() {
        this.classNames = [`thy-switch-${this.type}`];
        if (this.size) {
            this.classNames.push(`thy-switch-${this.size}`);
        }
        if (this.disabled || this.loading) {
            this.classNames.push(`thy-switch-disabled`);
            if (this.model) {
                this.classNames.push(`thy-switch-disabled-true`);
            }
        }
        this.cdr.markForCheck();
    }

    setLoadingCircle() {
        const svgSize = {
            ['xs']: 12,
            ['sm']: 16,
            ['']: 20
        };

        const circleSize = svgSize[this.size];
        const centerPoint = circleSize / 2;
        const r = circleSize / 4;

        this.loadingCircle = {
            viewBox: `0 0 ${circleSize} ${circleSize}`,
            cx: centerPoint,
            cy: centerPoint,
            r: r,
            dasharray: `${2 * Math.PI * r * 0.75} ${2 * Math.PI * r * 0.25}`
        };
        this.cdr.markForCheck();
    }
}

1	import { NgClass } from '@angular/common';
2	import {
3	ChangeDetectionStrategy,
4	ChangeDetectorRef,
5	Component,
6	ElementRef,
7	EventEmitter,
8	forwardRef,
9	Input,
10	OnInit,
11	Output,
12	ViewChild,
13	inject	1✔
14	} from '@angular/core';
15	import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';	8✔
16	import { TabIndexDisabledControlValueAccessorMixin } from 'ngx-tethys/core';	4✔
17	import { coerceBooleanProperty } from 'ngx-tethys/util';
18		8✔
19	/**	8✔
20	* 开关组件	3✔
21	* @name thy-switch
22	* @order 10
23	*/
24	@Component({	6!
UNCOV 25	selector: 'thy-switch',	×
26	templateUrl: './switch.component.html',
27	changeDetection: ChangeDetectionStrategy.OnPush,	6✔
28	providers: [	6✔
29	{	1✔
30	provide: NG_VALUE_ACCESSOR,
31	useExisting: forwardRef(() => ThySwitch),	6!
UNCOV 32	multi: true	×
33	}
34	],
35	standalone: true,
36	imports: [NgClass],	7✔
37	host: {	7✔
38	class: 'thy-switch',
39	'[class.thy-switch-xs]': 'size === "xs"',
40	'[class.thy-switch-sm]': 'size === "sm"'	706✔
41	}
42	})
43	export class ThySwitch extends TabIndexDisabledControlValueAccessorMixin implements OnInit, ControlValueAccessor {	6✔
44	cdr = inject(ChangeDetectorRef);	6✔
45		1✔
46	public model: boolean;
47		6✔
48	public type?: string = 'primary';	1✔
49		1✔
50	public size?: string = '';
51
52	public disabled?: boolean = false;
53		327✔
54	public loading: boolean = false;	327✔
55		327✔
56	public classNames: string[];	327✔
57		327✔
58	public typeArray: string[] = ['primary', 'info', 'warning', 'danger'];	327✔
59		327✔
60	public sizeArray: string[] = ['', 'sm', 'xs'];	327✔
61		327✔
62	public loadingCircle: {	327✔
63	viewBox?: string;	327✔
64	cx?: number;	327✔
65	cy?: number;	327✔
66	r?: number;	327✔
67	dasharray?: string;	327✔
68	} = {};
69
70	private initialized = false;	323✔
71		323✔
72	private loadingInitialized = false;
73
74	private isDisabledFirstChange = true;	646✔
75		646✔
76	@ViewChild('switch', { static: true }) switchElementRef: ElementRef;
77
78	/**
79	* 类型，目前分为: 'primary' \|'info' \| 'warning' \| 'danger'	323✔
80	*/
81	@Input()
82	set thyType(value: string) {	323✔
83	if (!this.typeArray.includes(value)) {
84	value = 'primary';
85	}	328✔
86	this.type = value;	328✔
87	if (this.initialized) {	328✔
88	this.setClassNames();
89	}
90	}	1✔
91		1✔
92	/**	1✔
93	* 大小	1✔
94	* @type xs \| sm \| md
95	* @default md
96	*/	663✔
97	@Input()	663✔
98	set thySize(value: string) {	4✔
99	if (!this.sizeArray.includes(value)) {
100	value = '';	663✔
101	}	8✔
102	this.size = value;	8!
UNCOV 103	if (this.initialized) {	×
104	this.setClassNames();
105	}
106		663✔
107	if (this.loadingInitialized) {
108	this.setLoadingCircle();
109	}	1✔
110	}
111
112	/**
113	* 是否属于禁用状态
114	*/	1✔
115	@Input({ transform: coerceBooleanProperty })	1✔
116	override set thyDisabled(value: boolean) {	1✔
117	this.disabled = value;	1✔
118	this.setClassNames();
119	}
120	override get thyDisabled(): boolean {
121	return this.disabled;
122	}
123
124	/**	1✔
125	* 是否加载中
126	*/	1✔
127	@Input({ transform: coerceBooleanProperty }) set thyLoading(value: boolean) {	1✔
128	this.loading = value;
129	if (this.initialized) {
130	this.setClassNames();
131	}
132
133	if (this.loading && !this.loadingInitialized) {
134	this.setLoadingCircle();
135	this.loadingInitialized = true;
136	}	1✔
137	}
138
139	/**
140	* 数据变化的回调事件，即将被弃用，请使用 ngModelChange
141	* @deprecated
142	*/
143	@Output() thyChange: EventEmitter<Event> = new EventEmitter<Event>();
144		327✔
145	constructor() {
146	super();
147	}
148
149	ngOnInit() {
150	this.setClassNames();
151	this.initialized = true;
152	}
153
154	public onModelChange: Function = () => {};
155
156	public onModelTouched: Function = () => {};
157
158	writeValue(value: boolean) {
159	this.model = value;
160	this.cdr.markForCheck();
161	// this.setClassNames();
162	}
163
164	registerOnChange(fn: Function): void {
165	this.onModelChange = fn;
166	}
167
168	registerOnTouched(fn: Function): void {
169	this.onModelTouched = fn;
170	}
171
172	setDisabledState(isDisabled: boolean): void {
173	this.disabled = (this.isDisabledFirstChange && this.thyDisabled) \|\| isDisabled;
174	this.isDisabledFirstChange = false;
175	this.setClassNames();
176	}
177
178	toggle(event: Event) {
179	this.model = !this.model;
180	this.onModelChange(this.model);
181	this.onModelTouched();
182	this.thyChange.emit(event);
183	}
184
185	setClassNames() {
186	this.classNames = [`thy-switch-${this.type}`];
187	if (this.size) {
188	this.classNames.push(`thy-switch-${this.size}`);
189	}
190	if (this.disabled \|\| this.loading) {
191	this.classNames.push(`thy-switch-disabled`);
192	if (this.model) {
193	this.classNames.push(`thy-switch-disabled-true`);
194	}
195	}
196	this.cdr.markForCheck();
197	}
198
199	setLoadingCircle() {
200	const svgSize = {
201	['xs']: 12,
202	['sm']: 16,
203	['']: 20
204	};
205
206	const circleSize = svgSize[this.size];
207	const centerPoint = circleSize / 2;
208	const r = circleSize / 4;
209
210	this.loadingCircle = {
211	viewBox: `0 0 ${circleSize} ${circleSize}`,
212	cx: centerPoint,
213	cy: centerPoint,
214	r: r,
215	dasharray: `${2 * Math.PI * r * 0.75} ${2 * Math.PI * r * 0.25}`
216	};
217	this.cdr.markForCheck();
218	}
219	}

atinc / ngx-tethys / cd64db52-e563-41a3-85f3-a0adb87ce135

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