c0ef8457-a839-451f-8b72-80fd73106231

Committed 02 Apr 2024 02:27PM UTC coverage: 90.524% (-0.06%) from 90.585%

Build # c0ef8457-a839-451f-8b72-80fd73106231

Build Type

Pull #3062

circleci

Committed by

minlovehua

Commit Message

refactor(all): use the transform attribute of @Input() instead of @InputBoolean() and @InputNumber()

Pull Request Pull Request #3062: refactor(all): use the transform attribute of @input() instead of @InputBoolean() and @InputNumber()

Run Details

4987 of 6108 branches covered (81.65%)

Branch coverage included in aggregate %.

217 of 223 new or added lines in 82 files covered. (97.31%)

202 existing lines in 53 files now uncovered.

12246 of 12929 relevant lines covered (94.72%)

1055.59 hits per line

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

93.48

/src/input/input.component.ts

import { take } from 'rxjs/operators';

import { NgIf, NgTemplateOutlet } from '@angular/common';
import {
    booleanAttribute,
    Component,
    ContentChild,
    ElementRef,
    EventEmitter,
    forwardRef,
    Input,
    NgZone,
    OnInit,
    Output,
    TemplateRef,
    ViewChild,
    ViewEncapsulation
} from '@angular/core';
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ThyIcon } from 'ngx-tethys/icon';
import { ThyAutofocusDirective } from 'ngx-tethys/shared';
import { ThyInputDirective, ThyInputSize } from './input.directive';

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => ThyInput),
    multi: true
};

const noop = () => {};

const password = 'password';

/**
 * 内部集成输入框组件，建议 thy-input-group 和 thyInput 组合使用
 * @name thy-input
 * @order 50
 */
@Component({
    selector: 'thy-input',
    templateUrl: './input.component.html',
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
    encapsulation: ViewEncapsulation.None,
    host: {
        class: 'thy-input form-control',
        '[class.form-control-active]': 'focused',
        '[class.disabled]': 'disabled'
    },
    standalone: true,
    imports: [NgIf, NgTemplateOutlet, ThyInputDirective, ThyAutofocusDirective, FormsModule, ThyIcon]
})
export class ThyInput implements ControlValueAccessor, OnInit {
    /**
     * Placeholder
     */
    @Input() placeholder = '';

    /**
     * 输入框大小
     * @type 'xs' | 'sm' | 'md' | 'default' | 'lg'
     * @default default
     */
    @Input() thySize: ThyInputSize;

    /**
     * 是否自动聚焦
     */
    @Input({ transform: booleanAttribute }) thyAutofocus = false;

    /**
     * 输入框类型
     * @type 'number' | 'input'
     */
    @Input()
    set thyType(value: string) {
        this.type = value;
    }

    /**
     * @deprecated please use thyType
     */
    @Input() type: string;

    /**
     * 输入 Label 文本
     */
    @Input() thyLabelText: string;

    /**
     * 是否只读
     */
    @Input({ transform: booleanAttribute }) readonly = false;

    /**
     * focus 聚焦事件
     */
    @Output() focus: EventEmitter<Event> = new EventEmitter<Event>();

    /**
     * blur 失焦事件
     */
    @Output() blur: EventEmitter<Event> = new EventEmitter<Event>();

    /**
     * 后置模板
     */
    @ContentChild('append') appendTemplate: TemplateRef<any>;

    /**
     * 前置模板
     */
    @ContentChild('prepend') prependTemplate: TemplateRef<any>;

    @ViewChild('eye', { static: true }) eyeTemplate: TemplateRef<any>;

    public _type = 'text';

    public value: string;

    public showLabel: boolean;

    public focused = false;

    public disabled = false;

    private onTouchedCallback: () => void = noop;

    private onChangeCallback: (_: any) => void = noop;

    constructor(private ngZone: NgZone, private elementRef: ElementRef) {}

    ngOnInit() {
        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
            if (this.isPassword(this.type)) {
                this.appendTemplate = this.eyeTemplate;
            }
        });
    }

    writeValue(value: any): void {
        this.value = value;
    }

    registerOnChange(fn: any): void {
        this.onChangeCallback = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouchedCallback = fn;
    }

    setDisabledState?(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }

    onModelChange() {
        this.onChangeCallback(this.value);
    }

    onInputFocus(event: Event) {
        this.focused = true;
        this.showLabel = true;
        this.focus.emit(event);
    }

    onInputBlur(event: Event) {
        this.onTouchedCallback();
        if (this.elementRef.nativeElement.onblur) {
            this.elementRef.nativeElement.onblur(event);
        }
        this.focused = false;
        this.showLabel = false;
        this.blur.emit(event);
    }

    isPassword(value: string) {
        return value === password;
    }

    togglePasswordType() {
        this.type = this.isPassword(this.type) ? 'text' : 'password';
    }
}

