fix: preserve heights order when adding new toasts (#8)

* fix: preserve heights order when changing positions * refactor: rename toast-position pipe to toast-filter
tutkli · Apr 1, 2024 · c7775a2 · c7775a2
1 parent 5ba650c
commit c7775a2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 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/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