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.94

/src/property-operation/property-operation.component.ts

import {
    AfterContentInit,
    Component,
    ContentChild,
    ElementRef,
    EventEmitter,
    HostBinding,
    Input,
    OnInit,
    Output,
    TemplateRef,
    ViewChild,
    OnDestroy,
    NgZone,
    booleanAttribute
} from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyTranslate } from 'ngx-tethys/core';
import { htmlElementIsEmpty } from 'ngx-tethys/util';
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ThyIcon } from 'ngx-tethys/icon';
import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
import { ThyButtonIcon } from 'ngx-tethys/button';
import { NgTemplateOutlet, NgIf, NgClass } from '@angular/common';

type ThyPropertyOperationTypes = 'primary' | 'success' | 'warning' | 'danger';

/**
 * 属性操作组件
 * @name thy-property-operation
 * @order 10
 */
@Component({
    selector: 'thy-property-operation',
    templateUrl: './property-operation.component.html',
    standalone: true,
    imports: [NgTemplateOutlet, NgIf, NgClass, ThyButtonIcon, ThyFlexibleText, ThyIcon]
})
export class ThyPropertyOperation implements OnInit, AfterContentInit, OnDestroy {
    private initialized = false;

    private hostRenderer = useHostRenderer();

    labelText: string;

    onlyHasTips = false;

    showClose = false;

    type: ThyPropertyOperationTypes;

    icon: string;

    value: string;

    labelHideWhenHasValue = false;

    /**
     * 点击移除图标时的事件回调，此函数只有在thyShowClose为true时才会发生
     */
    @Output() thyOnRemove = new EventEmitter();

    /**
     * 点击事件回调
     */
    @Output() thyClick = new EventEmitter<Event>();

    @HostBinding('class.thy-property-operation') _isPropertyOperation = true;

    @ContentChild('operationIcon') operationIcon: TemplateRef<any>;

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

    /**
     * 属性的 Label 文本
     */
    @Input()
    set thyLabelText(value: string) {
        this.labelText = value;
    }

    /**
     * 属性的值
     */
    @Input()
    set thyValue(value: string) {
        this.value = value;
        this.setOnlyHasTips();
    }

    /**
     * 属性的 Label Translate Key
     */
    @Input()
    set thyLabelTextTranslateKey(value: string) {
        this.labelText = this.thyTranslate.instant(value);
    }

    /**
     * 图标
     */
    @Input()
    set thyIcon(value: string) {
        this.icon = value;
    }

    /**
     * 当有属性值时是否展示移除图标
     * @default false
     */
    @Input({ transform: booleanAttribute })
    set thyShowClose(value: boolean) {
        this.showClose = value;
    }

    // 支持有值时，label不显示
    @Input({ transform: booleanAttribute })
    set thyLabelHasValue(value: boolean) {
        this.labelHideWhenHasValue = !value;
    }

    /**
     * 有值时隐藏 label
     * @default false
     */
    @Input({ transform: booleanAttribute })
    set thyLabelHideWhenHasValue(value: boolean) {
        this.labelHideWhenHasValue = value;
    }

    /**
     * 属性类型
     * @type  danger | primary | success | warning | null
     * @default null
     */
    @Input()
    set thyType(value: ThyPropertyOperationTypes) {
        this.type = value;
        this.setHostClass();
    }

    /**
     * 激活状态
     * @default false
     */
    @HostBinding('class.active')
    @Input({ alias: 'thyActive', transform: booleanAttribute })
    active: boolean;

    /**
     * 禁用操作，添加后property operation中thyClick和thyOnRemove事件将会被禁用
     * @default false
     */
    @HostBinding('class.thy-property-operation-disabled')
    @Input({ alias: 'thyDisabled', transform: booleanAttribute })
    disabled: boolean;

    private destroy$ = new Subject<void>();

    private setHostClass(first = false) {
        if (!this.initialized && !first) {
            return;
        }
        this.hostRenderer.updateClass(this.type ? [`thy-property-operation-${this.type}`] : []);
    }

