jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {Pressable, View} from 'react-native'
2
3import {show as deprecatedShow} from '#/view/com/util/Toast'
4import {atoms as a} from '#/alf'
5import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
6import * as Toast from '#/components/Toast'
7import {H1} from '#/components/Typography'
8
9function DefaultToast({
10 content,
11 type = 'default',
12}: {
13 content: string
14 type?: Toast.ToastType
15}) {
16 return (
17 <Toast.ToastConfigProvider id="default-toast" type={type}>
18 <Toast.Outer>
19 <Toast.Icon icon={GlobeIcon} />
20 <Toast.Text>{content}</Toast.Text>
21 </Toast.Outer>
22 </Toast.ToastConfigProvider>
23 )
24}
25
26function ToastWithAction() {
27 return (
28 <Toast.Outer>
29 <Toast.Icon icon={GlobeIcon} />
30 <Toast.Text>This toast has an action button</Toast.Text>
31 <Toast.Action
32 label="Action"
33 onPress={() => console.log('Action clicked!')}>
34 Action
35 </Toast.Action>
36 </Toast.Outer>
37 )
38}
39
40function LongToastWithAction() {
41 return (
42 <Toast.Outer>
43 <Toast.Icon icon={GlobeIcon} />
44 <Toast.Text>
45 This is a longer message to test how the toast handles multiple lines of
46 text content.
47 </Toast.Text>
48 <Toast.Action
49 label="Action"
50 onPress={() => console.log('Action clicked!')}>
51 Action
52 </Toast.Action>
53 </Toast.Outer>
54 )
55}
56
57export function Toasts() {
58 return (
59 <View style={[a.gap_md]}>
60 <H1>Toast Examples</H1>
61
62 <View style={[a.gap_md]}>
63 <Pressable
64 accessibilityRole="button"
65 onPress={() => Toast.show(<ToastWithAction />, {type: 'success'})}>
66 <ToastWithAction />
67 </Pressable>
68 <Pressable
69 accessibilityRole="button"
70 onPress={() => Toast.show(<ToastWithAction />, {type: 'error'})}>
71 <ToastWithAction />
72 </Pressable>
73 <Pressable
74 accessibilityRole="button"
75 onPress={() => Toast.show(<LongToastWithAction />)}>
76 <LongToastWithAction />
77 </Pressable>
78 <Pressable
79 accessibilityRole="button"
80 onPress={() => Toast.show(`Hey I'm a toast!`)}>
81 <DefaultToast content="Hey I'm a toast!" />
82 </Pressable>
83 <Pressable
84 accessibilityRole="button"
85 onPress={() =>
86 Toast.show(`This toast will disappear after 6 seconds`, {
87 duration: 6e3,
88 })
89 }>
90 <DefaultToast content="This toast will disappear after 6 seconds" />
91 </Pressable>
92 <Pressable
93 accessibilityRole="button"
94 onPress={() =>
95 Toast.show(
96 `This is a longer message to test how the toast handles multiple lines of text content.`,
97 )
98 }>
99 <DefaultToast content="This is a longer message to test how the toast handles multiple lines of text content." />
100 </Pressable>
101 <Pressable
102 accessibilityRole="button"
103 onPress={() =>
104 Toast.show(`Success! Yayyyyyyy :)`, {
105 type: 'success',
106 })
107 }>
108 <DefaultToast content="Success! Yayyyyyyy :)" type="success" />
109 </Pressable>
110 <Pressable
111 accessibilityRole="button"
112 onPress={() =>
113 Toast.show(`I'm providing info!`, {
114 type: 'info',
115 })
116 }>
117 <DefaultToast content="I'm providing info!" type="info" />
118 </Pressable>
119 <Pressable
120 accessibilityRole="button"
121 onPress={() =>
122 Toast.show(`This is a warning toast`, {
123 type: 'warning',
124 })
125 }>
126 <DefaultToast content="This is a warning toast" type="warning" />
127 </Pressable>
128 <Pressable
129 accessibilityRole="button"
130 onPress={() =>
131 Toast.show(`This is an error toast :(`, {
132 type: 'error',
133 })
134 }>
135 <DefaultToast content="This is an error toast :(" type="error" />
136 </Pressable>
137
138 <Pressable
139 accessibilityRole="button"
140 onPress={() =>
141 deprecatedShow(
142 `This is a test of the deprecated API`,
143 'exclamation-circle',
144 )
145 }>
146 <DefaultToast
147 content="This is a test of the deprecated API"
148 type="warning"
149 />
150 </Pressable>
151 </View>
152 </View>
153 )
154}