b1ae0053-7e6c-4c46-af6a-4fac2d5128d8

Committed 19 Apr 2024 03:57AM UTC coverage: 90.383% (-0.004%) from 90.387%

Build # b1ae0053-7e6c-4c46-af6a-4fac2d5128d8

Build Type

Pull #3079

circleci

Committed by

smile1016

Commit Message

fix(segment): code review

Pull Request Pull Request #3079: fix(segment): fix options bug and style #INFR-12166

Run Details

5438 of 6663 branches covered (81.61%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

2 existing lines in 1 file now uncovered.

13180 of 13936 relevant lines covered (94.58%)

982.99 hits per line

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

93.22

/src/segment/segment.component.ts

import {
    AfterContentInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ContentChildren,
    DestroyRef,
    EventEmitter,
    HostBinding,
    Input,
    Output,
    QueryList,
    ViewEncapsulation,
    booleanAttribute,
    numberAttribute
} from '@angular/core';
import { ThumbAnimationProps } from 'ngx-tethys/core';
import { thumbMotion } from 'ngx-tethys/core';
import { ThySegmentItem } from './segment-item.component';
import { IThySegmentComponent, THY_SEGMENTED_COMPONENT } from './segment.token';
import { ThySegmentEvent } from './types';
import { AnimationEvent } from '@angular/animations';
import { NgIf } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export type ThySegmentSize = 'xs' | 'sm' | 'md' | 'default';

export type ThySegmentMode = 'block' | 'inline';

/**
 * 分段控制器组件
 * @name thy-segment
 */
@Component({
    selector: 'thy-segment',
    templateUrl: './segment.component.html',
    exportAs: 'thySegment',
    animations: [thumbMotion],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: THY_SEGMENTED_COMPONENT,
            useExisting: ThySegment
        }
    ],
    host: {
        class: 'thy-segment',
        '[class.thy-segment-xs]': `thySize === 'xs'`,
        '[class.thy-segment-sm]': `thySize === 'sm'`,
        '[class.thy-segment-md]': `thySize === 'md'`,
        '[class.thy-segment-default]': `!thySize || thySize === 'default'`,
        '[class.thy-segment-block]': `thyMode === 'block'`
    },
    standalone: true,
    imports: [NgIf]
})
export class ThySegment implements IThySegmentComponent, AfterContentInit {
    /**
     * @internal
     */
    @ContentChildren(ThySegmentItem) options!: QueryList<ThySegmentItem>;

    /**
     * 大小
     * @type xs | sm | md | default
     */
    @Input() thySize: ThySegmentSize = 'default';

    /**
     * 模式
     * @type block | inline
     */
    @Input() thyMode: ThySegmentMode = 'block';

    /**
     * 是否禁用分段控制器
     */
    @Input({ transform: booleanAttribute })
    @HostBinding(`class.disabled`)
    thyDisabled = false;

    /**
     * 选中选项的索引
     */
    @Input({ transform: numberAttribute })
    set thyActiveIndex(value: number) {
        this.newActiveIndex = value;
        if (value < 0 || value === this.activeIndex) {
            return;
        }
        setTimeout(() => {
            const selectedItem = this.options?.get(this.activeIndex);
            if (selectedItem) {
                selectedItem.unselect();
                this.changeSelectedItem(this.options.get(value));
            } else {
                this.activeIndex = value;
            }
        });
    }

    /**
     * 选项被选中的回调事件
     */
    @Output() readonly thySelectChange = new EventEmitter<ThySegmentEvent>();

    public selectedItem: ThySegmentItem;

    private newActiveIndex: number;

    private activeIndex: number;

    public animationState: null | { value: string; params: ThumbAnimationProps } = null;

    public transitionedTo: any = null;

    constructor(private cdr: ChangeDetectorRef, private destroyRef: DestroyRef) {}