    private setOnlyHasTips(first = false) {
        if (!this.initialized && !first) {
            return;
        }
        if (this.value) {
            this.onlyHasTips = false;
        } else if (htmlElementIsEmpty(this.contentElement.nativeElement)) {
            this.onlyHasTips = true;
        } else {
            this.onlyHasTips = false;
        }
    }

    constructor(private thyTranslate: ThyTranslate, private elementRef: ElementRef<HTMLElement>, private ngZone: NgZone) {}

    ngOnInit() {
        this.setHostClass(true);

        this.ngZone.runOutsideAngular(() =>
            fromEvent<Event>(this.elementRef.nativeElement, 'click')
                .pipe(takeUntil(this.destroy$))
                .subscribe(event => {
                    if (this.disabled || this.thyClick.observers.length === 0) {
                        return;
                    }

                    this.ngZone.run(() => this.thyClick.emit(event));
                })
        );
    }

    ngAfterContentInit() {
        this.setOnlyHasTips(true);
        this.initialized = true;
    }

    ngOnDestroy(): void {
        this.destroy$.next();
    }

    remove($event: Event) {
        $event.stopPropagation();
        this.thyOnRemove.emit($event);
    }
}

1	import {
2	AfterContentInit,
3	Component,
4	ContentChild,
5	ElementRef,
6	EventEmitter,
7	HostBinding,
8	Input,
9	OnInit,
10	Output,
11	TemplateRef,
12	ViewChild,
13	OnDestroy,
14	NgZone,
15	booleanAttribute
16	} from '@angular/core';
17	import { useHostRenderer } from '@tethys/cdk/dom';
18	import { ThyTranslate } from 'ngx-tethys/core';	1✔
19	import { htmlElementIsEmpty } from 'ngx-tethys/util';
20	import { fromEvent, Subject } from 'rxjs';	36✔
21	import { takeUntil } from 'rxjs/operators';
22	import { ThyIcon } from 'ngx-tethys/icon';
23	import { ThyFlexibleText } from 'ngx-tethys/flexible-text';	11✔
24	import { ThyButtonIcon } from 'ngx-tethys/button';	11✔
25	import { NgTemplateOutlet, NgIf, NgClass } from '@angular/common';
26
UNCOV 27	type ThyPropertyOperationTypes = 'primary' \| 'success' \| 'warning' \| 'danger';	×
28
29	/**
30	* 属性操作组件	23✔
31	* @name thy-property-operation
32	* @order 10
33	*/	11✔
34	@Component({
35	selector: 'thy-property-operation',
36	templateUrl: './property-operation.component.html',	11✔
37	standalone: true,
38	imports: [NgTemplateOutlet, NgIf, NgClass, ThyButtonIcon, ThyFlexibleText, ThyIcon]
UNCOV 39	})	×
40	export class ThyPropertyOperation implements OnInit, AfterContentInit, OnDestroy {
41	private initialized = false;
42		11✔
43	private hostRenderer = useHostRenderer();	11✔
44
45	labelText: string;	11✔
46		46✔
47	onlyHasTips = false;	11✔
48
49	showClose = false;	35✔
50
51	type: ThyPropertyOperationTypes;	11✔
52		46✔
53	icon: string;	11✔
54
55	value: string;	35✔
56		11✔
57	labelHideWhenHasValue = false;
58		24!
59	/**	24✔
60	* 点击移除图标时的事件回调，此函数只有在thyShowClose为true时才会发生
61	*/
UNCOV 62	@Output() thyOnRemove = new EventEmitter();	×
63
64	/**
65	* 点击事件回调
66	*/	36✔
67	@Output() thyClick = new EventEmitter<Event>();	36✔
68		36✔
69	@HostBinding('class.thy-property-operation') _isPropertyOperation = true;	36✔
70		36✔
71	@ContentChild('operationIcon') operationIcon: TemplateRef<any>;	36✔
72		36✔
73	@ViewChild('contentElement', { static: true }) contentElement: ElementRef;	36✔
74		36✔
75	/**	36✔
76	* 属性的 Label 文本	36✔
77	*/	36✔
78	@Input()
79	set thyLabelText(value: string) {
80	this.labelText = value;	35✔
81	}	35✔
82
83	/**
84	* 属性的值	29✔
85	*/	27✔
86	@Input()
87	set thyValue(value: string) {	2✔
88	this.value = value;
89	this.setOnlyHasTips();
90	}
91		35✔
92	/**	35✔
93	* 属性的 Label Translate Key
94	*/
95	@Input()	36✔
96	set thyLabelTextTranslateKey(value: string) {
97	this.labelText = this.thyTranslate.instant(value);
98	}	1✔
99		1✔
100	/**
101	* 图标	1✔
102	*/
103	@Input()
104	set thyIcon(value: string) {
105	this.icon = value;
106	}	1✔
107
108	/**
109	* 当有属性值时是否展示移除图标
110	* @default false
111	*/
112	@Input({ transform: booleanAttribute })
113	set thyShowClose(value: boolean) {
114	this.showClose = value;
115	}
116
117	// 支持有值时，label不显示
118	@Input({ transform: booleanAttribute })
119	set thyLabelHasValue(value: boolean) {
120	this.labelHideWhenHasValue = !value;
121	}
122
123	/**
124	* 有值时隐藏 label	1✔
125	* @default false
126	*/
127	@Input({ transform: booleanAttribute })
128	set thyLabelHideWhenHasValue(value: boolean) {
129	this.labelHideWhenHasValue = value;
130	}
131
132	/**
133	* 属性类型
134	* @type danger \| primary \| success \| warning \| null
135	* @default null
136	*/
137	@Input()
138	set thyType(value: ThyPropertyOperationTypes) {
139	this.type = value;
140	this.setHostClass();
141	}
142
143	/**
144	* 激活状态
145	* @default false
146	*/
147	@HostBinding('class.active')
148	@Input({ alias: 'thyActive', transform: booleanAttribute })
149	active: boolean;
150
151	/**
152	* 禁用操作，添加后property operation中thyClick和thyOnRemove事件将会被禁用
153	* @default false
154	*/
155	@HostBinding('class.thy-property-operation-disabled')
156	@Input({ alias: 'thyDisabled', transform: booleanAttribute })
157	disabled: boolean;
158
159	private destroy$ = new Subject<void>();
160
161	private setHostClass(first = false) {
162	if (!this.initialized && !first) {
163	return;
164	}
165	this.hostRenderer.updateClass(this.type ? [`thy-property-operation-${this.type}`] : []);
166	}
167
168	private setOnlyHasTips(first = false) {
169	if (!this.initialized && !first) {
170	return;
171	}
172	if (this.value) {
173	this.onlyHasTips = false;
174	} else if (htmlElementIsEmpty(this.contentElement.nativeElement)) {
175	this.onlyHasTips = true;
176	} else {
177	this.onlyHasTips = false;
178	}
179	}
180
181	constructor(private thyTranslate: ThyTranslate, private elementRef: ElementRef<HTMLElement>, private ngZone: NgZone) {}
182
183	ngOnInit() {
184	this.setHostClass(true);
185
186	this.ngZone.runOutsideAngular(() =>
187	fromEvent<Event>(this.elementRef.nativeElement, 'click')
188	.pipe(takeUntil(this.destroy$))
189	.subscribe(event => {
190	if (this.disabled \|\| this.thyClick.observers.length === 0) {
191	return;
192	}
193
194	this.ngZone.run(() => this.thyClick.emit(event));
195	})
196	);
197	}
198
199	ngAfterContentInit() {
200	this.setOnlyHasTips(true);
201	this.initialized = true;
202	}
203
204	ngOnDestroy(): void {
205	this.destroy$.next();
206	}
207
208	remove($event: Event) {
209	$event.stopPropagation();
210	this.thyOnRemove.emit($event);
211	}
212	}

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