chore: support more toast positions

hi-ogawa · Sep 22, 2023 · 2e4d84a · 2e4d84a
1 parent 7a85c15
commit 2e4d84a
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/packages/tiny-toast/src/preact/ui.tsx b/packages/tiny-toast/src/preact/ui.tsx
@@ -1,5 +1,5 @@
 import { TransitionManager } from "@hiogawa/tiny-transition";
-import { includesGuard } from "@hiogawa/utils";
+import { groupBy, includesGuard } from "@hiogawa/utils";
 import type * as CSS from "csstype";
 import { h } from "preact";
 import { useEffect, useReducer, useState } from "preact/hooks";
@@ -14,7 +14,8 @@ import type { PreactToastItem, PreactToastManager } from "./api";
 export function ToastContainer({ toast }: { toast: PreactToastManager }) {
   useSubscribe(toast.subscribe);
 
-  // TODO: handle ToastPosition
+  const itemsByPosition = groupBy(toast.items, (item) => item.data.position);
+
   return h(
     "div",
     {
@@ -32,6 +33,21 @@ export function ToastContainer({ toast }: { toast: PreactToastManager }) {
       },
     },
     [
+      h(
+        "div",
+        {
+          style: istyle({
+            position: "absolute",
+            bottom: "0.5rem",
+            left: "0.75rem",
+            display: "flex",
+            flexDirection: "column",
+          }),
+        },
+        itemsByPosition
+          .get("bottom-left")
+          ?.map((item) => h(ToastAnimation, { key: item.id, toast, item }))
+      ),
       h(
         "div",
         {
@@ -44,9 +60,9 @@ export function ToastContainer({ toast }: { toast: PreactToastManager }) {
             alignItems: "center",
           }),
         },
-        toast.items.map((item) =>
-          h(ToastAnimation, { key: item.id, toast, item })
-        )
+        itemsByPosition
+          .get("top-center")
+          ?.map((item) => h(ToastAnimation, { key: item.id, toast, item }))
       ),
     ]
   );