68ef226c-f83e-44c1-b8ed-e420a83c5d84

Committed 28 May 2025 10:31AM UTC coverage: 10.352% (-80.0%) from 90.316%

Build # 68ef226c-f83e-44c1-b8ed-e420a83c5d84

Build Type

Pull #3460

circleci

Committed by

pubuzhixing8

Commit Message

chore: xxx

Pull Request Pull Request #3460: refactor(icon): migrate signal input #TINFR-1476

Run Details

132 of 6823 branches covered (1.93%)

Branch coverage included in aggregate %.

10 of 14 new or added lines in 1 file covered. (71.43%)

11648 existing lines in 344 files now uncovered.

2078 of 14525 relevant lines covered (14.31%)

6.69 hits per line

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

10.99

/src/timeline/timeline.component.ts

import {
    Component,
    OnInit,
    ChangeDetectorRef,
    ViewEncapsulation,
    ChangeDetectionStrategy,
    inject,
    input,
    effect,
    computed,
    signal,
    WritableSignal,
    contentChildren
} from '@angular/core';
import { ThyTimelineItem } from './timeline-item.component';
import { ThyTimelineService } from './timeline.service';
import { NgTemplateOutlet } from '@angular/common';
import { coerceBooleanProperty, ThyBooleanInput } from 'ngx-tethys/util';
import { ThyTimeMode } from './timeline.type';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export enum ThyTimeModes {
    left = 'left',
    right = 'right',
    center = 'center'
}

export type ThyTimeDirection = 'horizontal' | 'vertical';

/**
 * 时间轴组件
 * @name thy-timeline
 * @order 10
 */
@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    selector: 'thy-timeline',
    providers: [ThyTimelineService],
    template: `
        <ng-container>
            @for (item of timelineItems; track $index) {
                <ng-template [ngTemplateOutlet]="item.template()"></ng-template>
            }
            <ng-template>
                <ng-content></ng-content>
            </ng-template>
        </ng-container>
    `,
    host: {
        class: 'thy-timeline',
        '[class.thy-timeline-right]': `rightTimeline()`,
        '[class.thy-timeline-center]': `centerTimeline()`,
        '[class.thy-timeline-template]': `templateTimeline()`,
        '[class.thy-timeline-horizontal]': `horizontal()`
    },
    imports: [NgTemplateOutlet]
})
export class ThyTimeline implements OnInit {
    private cdr = inject(ChangeDetectorRef);

    private timelineService = inject(ThyTimelineService);

    /**
     * 节点排序是否倒序
     * @default false
     */
    readonly thyReverse = input<boolean, ThyBooleanInput>(false, { transform: coerceBooleanProperty });

    /**
     * 改变时间轴和内容的相对位置
     * @type left | right | center
     * @default left
     */
    readonly thyMode = input<ThyTimeMode>('left');

    /**
     * 时间轴的方向
     * @type horizontal | vertical
     */
    readonly thyDirection = input<ThyTimeDirection>('vertical');

    public timelineItems: ThyTimelineItem[] = [];

    public templateTimeline: WritableSignal<boolean> = signal(false);

    public horizontal = computed(() => {
        return this.thyDirection() === 'horizontal' ? true : false;
    });

    public rightTimeline = computed(() => {
        const thyMode = this.thyMode();
        const horizontal = this.horizontal();
        const templateTimeline = this.templateTimeline();
        if (thyMode && !horizontal) {
            if (thyMode === 'right') {
                return !templateTimeline;
            } else {
                return false;
            }
        }
    });

    public centerTimeline = computed(() => {
        const thyMode = this.thyMode();
        const horizontal = this.horizontal();
        if (thyMode && !horizontal) {
            return thyMode === 'center';
        }
    });

    readonly listOfItems = contentChildren(ThyTimelineItem);

    private takeUntilDestroyed = takeUntilDestroyed();

    constructor() {
        effect(() => {
            this.updateChildren();
        });
    }

    ngOnInit() {
        this.timelineService.check$.pipe(this.takeUntilDestroyed).subscribe(() => {
            this.cdr.markForCheck();
        });
    }

    private updateChildren(): void {
        const listOfItems = this.listOfItems();
        const thyReverse = this.thyReverse();
        if (listOfItems && listOfItems.length) {
            const length = listOfItems.length;
            listOfItems.forEach((item, index) => {
                item.isLast = !thyReverse ? index === length - 1 : index === 0;
                item.isFirst = thyReverse ? index === length - 1 : index === 0;
                item.reverse = thyReverse;
                if (!this.horizontal()) {
                    item.position = getTimelineItemPosition(index, this.thyMode());
                }
                if (item.description() || (item.thyPosition() && !this.horizontal())) {
                    this.templateTimeline.set(true);
                }
                item.detectChanges();
            });
            this.timelineItems = this.thyReverse() ? [...listOfItems].reverse() : [...listOfItems];
        }
        this.cdr.markForCheck();
    }
}

function getTimelineItemPosition(index: number, mode: ThyTimeMode): ThyTimeMode | undefined {
    return mode === 'left' ? 'left' : mode === 'right' ? 'right' : mode === 'center' && index % 2 === 0 ? 'left' : 'right';
}

