d9ae709b-3c27-4b69-b125-b8b80b54f90b

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

import { NgClass } from '@angular/common';
import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    EventEmitter,
    forwardRef,
    Input,
    OnChanges,
    OnInit,
    Output,
    SimpleChanges,
    ViewChild
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { InputBoolean } 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],
    host: {
        class: 'thy-switch',
        '[class.thy-switch-xs]': 'size === "xs"',
        '[class.thy-switch-sm]': 'size === "sm"'
    }
})
export class ThySwitchComponent implements OnInit, ControlValueAccessor, OnChanges {
    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'];

    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() thyDisabled: boolean = false;

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

    constructor(public cdr: ChangeDetectorRef) {}

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

    ngOnChanges(changes: SimpleChanges) {
        // 兼容降级后的Switch，使用onChanges
        if (changes.thyDisabled) {
            const value = changes.thyDisabled.currentValue;
            this.disabled = helpers.isBoolean(value) ? Boolean(value) : value === 'true' || value === '1';
            this.setClassNames();
        }
    }

    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 { helpers } from 'ngx-tethys/util';
2
3	import { NgClass } from '@angular/common';
4	import {
5	ChangeDetectionStrategy,
6	ChangeDetectorRef,
7	Component,
8	ElementRef,
9	EventEmitter,
10	forwardRef,
11	Input,
12	OnChanges,
13	OnInit,
14	Output,	1✔
15	SimpleChanges,
16	ViewChild	×
17	} from '@angular/core';	×
18	import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
19	import { InputBoolean } from 'ngx-tethys/core';	×
20		×
21	/**	×
22	* 开关组件
23	* @name thy-switch
24	* @order 10
25	*/	×
26	@Component({	×
27	selector: 'thy-switch',
28	templateUrl: './switch.component.html',	×
29	changeDetection: ChangeDetectionStrategy.OnPush,	×
30	providers: [	×
31	{
32	provide: NG_VALUE_ACCESSOR,
33	useExisting: forwardRef(() => ThySwitchComponent),
34	multi: true	×
35	}	×
36	],	×
37	standalone: true,	×
38	imports: [NgClass],	×
39	host: {	×
40	class: 'thy-switch',	×
41	'[class.thy-switch-xs]': 'size === "xs"',	×
42	'[class.thy-switch-sm]': 'size === "sm"'	×
43	}	×
44	})	×
45	export class ThySwitchComponent implements OnInit, ControlValueAccessor, OnChanges {
46	public model: boolean;
47		×
48	public type?: String = 'primary';	×
49
50	public size?: String = '';
51
52	public disabled?: Boolean = false;	×
53		×
54	public classNames: string[];	×
55		×
56	public typeArray: string[] = ['primary', 'info', 'warning', 'danger'];
57
58	public sizeArray: string[] = ['', 'sm', 'xs'];
59		×
60	private initialized = false;	×
61
62	@ViewChild('switch', { static: true }) switchElementRef: ElementRef;
63
64	/**	×
65	* 类型，目前分为: 'primary' \|'info' \| 'warning' \| 'danger'
66	*/
67	@Input()	×
68	set thyType(value: string) {
69	if (!this.typeArray.includes(value)) {
70	value = 'primary';	×
71	}	×
72	this.type = value;
73	if (this.initialized) {
74	this.setClassNames();	×
75	}	×
76	}	×
77		×
78	/**
79	* 大小
80	* @type xs \| sm \| md	×
81	* @default md	×
82	*/	×
83	@Input()
84	set thySize(value: string) {	×
85	if (!this.sizeArray.includes(value)) {	×
86	value = '';	×
87	}	×
88	this.size = value;
89	if (this.initialized) {
90	this.setClassNames();
91	}	1✔
92	}
93
94	/**	1✔
95	* 是否属于禁用状态
96	*/
97	@Input() @InputBoolean() thyDisabled: boolean = false;
98
99	/**
100	* 数据变化的回调事件，即将被弃用，请使用 ngModelChange
101	* @deprecated
102	*/	1✔
103	@Output() thyChange: EventEmitter<Event> = new EventEmitter<Event>();
104
105	constructor(public cdr: ChangeDetectorRef) {}
106		1✔
107	ngOnInit() {
108	this.setClassNames();
109	this.initialized = true;
110	}
111
112	ngOnChanges(changes: SimpleChanges) {
113	// 兼容降级后的Switch，使用onChanges
114	if (changes.thyDisabled) {	×
115	const value = changes.thyDisabled.currentValue;
116	this.disabled = helpers.isBoolean(value) ? Boolean(value) : value === 'true' \|\| value === '1';
117	this.setClassNames();
118	}
119	}
120
121	public onModelChange: Function = () => {};
122
123	public onModelTouched: Function = () => {};
124
125	writeValue(value: boolean) {
126	this.model = value;
127	this.cdr.markForCheck();
128	// this.setClassNames();
129	}
130
131	registerOnChange(fn: Function): void {
132	this.onModelChange = fn;
133	}
134
135	registerOnTouched(fn: Function): void {
136	this.onModelTouched = fn;
137	}
138
139	setDisabledState(isDisabled: Boolean) {
140	this.disabled = isDisabled;
141	this.setClassNames();
142	}
143
144	toggle(event: Event) {
145	this.model = !this.model;
146	this.onModelChange(this.model);
147	this.onModelTouched();
148	this.thyChange.emit(event);
149	}
150
151	setClassNames() {
152	this.classNames = [`thy-switch-${this.type}`];
153	if (this.size) {
154	this.classNames.push(`thy-switch-${this.size}`);
155	}
156	if (this.disabled) {
157	this.classNames.push(`thy-switch-disabled`);
158	if (this.model) {
159	this.classNames.push(`thy-switch-disabled-true`);
160	}
161	}
162	}
163	}

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