e42eb54e-db75-4ac6-9d54-d98ab6d94e44

Committed 04 Sep 2023 08:42AM UTC coverage: 90.2%. Remained the same

Build # e42eb54e-db75-4ac6-9d54-d98ab6d94e44

Build Type

Pull #2829

circleci

Committed by

cmm-va

Commit Message

fix: reset form code

Pull Request Pull Request #2829: fix: add tabIndex

Run Details

5163 of 6383 branches covered (0.0%)

Branch coverage included in aggregate %.

76 of 76 new or added lines in 24 files covered. (100.0%)

13015 of 13770 relevant lines covered (94.52%)

972.29 hits per line

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

91.86

/src/autocomplete/autocomplete.component.ts

import {
    Component,
    TemplateRef,
    ViewChild,
    ChangeDetectionStrategy,
    ContentChildren,
    QueryList,
    OnInit,
    Output,
    EventEmitter,
    NgZone,
    OnDestroy,
    AfterContentInit,
    ChangeDetectorRef,
    Input,
    ElementRef
} from '@angular/core';
import { InputBoolean, UnsubscribeMixin } from 'ngx-tethys/core';
import { defer, merge, Observable, timer } from 'rxjs';
import { take, switchMap, takeUntil, startWith } from 'rxjs/operators';
import { SelectionModel } from '@angular/cdk/collections';
import {
    THY_OPTION_PARENT_COMPONENT,
    IThyOptionParentComponent,
    ThyOptionComponent,
    ThyOptionSelectionChangeEvent,
    ThyStopPropagationDirective
} from 'ngx-tethys/shared';
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ThyEmptyComponent } from 'ngx-tethys/empty';
import { NgClass, NgIf } from '@angular/common';

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

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

/**
 * 自动完成组件
 * @name thy-autocomplete
 */
@Component({
    selector: 'thy-autocomplete',
    templateUrl: 'autocomplete.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: THY_OPTION_PARENT_COMPONENT,
            useExisting: ThyAutocompleteComponent
        }
    ],
    standalone: true,
    imports: [ThyStopPropagationDirective, NgClass, NgIf, ThyEmptyComponent]
})
export class ThyAutocompleteComponent extends UnsubscribeMixin implements IThyOptionParentComponent, OnInit, AfterContentInit, OnDestroy {
    dropDownClass: { [key: string]: boolean };

    isMultiple = false;

    mode = '';

    isEmptyOptions = false;

    selectionModel: SelectionModel<ThyOptionComponent>;

    isOpened = false;

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

    @ViewChild('contentTemplate', { static: true })
    contentTemplateRef: TemplateRef<any>;

    // scroll element container
    @ViewChild('panel')
    optionsContainer: ElementRef<any>;

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

    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>;

    /**
     * 空选项时的文本
     * @type string
     */
    @Input()
    thyEmptyText = '没有任何数据';

    /**
     * 是否默认高亮第一个选项
     * @type boolean
     * @default false
     */
    @Input()
    @InputBoolean()
    set thyAutoActiveFirstOption(value: boolean) {
        this._autoActiveFirstOption = coerceBooleanProperty(value);
    }

    get thyAutoActiveFirstOption(): boolean {
        return this._autoActiveFirstOption;
    }
    private _autoActiveFirstOption: boolean;

    /**
     * 被选中时调用，参数包含选中项的 value 值
     * @type EventEmitter<ThyOptionSelectionChangeEvent>
     */
    @Output() thyOptionSelected: EventEmitter<ThyOptionSelectionChangeEvent> = new EventEmitter<ThyOptionSelectionChangeEvent>();

    /**
     * 只读，展开下拉菜单的回调
     * @type EventEmitter<void>
     */
    @Output() readonly thyOpened: EventEmitter<void> = new EventEmitter<void>();

    /**
     * 只读，关闭下拉菜单的回调
     * @type EventEmitter<void>
     */
    @Output() readonly thyClosed: EventEmitter<void> = new EventEmitter<void>();

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

    constructor(private ngZone: NgZone, private changeDetectorRef: ChangeDetectorRef) {
        super();
    }

    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<ThyOptionComponent>(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<ThyOptionComponent>(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: ThyOptionComponent, 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 (this.isMultiple) {
            //     this.sortValues();
            //     if (isUserInput) {
            //         this.focus();
            //     }
            // }
        }

        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() {
        super.ngOnDestroy();
    }
}

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

atinc / ngx-tethys / e42eb54e-db75-4ac6-9d54-d98ab6d94e44

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