    ngAfterContentInit(): void {
        this.selectedItem = this.options.get(this.newActiveIndex) || this.options.get(0);
        this.selectedItem?.select();

        this.options.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
            this.options.forEach(item => {
                item.unselect();
            });
            this.selectedItem = this.options.get(this.newActiveIndex) || this.options.get(0);
            this.selectedItem?.select();
            this.cdr.detectChanges();
        });
    }

    public changeSelectedItem(item: ThySegmentItem, event?: Event): void {
        this.animationState = {
            value: 'from',
            params: getThumbAnimationProps(this.options?.get(this.activeIndex || 0)?.elementRef.nativeElement!)
        };
        this.selectedItem = null;
        this.cdr.detectChanges();

        this.animationState = {
            value: 'to',
            params: getThumbAnimationProps(item.elementRef.nativeElement!)
        };
        this.transitionedTo = item;
        this.activeIndex = this.options?.toArray().findIndex(option => {
            return option.thyValue === item?.thyValue;
        });
        this.thySelectChange.emit({ event: event, value: item.thyValue, activeIndex: this.activeIndex });
        this.cdr.detectChanges();
    }

    public handleThumbAnimationDone(event: AnimationEvent): void {
        if (event.fromState === 'from') {
            this.selectedItem = this.transitionedTo;
            this.selectedItem?.select();
            this.transitionedTo = null;
            this.animationState = null;
            this.cdr.detectChanges();
        }
    }
}

function getThumbAnimationProps(element: HTMLElement): ThumbAnimationProps {
    return {
        transform: element.offsetLeft,
        width: element.clientWidth
    };
}

