Skip to content

Commit ee6e14e

Browse files
vvv-sssvvv-sss
committed
feat(toast): add useToast hook
1 parent 251396b commit ee6e14e

File tree

10 files changed

+257
-201
lines changed

10 files changed

+257
-201
lines changed

‎example/src/app/(home)/components/toast.tsx‎

Lines changed: 96 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { Button, Toast, useToaster } from 'heroui-native';
2-
import { useEffect, useState } from 'react';
1+
import { Button, Toast, useToast } from 'heroui-native';
32
import { View } from 'react-native';
43
import type { UsageVariant } from '../../../components/component-presentation/types';
54
import { UsageVariantFlatList } from '../../../components/component-presentation/usage-variant-flatlist';
@@ -70,35 +69,42 @@ const AllVariantsContent = () => {
7069
// ------------------------------------------------------------------------------
7170

7271
const InteractiveDemoContent = () => {
73-
const toast = useToaster();
74-
75-
const myToast = toast.prepare({
76-
component: (id) => (
77-
<Toast variant="accent" className="flex-row items-center gap-3">
78-
<View className="flex-1">
79-
<Toast.Label>Interactive Toast</Toast.Label>
80-
<Toast.Description>
81-
Use buttons below to control this toast
82-
</Toast.Description>
83-
</View>
84-
<Toast.Action onPress={() => toast.hide(id)}>Close</Toast.Action>
85-
</Toast>
86-
),
87-
});
72+
const { show, hide } = useToast();
8873

8974
return (
9075
<View className="flex-1 px-5">
9176
<View className="flex-1 justify-center gap-3">
92-
<Button onPress={() => toast.show(myToast)} variant="primary">
77+
<Button
78+
onPress={() => {
79+
const id = show({
80+
id: 'my-toast',
81+
component: (
82+
<Toast variant="accent" className="flex-row items-center gap-3">
83+
<View className="flex-1">
84+
<Toast.Label>Interactive Toast</Toast.Label>
85+
<Toast.Description>
86+
Use buttons below to control this toast
87+
</Toast.Description>
88+
</View>
89+
<Toast.Action onPress={() => hide('my-toast')}>
90+
Close
91+
</Toast.Action>
92+
</Toast>
93+
),
94+
});
95+
console.log('Toast shown with ID:', id);
96+
}}
97+
variant="primary"
98+
>
9399
Show Toast
94100
</Button>
95101

96-
<Button onPress={() => toast.hide(myToast)} variant="secondary">
102+
<Button onPress={() => hide('my-toast1')} variant="secondary">
97103
Hide Toast
98104
</Button>
99105

100-
<Button onPress={() => toast.remove(myToast)} variant="destructive">
101-
Remove Toast
106+
<Button onPress={() => hide()} variant="destructive">
107+
Hide All Toasts
102108
</Button>
103109
</View>
104110
</View>
@@ -108,80 +114,85 @@ const InteractiveDemoContent = () => {
108114
// ------------------------------------------------------------------------------
109115

110116
const MultipleToastsContent = () => {
111-
const toast = useToaster();
112-
113-
const toast1 = toast.prepare({
114-
component: (id: string) => (
115-
<Toast
116-
variant="default"
117-
placement="top"
118-
className="flex-row items-center gap-3"
119-
>
120-
<View className="flex-1">
121-
<Toast.Label>Toast 1</Toast.Label>
122-
<Toast.Description>First toast at top</Toast.Description>
123-
</View>
124-
<Toast.Action onPress={() => toast.hide(id)}>Close</Toast.Action>
125-
</Toast>
126-
),
127-
});
128-
129-
const toast2 = toast.prepare({
130-
component: (id: string) => (
131-
<Toast
132-
variant="accent"
133-
placement="top"
134-
className="flex-row items-center gap-3"
135-
>
136-
<View className="flex-1">
137-
<Toast.Label>Toast 2</Toast.Label>
138-
<Toast.Description>Second toast at top</Toast.Description>
139-
</View>
140-
<Toast.Action onPress={() => toast.hide(id)}>Close</Toast.Action>
141-
</Toast>
142-
),
143-
});
144-
145-
const toast3 = toast.prepare({
146-
component: (id: string) => (
147-
<Toast
148-
variant="success"
149-
placement="bottom"
150-
className="flex-row items-center gap-3"
151-
>
152-
<View className="flex-1">
153-
<Toast.Label>Toast 3</Toast.Label>
154-
<Toast.Description>Third toast at bottom</Toast.Description>
155-
</View>
156-
<Toast.Action onPress={() => toast.hide(id)}>Close</Toast.Action>
157-
</Toast>
158-
),
159-
});
160-
161-
const allToasts = [toast1, toast2, toast3];
117+
const { show, hide } = useToast();
162118

163119
return (
164120
<View className="flex-1 px-5">
165121
<View className="flex-1 justify-center gap-3">
166122
<Button
167-
onPress={() => allToasts.forEach((id) => toast.show(id))}
123+
onPress={() => {
124+
// Show multiple toasts with custom IDs
125+
show({
126+
id: 'toast-1',
127+
component: (
128+
<Toast
129+
variant="default"
130+
placement="top"
131+
className="flex-row items-center gap-3"
132+
>
133+
<View className="flex-1">
134+
<Toast.Label>Toast 1</Toast.Label>
135+
<Toast.Description>First toast at top</Toast.Description>
136+
</View>
137+
<Toast.Action onPress={() => hide('toast-1')}>
138+
Close
139+
</Toast.Action>
140+
</Toast>
141+
),
142+
});
143+
144+
show({
145+
id: 'toast-2',
146+
component: (
147+
<Toast
148+
variant="accent"
149+
placement="top"
150+
className="flex-row items-center gap-3"
151+
>
152+
<View className="flex-1">
153+
<Toast.Label>Toast 2</Toast.Label>
154+
<Toast.Description>Second toast at top</Toast.Description>
155+
</View>
156+
<Toast.Action onPress={() => hide('toast-2')}>
157+
Close
158+
</Toast.Action>
159+
</Toast>
160+
),
161+
});
162+
163+
show({
164+
id: 'toast-3',
165+
component: (
166+
<Toast
167+
variant="success"
168+
placement="bottom"
169+
className="flex-row items-center gap-3"
170+
>
171+
<View className="flex-1">
172+
<Toast.Label>Toast 3</Toast.Label>
173+
<Toast.Description>Third toast at bottom</Toast.Description>
174+
</View>
175+
<Toast.Action onPress={() => hide('toast-3')}>
176+
Close
177+
</Toast.Action>
178+
</Toast>
179+
),
180+
});
181+
}}
168182
variant="primary"
169183
>
170184
Show All Toasts
171185
</Button>
172186

173187
<Button
174-
onPress={() => allToasts.forEach((id) => toast.hide(id))}
188+
onPress={() => hide(['toast-1', 'toast-2', 'toast-3'])}
175189
variant="secondary"
176190
>
177-
Hide All Toasts
191+
Hide Specific Toasts
178192
</Button>
179193

180-
<Button
181-
onPress={() => allToasts.forEach((id) => toast.remove(id))}
182-
variant="destructive"
183-
>
184-
Remove All Toasts
194+
<Button onPress={() => hide()} variant="destructive">
195+
Hide All Toasts
185196
</Button>
186197
</View>
187198
</View>
@@ -201,11 +212,11 @@ const TOAST_VARIANTS: UsageVariant[] = [
201212
label: 'Interactive Demo',
202213
content: <InteractiveDemoContent />,
203214
},
204-
// {
205-
// value: 'multiple-toasts',
206-
// label: 'Multiple Toasts',
207-
// content: <MultipleToastsContent />,
208-
// },
215+
{
216+
value: 'multiple-toasts',
217+
label: 'Multiple Toasts',
218+
content: <MultipleToastsContent />,
219+
},
209220
];
210221

211222
export default function ToastScreen() {

‎src/components/toast/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export { default as Toast, useToast } from './toast';
1+
export { default as Toast } from './toast';
22
export type * from './toast.types';

‎src/components/toast/toast.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
33
import { combineStyles } from '../../helpers/theme/utils/combine-styles';
44

55
const root = tv({
6-
base: 'absolute left-0 right-0 rounded-3xl p-4 bg-surface shadow-2xl shadow-black/10',
6+
base: 'absolute left-0 right-0 rounded-3xl p-4 bg-surface shadow-2xl shadow-black/5',
77
variants: {
88
placement: {
99
top: 'top-0',

‎src/components/toast/toast.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,5 +193,4 @@ const CompoundToast = Object.assign(ToastRoot, {
193193
Close: ToastClose,
194194
});
195195

196-
export { useToast };
197196
export default CompoundToast;

‎src/providers/hero-ui-native/provider.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { PortalHost } from '../../primitives/portal';
33
import { TextComponentProvider } from '../text-component/provider';
4-
import { Toaster } from '../toast/provider';
4+
import { ToastProvider } from '../toast/provider';
55
import type { HeroUINativeProviderProps } from './types';
66

77
/**
@@ -27,12 +27,14 @@ export const HeroUINativeProvider: React.FC<HeroUINativeProviderProps> = ({
2727
config = {},
2828
}) => {
2929
const { textProps, toast } = config;
30-
const { isDisabled: isToastDisabled = false, ...toastProps } = toast || {};
30+
const { ...toastProps } = toast || {};
3131

3232
return (
3333
<TextComponentProvider value={{ textProps }}>
34-
<Toaster {...toastProps}>{children}</Toaster>
35-
<PortalHost />
34+
<ToastProvider {...toastProps}>
35+
{children}
36+
<PortalHost />
37+
</ToastProvider>
3638
</TextComponentProvider>
3739
);
3840
};

‎src/providers/hero-ui-native/types.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,7 @@ export interface HeroUINativeConfig extends TextComponentContextValue {
1919
* @description
2020
* Configure the global toast system including insets and wrapper components.
2121
*/
22-
toast?: ToastProviderProps & {
23-
/**
24-
* Disable the toast system globally
25-
* @default false
26-
*/
27-
isDisabled?: boolean;
28-
};
22+
toast?: ToastProviderProps;
2923
}
3024

3125
/**

‎src/providers/toast/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export { Toaster, useToaster } from './provider';
1+
export { ToastProvider, useToast } from './provider';
22
export type * from './types';

0 commit comments

Comments
 (0)