881c8997-29c3-4d01-9ef1-22092f16cec2

Committed 03 Apr 2024 03:31AM UTC coverage: 90.404% (-0.2%) from 90.585%

Build # 881c8997-29c3-4d01-9ef1-22092f16cec2

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

5411 of 6635 branches covered (81.55%)

Branch coverage included in aggregate %.

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

201 existing lines in 53 files now uncovered.

13176 of 13925 relevant lines covered (94.62%)

980.1 hits per line

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

97.62

/src/progress/progress.component.ts

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

import {
    ChangeDetectionStrategy,
    Component,
    HostBinding,
    Input,
    OnChanges,
    OnInit,
    QueryList,
    SimpleChanges,
    TemplateRef,
    ViewChildren,
    ViewEncapsulation,
    numberAttribute
} from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';

import { ThyProgressGapPositionType, ThyProgressShapeType, ThyProgressStackedValue, ThyProgressType } from './interfaces';
import { THY_PROGRESS_COMPONENT, ThyParentProgress, ThyProgressStrip } from './progress-strip.component';
import { ThyProgressCircle } from './progress-circle.component';
import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
import { NgIf, NgFor, NgClass, NgTemplateOutlet } from '@angular/common';

/**
 * 进度条组件
 * @name thy-progress
 */
@Component({
    selector: 'thy-progress',
    templateUrl: './progress.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    providers: [
        {
            provide: THY_PROGRESS_COMPONENT,
            useExisting: ThyProgress
        }
    ],
    host: {
        class: `thy-progress progress`,
        '[class.thy-progress-strip]': `thyShape === 'strip'`,
        '[class.thy-progress-circle]': `thyShape === 'circle'`
    },
    standalone: true,
    imports: [NgIf, NgFor, ThyProgressStrip, NgClass, ThyTooltipDirective, NgTemplateOutlet, ThyProgressCircle]
})
export class ThyProgress implements ThyParentProgress, OnInit, OnChanges {
    value: number | ThyProgressStackedValue[];

    bars: ThyProgressStrip[] = [];

    barsTotalValue: number;

    private settedMax: number;

    private hostRenderer = useHostRenderer();

    @HostBinding('attr.max') max = 100;

    @HostBinding(`class.progress-stacked`) isStacked = false;

    @ViewChildren(ThyProgressStrip)
    set barsQueryList(value: QueryList<ThyProgressStrip>) {
        this.bars = value.toArray();
    }

    /**
     * 进度条类型: `primary` | `success` | `info` | `warning` | `danger`
     */
    @Input() thyType: ThyProgressType = 'primary';

    /**
     * 进度条大小
     * @type xs | sm | md
     * @default md
     */
    @Input() set thySize(size: string | number) {
        this.size = size;
        this.hostRenderer.updateClass(size ? [`progress-${size}`] : []);
    }

    /**
     * 进度值，传入数字时显示百分比 = value / max * 100，当传入数组时显示多个 bar，stacked 模式的进度条
     * @type number | ThyProgressStackedValue[]
     */
    @Input() set thyValue(value: number | ThyProgressStackedValue[]) {
        // 自动求和计算 max
        if (Array.isArray(value)) {
            this.isStacked = true;
            this.value = [...value].filter(item => item.value !== 0);
            this.barsTotalValue = this.value.reduce((total, item) => {
                return total + item.value;
            }, 0);
            this.calculateMax();
        } else {
            this.value = value;
        }
    }

    /**
     * 最大值，主要计算百分比进度的分母使用，当 thyValue 传入数组时，自动累加数组中的 value 之和为 max
     */
    @Input({ transform: numberAttribute })
    set thyMax(max: number) {
        this.settedMax = max;
        this.calculateMax();
    }

    /**
     * 鼠标移入进度条时显示的提示文案或者模板
     */
    @Input() thyTips: string | TemplateRef<unknown>;

    /**
     * 进度形状
     * @type strip | circle
     */
    @Input() thyShape: ThyProgressShapeType = 'strip';

    /**
     * 圆形进度条缺口角度，可取值 0 ~ 360
     */
    @Input({ transform: numberAttribute }) thyGapDegree?: number = undefined;

    /**
     * 圆形进度条缺口位置
     * @type top | bottom | left | right
     */
    @Input() thyGapPosition: ThyProgressGapPositionType = 'top';

    /**
     *         圆形进度条线的宽度
     */
    @Input({ transform: numberAttribute }) thyStrokeWidth: number;

    size: string | number;

    constructor() {}

    ngOnInit() {}

    ngOnChanges(changes: SimpleChanges): void {}

    calculateMax() {
        if (isNumber(this.settedMax) && this.settedMax > 0) {
            this.max = this.settedMax;
        } else {
            this.max = this.barsTotalValue;
        }
        if (this.max < this.barsTotalValue) {
            this.max = this.barsTotalValue;
        }
        this.bars.forEach(bar => {
            bar.recalculatePercentage();
        });
    }

    trackByFn(index: number) {
        return index;
    }
}

