8d5d528d-6044-4871-84b8-3f8ef5bd0ce1

Committed 15 May 2025 05:58AM UTC coverage: 90.277% (+0.003%) from 90.274%

Build # 8d5d528d-6044-4871-84b8-3f8ef5bd0ce1

Build Type

push

circleci

Committed by

web-flow

Commit Message

refactor(autocomplete): migrate to signal for autocomplete #TINFR-1447 (#3379)

* refactor(autocomplete): migrate to signal for autocomplete #TINFR-1447

* refactor(autocomplete): accept boolean | string | number to transform

Run Details

5607 of 6871 branches covered (81.6%)

Branch coverage included in aggregate %.

20 of 20 new or added lines in 2 files covered. (100.0%)

4 existing lines in 3 files now uncovered.

13399 of 14182 relevant lines covered (94.48%)

920.39 hits per line

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

92.05

/src/autocomplete/autocomplete.component.ts

import {
    Component,
    TemplateRef,
    ChangeDetectionStrategy,
    ContentChildren,
    QueryList,
    OnInit,
    NgZone,
    OnDestroy,
    AfterContentInit,
    ChangeDetectorRef,
    ElementRef,
    inject,
    Signal,
    viewChild,
    input,
    output
} from '@angular/core';
import { defer, merge, Observable, Subject, timer } from 'rxjs';
import { take, switchMap, takeUntil, startWith } from 'rxjs/operators';
import { SelectionModel } from '@angular/cdk/collections';
import {
    THY_OPTION_PARENT_COMPONENT,
    IThyOptionParentComponent,
    ThyOption,
    ThyOptionSelectionChangeEvent,
    ThyStopPropagationDirective
} from 'ngx-tethys/shared';
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
import { ThyEmpty } from 'ngx-tethys/empty';
import { NgClass } from '@angular/common';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { injectLocale, ThyAutoCompleteLocale } from 'ngx-tethys/i18n';
import { injectPanelEmptyIcon } from 'ngx-tethys/core';

/** Event object that is emitted when an autocomplete option is activated. */
export interface ThyAutocompleteActivatedEvent {
    /** Reference to the autocomplete panel that emitted the event. */
    source: ThyAutocomplete;

    /** Option that was selected. */
    option: ThyOption | null;
}

/**
 * 自动完成组件
 * @name thy-autocomplete
 */
@Component({
    selector: 'thy-autocomplete',
    templateUrl: 'autocomplete.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: THY_OPTION_PARENT_COMPONENT,
            useExisting: ThyAutocomplete
        }
    ],
    imports: [ThyStopPropagationDirective, NgClass, ThyEmpty]
})
export class ThyAutocomplete implements IThyOptionParentComponent, OnInit, AfterContentInit, OnDestroy {
    private ngZone = inject(NgZone);
    private changeDetectorRef = inject(ChangeDetectorRef);

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

    private locale: Signal<ThyAutoCompleteLocale> = injectLocale('autocomplete');

    emptyIcon: Signal<string> = injectPanelEmptyIcon();

    dropDownClass: { [key: string]: boolean };

    isMultiple = false;

    mode = '';

    isEmptyOptions = false;

    selectionModel: SelectionModel<ThyOption>;

    isOpened = false;

    /** Manages active item in option list based on key events. */
    keyManager: ActiveDescendantKeyManager<ThyOption>;

    readonly contentTemplateRef = viewChild<TemplateRef<any>>('contentTemplate');

    // scroll element container
    readonly optionsContainer = viewChild<ElementRef<any>>('panel');

    /**
     * @private
     */
    @ContentChildren(ThyOption, { descendants: true }) options: QueryList<ThyOption>;

    readonly optionSelectionChanges: Observable<ThyOptionSelectionChangeEvent> = defer(() => {
        if (this.options) {
            return merge(...this.options.map(option => option.selectionChange));
        }
        return this.ngZone.onStable.asObservable().pipe(
            take(1),
            switchMap(() => this.optionSelectionChanges)
        );
    }) as Observable<ThyOptionSelectionChangeEvent>;

    /**
     * 空选项时的文本
     * @default 没有任何数据
     */
    readonly thyEmptyText = input<string>(this.locale().empty);