1	import {
2	AfterContentInit,
3	ChangeDetectionStrategy,
4	ChangeDetectorRef,
5	Component,
6	ContentChildren,
7	DestroyRef,
8	EventEmitter,
9	HostBinding,
10	Input,
11	Output,
12	QueryList,
13	ViewEncapsulation,	1✔
14	booleanAttribute,
15	numberAttribute	6✔
16	} from '@angular/core';	6✔
17	import { ThumbAnimationProps } from 'ngx-tethys/core';	1✔
18	import { thumbMotion } from 'ngx-tethys/core';
19	import { ThySegmentItem } from './segment-item.component';	5✔
20	import { IThySegmentComponent, THY_SEGMENTED_COMPONENT } from './segment.token';	5✔
21	import { ThySegmentEvent } from './types';	5!
UNCOV 22	import { AnimationEvent } from '@angular/animations';	×
UNCOV 23	import { NgIf } from '@angular/common';	×
24	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
25
26	export type ThySegmentSize = 'xs' \| 'sm' \| 'md' \| 'default';	5✔
27
28	export type ThySegmentMode = 'block' \| 'inline';
29
30	/**
31	* 分段控制器组件	16✔
32	* @name thy-segment	16✔
33	*/	16✔
34	@Component({	16✔
35	selector: 'thy-segment',	16✔
36	templateUrl: './segment.component.html',	16✔
37	exportAs: 'thySegment',	16✔
38	animations: [thumbMotion],	16✔
39	encapsulation: ViewEncapsulation.None,
40	changeDetection: ChangeDetectionStrategy.OnPush,
41	providers: [	16✔
42	{	16✔
43	provide: THY_SEGMENTED_COMPONENT,	16✔
44	useExisting: ThySegment	1✔
45	}	3✔
46	],
47	host: {	1!
48	class: 'thy-segment',	1✔
49	'[class.thy-segment-xs]': `thySize === 'xs'`,	1✔
50	'[class.thy-segment-sm]': `thySize === 'sm'`,
51	'[class.thy-segment-md]': `thySize === 'md'`,
52	'[class.thy-segment-default]': `!thySize \|\| thySize === 'default'`,
53	'[class.thy-segment-block]': `thyMode === 'block'`	1✔
54	},
55	standalone: true,	2✔
56	imports: [NgIf]
57	})	1✔
58	export class ThySegment implements IThySegmentComponent, AfterContentInit {	1✔
59	/**	1✔
60	* @internal
61	*/
62	@ContentChildren(ThySegmentItem) options!: QueryList<ThySegmentItem>;
63		1✔
64	/**	1✔
65	* 大小	2✔
66	* @type xs \| sm \| md \| default
67	*/	1✔
68	@Input() thySize: ThySegmentSize = 'default';	1✔
69
70	/**
71	* 模式	2✔
72	* @type block \| inline	1✔
73	*/	1✔
74	@Input() thyMode: ThySegmentMode = 'block';	1✔
75		1✔
76	/**	1✔
77	* 是否禁用分段控制器
78	*/
79	@Input({ transform: booleanAttribute })	1✔
80	@HostBinding(`class.disabled`)
81	thyDisabled = false;
82
83	/**	1✔
84	* 选中选项的索引
85	*/
86	@Input({ transform: numberAttribute })
87	set thyActiveIndex(value: number) {
88	this.newActiveIndex = value;
89	if (value < 0 \|\| value === this.activeIndex) {
90	return;
91	}
92	setTimeout(() => {	1✔
93	const selectedItem = this.options?.get(this.activeIndex);
94	if (selectedItem) {
95	selectedItem.unselect();
96	this.changeSelectedItem(this.options.get(value));
97	} else {
98	this.activeIndex = value;
99	}
100	});
101	}
102
103	/**
104	* 选项被选中的回调事件
105	*/
106	@Output() readonly thySelectChange = new EventEmitter<ThySegmentEvent>();
107
108	public selectedItem: ThySegmentItem;
109
110	private newActiveIndex: number;
111
112	private activeIndex: number;
113
114	public animationState: null \| { value: string; params: ThumbAnimationProps } = null;
115
116	public transitionedTo: any = null;
117
118	constructor(private cdr: ChangeDetectorRef, private destroyRef: DestroyRef) {}
119
120	ngAfterContentInit(): void {
121	this.selectedItem = this.options.get(this.newActiveIndex) \|\| this.options.get(0);	2✔
122	this.selectedItem?.select();
123
124	this.options.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
125	this.options.forEach(item => {
126	item.unselect();
127	});
128	this.selectedItem = this.options.get(this.newActiveIndex) \|\| this.options.get(0);
129	this.selectedItem?.select();
130	this.cdr.detectChanges();
131	});
132	}
133
134	public changeSelectedItem(item: ThySegmentItem, event?: Event): void {
135	this.animationState = {
136	value: 'from',
137	params: getThumbAnimationProps(this.options?.get(this.activeIndex \|\| 0)?.elementRef.nativeElement!)
138	};
139	this.selectedItem = null;
140	this.cdr.detectChanges();
141
142	this.animationState = {
143	value: 'to',
144	params: getThumbAnimationProps(item.elementRef.nativeElement!)
145	};
146	this.transitionedTo = item;
147	this.activeIndex = this.options?.toArray().findIndex(option => {
148	return option.thyValue === item?.thyValue;
149	});
150	this.thySelectChange.emit({ event: event, value: item.thyValue, activeIndex: this.activeIndex });
151	this.cdr.detectChanges();
152	}
153
154	public handleThumbAnimationDone(event: AnimationEvent): void {
155	if (event.fromState === 'from') {
156	this.selectedItem = this.transitionedTo;
157	this.selectedItem?.select();
158	this.transitionedTo = null;
159	this.animationState = null;
160	this.cdr.detectChanges();
161	}
162	}
163	}
164
165	function getThumbAnimationProps(element: HTMLElement): ThumbAnimationProps {
166	return {
167	transform: element.offsetLeft,
168	width: element.clientWidth
169	};
170	}

atinc / ngx-tethys / b1ae0053-7e6c-4c46-af6a-4fac2d5128d8

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