feat: remove NgxDetroy

DSI-HUG · Aug 5, 2024 · c64d8bb · c64d8bb
1 parent 0e6aece
commit c64d8bb
Show file tree

Hide file tree

Showing 22 changed files with 156 additions and 164 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,4 +1,8 @@
 {
     "root": true,
-    "extends": ["@hug/eslint-config/recommended"]
+    "extends": ["@hug/eslint-config/recommended"],
+    "rules": {
+        // Use dwdwdw and ngOnDestroy
+        "rxjs-angular/prefer-takeuntil": "off"
+    }
 }
diff --git a/projects/core/src/directives/destroy.ts b/projects/core/src/directives/destroy.ts
diff --git a/projects/core/src/directives/input-autosize.directive.ts b/projects/core/src/directives/input-autosize.directive.ts
@@ -1,18 +1,19 @@
-import { Directive, ElementRef, inject, NgZone, OnInit } from '@angular/core';
-import { MatInput } from '@angular/material/input';
-import { debounceTime, fromEvent, mergeWith, of, startWith, takeUntil } from 'rxjs';
+import { DestroyRef, Directive, ElementRef, inject, NgZone, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-import { NgxDestroy } from './destroy';
+import { MatInput } from '@angular/material/input';
+import { debounceTime, fromEvent, mergeWith, of, startWith } from 'rxjs';
 
 @Directive({
     selector: '[ngx-input-autosize][matInput], [ngx-input-autosize] [matInput]',
     exportAs: 'ngx-input-autosize',
     standalone: true
 })
-export class NgxInputAutosizeDirective extends NgxDestroy implements OnInit {
+export class NgxInputAutosizeDirective implements OnInit {
     private elementRef = inject<ElementRef<HTMLInputElement>>(ElementRef);
     private ngZone = inject(NgZone);
     private matInput = inject(MatInput);
+    private destroyRef = inject(DestroyRef);
 
     public ngOnInit(): void {
         const inputElement = this.elementRef.nativeElement;
@@ -23,7 +24,7 @@ export class NgxInputAutosizeDirective extends NgxDestroy implements OnInit {
                 mergeWith(fromEvent<Event>(inputElement, 'paste'), valueChanges$),
                 startWith(inputElement.value),
                 debounceTime(5),
-                takeUntil(this.destroyed$)
+                takeUntilDestroyed(this.destroyRef)
             ).subscribe(() => {
                 const nbChar = inputElement.value?.length;
 

diff --git a/projects/core/src/directives/single-click.directive.ts b/projects/core/src/directives/single-click.directive.ts
@@ -1,14 +1,14 @@
-import { Directive, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { DestroyRef, Directive, EventEmitter, HostListener, inject, Input, OnInit, Output } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
-import { takeUntil, throttleTime } from 'rxjs/operators';
+import { throttleTime } from 'rxjs/operators';
 
-import { NgxDestroy } from './destroy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Directive({
     selector: '[ngx-single-click]',
     standalone: true
 })
-export class NgxSingleClickDirective extends NgxDestroy implements OnInit {
+export class NgxSingleClickDirective implements OnInit {
     @Input()
     public throttleTime = 2000;
 
@@ -20,6 +20,8 @@ export class NgxSingleClickDirective extends NgxDestroy implements OnInit {
 
     private _clicks$ = new ReplaySubject<MouseEvent>(1);
 
+    private destroyRef = inject(DestroyRef);
+
     @HostListener('click', ['$event'])
     public clickEvent(event: MouseEvent): void {
         event.preventDefault();
@@ -38,7 +40,7 @@ export class NgxSingleClickDirective extends NgxDestroy implements OnInit {
     public ngOnInit(): void {
         this._clicks$.pipe(
             throttleTime(this.throttleTime),
-            takeUntil(this.destroyed$)
+            takeUntilDestroyed(this.destroyRef)
         ).subscribe((event: MouseEvent) => this.singleClick.emit(event));
     }
 }
diff --git a/projects/core/src/index.ts b/projects/core/src/index.ts
@@ -1,7 +1,6 @@
 export * from './services/lazy-loader.service';
 export * from './services/dialog.service';
 export * from './services/media.service';
-export * from './directives/destroy';
 export * from './directives/input-autosize.directive';
 export * from './directives/single-click.directive';
 export * from './cache';

diff --git a/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts b/projects/date-picker/src/datepicker-buttons/datepicker-buttons.component.ts
@@ -1,16 +1,16 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, EventEmitter, inject, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AbstractControl } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { DateAdapter } from '@angular/material/core';
 import { MatDatepicker, MatDateRangeInput, MatDateRangePicker } from '@angular/material/datepicker';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { NgxDestroy } from '@hug/ngx-core';
 import { set } from 'date-fns';
-import { filter, ReplaySubject, switchMap, takeUntil, tap } from 'rxjs';
+import { filter, ReplaySubject, switchMap, tap } from 'rxjs';
 
 @Component({
     selector: 'ngx-datepicker-buttons',
@@ -26,14 +26,15 @@ import { filter, ReplaySubject, switchMap, takeUntil, tap } from 'rxjs';
         MatTooltipModule
     ]
 })
-export class NgxDatepickerButtonsComponent extends NgxDestroy implements OnInit {
+export class NgxDatepickerButtonsComponent implements OnInit {
     @Output() public readonly dateChange = new EventEmitter<Date>();
 
     @Input() public forInput!: MatFormFieldControl<unknown>;
     @Input() public forPicker!: MatDatepicker<unknown> | MatDateRangePicker<Date>;
 
     protected changeDetectorRef = inject(ChangeDetectorRef);
     protected dateAdater = inject<DateAdapter<unknown>>(DateAdapter);
+    private destroyRef = inject(DestroyRef);
 
     private _hideToday = false;
     private _hideClear = false;
@@ -72,12 +73,12 @@ export class NgxDatepickerButtonsComponent extends NgxDestroy implements OnInit
                     }
                 })
             )),
-            takeUntil(this.destroyed$)
+            takeUntilDestroyed(this.destroyRef)
         ).subscribe();
 
         if (this.forInput.ngControl?.valueChanges) {
             this.forInput.ngControl.valueChanges.pipe(
-                takeUntil(this.destroyed$)
+                takeUntilDestroyed(this.destroyRef)
             ).subscribe(() => {
                 this.changeDetectorRef.markForCheck();
             });

diff --git a/projects/date-picker/src/datepicker-mask/datepicker-mask.directive.ts b/projects/date-picker/src/datepicker-mask/datepicker-mask.directive.ts
@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { Directive, ElementRef, forwardRef, Inject, Input, OnInit, Optional, Renderer2 } from '@angular/core';
+import { DestroyRef, Directive, ElementRef, forwardRef, inject, Input, OnInit, Renderer2 } from '@angular/core';
 import { AbstractControl, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core';
-import { filterMap, KeyCodes, NgxDestroy, subscribeWith } from '@hug/ngx-core';
+import { filterMap, KeyCodes, subscribeWith } from '@hug/ngx-core';
 import { addDays, addHours, addMinutes, addMonths, addSeconds, addYears, isValid, parse, set } from 'date-fns';
 import { isNil } from 'lodash-es';
-import { delay, EMPTY, filter, fromEvent, mergeWith, of, startWith, switchMap, takeUntil, tap, timeInterval } from 'rxjs';
+import { delay, EMPTY, filter, fromEvent, mergeWith, of, startWith, switchMap, tap, timeInterval } from 'rxjs';
 
 import { NgxDatepickerMaskValidatorService } from './datepicker-mask-validator.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 
 @Directive({
@@ -22,17 +23,17 @@ import { NgxDatepickerMaskValidatorService } from './datepicker-mask-validator.s
     ],
     standalone: true
 })
-export class NgxDatepickerMaskDirective extends NgxDestroy implements OnInit {
+export class NgxDatepickerMaskDirective implements OnInit {
     // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('dateTimeFormat')
     public set dateTimeFormat(value: string) {
-        this.formatExpression = value || this.dateFormats.display.dateInput as string;
+        this.formatExpression = value || this.dateFormats?.display.dateInput as string;
     }
 
     // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('dateFormat')
     public set dateFormat(value: string) {
-        this.formatExpression = value || this.dateFormats.display.dateInput as string;
+        this.formatExpression = value || this.dateFormats?.display.dateInput as string;
     }
 
     private set formatExpression(value: string) {
@@ -53,26 +54,26 @@ export class NgxDatepickerMaskDirective extends NgxDestroy implements OnInit {
     private formatCharRegExp = /[mdyhs]/i;
     private forwardToInputKeyCodes = ['LeftArrow', 'RightArrow', 'UpArrow', 'DownArrow', 'PageDown', 'PageUp', 'End', 'Home', 'Tab'];
 
-    public constructor(
-        @Optional() @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
-        private elementRef: ElementRef<HTMLInputElement>,
-        private ngControl: NgControl,
-        private renderer: Renderer2,
-        private validator: NgxDatepickerMaskValidatorService,
-        private dateAdapter: DateAdapter<unknown>
-    ) {
-        super();
+    private dateFormats = inject<MatDateFormats>(MAT_DATE_FORMATS, { optional: true });
+    private elementRef = inject<ElementRef<HTMLInputElement>>(ElementRef);
+    private ngControl = inject(NgControl);
+    private renderer = inject(Renderer2);
+    private validator = inject(NgxDatepickerMaskValidatorService);
+    private dateAdapter = inject<DateAdapter<unknown>>(DateAdapter);
+    private destroyRef = inject(DestroyRef);
 
-        elementRef.nativeElement.setAttribute('autocomplete', 'off');
+    public constructor() {
 
-        const dblClick$ = fromEvent<Event>(elementRef.nativeElement, 'mousedown').pipe(
+        this.elementRef.nativeElement.setAttribute('autocomplete', 'off');
+
+        const dblClick$ = fromEvent<Event>(this.elementRef.nativeElement, 'mousedown').pipe(
             timeInterval(),
             filter(intervalEvent => intervalEvent.interval < 400)
         );
 
-        const selectAll$ = fromEvent<FocusEvent>(elementRef.nativeElement, 'focus').pipe(
+        const selectAll$ = fromEvent<FocusEvent>(this.elementRef.nativeElement, 'focus').pipe(
             delay(400),
-            mergeWith(fromEvent<KeyboardEvent>(elementRef.nativeElement, 'keydown')),
+            mergeWith(fromEvent<KeyboardEvent>(this.elementRef.nativeElement, 'keydown')),
             timeInterval(),
             tap(intervalEvent => {
                 const selectionStart = this.elementRef.nativeElement.selectionStart;
@@ -89,8 +90,8 @@ export class NgxDatepickerMaskDirective extends NgxDestroy implements OnInit {
             })
         );
 
-        fromEvent<ClipboardEvent>(elementRef.nativeElement, 'paste').pipe(
-            takeUntil(this.destroyed$)
+        fromEvent<ClipboardEvent>(this.elementRef.nativeElement, 'paste').pipe(
+            takeUntilDestroyed(this.destroyRef)
         ).subscribe(event => {
             // Get pasted data via clipboard
             const pastedData = event.clipboardData?.getData('Text');
@@ -142,7 +143,7 @@ export class NgxDatepickerMaskDirective extends NgxDestroy implements OnInit {
             }),
             delay(1),
             subscribeWith(selectAll$),
-            takeUntil(this.destroyed$)
+            takeUntilDestroyed(this.destroyRef)
         ).subscribe(([event, start, end]) => {
             if (start !== undefined && end !== undefined) {
                 this.elementRef.nativeElement.setSelectionRange(start, end);
@@ -152,8 +153,8 @@ export class NgxDatepickerMaskDirective extends NgxDestroy implements OnInit {
             return false;
         });
 
-        fromEvent<KeyboardEvent>(elementRef.nativeElement, 'keydown').pipe(
-            takeUntil(this.destroyed$)
+        fromEvent<KeyboardEvent>(this.elementRef.nativeElement, 'keydown').pipe(
+            takeUntilDestroyed(this.destroyRef)
         ).subscribe(e => {
             const formatExpression = this._formatExpression;
             if (!this.maskValue || !formatExpression) {
@@ -344,7 +345,7 @@ export class NgxDatepickerMaskDirective extends NgxDestroy implements OnInit {
                     this.applyMask();
                 })
             )),
-            takeUntil(this.destroyed$)
+            takeUntilDestroyed(this.destroyRef)
         ).subscribe();
     }
 

diff --git a/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts b/projects/date-picker/src/datepicker-with-time/datepicker-with-time.component.ts
@@ -1,14 +1,14 @@
 import { TemplatePortal } from '@angular/cdk/portal';
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, inject, OnDestroy, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, OnDestroy, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { DateAdapter } from '@angular/material/core';
 import { MatDatepicker, MatDatepickerInput, MatDatepickerModule, MatDateSelectionModel } from '@angular/material/datepicker';
-import { NgxDestroy } from '@hug/ngx-core';
 import { NgxDateOrDuration, NgxTimePickerComponent } from '@hug/ngx-time-picker';
 import { cloneDeep } from 'lodash-es';
-import { delay, filter, map, takeUntil, tap } from 'rxjs';
+import { delay, filter, map, tap } from 'rxjs';
 
 import { DATE_TIME_ADAPTER, DateTimeAdapter } from '../date-adapter/date-time-adapter';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 
 @Component({
@@ -24,7 +24,8 @@ import { DATE_TIME_ADAPTER, DateTimeAdapter } from '../date-adapter/date-time-ad
         MatDatepickerModule
     ]
 })
-export class NgxDatepickerWithTimeComponent extends NgxDestroy implements AfterViewInit, OnDestroy {
+export class NgxDatepickerWithTimeComponent implements AfterViewInit, OnDestroy {
+
     @ViewChild(TemplateRef)
     private template?: TemplateRef<unknown>;
 
@@ -37,11 +38,11 @@ export class NgxDatepickerWithTimeComponent extends NgxDestroy implements AfterV
     protected viewContainerRef = inject(ViewContainerRef);
     protected globalModel = inject<MatDateSelectionModel<unknown, unknown>>(MatDateSelectionModel);
     protected dateAdapter? = inject<DateTimeAdapter<unknown> & DateAdapter<unknown>>(DATE_TIME_ADAPTER, { optional: true });
+    private destroyRef = inject(DestroyRef);
 
     private portal?: TemplatePortal;
 
     public constructor() {
-        super();
 
         this.datepicker.openedStream.pipe(
             tap(() => {
@@ -51,7 +52,7 @@ export class NgxDatepickerWithTimeComponent extends NgxDestroy implements AfterV
             delay(1),
             map(() => this.timePickerElement?.nativeElement.parentElement),
             filter(Boolean),
-            takeUntil(this.destroyed$)
+            takeUntilDestroyed(this.destroyRef)
         ).subscribe(datePickerContainer => {
             const containerRef = this.viewContainerRef.element.nativeElement as HTMLElement;
             datePickerContainer.setAttribute('layout', containerRef?.ownerDocument?.body?.clientHeight <= 500 ? 'h' : 'v');
@@ -93,9 +94,7 @@ export class NgxDatepickerWithTimeComponent extends NgxDestroy implements AfterV
         this.datepicker.registerActions(this.portal);
     }
 
-    public override ngOnDestroy(): void {
-        super.ngOnDestroy();
-
+    public ngOnDestroy(): void {
         if (!this.portal) {
             return;
         }

diff --git a/projects/demo-app/src/app/date-picker/date-picker-demo.component.scss b/projects/demo-app/src/app/date-picker/date-picker-demo.component.scss
@@ -55,7 +55,7 @@ app-date-picker-demo {
         form {
             display: flex;
             flex-direction: column;
-            width: 250px;
+            width: 370px;
         }
     }
 }