feat(core) refactor floating

al-march · Sep 8, 2024 · 19fadd3 · 19fadd3
1 parent f6fc290
commit 19fadd3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/packages/core/src/lib/floating/floating.component.html b/packages/core/src/lib/floating/floating.component.html
@@ -3,8 +3,8 @@
     <div
       #floating
       class="floating"
-      [style.left.px]="(coords$ | async)?.x"
-      [style.top.px]="(coords$ | async)?.y"
+      [style.left.px]="coords()?.x"
+      [style.top.px]="coords()?.y"
 
       ngxClickOutside
       (outside)="onClickOutside($event)"

diff --git a/packages/core/src/lib/floating/floating.component.ts b/packages/core/src/lib/floating/floating.component.ts
@@ -13,6 +13,7 @@ import {
   viewChild
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, filter, map, shareReplay } from 'rxjs';
 import { arrow, ComputePositionReturn, FloatingElement, ReferenceElement } from '../type';
 import { PortalComponent } from '../portal';
@@ -40,9 +41,9 @@ import { isServer } from '../injections';
   styleUrl: './floating.component.scss'
 })
 export class FloatingComponent implements AfterViewInit, OnChanges, OnDestroy {
-  config = inject(NGX_FLOATING_CONFIG);
-  floatingService = inject(FloatingService);
-  isServer = isServer();
+  private readonly config = inject(NGX_FLOATING_CONFIG);
+  private readonly floatingService = inject(FloatingService);
+  readonly isServer = isServer();
 
   floatingRef = viewChild<ElementRef<HTMLElement>>('floating');
 
@@ -67,18 +68,19 @@ export class FloatingComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   clickedOutside = output<Element>();
   clickedInside = output<Element>();
-
   computePositionReturn = output<ComputePositionReturn>();
 
+  readonly arrowMiddleware = computed(() => this.getArrowMiddleware(this.arrow()));
+
   private _computePosition$ = new BehaviorSubject<ComputePositionReturn | undefined>(undefined);
-  public computePosition$ = this._computePosition$
+  computePosition$ = this._computePosition$
     .asObservable()
     .pipe(shareReplay());
 
-  coords$ = this.computePosition$.pipe(
+  readonly coords = toSignal(this.computePosition$.pipe(
     filter(Boolean),
     map(({ x, y }) => ({ x, y }))
-  );
+  ));
 
   /* Uses for cleanup autoUpdate function */
   cleanup?: () => void;
@@ -118,12 +120,11 @@ export class FloatingComponent implements AfterViewInit, OnChanges, OnDestroy {
     return;
   }
 
-
   async computePosition(reference: ReferenceElement, floating: FloatingElement) {
     const computePositionReturn = await this.floatingService.computePosition(reference, floating, {
       placement: this.placement(),
       strategy: this.strategy(),
-      middleware: [...this.middleware(), this.getArrowMiddleware()]
+      middleware: [...this.middleware(), this.arrowMiddleware()]
     });
 
     this._computePosition$.next(computePositionReturn);
@@ -158,8 +159,7 @@ export class FloatingComponent implements AfterViewInit, OnChanges, OnDestroy {
     return this.bind();
   }
 
-  getArrowMiddleware() {
-    const arr = this.arrow();
+  private getArrowMiddleware(arr?: Arrow) {
     const arrRef = arr?.arrowRef();
     if (arr && arrRef) {
       return arrow({