1	import { take } from 'rxjs/operators';
2
3	import { NgIf, NgTemplateOutlet } from '@angular/common';
4	import {
5	booleanAttribute,
6	Component,
7	ContentChild,
8	ElementRef,
9	EventEmitter,
10	forwardRef,	1✔
11	Input,
12	NgZone,	28✔
13	OnInit,
14	Output,
15	TemplateRef,	1✔
16	ViewChild,	1✔
17	ViewEncapsulation
18	} from '@angular/core';
19	import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
20	import { ThyIcon } from 'ngx-tethys/icon';
21	import { ThyAutofocusDirective } from 'ngx-tethys/shared';
22	import { ThyInputDirective, ThyInputSize } from './input.directive';	1✔
23
24	export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {	29✔
25	provide: NG_VALUE_ACCESSOR,
26	useExisting: forwardRef(() => ThyInput),
27	multi: true	42✔
28	};	42✔
29		42✔
30	const noop = () => {};	42✔
31		42✔
32	const password = 'password';	42✔
33		42✔
34	/**	42✔
35	* 内部集成输入框组件，建议 thy-input-group 和 thyInput 组合使用	42✔
36	* @name thy-input	42✔
37	* @order 50	42✔
38	*/	42✔
39	@Component({
40	selector: 'thy-input',
41	templateUrl: './input.component.html',	42✔
42	providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],	42✔
43	encapsulation: ViewEncapsulation.None,	14✔
44	host: {
45	class: 'thy-input form-control',
46	'[class.form-control-active]': 'focused',
47	'[class.disabled]': 'disabled'
48	},	56✔
49	standalone: true,
50	imports: [NgIf, NgTemplateOutlet, ThyInputDirective, ThyAutofocusDirective, FormsModule, ThyIcon]
51	})	28✔
52	export class ThyInput implements ControlValueAccessor, OnInit {
53	/**
54	* Placeholder	28✔
55	*/
56	@Input() placeholder = '';
57		29✔
58	/**
59	* 输入框大小
UNCOV 60	* @type 'xs' \| 'sm' \| 'md' \| 'default' \| 'lg'	×
61	* @default default
62	*/
63	@Input() thySize: ThyInputSize;	1✔
64		1✔
65	/**	1✔
66	* 是否自动聚焦
67	*/
68	@Input({ transform: booleanAttribute }) thyAutofocus = false;	1✔
69		1!
UNCOV 70	/**	×
71	* 输入框类型
72	* @type 'number' \| 'input'	1✔
73	*/	1✔
74	@Input()	1✔
75	set thyType(value: string) {
76	this.type = value;
77	}	68✔
78
79	/**
80	* @deprecated please use thyType	2✔
81	*/
82	@Input() type: string;	1✔
83
84	/**
85	* 输入 Label 文本
86	*/	1✔
87	@Input() thyLabelText: string;
88
89	/**
90	* 是否只读
91	*/
92	@Input({ transform: booleanAttribute }) readonly = false;
93
94	/**
95	* focus 聚焦事件
96	*/
97	@Output() focus: EventEmitter<Event> = new EventEmitter<Event>();
98
99	/**
100	* blur 失焦事件
101	*/	1✔
102	@Output() blur: EventEmitter<Event> = new EventEmitter<Event>();
103
104	/**
105	* 后置模板
106	*/
107	@ContentChild('append') appendTemplate: TemplateRef<any>;
108
109	/**
110	* 前置模板
111	*/
112	@ContentChild('prepend') prependTemplate: TemplateRef<any>;
113
114	@ViewChild('eye', { static: true }) eyeTemplate: TemplateRef<any>;
115
116	public _type = 'text';
117
118	public value: string;
119
120	public showLabel: boolean;
121
122	public focused = false;
123
124	public disabled = false;
125
126	private onTouchedCallback: () => void = noop;
127
128	private onChangeCallback: (_: any) => void = noop;
129
130	constructor(private ngZone: NgZone, private elementRef: ElementRef) {}
131
132	ngOnInit() {
133	this.ngZone.onStable.pipe(take(1)).subscribe(() => {
134	if (this.isPassword(this.type)) {
135	this.appendTemplate = this.eyeTemplate;
136	}
137	});
138	}
139
140	writeValue(value: any): void {
141	this.value = value;
142	}
143
144	registerOnChange(fn: any): void {
145	this.onChangeCallback = fn;
146	}
147
148	registerOnTouched(fn: any): void {
149	this.onTouchedCallback = fn;
150	}
151
152	setDisabledState?(isDisabled: boolean): void {
153	this.disabled = isDisabled;
154	}
155
156	onModelChange() {
157	this.onChangeCallback(this.value);
158	}
159
160	onInputFocus(event: Event) {
161	this.focused = true;
162	this.showLabel = true;
163	this.focus.emit(event);
164	}
165
166	onInputBlur(event: Event) {
167	this.onTouchedCallback();
168	if (this.elementRef.nativeElement.onblur) {
169	this.elementRef.nativeElement.onblur(event);
170	}
171	this.focused = false;
172	this.showLabel = false;
173	this.blur.emit(event);
174	}
175
176	isPassword(value: string) {
177	return value === password;
178	}
179
180	togglePasswordType() {
181	this.type = this.isPassword(this.type) ? 'text' : 'password';
182	}
183	}

atinc / ngx-tethys / c0ef8457-a839-451f-8b72-80fd73106231

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