1	import { isNumber } from 'ngx-tethys/util';
2
3	import {
4	ChangeDetectionStrategy,
5	Component,
6	HostBinding,
7	Input,
8	OnChanges,
9	OnInit,
10	QueryList,
11	SimpleChanges,
12	TemplateRef,
13	ViewChildren,
14	ViewEncapsulation,	1✔
15	numberAttribute
16	} from '@angular/core';	28✔
17	import { useHostRenderer } from '@tethys/cdk/dom';
18
19	import { ThyProgressGapPositionType, ThyProgressShapeType, ThyProgressStackedValue, ThyProgressType } from './interfaces';	26✔
20	import { THY_PROGRESS_COMPONENT, ThyParentProgress, ThyProgressStrip } from './progress-strip.component';	26✔
21	import { ThyProgressCircle } from './progress-circle.component';
22	import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
23	import { NgIf, NgFor, NgClass, NgTemplateOutlet } from '@angular/common';
24		31✔
25	/**	13✔
26	* 进度条组件	29✔
27	* @name thy-progress	13✔
28	*/	27✔
29	@Component({
30	selector: 'thy-progress',	13✔
31	templateUrl: './progress.component.html',
32	changeDetection: ChangeDetectionStrategy.OnPush,
33	encapsulation: ViewEncapsulation.None,	18✔
34	providers: [
35	{
36	provide: THY_PROGRESS_COMPONENT,
37	useExisting: ThyProgress	7✔
38	}	7✔
39	],
40	host: {
41	class: `thy-progress progress`,	28✔
42	'[class.thy-progress-strip]': `thyShape === 'strip'`,	28✔
43	'[class.thy-progress-circle]': `thyShape === 'circle'`	28✔
44	},	28✔
45	standalone: true,	28✔
46	imports: [NgIf, NgFor, ThyProgressStrip, NgClass, ThyTooltipDirective, NgTemplateOutlet, ThyProgressCircle]	28✔
47	})	28✔
48	export class ThyProgress implements ThyParentProgress, OnInit, OnChanges {	28✔
49	value: number \| ThyProgressStackedValue[];
50
51	bars: ThyProgressStrip[] = [];
52
53	barsTotalValue: number;	20✔
54		13✔
55	private settedMax: number;
56
57	private hostRenderer = useHostRenderer();	7✔
58
59	@HostBinding('attr.max') max = 100;	20✔
60		2✔
61	@HostBinding(`class.progress-stacked`) isStacked = false;
62		20✔
63	@ViewChildren(ThyProgressStrip)	5✔
64	set barsQueryList(value: QueryList<ThyProgressStrip>) {
65	this.bars = value.toArray();
66	}
UNCOV 67		×
68	/**
69	* 进度条类型: `primary` \| `success` \| `info` \| `warning` \| `danger`	1✔
70	*/	1✔
71	@Input() thyType: ThyProgressType = 'primary';
72
73	/**
74	* 进度条大小
75	* @type xs \| sm \| md
76	* @default md
77	*/
78	@Input() set thySize(size: string \| number) {
79	this.size = size;
80	this.hostRenderer.updateClass(size ? [`progress-${size}`] : []);
81	}
82
83	/**
84	* 进度值，传入数字时显示百分比 = value / max * 100，当传入数组时显示多个 bar，stacked 模式的进度条
85	* @type number \| ThyProgressStackedValue[]	1✔
86	*/
87	@Input() set thyValue(value: number \| ThyProgressStackedValue[]) {
88	// 自动求和计算 max
89	if (Array.isArray(value)) {
90	this.isStacked = true;
91	this.value = [...value].filter(item => item.value !== 0);
92	this.barsTotalValue = this.value.reduce((total, item) => {
93	return total + item.value;
94	}, 0);
95	this.calculateMax();
96	} else {
97	this.value = value;
98	}
99	}
100
101	/**
102	* 最大值，主要计算百分比进度的分母使用，当 thyValue 传入数组时，自动累加数组中的 value 之和为 max
103	*/
104	@Input({ transform: numberAttribute })
105	set thyMax(max: number) {
106	this.settedMax = max;
107	this.calculateMax();
108	}
109
110	/**
111	* 鼠标移入进度条时显示的提示文案或者模板
112	*/
113	@Input() thyTips: string \| TemplateRef<unknown>;
114
115	/**
116	* 进度形状
117	* @type strip \| circle
118	*/
119	@Input() thyShape: ThyProgressShapeType = 'strip';
120
121	/**
122	* 圆形进度条缺口角度，可取值 0 ~ 360
123	*/
124	@Input({ transform: numberAttribute }) thyGapDegree?: number = undefined;
125
126	/**
127	* 圆形进度条缺口位置
128	* @type top \| bottom \| left \| right
129	*/
130	@Input() thyGapPosition: ThyProgressGapPositionType = 'top';
131
132	/**
133	* 圆形进度条线的宽度
134	*/
135	@Input({ transform: numberAttribute }) thyStrokeWidth: number;
136
137	size: string \| number;
138
139	constructor() {}
140
141	ngOnInit() {}
142
143	ngOnChanges(changes: SimpleChanges): void {}
144
145	calculateMax() {
146	if (isNumber(this.settedMax) && this.settedMax > 0) {
147	this.max = this.settedMax;
148	} else {
149	this.max = this.barsTotalValue;
150	}
151	if (this.max < this.barsTotalValue) {
152	this.max = this.barsTotalValue;
153	}
154	this.bars.forEach(bar => {
155	bar.recalculatePercentage();
156	});
157	}
158
159	trackByFn(index: number) {
160	return index;
161	}
162	}

atinc / ngx-tethys / 881c8997-29c3-4d01-9ef1-22092f16cec2

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