Merge branch 'master' of https://github.com/tutkli/ngx-sonner into si…

…gnal-queries
tutkli · Apr 1, 2024 · 41dc7a8 · 41dc7a8
2 parents c88d53b + c7775a2
commit 41dc7a8
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 11 deletions.
diff --git a/...nner/src/lib/pipes/toast-position.pipe.ts → ...sonner/src/lib/pipes/toast-filter.pipe.ts b/...nner/src/lib/pipes/toast-position.pipe.ts → ...sonner/src/lib/pipes/toast-filter.pipe.ts
@@ -1,8 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { Position, ToastT } from '../types';
 
-@Pipe({ name: 'toastPosition', standalone: true })
-export class ToastPositionPipe implements PipeTransform {
+@Pipe({ name: 'toastFilter', standalone: true })
+export class ToastFilterPipe implements PipeTransform {
   transform(toasts: ToastT[], index: number, position: Position): ToastT[] {
     return toasts.filter(
       toast => (!toast.position && index === 0) || toast.position === position

diff --git a/libs/ngx-sonner/src/lib/state.ts b/libs/ngx-sonner/src/lib/state.ts
@@ -169,9 +169,13 @@ function createToastState() {
   }
 
   function addHeight(height: HeightT) {
-    heights.update(prev => [height, ...prev]);
+    heights.update(prev => [height, ...prev].sort(sortHeights));
   }
 
+  const sortHeights = (a: HeightT, b: HeightT) =>
+    toasts().findIndex(t => t.id === a.toastId) -
+    toasts().findIndex(t => t.id === b.toastId);
+
   function reset() {
     toasts.set([]);
     heights.set([]);

diff --git a/libs/ngx-sonner/src/lib/toast.component.ts b/libs/ngx-sonner/src/lib/toast.component.ts
@@ -303,7 +303,9 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
     effect(() => {
       const heightIndex = this.heightIndex();
       const toastsHeightBefore = this.toastsHeightBefore();
-      untracked(() => this.offset.set(heightIndex * GAP + toastsHeightBefore));
+      untracked(() =>
+        this.offset.set(Math.round(heightIndex * GAP + toastsHeightBefore))
+      );
     });
 
     effect(() => {

diff --git a/libs/ngx-sonner/src/lib/toaster.component.ts b/libs/ngx-sonner/src/lib/toaster.component.ts
@@ -18,7 +18,7 @@ import {
 } from '@angular/core';
 import { IconComponent } from './icon.component';
 import { LoaderComponent } from './loader.component';
-import { ToastPositionPipe } from './pipes/toast-position.pipe';
+import { ToastFilterPipe } from './pipes/toast-filter.pipe';
 import { toastState } from './state';
 import { ToastComponent } from './toast.component';
 import { Position, Theme, ToasterProps } from './types';
@@ -41,7 +41,7 @@ const GAP = 14;
 @Component({
   selector: 'ngx-sonner-toaster',
   standalone: true,
-  imports: [ToastComponent, ToastPositionPipe, IconComponent, LoaderComponent],
+  imports: [ToastComponent, ToastFilterPipe, IconComponent, LoaderComponent],
   template: `
     @if (toasts().length > 0) {
       <section
@@ -67,7 +67,7 @@ const GAP = 14;
             (pointerup)="interacting.set(false)"
             [style]="toasterStyles()">
             @for (
-              toast of toasts() | toastPosition: $index : pos;
+              toast of toasts() | toastFilter: $index : pos;
               track toast.id
             ) {
               <ngx-sonner-toast

diff --git a/libs/ngx-sonner/src/tests/toaster.spec.ts b/libs/ngx-sonner/src/tests/toaster.spec.ts
@@ -44,17 +44,17 @@ describe('Toaster', () => {
 
   it('should show a toast with custom duration', async () => {
     const { user, trigger, queryByText, detectChanges } = await setup({
-      cb: toast => toast('Hello world', { duration: 300 }),
+      cb: toast => toast('Custom duration', { duration: 300 }),
     });
 
-    expect(queryByText('Hello world')).toBeNull();
+    expect(queryByText('Custom duration')).toBeNull();
 
     await user.click(trigger);
-    expect(queryByText('Hello world')).not.toBeNull();
+    expect(queryByText('Custom duration')).not.toBeNull();
 
     await sleep(500);
     detectChanges();
-    expect(queryByText('Hello world')).toBeNull();
+    expect(queryByText('Custom duration')).toBeNull();
   });
 
   it('should reset duration on a toast update', async () => {