fix: preserve Fast Refresh component boundaries

2026-07-22 10:38:53 +08:00
parent b7b8f60cb2
commit 70916e21dd
16 changed files with 248 additions and 235 deletions
@@ -0,0 +1,60 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { toast, Toaster } from "sonner";
+import { cn } from "@/lib/utils";
+import { MAP_ICON_CELL_RADIUS_CLASS_NAME } from "./map-control-styles";
+import { MapNoticeCloseIcon, MapNoticeContent } from "./notice-presentation";
+import type { MapNoticeOptions, MapNoticePosition } from "./notice-types";
+
+type SonnerPosition = NonNullable<ComponentProps<typeof Toaster>["position"]>;
+
+const DEFAULT_POSITION: MapNoticePosition = "top-center";
+
+const positionClassNames: Record<MapNoticePosition, string> = {
+  "top-center": "left-1/2! right-auto! top-[84px] [translate:-50%_0]",
+  "top-right": "top-[84px] right-[72px]",
+  "bottom-left": "bottom-12 left-4",
+  "bottom-right": "bottom-12 right-4"
+};
+
+const sonnerPositions: Record<MapNoticePosition, SonnerPosition> = {
+  "top-center": "top-center",
+  "top-right": "top-right",
+  "bottom-left": "bottom-left",
+  "bottom-right": "bottom-right"
+};
+
+export function showMapNotice(options: MapNoticeOptions) {
+  const tone = options.tone ?? "info";
+  const position = options.position ?? DEFAULT_POSITION;
+  const duration = options.duration ?? (tone === "info" || tone === "success" ? 3200 : Infinity);
+  const dismissible = options.dismissible ?? tone !== "loading";
+
+  return toast.custom(
+    () => <MapNoticeContent {...options} tone={tone} />,
+    {
+      id: options.id,
+      duration,
+      position: sonnerPositions[position],
+      dismissible,
+      cancel: dismissible
+        ? {
+            label: <MapNoticeCloseIcon />,
+            onClick: (event) => event.stopPropagation()
+          }
+        : undefined,
+      classNames: {
+        cancelButton: cn(
+          "absolute right-2 top-2 z-10 grid h-7 w-7 place-items-center border border-transparent bg-transparent p-0 text-slate-400 transition hover:border-slate-200 hover:bg-slate-50 hover:text-slate-700 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600/25",
+          MAP_ICON_CELL_RADIUS_CLASS_NAME
+        )
+      },
+      className: cn("fixed! z-[60]! w-[min(420px,calc(100vw-24px))]!", positionClassNames[position])
+    }
+  );
+}
+
+export function dismissMapNotice(id?: string | number) {
+  toast.dismiss(id);
+}