feat(toast): handle different layers of show function

vvv-sss · vvv-sss · commit 00dfb799d8db · 2025-11-26T19:25:52.000+02:00
diff --git a/example/src/app/(home)/components/toast.tsx b/example/src/app/(home)/components/toast.tsx
@@ -7,6 +7,7 @@ import {
 } from 'heroui-native';
 import { useCallback } from 'react';
 import { View } from 'react-native';
+import { toast as sonnerToast } from 'sonner-native';
 import type { UsageVariant } from '../../../components/component-presentation/types';
 import { UsageVariantFlatList } from '../../../components/component-presentation/usage-variant-flatlist';
 
@@ -79,13 +80,7 @@ const MyToast1 = (props: ToastComponentProps) => {
   const { id, hide } = props;
 
   return (
-    <Toast
-      variant="accent"
-      placement="top"
-      duration="persistent"
-      className="flex-row items-center gap-3"
-      {...props}
-    >
+    <Toast variant="accent" className="flex-row items-center gap-3" {...props}>
       <View className="flex-1">
         <Toast.Label>{id}</Toast.Label>
         <Toast.Description>
@@ -101,13 +96,7 @@ const MyToast2 = (props: ToastComponentProps) => {
   const { id, hide } = props;
 
   return (
-    <Toast
-      variant="success"
-      placement="top"
-      duration="persistent"
-      className="flex-row items-center gap-3"
-      {...props}
-    >
+    <Toast variant="success" className="flex-row items-center gap-3" {...props}>
       <View className="flex-1">
         <Toast.Label>{id}</Toast.Label>
         <Toast.Description>
@@ -125,13 +114,7 @@ const MyToast3 = (props: ToastComponentProps) => {
   const { id, hide } = props;
 
   return (
-    <Toast
-      variant="warning"
-      placement="top"
-      duration="persistent"
-      className="flex-row items-center gap-3"
-      {...props}
-    >
+    <Toast variant="warning" className="flex-row items-center gap-3" {...props}>
       <View className="flex-1">
         <Toast.Label>{id}</Toast.Label>
         <Toast.Description>
@@ -166,11 +149,11 @@ const InteractiveDemoContent = () => {
     <View className="flex-1 px-5">
       <View className="flex-1 justify-center gap-3">
         <Button
-          onPress={() => {
+          onPress={() =>
             toast.show({
               component: _renderToast1,
-            });
-          }}
+            })
+          }
           variant="primary"
         >
           Show Toast 1
@@ -206,9 +189,9 @@ const InteractiveDemoContent = () => {
           Hide All Toasts
         </Button>
 
-        {/* <Button onPress={() => sonnerToast('Hello, World!')}>
+        <Button onPress={() => sonnerToast('Hello, World!')}>
           Sonner Toast
-        </Button> */}
+        </Button>
       </View>
     </View>
   );
diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx
@@ -8,7 +8,10 @@ import { cn } from '../../helpers/theme';
 import type { ViewRef } from '../../helpers/types';
 import { createContext } from '../../helpers/utils';
 import * as ToastPrimitive from '../../primitives/toast';
-import type { ToastComponentProps } from '../../providers/toast';
+import type {
+  ToastComponentProps,
+  ToastShowOptions,
+} from '../../providers/toast';
 import { Button } from '../button';
 import { useToastRootAnimation } from './toast.animation';
 import { DISPLAY_NAME } from './toast.constants';
@@ -224,6 +227,71 @@ const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
 
 // --------------------------------------------------
 
+/**
+ * Default styled toast component for simplified toast.show() API
+ * Used internally when showing toasts with string or config object (without component)
+ */
+export function DefaultToast(
+  props: ToastComponentProps & {
+    variant?: ToastRootProps['variant'];
+    placement?: ToastRootProps['placement'];
+    duration?: ToastRootProps['duration'];
+    isSwipable?: ToastRootProps['isSwipable'];
+    label?: string;
+    description?: string;
+    actionLabel?: string;
+    onActionPress?: (helpers: {
+      show: (options: string | ToastShowOptions) => string;
+      hide: (ids?: string | string[] | 'all') => void;
+    }) => void;
+  }
+) {
+  const {
+    id,
+    variant = 'default',
+    placement = 'top',
+    duration = 4000,
+    isSwipable,
+    label,
+    description,
+    actionLabel,
+    onActionPress,
+    hide,
+    show,
+    ...toastComponentProps
+  } = props;
+
+  const handleActionPress = () => {
+    if (onActionPress) {
+      onActionPress({ show, hide });
+    }
+  };
+
+  return (
+    <ToastRoot
+      id={id}
+      variant={variant}
+      placement={placement}
+      duration={duration}
+      isSwipable={isSwipable}
+      className="flex-row items-center gap-3"
+      hide={hide}
+      show={show}
+      {...toastComponentProps}
+    >
+      <View className="flex-1">
+        {label && <ToastLabel>{label}</ToastLabel>}
+        {description && <ToastDescription>{description}</ToastDescription>}
+      </View>
+      {actionLabel && (
+        <ToastAction onPress={handleActionPress}>{actionLabel}</ToastAction>
+      )}
+    </ToastRoot>
+  );
+}
+
+// --------------------------------------------------
+
 ToastRoot.displayName = DISPLAY_NAME.TOAST_ROOT;
 ToastLabel.displayName = DISPLAY_NAME.TOAST_LABEL;
 ToastDescription.displayName = DISPLAY_NAME.TOAST_DESCRIPTION;
diff --git a/src/providers/toast/provider.tsx b/src/providers/toast/provider.tsx
@@ -8,20 +8,56 @@ import {
 } from 'react';
 import { View } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
+import { DefaultToast } from '../../components/toast/toast';
 import { InsetsContainer } from './insets-container';
 import { toastReducer } from './reducer';
 import { ToastItemRenderer } from './toast-item-renderer';
 import type {
+  ToastComponentProps,
   ToasterContextValue,
   ToastProviderProps,
+  ToastShowConfig,
   ToastShowOptions,
+  ToastShowOptionsWithComponent,
 } from './types';
 
 /**
  * Context for toast manager
  */
 const ToasterContext = createContext<ToasterContextValue | null>(null);
 
+/**
+ * Creates a component function for simple string toast
+ */
+function createStringToastComponent(
+  label: string
+): (props: ToastComponentProps) => React.ReactElement {
+  return (props: ToastComponentProps) => (
+    <DefaultToast {...props} label={label} variant="default" />
+  );
+}
+
+/**
+ * Creates a component function for config-based toast
+ */
+function createConfigToastComponent(
+  config: ToastShowConfig
+): (props: ToastComponentProps) => React.ReactElement {
+  return (props: ToastComponentProps) => (
+    <DefaultToast
+      {...props}
+      variant={config.variant}
+      placement={config.placement}
+      duration={config.duration}
+      isSwipable={config.isSwipable}
+      label={config.label}
+      description={config.description}
+      actionLabel={config.actionLabel}
+      onActionPress={config.onActionPress}
+    />
+  );
+}
+
 /**
  * Toast provider component
  * Wraps your app to enable toast functionality
@@ -43,25 +79,54 @@ export function ToastProvider({
 
   /**
    * Show a toast
+   * Supports three usage patterns:
+   * 1. Simple string: toast.show('This is toast')
+   * 2. Config object: toast.show({ label, variant, ... })
+   * 3. Custom component: toast.show({ component: (props) => <Toast>...</Toast> })
    */
   const show = useCallback(
-    (options: ToastShowOptions): string => {
-      const id = options.id ?? `toast-${Date.now()}-${idCounter.current++}`;
+    (options: string | ToastShowOptions): string => {
+      let normalizedOptions: ToastShowOptionsWithComponent;
+
+      // Case 1: Simple string
+      if (typeof options === 'string') {
+        normalizedOptions = {
+          id: undefined,
+          component: createStringToastComponent(options),
+        };
+      }
+      // Case 2: Config object without component
+      else if (!('component' in options) || options.component === undefined) {
+        const config = options as ToastShowConfig;
+        normalizedOptions = {
+          id: config.id,
+          component: createConfigToastComponent(config),
+          onShow: config.onShow,
+          onHide: config.onHide,
+        };
+      }
+      // Case 3: Config object with component (existing behavior)
+      else {
+        normalizedOptions = options as ToastShowOptionsWithComponent;
+      }
+
+      const id =
+        normalizedOptions.id ?? `toast-${Date.now()}-${idCounter.current++}`;
 
       dispatch({
         type: 'SHOW',
         payload: {
           id,
-          component: options.component,
-          onShow: options.onShow,
-          onHide: options.onHide,
+          component: normalizedOptions.component,
+          onShow: normalizedOptions.onShow,
+          onHide: normalizedOptions.onHide,
         },
       });
 
       total.set((value) => value + 1);
 
-      if (options.onShow) {
-        options.onShow();
+      if (normalizedOptions.onShow) {
+        normalizedOptions.onShow();
       }
 
       return id;
diff --git a/src/providers/toast/types.ts b/src/providers/toast/types.ts
