09185295-1759-4043-ba2f-a4daa80c72fd

Committed 16 Nov 2023 08:14AM UTC coverage: 90.204% (+0.03%) from 90.171%

Build # 09185295-1759-4043-ba2f-a4daa80c72fd

Build Type

push

circleci

Committed by

minlovehua

Commit Message

feat(switch): loading demo

Run Details

5269 of 6504 branches covered (0.0%)

Branch coverage included in aggregate %.

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

47 existing lines in 3 files now uncovered.

13185 of 13954 relevant lines covered (94.49%)

977.48 hits per line

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

94.2

/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';
import { ThyIconComponent } from 'ngx-tethys/icon';

/**
 * 开关组件
 * @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, ThyIconComponent],
    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 classNames: string[];

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

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

    public svgSize = {
        ['xs']: 12,
        ['sm']: 16,
        ['']: 20
    };

    get loadingCircle() {
        const circleSize = this.svgSize[this.size];
        const centerPoint = circleSize / 2;
        const r = circleSize / 4;

        return {
            viewBox: `0 0 ${circleSize} ${circleSize}`,
            cx: centerPoint,
            cy: centerPoint,
            r: r,
            dasharray: `${2 * Math.PI * r * 0.75} ${2 * Math.PI * r * 0.25}`
        };
    }

    private initialized = false;

    @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() thyLoading = false;

    /**
     * 是否属于禁用状态
     */
    @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.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) {
        this.disabled = isDisabled;
        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`);
            }
        }
    }
}

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

atinc / ngx-tethys / 09185295-1759-4043-ba2f-a4daa80c72fd

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