881c8997-29c3-4d01-9ef1-22092f16cec2

Committed 03 Apr 2024 03:31AM UTC coverage: 90.404% (-0.2%) from 90.585%

Build # 881c8997-29c3-4d01-9ef1-22092f16cec2

Build Type

Pull #3062

circleci

Committed by

minlovehua

Commit Message

refactor(all): use the transform attribute of @input() instead of @InputBoolean() and @InputNumber()

Pull Request Pull Request #3062: refactor(all): use the transform attribute of @input() instead of @InputBoolean() and @InputNumber()

Run Details

5411 of 6635 branches covered (81.55%)

Branch coverage included in aggregate %.

217 of 223 new or added lines in 82 files covered. (97.31%)

201 existing lines in 53 files now uncovered.

13176 of 13925 relevant lines covered (94.62%)

980.1 hits per line

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

62.86

/src/shared/directives/thy-scroll.directive.ts

import { Directive, ElementRef, OnInit, NgZone, OnDestroy, Output, EventEmitter, Input, booleanAttribute } from '@angular/core';
import { Subject, Observable, Observer, fromEvent, Subscription } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { normalizePassiveListenerOptions } from '@angular/cdk/platform';

const passiveEventListenerOptions = <AddEventListenerOptions>normalizePassiveListenerOptions({ passive: true });

/**
 * @name thyScroll
 */
@Directive({
    selector: '[thyScroll]',
    standalone: true
})
export class ThyScrollDirective implements OnInit, OnDestroy {
    private _destroyed = new Subject<void>();
    private _enable = true;
    private _initialled = false;
    private _subscription: Subscription;

    private _elementScrolled: Observable<Event> = new Observable((observer: Observer<Event>) =>
        this.ngZone.runOutsideAngular(() =>
            fromEvent(this.elementRef.nativeElement, 'scroll', passiveEventListenerOptions)
                .pipe(takeUntil(this._destroyed))
                .subscribe(observer)
        )
    );

    @Input({ transform: booleanAttribute })
    set thyEnable(value: boolean) {
        this._enable = value;
        if (this._initialled) {
            if (this._enable && this._subscription === null) {
                this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));
            } else {
                if (this._subscription) {
                    this._subscription.unsubscribe();
                    this._subscription = null;
                }
            }
        }
    }

    /**
     * @description
     *
     * Note: the `thyOnScrolled` emits outside of the Angular zone since the `scroll` listener
     * is installed within the `<root>` zone.
     *
     * Consumers need to re-enter the Angular zone theirselves when the change detection is needeed to be run:
     * ```ts
     * @Component({
     *   template: '<div thyScroll (thyOnScrolled)="onScrolled()"></div>'
     * })
     * class ThyScrollComponent {
     *   onScrolled(): void {
     *     console.log(Zone.current); // <root>
     *     console.log(NgZone.isInAngularZone()); // false
     *   }
     * }
     * ```
     */
    @Output() thyOnScrolled: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

    constructor(private elementRef: ElementRef<any>, private ngZone: NgZone) {}

    ngOnInit() {
        if (this._enable) {
            this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));
        }
        this._initialled = true;
    }

    ngOnDestroy() {
        this._destroyed.next();
        this._destroyed.complete();
    }

    getElementRef(): ElementRef<HTMLElement> {
        return this.elementRef;
    }
}

1	import { Directive, ElementRef, OnInit, NgZone, OnDestroy, Output, EventEmitter, Input, booleanAttribute } from '@angular/core';
2	import { Subject, Observable, Observer, fromEvent, Subscription } from 'rxjs';
3	import { takeUntil } from 'rxjs/operators';
4	import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
5
6	const passiveEventListenerOptions = <AddEventListenerOptions>normalizePassiveListenerOptions({ passive: true });	1✔
7
8	/**
9	* @name thyScroll
10	*/	1✔
11	@Directive({
12	selector: '[thyScroll]',	71✔
13	standalone: true	71!
14	})	×
15	export class ThyScrollDirective implements OnInit, OnDestroy {	×
16	private _destroyed = new Subject<void>();
17	private _enable = true;
18	private _initialled = false;	×
19	private _subscription: Subscription;	×
20		×
21	private _elementScrolled: Observable<Event> = new Observable((observer: Observer<Event>) =>
22	this.ngZone.runOutsideAngular(() =>
23	fromEvent(this.elementRef.nativeElement, 'scroll', passiveEventListenerOptions)
24	.pipe(takeUntil(this._destroyed))
25	.subscribe(observer)
26	)	71✔
27	);	71✔
28		71✔
29	@Input({ transform: booleanAttribute })	71✔
30	set thyEnable(value: boolean) {	71✔
31	this._enable = value;	71✔
32	if (this._initialled) {
33	if (this._enable && this._subscription === null) {
34	this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));	71✔
35	} else {
36	if (this._subscription) {
37	this._subscription.unsubscribe();	71✔
38	this._subscription = null;	6✔
39	}
40	}	71✔
41	}
42	}
43		71✔
44	/**	71✔
45	* @description
46	*
UNCOV 47	* Note: the `thyOnScrolled` emits outside of the Angular zone since the `scroll` listener	×
48	* is installed within the `<root>` zone.
49	*	1✔
50	* Consumers need to re-enter the Angular zone theirselves when the change detection is needeed to be run:
51	* ```ts
52	* @Component({
53	* template: '<div thyScroll (thyOnScrolled)="onScrolled()"></div>'	1✔
54	* })
55	* class ThyScrollComponent {
56	* onScrolled(): void {
57	* console.log(Zone.current); // <root>
58	* console.log(NgZone.isInAngularZone()); // false	1✔
59	* }
60	* }
61	* ```
62	*/
63	@Output() thyOnScrolled: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();
64
65	constructor(private elementRef: ElementRef<any>, private ngZone: NgZone) {}
66
67	ngOnInit() {
68	if (this._enable) {
69	this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));
70	}
71	this._initialled = true;
72	}
73
74	ngOnDestroy() {
75	this._destroyed.next();
76	this._destroyed.complete();
77	}
78
79	getElementRef(): ElementRef<HTMLElement> {
80	return this.elementRef;
81	}
82	}

atinc / ngx-tethys / 881c8997-29c3-4d01-9ef1-22092f16cec2

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