1	import {
2	Component,
3	OnInit,
4	ChangeDetectorRef,
5	ViewEncapsulation,
6	ChangeDetectionStrategy,
7	inject,
8	input,
9	effect,
10	computed,	1✔
11	signal,	1✔
12	WritableSignal,	1✔
13	contentChildren	1✔
14	} from '@angular/core';	2✔
15	import { ThyTimelineItem } from './timeline-item.component';
16	import { ThyTimelineService } from './timeline.service';
17	import { NgTemplateOutlet } from '@angular/common';
18	import { coerceBooleanProperty, ThyBooleanInput } from 'ngx-tethys/util';
19	import { ThyTimeMode } from './timeline.type';
20	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';	1✔
21
UNCOV 22	export enum ThyTimeModes {	×
UNCOV 23	left = 'left',	×
UNCOV 24	right = 'right',	×
UNCOV 25	center = 'center'	×
UNCOV 26	}	×
UNCOV 27		×
UNCOV 28	export type ThyTimeDirection = 'horizontal' \| 'vertical';	×
UNCOV 29		×
UNCOV 30	/**	×
31	* 时间轴组件
UNCOV 32	* @name thy-timeline	×
UNCOV 33	* @order 10	×
UNCOV 34	*/	×
UNCOV 35	@Component({	×
UNCOV 36	changeDetection: ChangeDetectionStrategy.OnPush,	×
UNCOV 37	encapsulation: ViewEncapsulation.None,	×
UNCOV 38	selector: 'thy-timeline',	×
39	providers: [ThyTimelineService],
40	template: `
UNCOV 41	<ng-container>	×
42	@for (item of timelineItems; track $index) {
43	<ng-template [ngTemplateOutlet]="item.template()"></ng-template>
44	}
UNCOV 45	<ng-template>	×
UNCOV 46	<ng-content></ng-content>	×
UNCOV 47	</ng-template>	×
UNCOV 48	</ng-container>	×
UNCOV 49	`,	×
50	host: {
51	class: 'thy-timeline',
UNCOV 52	'[class.thy-timeline-right]': `rightTimeline()`,	×
UNCOV 53	'[class.thy-timeline-center]': `centerTimeline()`,	×
UNCOV 54	'[class.thy-timeline-template]': `templateTimeline()`,	×
UNCOV 55	'[class.thy-timeline-horizontal]': `horizontal()`	×
56	},
57	imports: [NgTemplateOutlet]
58	})
UNCOV 59	export class ThyTimeline implements OnInit {	×
60	private cdr = inject(ChangeDetectorRef);	×
61
62	private timelineService = inject(ThyTimelineService);
63
UNCOV 64	/**	×
UNCOV 65	* 节点排序是否倒序	×
UNCOV 66	* @default false	×
UNCOV 67	*/	×
UNCOV 68	readonly thyReverse = input<boolean, ThyBooleanInput>(false, { transform: coerceBooleanProperty });	×
UNCOV 69		×
UNCOV 70	/**	×
UNCOV 71	* 改变时间轴和内容的相对位置	×
UNCOV 72	* @type left \| right \| center	×
UNCOV 73	* @default left	×
74	*/
UNCOV 75	readonly thyMode = input<ThyTimeMode>('left');	×
UNCOV 76		×
77	/**
UNCOV 78	* 时间轴的方向	×
79	* @type horizontal \| vertical
UNCOV 80	*/	×
81	readonly thyDirection = input<ThyTimeDirection>('vertical');
UNCOV 82		×
83	public timelineItems: ThyTimelineItem[] = [];
84		1✔
85	public templateTimeline: WritableSignal<boolean> = signal(false);	1✔
86
87	public horizontal = computed(() => {
88	return this.thyDirection() === 'horizontal' ? true : false;
89	});
90
91	public rightTimeline = computed(() => {
92	const thyMode = this.thyMode();	1✔
93	const horizontal = this.horizontal();
94	const templateTimeline = this.templateTimeline();
95	if (thyMode && !horizontal) {
96	if (thyMode === 'right') {
97	return !templateTimeline;
98	} else {
99	return false;
100	}
101	}
102	});
103
104	public centerTimeline = computed(() => {
105	const thyMode = this.thyMode();
106	const horizontal = this.horizontal();
107	if (thyMode && !horizontal) {
108	return thyMode === 'center';
109	}
110	});
111
112	readonly listOfItems = contentChildren(ThyTimelineItem);
113
114	private takeUntilDestroyed = takeUntilDestroyed();
115
116	constructor() {
117	effect(() => {
118	this.updateChildren();
119	});
120	}
UNCOV 121		×
122	ngOnInit() {
123	this.timelineService.check$.pipe(this.takeUntilDestroyed).subscribe(() => {
124	this.cdr.markForCheck();
125	});
126	}
127
128	private updateChildren(): void {
129	const listOfItems = this.listOfItems();
130	const thyReverse = this.thyReverse();
131	if (listOfItems && listOfItems.length) {
132	const length = listOfItems.length;
133	listOfItems.forEach((item, index) => {
134	item.isLast = !thyReverse ? index === length - 1 : index === 0;
135	item.isFirst = thyReverse ? index === length - 1 : index === 0;
136	item.reverse = thyReverse;
137	if (!this.horizontal()) {
138	item.position = getTimelineItemPosition(index, this.thyMode());
139	}
140	if (item.description() \|\| (item.thyPosition() && !this.horizontal())) {
141	this.templateTimeline.set(true);
142	}
143	item.detectChanges();
144	});
145	this.timelineItems = this.thyReverse() ? [...listOfItems].reverse() : [...listOfItems];
146	}
147	this.cdr.markForCheck();
148	}
149	}
150
151	function getTimelineItemPosition(index: number, mode: ThyTimeMode): ThyTimeMode \| undefined {
152	return mode === 'left' ? 'left' : mode === 'right' ? 'right' : mode === 'center' && index % 2 === 0 ? 'left' : 'right';
153	}

atinc / ngx-tethys / 68ef226c-f83e-44c1-b8ed-e420a83c5d84

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