atinc / ngx-tethys / #55

Committed 30 Jul 2025 07:08AM UTC coverage: 9.866% (-80.4%) from 90.297%

Build # #55

Build Type

push

Committed by

Commit Message

feat(empty): add setMessage for update display text #TINFR-2616

Run Details

92 of 6794 branches covered (1.35%)

Branch coverage included in aggregate %.

2014 of 14552 relevant lines covered (13.84%)

6.15 hits per line

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

8.16

/src/segment/segment-item.component.ts

import {
    ChangeDetectionStrategy,
    Component,
    DestroyRef,
    ElementRef,
    NgZone,
    Renderer2,
    afterNextRender,
    inject,
    input,
    signal
} from '@angular/core';
import { IThySegmentItemComponent, THY_SEGMENTED_COMPONENT } from './segment.token';
import { assertIconOnly, coerceBooleanProperty } from 'ngx-tethys/util';
import { fromEvent } from 'rxjs';
import { SafeAny } from 'ngx-tethys/types';
import { ThyIcon } from 'ngx-tethys/icon';
import { NgClass } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

/**
 * 分段控制器的选项组件
 * @name thy-segment-item,[thy-segment-item]
 */
@Component({
    selector: 'thy-segment-item,[thy-segment-item]',
    templateUrl: './segment-item.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-segment-item',
        '[class.disabled]': 'thyDisabled()'
    },
    imports: [NgClass, ThyIcon]
})
export class ThySegmentItem implements IThySegmentItemComponent {
    elementRef = inject(ElementRef);
    private ngZone = inject(NgZone);
    private renderer = inject(Renderer2);
    private parent = inject(THY_SEGMENTED_COMPONENT, { optional: true })!;

    /**
     * 选项的值
     */
    readonly thyValue = input<SafeAny>();

    /**
     * 选项的图标
     */
    readonly thyIcon = input<string>();

    /**
     * 是否禁用该选项
     */
    readonly thyDisabled = input(false, { transform: coerceBooleanProperty });

    public isOnlyIcon = signal(false);

    public isWithText = signal(false);

    private destroyRef = inject(DestroyRef);

    constructor() {
        const elementRef = this.elementRef;
        const ngZone = this.ngZone;

        ngZone.runOutsideAngular(() =>
            fromEvent(elementRef.nativeElement, 'click')
                .pipe(takeUntilDestroyed(this.destroyRef))
                .subscribe((event: Event) => {
                    if (
                        !this.thyDisabled() &&
                        !this.parent.thyDisabled() &&
                        this.parent.selectedItem &&
                        this.parent.selectedItem !== this
                    ) {
                        ngZone.run(() => {
                            this.parent.selectedItem.unselect();
                            this.parent.changeSelectedItem(this, event);
                        });
                    }
                })
        );

        afterNextRender(() => {
            const labelDiv = this.elementRef.nativeElement.children[0];
            this.isOnlyIcon.set(assertIconOnly(labelDiv) && this.parent.thyMode() === 'inline');
            this.wrapSpanForText(labelDiv.childNodes);
        });
    }

    public select(): void {
        this.elementRef.nativeElement.classList.add('active');
    }

    public unselect(): void {
        this.elementRef.nativeElement.classList.remove('active');
    }

    private wrapSpanForText(nodes: NodeList): void {
        nodes.forEach(node => {
            if (node.nodeName === '#text') {
                const span = this.renderer.createElement('span');
                const parent = this.renderer.parentNode(node);
                this.renderer.insertBefore(parent, span, node);
                this.renderer.appendChild(span, node);
            }

            if (node.nodeName === '#text' || node.nodeName === 'SPAN') {
                this.isWithText.set(true);
            }
        });
    }
}

1	import {
2	ChangeDetectionStrategy,
3	Component,
4	DestroyRef,
5	ElementRef,
6	NgZone,
7	Renderer2,
8	afterNextRender,
9	inject,
10	input,
11	signal
12	} from '@angular/core';
13	import { IThySegmentItemComponent, THY_SEGMENTED_COMPONENT } from './segment.token';
14	import { assertIconOnly, coerceBooleanProperty } from 'ngx-tethys/util';
15	import { fromEvent } from 'rxjs';	1✔
16	import { SafeAny } from 'ngx-tethys/types';
17	import { ThyIcon } from 'ngx-tethys/icon';	×
18	import { NgClass } from '@angular/common';	×
19	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';	×
20		×
21	/**	×
22	* 分段控制器的选项组件	×
23	* @name thy-segment-item,[thy-segment-item]	×
24	*/	×
25	@Component({	×
26	selector: 'thy-segment-item,[thy-segment-item]',	×
27	templateUrl: './segment-item.component.html',	×
28	changeDetection: ChangeDetectionStrategy.OnPush,	×
29	host: {	×
30	class: 'thy-segment-item',
31	'[class.disabled]': 'thyDisabled()'
32	},	×
33	imports: [NgClass, ThyIcon]
34	})
35	export class ThySegmentItem implements IThySegmentItemComponent {
36	elementRef = inject(ElementRef);	×
37	private ngZone = inject(NgZone);	×
38	private renderer = inject(Renderer2);	×
39	private parent = inject(THY_SEGMENTED_COMPONENT, { optional: true })!;
40
41	/**
42	* 选项的值	×
43	*/	×
44	readonly thyValue = input<SafeAny>();	×
45		×
46	/**
47	* 选项的图标
48	*/
49	readonly thyIcon = input<string>();	×
50
51	/**
52	* 是否禁用该选项	×
53	*/
54	readonly thyDisabled = input(false, { transform: coerceBooleanProperty });
55		×
56	public isOnlyIcon = signal(false);	×
57		×
58	public isWithText = signal(false);	×
59		×
60	private destroyRef = inject(DestroyRef);	×
61
62	constructor() {	×
63	const elementRef = this.elementRef;	×
64	const ngZone = this.ngZone;
65
66	ngZone.runOutsideAngular(() =>
67	fromEvent(elementRef.nativeElement, 'click')	1✔
68	.pipe(takeUntilDestroyed(this.destroyRef))	1✔
69	.subscribe((event: Event) => {
70	if (
71	!this.thyDisabled() &&
72	!this.parent.thyDisabled() &&
73	this.parent.selectedItem &&
74	this.parent.selectedItem !== this	1✔
75	) {
76	ngZone.run(() => {
77	this.parent.selectedItem.unselect();
78	this.parent.changeSelectedItem(this, event);
79	});
80	}
81	})
82	);
83
84	afterNextRender(() => {
85	const labelDiv = this.elementRef.nativeElement.children[0];
86	this.isOnlyIcon.set(assertIconOnly(labelDiv) && this.parent.thyMode() === 'inline');
87	this.wrapSpanForText(labelDiv.childNodes);
88	});
89	}
90
91	public select(): void {
92	this.elementRef.nativeElement.classList.add('active');
93	}
94
95	public unselect(): void {
96	this.elementRef.nativeElement.classList.remove('active');
97	}
98
99	private wrapSpanForText(nodes: NodeList): void {
100	nodes.forEach(node => {
101	if (node.nodeName === '#text') {
102	const span = this.renderer.createElement('span');
103	const parent = this.renderer.parentNode(node);
104	this.renderer.insertBefore(parent, span, node);
105	this.renderer.appendChild(span, node);
106	}
107
108	if (node.nodeName === '#text' \|\| node.nodeName === 'SPAN') {
109	this.isWithText.set(true);
110	}
111	});
112	}
113	}

atinc / ngx-tethys / #55

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