    /**
     * 是否默认高亮第一个选项
     */
    readonly thyAutoActiveFirstOption = input<boolean, boolean | string | number>(false, { transform: coerceBooleanProperty });

    /**
     * 被选中时调用，参数包含选中项的 value 值
     */
    readonly thyOptionSelected = output<ThyOptionSelectionChangeEvent>();

    /**
     * 只读，展开下拉菜单的回调
     */
    readonly thyOpened = output<void>();

    /**
     * 只读，关闭下拉菜单的回调
     */
    readonly thyClosed = output<void>();

    /** Emits whenever an option is activated using the keyboard. */
    /**
     * 只读，option 激活状态变化时，调用此函数
     */
    readonly thyOptionActivated = output<ThyAutocompleteActivatedEvent>();

    ngOnInit() {
        this.setDropDownClass();
        this.instanceSelectionModel();
    }

    ngAfterContentInit() {
        this.options.changes.pipe(startWith(null), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
            this.resetOptions();
            timer(0).subscribe(() => {
                this.isEmptyOptions = this.options.length <= 0;
                this.changeDetectorRef.detectChanges();
            });
            this.initKeyManager();
        });
    }

    initKeyManager() {
        const changedOrDestroyed$ = merge(this.options.changes, this.ngUnsubscribe$);
        this.keyManager = new ActiveDescendantKeyManager<ThyOption>(this.options).withWrap();
        this.keyManager.change.pipe(takeUntil(changedOrDestroyed$)).subscribe(index => {
            this.thyOptionActivated.emit({ source: this, option: this.options.toArray()[index] || null });
        });
    }

    open() {
        this.isOpened = true;
        this.changeDetectorRef.markForCheck();
        this.thyOpened.emit();
    }

    close() {
        this.isOpened = false;
        this.thyClosed.emit();
    }

    private resetOptions() {
        const changedOrDestroyed$ = merge(this.options.changes, this.ngUnsubscribe$);

        this.optionSelectionChanges.pipe(takeUntil(changedOrDestroyed$)).subscribe((event: ThyOptionSelectionChangeEvent) => {
            this.onSelect(event.option, event.isUserInput);
        });
    }

    private instanceSelectionModel() {
        if (this.selectionModel) {
            this.selectionModel.clear();
        }
        this.selectionModel = new SelectionModel<ThyOption>(this.isMultiple);
        this.selectionModel.changed.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(event => {
            event.added.forEach(option => option.select());
            event.removed.forEach(option => option.deselect());
        });
    }

    private onSelect(option: ThyOption, isUserInput: boolean) {
        const wasSelected = this.selectionModel.isSelected(option);

        if (option.thyValue == null && !this.isMultiple) {
            option.deselect();
            this.selectionModel.clear();
        } else {
            if (wasSelected !== option.selected) {
                option.selected ? this.selectionModel.select(option) : this.selectionModel.deselect(option);
            }

            if (isUserInput) {
                this.keyManager.setActiveItem(option);
            }
        }

        if (wasSelected !== this.selectionModel.isSelected(option)) {
            this.thyOptionSelected.emit(new ThyOptionSelectionChangeEvent(option, false));
        }
        this.changeDetectorRef.markForCheck();
    }

    private setDropDownClass() {
        let modeClass = '';
        if (this.isMultiple) {
            modeClass = `thy-select-dropdown-${this.mode}`;
        } else {
            modeClass = `thy-select-dropdown-single`;
        }
        this.dropDownClass = {
            [`thy-select-dropdown`]: true,
            [modeClass]: true
        };
    }

    ngOnDestroy() {
        this.ngUnsubscribe$.next();
        this.ngUnsubscribe$.complete();
    }
}

