Dismiss toast when clicking action button

src/components/Toast/Toast.tsx

@@ -1,5 +1,5 @@
 import {createContext, useContext, useMemo} from 'react'
-import {View} from 'react-native'
+import {type GestureResponderEvent, View} from 'react-native'
 
 import {atoms as a, select, useAlf, useTheme} from '#/alf'
 import {
@@ -12,10 +12,15 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico
 import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
 import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import {dismiss} from '#/components/Toast/sonner'
 import {type ToastType} from '#/components/Toast/types'
 import {Text as BaseText} from '#/components/Typography'
 
-type ContextType = {
+type ToastConfigContextType = {
+  id: string
+}
+
+type ToastThemeContextType = {
   type: ToastType
 }
 
@@ -32,10 +37,29 @@ export const ICONS = {
   info: CircleInfo,
 }
 
-const Context = createContext<ContextType>({
+const ToastConfigContext = createContext<ToastConfigContextType>({
+  id: '',
+})
+ToastConfigContext.displayName = 'ToastConfigContext'
+
+export function ToastConfigProvider({
+  children,
+  id,
+}: {
+  children: React.ReactNode
+  id: string
+}) {
+  return (
+    <ToastConfigContext.Provider value={useMemo(() => ({id}), [id])}>
+      {children}
+    </ToastConfigContext.Provider>
+  )
+}
+
+const ToastThemeContext = createContext<ToastThemeContextType>({
   type: 'default',
 })
-Context.displayName = 'ToastContext'
+ToastThemeContext.displayName = 'ToastThemeContext'
 
 export function Default({type = 'default', content}: ToastComponentProps) {
   return (
@@ -57,7 +81,7 @@ export function Outer({
   const styles = useToastStyles({type})
 
   return (
-    <Context.Provider value={useMemo(() => ({type}), [type])}>
+    <ToastThemeContext.Provider value={useMemo(() => ({type}), [type])}>
       <View
         style={[
           a.flex_1,
@@ -75,19 +99,19 @@ export function Outer({
         ]}>
         {children}
       </View>
-    </Context.Provider>
+    </ToastThemeContext.Provider>
   )
 }
 
 export function Icon({icon}: {icon?: React.ComponentType<SVGIconProps>}) {
-  const {type} = useContext(Context)
+  const {type} = useContext(ToastThemeContext)
   const styles = useToastStyles({type})
   const IconComponent = icon || ICONS[type]
   return <IconComponent size="md" fill={styles.iconColor} />
 }
 
 export function Text({children}: {children: React.ReactNode}) {
-  const {type} = useContext(Context)
+  const {type} = useContext(ToastThemeContext)
   const {textColor} = useToastStyles({type})
   const {fontScaleCompensation} = useToastFontScaleCompensation()
   return (
@@ -123,7 +147,8 @@ export function Action(
 ) {
   const t = useTheme()
   const {fontScaleCompensation} = useToastFontScaleCompensation()
-  const {type} = useContext(Context)
+  const {type} = useContext(ToastThemeContext)
+  const {id} = useContext(ToastConfigContext)
   const styles = useMemo(() => {
     const base = {
       base: {
@@ -178,9 +203,15 @@ export function Action(
     }[type]
   }, [t, type])
 
+  const onPress = (e: GestureResponderEvent) => {
+    console.log('Toast Action pressed, dismissing toast', id)
+    dismiss(id)
+    props.onPress?.(e)
+  }
+
   return (
     <View style={{top: fontScaleCompensation}}>
-      <Button {...props}>
+      <Button {...props} onPress={onPress}>
         {s => {
           const interacted = s.pressed || s.hovered || s.focused
           return (

src/components/Toast/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
+import {nanoid} from 'nanoid/non-secure'
 import {toast as sonner, Toaster} from 'sonner-native'
 
 import {atoms as a} from '#/alf'
@@ -8,6 +9,7 @@ import {
   Default as DefaultToast,
   Outer as BaseOuter,
   type ToastComponentProps,
+  ToastConfigProvider,
 } from '#/components/Toast/Toast'
 import {type BaseToastOptions} from '#/components/Toast/types'
 
@@ -60,16 +62,28 @@ export function show(
   content: React.ReactNode,
   {type, ...options}: BaseToastOptions = {},
 ) {
+  const id = nanoid()
+
   if (typeof content === 'string') {
-    sonner.custom(<Default content={content} type={type} />, {
+    sonner.custom(
-      ...options,
+      <ToastConfigProvider id={id}>
-      duration: options?.duration ?? DURATION,
+        <DefaultToast content={content} type={type} />
-    })
+      </ToastConfigProvider>,
+      {
+        ...options,
+        id,
+        duration: options?.duration ?? DURATION,
+      },
+    )
   } else if (React.isValidElement(content)) {
-    sonner.custom(content, {
+    sonner.custom(
-      ...options,
+      <ToastConfigProvider id={id}>{content}</ToastConfigProvider>,
-      duration: options?.duration ?? DURATION,
+      {
-    })
+        ...options,
+        id,
+        duration: options?.duration ?? DURATION,
+      },
+    )
   } else {
     throw new Error(
       `Toast can be a string or a React element, got ${typeof content}`,

src/components/Toast/index.web.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
+import {nanoid} from 'nanoid/non-secure'
 import {toast as sonner, Toaster} from 'sonner'
 
 import {atoms as a} from '#/alf'
 import {DURATION} from '#/components/Toast/const'
-import {Default as DefaultToast} from '#/components/Toast/Toast'
+import {
+  Default as DefaultToast,
+  ToastConfigProvider,
+} from '#/components/Toast/Toast'
 import {type BaseToastOptions} from '#/components/Toast/types'
 
 export {DURATION} from '#/components/Toast/const'
@@ -37,16 +41,25 @@ export function show(
   content: React.ReactNode,
   {type, ...options}: BaseToastOptions = {},
 ) {
+  const id = nanoid()
+
   if (typeof content === 'string') {
-    sonner(<DefaultToast content={content} type={type} />, {
+    sonner(
-      unstyled: true, // required on web
+      <ToastConfigProvider id={id}>
-      ...options,
+        <DefaultToast content={content} type={type} />
-      duration: options?.duration ?? DURATION,
+      </ToastConfigProvider>,
-    })
+      {
+        ...options,
+        unstyled: true, // required on web
+        id,
+        duration: options?.duration ?? DURATION,
+      },
+    )
   } else if (React.isValidElement(content)) {
-    sonner(content, {
+    sonner(<ToastConfigProvider id={id}>{content}</ToastConfigProvider>, {
-      unstyled: true, // required on web
       ...options,
+      unstyled: true, // required on web
+      id,
       duration: options?.duration ?? DURATION,
     })
   } else {

src/components/Toast/sonner/index.ts

@@ -0,0 +1,3 @@
+import {toast} from 'sonner-native'
+
+export const dismiss = toast.dismiss

src/components/Toast/sonner/index.web.ts

@@ -0,0 +1,3 @@
+import {toast} from 'sonner'
+
+export const dismiss = toast.dismiss

src/view/screens/Storybook/Toasts.tsx

@@ -12,7 +12,9 @@ function ToastWithAction({type = 'default'}: {type?: Toast.ToastType}) {
     <Toast.Outer type={type}>
       <Toast.Icon icon={GlobeIcon} />
       <Toast.Text>This toast has an action button</Toast.Text>
-      <Toast.Action label="Action" onPress={() => alert('Action clicked!')}>
+      <Toast.Action
+        label="Action"
+        onPress={() => console.log('Action clicked!')}>
         Action
       </Toast.Action>
     </Toast.Outer>
@@ -27,7 +29,9 @@ function LongToastWithAction({type = 'default'}: {type?: Toast.ToastType}) {
         This is a longer message to test how the toast handles multiple lines of
         text content.
       </Toast.Text>
-      <Toast.Action label="Action" onPress={() => alert('Action clicked!')}>
+      <Toast.Action
+        label="Action"
+        onPress={() => console.log('Action clicked!')}>
         Action
       </Toast.Action>
     </Toast.Outer>