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

96.08

/src/alert/alert.component.ts

import {
    Component,
    Input,
    OnInit,
    ContentChild,
    TemplateRef,
    OnChanges,
    ChangeDetectionStrategy,
    SimpleChanges,
    booleanAttribute
} from '@angular/core';
import { isString } from 'ngx-tethys/util';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyIcon } from 'ngx-tethys/icon';
import { NgIf, NgTemplateOutlet } from '@angular/common';

const weakTypes = ['primary-weak', 'success-weak', 'warning-weak', 'danger-weak'];

type ThyAlertType =
    | 'success'
    | 'warning'
    | 'danger'
    | 'info'
    | 'primary'
    | 'primary-weak'
    | 'success-weak'
    | 'warning-weak'
    | 'danger-weak';

export type ThyAlertTheme = 'fill' | 'bordered' | 'naked';

const typeIconsMap: Record<string, string> = {
    success: 'check-circle-fill',
    warning: 'waring-fill',
    danger: 'close-circle-fill',
    info: 'minus-circle-fill',
    primary: 'info-circle-fill',
    'primary-weak': 'info-circle-fill',
    'success-weak': 'check-circle-fill',
    'warning-weak': 'waring-fill',
    'danger-weak': 'close-circle-fill'
};

/**
 * 警告提示，展现需要关注的信息
 * @name thy-alert
 * @order 10
 */
@Component({
    selector: 'thy-alert',
    templateUrl: './alert.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-alert',
        '[class.thy-alert-hidden]': 'hidden'
    },
    standalone: true,
    imports: [NgIf, ThyIcon, NgTemplateOutlet]
})
export class ThyAlert implements OnInit, OnChanges {
    private hidden = false;

    private showIcon = true;

    private icon: string;

    private type: ThyAlertType = 'info';

    private hostRenderer = useHostRenderer();

    public theme: ThyAlertTheme = 'fill';

    messageTemplate: TemplateRef<HTMLElement>;

    messageText: string;

    /**
     * 指定警告提示的类型
     * @type success | warning | danger | info | primary | primary-weak | success-weak | warning-weak | danger-weak
     * @default info
     */
    @Input() set thyType(value: ThyAlertType) {
        this.type = value;
    }

    /**
     * 指定警告提示的主题
     * @type fill | bordered | naked
     * @default fill
     */
    @Input() set thyTheme(value: ThyAlertTheme) {
        this.theme = value;
    }

    /**
     * 显示警告提示的内容
     */
    @Input() set thyMessage(value: string | TemplateRef<HTMLElement>) {
        if (value instanceof TemplateRef) {
            this.messageTemplate = value;
        } else {
            this.messageText = value;
        }
    }

    /**
     * 显示自定义图标，可传 true/false 控制是否显示图标，或者传字符串去指定图标名称
     */
    @Input()
    set thyIcon(value: boolean | string) {
        if (value) {
            this.showIcon = true;
            this.icon = isString(value) ? value.toString() : null;
        } else {
            this.showIcon = false;
        }
    }

    get thyIcon() {
        if (this.showIcon) {
            return this.icon || typeIconsMap[this.type];
        } else {
            return null;
        }
    }

    /**
     * 是否显示关闭警告框按钮，默认不显示
     * @default false
     */
    @Input({ transform: booleanAttribute }) thyCloseable: boolean;

    /**
     * 警告框自定义操作
     * @type TemplateRef
     */
    @ContentChild('operation') alertOperation: TemplateRef<any>;

    constructor() {}

    ngOnInit() {
        this.updateClass();
    }

    ngOnChanges(changes: SimpleChanges): void {
        if ((changes.thyTheme && !changes.thyTheme.firstChange) || (changes.thyType && !changes.thyType.firstChange)) {
            this.updateClass();
        }
    }

    closeAlert() {
        this.hidden = true;
    }

    private updateClass() {
        // 兼容 'primary-weak', 'success-weak', 'warning-weak', 'danger-weak' types
        let theme = this.theme;
        let type = this.type;
        if (weakTypes.includes(this.type)) {
            theme = 'bordered';
            type = this.type.split('-')[0] as ThyAlertType;
        }
        this.hostRenderer.updateClass([`thy-alert-${theme}`, `thy-alert-${theme}-${type}`]);
    }
}

