29cda0e5-5ad7-4f14-84f0-f4a8cb5625d6

Committed 24 Nov 2023 03:10AM UTC coverage: 90.285% (+0.01%) from 90.274%

Build # 29cda0e5-5ad7-4f14-84f0-f4a8cb5625d6

Build Type

Pull #2909

circleci

Committed by

minlovehua

Commit Message

feat(switch): support thyLoading and loading animation #INFR-10495

Pull Request Pull Request #2909: feat(switch): support thyLoading and loading animation #INFR-10495

Run Details

5296 of 6526 branches covered (0.0%)

Branch coverage included in aggregate %.

15 of 15 new or added lines in 1 file covered. (100.0%)

1 existing line in 1 file now uncovered.

13217 of 13979 relevant lines covered (94.55%)

976.16 hits per line

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

95.0

/src/switch/switch.component.ts

import { coerceBooleanProperty } from 'ngx-tethys/util';

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

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

    /**
     * 是否加载中
     */
    @Input() @InputBoolean() set thyLoading(value: boolean) {
        this.loading = coerceBooleanProperty(value);

        this.disabled = this.loading;
        this.setClassNames();
    }

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

    override set thyDisabled(value: boolean) {
        this.disabled = coerceBooleanProperty(value);
        this.setClassNames();
    }

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

    constructor(public cdr: ChangeDetectorRef) {
        super();
    }

    ngOnInit() {
        this.setClassNames();
        this.setLoadingCircle();
        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.classNames.push(`thy-switch-disabled`);
            if (this.model) {
                this.classNames.push(`thy-switch-disabled-true`);
            }
        }
    }

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

atinc / ngx-tethys / 29cda0e5-5ad7-4f14-84f0-f4a8cb5625d6

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