u

code/base-project/base-app/src/utils/toast.tsx

@@ -0,0 +1,71 @@
+import type { IToastProps } from '@gluestack-ui/core/lib/esm/toast/creator/types'
+import React, { useRef } from 'react'
+import { Toast, ToastDescription, ToastTitle, useToast as useGluestackToast } from '@/components/ui/toast'
+
+type ToastVariant = 'solid' | 'outline'
+type ToastAction = 'error' | 'warning' | 'success' | 'info' | 'muted'
+
+interface ShowToastOptions extends IToastProps {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  variant?: ToastVariant
+  action?: ToastAction
+}
+
+export function ToastProviderWrapper({ children }: { children: React.ReactNode }) {
+  const toast = useGluestackToast()
+  const toastRef = useRef(toast)
+  toastRef.current = toast
+
+  return <>{children}</>
+}
+
+/**
+ * 自定义 Hook，用法：
+ * const toast = useToast();
+ * toast.show({ ... });
+ * toast.close(id);
+ * toast.closeAll();
+ */
+export function useToast() {
+  const toast = useGluestackToast()
+
+  return {
+    show: (options: ShowToastOptions) => {
+      const id = Math.random().toString()
+
+      toast.show({
+        id,
+        placement: options.placement ?? 'top',
+        duration: options.duration !== undefined ? options.duration : 3000,
+        avoidKeyboard: options.avoidKeyboard ?? false,
+        containerStyle: options.containerStyle,
+        onCloseComplete: options.onCloseComplete,
+        render: options.render
+          ? () => options.render!({ id })
+          : ({ id }) => (
+              <Toast
+                nativeID={`toast-${id}`}
+                variant={options.variant ?? 'solid'}
+                action={options.action ?? 'muted'}
+              >
+                {options.title && <ToastTitle className="font-blod">{options.title}</ToastTitle>}
+                {options.description && <ToastDescription>{options.description}</ToastDescription>}
+              </Toast>
+            ),
+      })
+
+      return id
+    },
+
+    close: (id: string) => {
+      toast.close(id)
+    },
+
+    closeAll: () => {
+      toast.closeAll()
+    },
+
+    isActive: (id: string) => toast.isActive(id),
+  }
+}