7019cd2f-3cb2-44c2-9a2b-b1928730e5c2

Committed 14 May 2025 08:49AM UTC coverage: 90.261% (-0.01%) from 90.274%

Build # 7019cd2f-3cb2-44c2-9a2b-b1928730e5c2

Build Type

Pull #3417

circleci

Committed by

walkerkay

Commit Message

feat(stepper): migrate to signal for stepper  #TINFR-1774

Pull Request Pull Request #3417: feat(stepper): migrate to signal for stepper #TINFR-1774

Run Details

5613 of 6881 branches covered (81.57%)

Branch coverage included in aggregate %.

17 of 18 new or added lines in 3 files covered. (94.44%)

2 existing lines in 1 file now uncovered.

13415 of 14200 relevant lines covered (94.47%)

919.25 hits per line

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

84.09

/src/stepper/stepper.component.ts

import {
    Component,
    numberAttribute,
    viewChildren,
    output,
    contentChildren,
    input,
    computed,
    effect,
    ChangeDetectionStrategy,
    signal,
    untracked
} from '@angular/core';
import { ThyStep, IThyStepperComponent, THY_STEPPER_COMPONENT } from './step.component';
import { ThyStepHeader } from './step-header.component';
import { NgTemplateOutlet } from '@angular/common';
import { coerceBooleanProperty } from 'ngx-tethys/util';

/**
 * 步骤条组件
 * @name thy-stepper
 * @order 10
 */
@Component({
    selector: 'thy-stepper',
    templateUrl: 'stepper.component.html',
    providers: [{ provide: THY_STEPPER_COMPONENT, useExisting: ThyStepper }],
    imports: [ThyStepHeader, NgTemplateOutlet],
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'thy-stepper' }
})
export class ThyStepper implements IThyStepperComponent {
    /**
     * 当前处于激活状态的步骤 index
     * @default 0
     */
    readonly thySelectedIndex = input<number, number>(undefined, { transform: numberAttribute });

    /**
     * 当前处于激活状态的步骤实例
     */
    readonly thySelected = input<ThyStep>();

    /**
     * 步骤条导航是否展示，默认展示
     */
    readonly thyShowStepHeader = input<boolean, boolean>(true, { transform: coerceBooleanProperty });

    readonly selectionChange = output<any>();

    readonly steps = contentChildren(ThyStep);

    selectedIndex = signal(0);

    selected = computed(() => this.steps()?.[this.selectedIndex()]);

    constructor() {
        effect(() => {
            const newIndex = this.thySelectedIndex();
            if (newIndex) {
                untracked(() => {
                    this.updateSelectedIndex(newIndex);
                });
            }
        });

        effect(() => {
            const selected = this.thySelected();
            if (selected) {
                untracked(() => {
                    const index = this.steps()?.indexOf(selected);
                    if (index > -1) {
                        this.updateSelectedIndex(index);
                    }
                });
            }
        });
    }

    private updateSelectedIndex(newIndex: number): void {
        if (!this.steps()?.[newIndex]) {
            return;
        }
        const previouslySelectedIndex = this.selectedIndex();
        const previouslySelectedStep = this.steps() ? this.steps()[previouslySelectedIndex] : null;
        this.selectedIndex.set(newIndex);
        this.selectionChange.emit({
            selectedIndex: newIndex,
            previouslySelectedIndex: previouslySelectedIndex,
            selectedStep: this.selected(),
            previouslySelectedStep: previouslySelectedStep
        });
    }

    updateSelected(step: ThyStep): void {
        const index = this.steps().indexOf(step);
        this.updateSelectedIndex(index);
    }

    to(index: number): void {
        this.updateSelectedIndex(Math.min(index, this.steps().length - 1));
    }

    next(): void {
        this.updateSelectedIndex(Math.min(this.selectedIndex() + 1, this.steps().length - 1));
    }

    /** Selects and focuses the previous step in list. */
    previous(): void {
        this.updateSelectedIndex(Math.max(this.selectedIndex() - 1, 0));
    }
}

