d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    AfterContentInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ContentChildren,
    EventEmitter,
    HostBinding,
    Input,
    Output,
    QueryList,
    ViewEncapsulation
} from '@angular/core';
import { InputBoolean, InputNumber, ThumbAnimationProps } from 'ngx-tethys/core';
import { thumbMotion } from 'ngx-tethys/core';
import { ThySegmentItemComponent } 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';

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: ThySegmentComponent
        }
    ],
    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 ThySegmentComponent implements IThySegmentComponent, AfterContentInit {
    /**
     * @internal
     */
    @ContentChildren(ThySegmentItemComponent) options!: QueryList<ThySegmentItemComponent>;

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

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

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

    /**
     * 选中选项的索引
     */
    @Input()
    @InputNumber()
    set thyActiveIndex(value: number) {
        if (value < 0 || value === this.activeIndex) {
            return;
        }
        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: ThySegmentItemComponent;

    private activeIndex = 0;

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

    public transitionedTo: any = null;

    constructor(private cdr: ChangeDetectorRef) {}

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

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

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