d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    AfterViewInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    HostBinding,
    Inject,
    Input,
    NgZone,
    OnDestroy,
    Optional,
    Renderer2
} from '@angular/core';
import { IThySegmentComponent, THY_SEGMENTED_COMPONENT } from './segment.token';
import { InputBoolean } from 'ngx-tethys/core';
import { assertIconOnly } from 'ngx-tethys/util';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { SafeAny } from 'ngx-tethys/types';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgClass, NgIf } from '@angular/common';

/**
 * 分段控制器的选项组件
 * @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'
    },
    standalone: true,
    imports: [NgClass, NgIf, ThyIconComponent]
})
export class ThySegmentItemComponent implements AfterViewInit, OnDestroy {
    /**
     * 选项的值
     */
    @Input() thyValue: SafeAny;

    /**
     * 选项的图标
     */
    @Input() thyIcon: string;

    /**
     * 是否禁用该选项
     */
    @Input()
    @InputBoolean()
    @HostBinding(`class.disabled`)
    thyDisabled = false;

    public isOnlyIcon: boolean;

    public isWithText: boolean;

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

    constructor(
        public elementRef: ElementRef,
        private ngZone: NgZone,
        private cdr: ChangeDetectorRef,
        private renderer: Renderer2,
        @Optional() @Inject(THY_SEGMENTED_COMPONENT) private parent: IThySegmentComponent
    ) {
        ngZone.runOutsideAngular(() =>
            fromEvent(elementRef.nativeElement, 'click')
                .pipe(takeUntil(this.destroy$))
                .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);
                        });
                    }
                })
        );
    }

    ngAfterViewInit(): void {
        const labelDiv = this.elementRef.nativeElement.children[0];
        this.isOnlyIcon = assertIconOnly(labelDiv) && this.parent.thyMode === 'inline';
        this.cdr.detectChanges();

        this.wrapSpanForText(labelDiv.childNodes);
    }

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

    public unselect() {
        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 = true;
                this.cdr.detectChanges();
            }
        });
    }

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

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

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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