1	import {
2	Component,
3	numberAttribute,
4	viewChildren,
5	output,
6	contentChildren,
7	input,
8	computed,
9	effect,
10	ChangeDetectionStrategy,
11	signal,
12	untracked
13	} from '@angular/core';
14	import { ThyStep, IThyStepperComponent, THY_STEPPER_COMPONENT } from './step.component';	1✔
15	import { ThyStepHeader } from './step-header.component';
16	import { NgTemplateOutlet } from '@angular/common';	8✔
17	import { coerceBooleanProperty } from 'ngx-tethys/util';	8✔
18		8✔
19	/**	8✔
20	* 步骤条组件	8✔
21	* @name thy-stepper	8✔
22	* @order 10	13✔
23	*/	8✔
24	@Component({	9✔
25	selector: 'thy-stepper',	9!
UNCOV 26	templateUrl: 'stepper.component.html',	×
NEW 27	providers: [{ provide: THY_STEPPER_COMPONENT, useExisting: ThyStepper }],	×
28	imports: [ThyStepHeader, NgTemplateOutlet],
29	changeDetection: ChangeDetectionStrategy.OnPush,
30	host: { class: 'thy-stepper' }
31	})	8✔
32	export class ThyStepper implements IThyStepperComponent {	9✔
33	/**	9✔
34	* 当前处于激活状态的步骤 index	1✔
35	* @default 0	1✔
36	*/	1!
37	readonly thySelectedIndex = input<number, number>(undefined, { transform: numberAttribute });	1✔
38
39	/**
40	* 当前处于激活状态的步骤实例
41	*/
42	readonly thySelected = input<ThyStep>();
43
44	/**	5!
UNCOV 45	* 步骤条导航是否展示，默认展示	×
46	*/
47	readonly thyShowStepHeader = input<boolean, boolean>(true, { transform: coerceBooleanProperty });	5✔
48		5!
49	readonly selectionChange = output<any>();	5✔
50		5✔
51	readonly steps = contentChildren(ThyStep);
52
53	selectedIndex = signal(0);
54
55	selected = computed(() => this.steps()?.[this.selectedIndex()]);
56
57	constructor() {
58	effect(() => {	1✔
59	const newIndex = this.thySelectedIndex();	1✔
60	if (newIndex) {
61	untracked(() => {
62	this.updateSelectedIndex(newIndex);	1✔
63	});
64	}
65	});	1✔
66
67	effect(() => {
68	const selected = this.thySelected();
69	if (selected) {	1✔
70	untracked(() => {
71	const index = this.steps()?.indexOf(selected);	1✔
72	if (index > -1) {	1✔
73	this.updateSelectedIndex(index);
74	}
75	});
76	}
77	});
78	}
79
80	private updateSelectedIndex(newIndex: number): void {	1✔
81	if (!this.steps()?.[newIndex]) {
82	return;
83	}
84	const previouslySelectedIndex = this.selectedIndex();
85	const previouslySelectedStep = this.steps() ? this.steps()[previouslySelectedIndex] : null;
86	this.selectedIndex.set(newIndex);
87	this.selectionChange.emit({
88	selectedIndex: newIndex,
89	previouslySelectedIndex: previouslySelectedIndex,
90	selectedStep: this.selected(),
91	previouslySelectedStep: previouslySelectedStep
92	});
93	}
94
95	updateSelected(step: ThyStep): void {
96	const index = this.steps().indexOf(step);
97	this.updateSelectedIndex(index);
98	}
99
100	to(index: number): void {
101	this.updateSelectedIndex(Math.min(index, this.steps().length - 1));
102	}
103
104	next(): void {
105	this.updateSelectedIndex(Math.min(this.selectedIndex() + 1, this.steps().length - 1));
106	}
107
108	/** Selects and focuses the previous step in list. */
109	previous(): void {
110	this.updateSelectedIndex(Math.max(this.selectedIndex() - 1, 0));
111	}
112	}

atinc / ngx-tethys / 7019cd2f-3cb2-44c2-9a2b-b1928730e5c2

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