1	import {
2	Component,
3	TemplateRef,
4	ChangeDetectionStrategy,
5	ContentChildren,
6	QueryList,
7	OnInit,
8	NgZone,
9	OnDestroy,
10	AfterContentInit,
11	ChangeDetectorRef,
12	ElementRef,
13	inject,
14	Signal,
15	viewChild,
16	input,
17	output
18	} from '@angular/core';
19	import { defer, merge, Observable, Subject, timer } from 'rxjs';	1✔
20	import { take, switchMap, takeUntil, startWith } from 'rxjs/operators';
21	import { SelectionModel } from '@angular/cdk/collections';	15✔
22	import {	15✔
23	THY_OPTION_PARENT_COMPONENT,	15✔
24	IThyOptionParentComponent,	15✔
25	ThyOption,	15✔
26	ThyOptionSelectionChangeEvent,	15✔
27	ThyStopPropagationDirective	15✔
28	} from 'ngx-tethys/shared';	15✔
29	import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';	15✔
30	import { ThyEmpty } from 'ngx-tethys/empty';	15✔
31	import { NgClass } from '@angular/common';	15✔
32	import { coerceBooleanProperty } from 'ngx-tethys/util';	15✔
33	import { injectLocale, ThyAutoCompleteLocale } from 'ngx-tethys/i18n';	15!
34	import { injectPanelEmptyIcon } from 'ngx-tethys/core';	102✔
35
UNCOV 36	/** Event object that is emitted when an autocomplete option is activated. */	×
37	export interface ThyAutocompleteActivatedEvent {
38	/** Reference to the autocomplete panel that emitted the event. */	15✔
39	source: ThyAutocomplete;	15✔
40		15✔
41	/** Option that was selected. */	15✔
42	option: ThyOption \| null;	15✔
43	}	15✔
44
45	/**
46	* 自动完成组件	15✔
47	* @name thy-autocomplete	15✔
48	*/
49	@Component({
50	selector: 'thy-autocomplete',	15✔
51	templateUrl: 'autocomplete.component.html',	15✔
52	changeDetection: ChangeDetectionStrategy.OnPush,	15✔
53	providers: [	15✔
54	{	15✔
55	provide: THY_OPTION_PARENT_COMPONENT,
56	useExisting: ThyAutocomplete	15✔
57	}
58	],
59	imports: [ThyStopPropagationDirective, NgClass, ThyEmpty]
60	})	15✔
61	export class ThyAutocomplete implements IThyOptionParentComponent, OnInit, AfterContentInit, OnDestroy {	15✔
62	private ngZone = inject(NgZone);	15✔
63	private changeDetectorRef = inject(ChangeDetectorRef);	8✔
64
65	private ngUnsubscribe$ = new Subject<void>();
66
67	private locale: Signal<ThyAutoCompleteLocale> = injectLocale('autocomplete');	11✔
68		11✔
69	emptyIcon: Signal<string> = injectPanelEmptyIcon();	11✔
70
71	dropDownClass: { [key: string]: boolean };
72		11✔
73	isMultiple = false;	11✔
74
75	mode = '';
76		15✔
77	isEmptyOptions = false;	15✔
78		5✔
79	selectionModel: SelectionModel<ThyOption>;
80
81	isOpened = false;
82		15!
UNCOV 83	/** Manages active item in option list based on key events. */	×
84	keyManager: ActiveDescendantKeyManager<ThyOption>;
85		15✔
86	readonly contentTemplateRef = viewChild<TemplateRef<any>>('contentTemplate');	15✔
87		3✔
88	// scroll element container	3✔
89	readonly optionsContainer = viewChild<ElementRef<any>>('panel');
90
91	/**
92	* @private	5✔
93	*/	5✔
94	@ContentChildren(ThyOption, { descendants: true }) options: QueryList<ThyOption>;	2✔
95		2✔
96	readonly optionSelectionChanges: Observable<ThyOptionSelectionChangeEvent> = defer(() => {
97	if (this.options) {
98	return merge(...this.options.map(option => option.selectionChange));	3!
99	}	3!
100	return this.ngZone.onStable.asObservable().pipe(
101	take(1),	3!
102	switchMap(() => this.optionSelectionChanges)	3✔
103	);
104	}) as Observable<ThyOptionSelectionChangeEvent>;
105		5✔
106	/**	3✔
107	* 空选项时的文本
108	* @default 没有任何数据	5✔
109	*/
110	readonly thyEmptyText = input<string>(this.locale().empty);
111		15✔
112	/**	15✔
113	* 是否默认高亮第一个选项	3✔
114	*/
115	readonly thyAutoActiveFirstOption = input<boolean, boolean \| string \| number>(false, { transform: coerceBooleanProperty });
116		12✔
117	/**
118	* 被选中时调用，参数包含选中项的 value 值	15✔
119	*/
120	readonly thyOptionSelected = output<ThyOptionSelectionChangeEvent>();
121
122	/**
123	* 只读，展开下拉菜单的回调
124	*/	15✔
125	readonly thyOpened = output<void>();	15✔
126
127	/**	1✔
128	* 只读，关闭下拉菜单的回调
129	*/
130	readonly thyClosed = output<void>();
131
132	/** Emits whenever an option is activated using the keyboard. */
133	/**
134	* 只读，option 激活状态变化时，调用此函数
135	*/
136	readonly thyOptionActivated = output<ThyAutocompleteActivatedEvent>();
137
138	ngOnInit() {
139	this.setDropDownClass();	1✔
140	this.instanceSelectionModel();
141	}
142
143	ngAfterContentInit() {
144	this.options.changes.pipe(startWith(null), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
145	this.resetOptions();
146	timer(0).subscribe(() => {
147	this.isEmptyOptions = this.options.length <= 0;
148	this.changeDetectorRef.detectChanges();
149	});
150	this.initKeyManager();
151	});
152	}
153
154	initKeyManager() {
155	const changedOrDestroyed$ = merge(this.options.changes, this.ngUnsubscribe$);
156	this.keyManager = new ActiveDescendantKeyManager<ThyOption>(this.options).withWrap();
157	this.keyManager.change.pipe(takeUntil(changedOrDestroyed$)).subscribe(index => {
158	this.thyOptionActivated.emit({ source: this, option: this.options.toArray()[index] \|\| null });
159	});
160	}
161
162	open() {
163	this.isOpened = true;
164	this.changeDetectorRef.markForCheck();
165	this.thyOpened.emit();
166	}
167
168	close() {
169	this.isOpened = false;
170	this.thyClosed.emit();
171	}
172
173	private resetOptions() {
174	const changedOrDestroyed$ = merge(this.options.changes, this.ngUnsubscribe$);
175
176	this.optionSelectionChanges.pipe(takeUntil(changedOrDestroyed$)).subscribe((event: ThyOptionSelectionChangeEvent) => {
177	this.onSelect(event.option, event.isUserInput);
178	});
179	}
180
181	private instanceSelectionModel() {
182	if (this.selectionModel) {
183	this.selectionModel.clear();
184	}
185	this.selectionModel = new SelectionModel<ThyOption>(this.isMultiple);
186	this.selectionModel.changed.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(event => {
187	event.added.forEach(option => option.select());
188	event.removed.forEach(option => option.deselect());
189	});
190	}
191
192	private onSelect(option: ThyOption, isUserInput: boolean) {
193	const wasSelected = this.selectionModel.isSelected(option);
194
195	if (option.thyValue == null && !this.isMultiple) {
196	option.deselect();
197	this.selectionModel.clear();
198	} else {
199	if (wasSelected !== option.selected) {
200	option.selected ? this.selectionModel.select(option) : this.selectionModel.deselect(option);
201	}
202
203	if (isUserInput) {
204	this.keyManager.setActiveItem(option);
205	}
206	}
207
208	if (wasSelected !== this.selectionModel.isSelected(option)) {
209	this.thyOptionSelected.emit(new ThyOptionSelectionChangeEvent(option, false));
210	}
211	this.changeDetectorRef.markForCheck();
212	}
213
214	private setDropDownClass() {
215	let modeClass = '';
216	if (this.isMultiple) {
217	modeClass = `thy-select-dropdown-${this.mode}`;
218	} else {
219	modeClass = `thy-select-dropdown-single`;
220	}
221	this.dropDownClass = {
222	[`thy-select-dropdown`]: true,
223	[modeClass]: true
224	};
225	}
226
227	ngOnDestroy() {
228	this.ngUnsubscribe$.next();
229	this.ngUnsubscribe$.complete();
230	}
231	}

atinc / ngx-tethys / 8d5d528d-6044-4871-84b8-3f8ef5bd0ce1

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