1	import {
2	Component,
3	Input,
4	OnInit,
5	ContentChild,
6	TemplateRef,
7	OnChanges,
8	ChangeDetectionStrategy,	1✔
9	SimpleChanges,	1✔
10	booleanAttribute
11	} from '@angular/core';
12	import { isString } from 'ngx-tethys/util';
13	import { useHostRenderer } from '@tethys/cdk/dom';
14	import { ThyIcon } from 'ngx-tethys/icon';
15	import { NgIf, NgTemplateOutlet } from '@angular/common';
16
17	const weakTypes = ['primary-weak', 'success-weak', 'warning-weak', 'danger-weak'];
18
19	type ThyAlertType =
20	\| 'success'
21	\| 'warning'
22	\| 'danger'
23	\| 'info'
24	\| 'primary'
25	\| 'primary-weak'	1✔
26	\| 'success-weak'
27	\| 'warning-weak'	22✔
28	\| 'danger-weak';
29
30	export type ThyAlertTheme = 'fill' \| 'bordered' \| 'naked';	17✔
31
32	const typeIconsMap: Record<string, string> = {
33	success: 'check-circle-fill',	22✔
34	warning: 'waring-fill',	1✔
35	danger: 'close-circle-fill',
36	info: 'minus-circle-fill',
37	primary: 'info-circle-fill',	21✔
38	'primary-weak': 'info-circle-fill',
39	'success-weak': 'check-circle-fill',
40	'warning-weak': 'waring-fill',
41	'danger-weak': 'close-circle-fill'	17✔
42	};	15✔
43		15✔
44	/**
45	* 警告提示，展现需要关注的信息
46	* @name thy-alert	2✔
47	* @order 10
48	*/
49	@Component({
50	selector: 'thy-alert',	44✔
51	templateUrl: './alert.component.html',	42✔
52	changeDetection: ChangeDetectionStrategy.OnPush,
53	host: {
54	class: 'thy-alert',	2✔
55	'[class.thy-alert-hidden]': 'hidden'
56	},
57	standalone: true,
58	imports: [NgIf, ThyIcon, NgTemplateOutlet]	23✔
59	})	23✔
60	export class ThyAlert implements OnInit, OnChanges {	23✔
61	private hidden = false;	23✔
62		23✔
63	private showIcon = true;
64
65	private icon: string;	22✔
66
67	private type: ThyAlertType = 'info';
68		22!
UNCOV 69	private hostRenderer = useHostRenderer();	×
70
71	public theme: ThyAlertTheme = 'fill';
72
73	messageTemplate: TemplateRef<HTMLElement>;	1✔
74
75	messageText: string;
76
77	/**	22✔
78	* 指定警告提示的类型	22✔
79	* @type success \| warning \| danger \| info \| primary \| primary-weak \| success-weak \| warning-weak \| danger-weak	22✔
80	* @default info	1✔
81	*/	1✔
82	@Input() set thyType(value: ThyAlertType) {
83	this.type = value;	22✔
84	}
85		1✔
86	/**	1✔
87	* 指定警告提示的主题
88	* @type fill \| bordered \| naked
89	* @default fill
90	*/
91	@Input() set thyTheme(value: ThyAlertTheme) {
92	this.theme = value;
93	}
94
95	/**	1✔
96	* 显示警告提示的内容
97	*/
98	@Input() set thyMessage(value: string \| TemplateRef<HTMLElement>) {
99	if (value instanceof TemplateRef) {
100	this.messageTemplate = value;
101	} else {
102	this.messageText = value;
103	}
104	}
105
106	/**
107	* 显示自定义图标，可传 true/false 控制是否显示图标，或者传字符串去指定图标名称
108	*/
109	@Input()
110	set thyIcon(value: boolean \| string) {
111	if (value) {
112	this.showIcon = true;
113	this.icon = isString(value) ? value.toString() : null;
114	} else {
115	this.showIcon = false;
116	}
117	}
118
119	get thyIcon() {
120	if (this.showIcon) {
121	return this.icon \|\| typeIconsMap[this.type];
122	} else {
123	return null;
124	}
125	}
126
127	/**
128	* 是否显示关闭警告框按钮，默认不显示
129	* @default false
130	*/
131	@Input({ transform: booleanAttribute }) thyCloseable: boolean;
132
133	/**
134	* 警告框自定义操作
135	* @type TemplateRef
136	*/
137	@ContentChild('operation') alertOperation: TemplateRef<any>;
138
139	constructor() {}
140
141	ngOnInit() {
142	this.updateClass();
143	}
144
145	ngOnChanges(changes: SimpleChanges): void {
146	if ((changes.thyTheme && !changes.thyTheme.firstChange) \|\| (changes.thyType && !changes.thyType.firstChange)) {
147	this.updateClass();
148	}
149	}
150
151	closeAlert() {
152	this.hidden = true;
153	}
154
155	private updateClass() {
156	// 兼容 'primary-weak', 'success-weak', 'warning-weak', 'danger-weak' types
157	let theme = this.theme;
158	let type = this.type;
159	if (weakTypes.includes(this.type)) {
160	theme = 'bordered';
161	type = this.type.split('-')[0] as ThyAlertType;
162	}
163	this.hostRenderer.updateClass([`thy-alert-${theme}`, `thy-alert-${theme}-${type}`]);
164	}
165	}

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