d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    Component,
    Input,
    HostBinding,
    ContentChildren,
    QueryList,
    AfterContentInit,
    OnChanges,
    OnDestroy,
    OnInit,
    SimpleChanges,
    SimpleChange,
    ChangeDetectorRef,
    ViewEncapsulation,
    ChangeDetectionStrategy
} from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { ThyTimelineItemComponent } from './timeline-item.component';
import { ThyTimelineService } from './timeline.service';
import { Subject } from 'rxjs';
import { InputBoolean } from 'ngx-tethys/core';
import { NgFor, NgTemplateOutlet } from '@angular/common';

export type ThyTimeMode = 'left' | 'right' | 'center';

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>
            <ng-container *ngFor="let item of timelineItems">
                <ng-template [ngTemplateOutlet]="item.template"></ng-template>
            </ng-container>
            <ng-template>
                <ng-content></ng-content>
            </ng-template>
        </ng-container>
    `,
    standalone: true,
    imports: [NgFor, NgTemplateOutlet]
})
export class ThyTimelineComponent implements OnInit, AfterContentInit, OnChanges, OnDestroy {
    /**
     * 节点排序是否倒序
     * @default false
     */
    @Input() @InputBoolean() thyReverse: boolean;

    /**
     * 改变时间轴和内容的相对位置
     * @type left | right | center
     * @default left
     */
    @Input() thyMode: ThyTimeMode;

    /**
     * 时间轴的方向
     * @type horizontal | vertical
     */
    @Input() thyDirection: ThyTimeDirection = 'vertical';

    public timelineItems: ThyTimelineItemComponent[] = [];

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

    @HostBinding(`class.thy-timeline`) isTimeline = true;
    @HostBinding(`class.thy-timeline-right`) rightTimeline = false;
    @HostBinding(`class.thy-timeline-center`) centerTimeline = false;
    @HostBinding(`class.thy-timeline-template`) templateTimeline = false;
    @HostBinding(`class.thy-timeline-horizontal`) horizontal = false;

    @ContentChildren(ThyTimelineItemComponent)
    listOfItems: QueryList<ThyTimelineItemComponent>;

    constructor(private cdr: ChangeDetectorRef, private timelineService: ThyTimelineService) {}

    ngOnChanges(changes: SimpleChanges): void {
        const { thyMode, thyReverse } = changes;
        if (thyMode && !this.horizontal) {
            if (thyMode.currentValue === 'right') {
                this.rightTimeline = !this.templateTimeline;
                this.centerTimeline = false;
            } else if (thyMode.currentValue === 'center') {
                this.centerTimeline = true;
                this.rightTimeline = false;
            } else {
                this.rightTimeline = false;
                this.centerTimeline = false;
            }
        }
        if ((simpleChangeActivated(thyMode) && !this.horizontal) || simpleChangeActivated(thyReverse)) {
            this.updateChildren();
        }
    }

    ngOnInit() {
        this.horizontal = this.thyDirection === 'horizontal' ? true : false;
        this.timelineService.check$.pipe(takeUntil(this.destroy$)).subscribe(() => {
            this.cdr.markForCheck();
        });
    }

    ngAfterContentInit() {
        this.updateChildren();
        this.listOfItems.changes.subscribe(() => {
            this.updateChildren();
        });
    }

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

    private updateChildren(): void {
        if (this.listOfItems && this.listOfItems.length) {
            const length = this.listOfItems.length;
            this.listOfItems.forEach((item, index) => {
                item.isLast = !this.thyReverse ? index === length - 1 : index === 0;
                item.isFirst = this.thyReverse ? index === length - 1 : index === 0;
                item.reverse = this.thyReverse;
                if (!this.horizontal) {
                    item.position = getTimelineItemPosition(index, this.thyMode);
                }
                if (item.description || (item.thyPosition && !this.horizontal)) {
                    this.templateTimeline = true;
                }
                item.detectChanges();
            });
            this.timelineItems = this.thyReverse ? this.listOfItems.toArray().reverse() : this.listOfItems.toArray();
        }
        this.cdr.markForCheck();
    }
}
function simpleChangeActivated(simpleChange?: SimpleChange): boolean {
    return !!(simpleChange && (simpleChange.previousValue !== simpleChange.currentValue || simpleChange.isFirstChange()));
}

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

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