diff options
Diffstat (limited to 'src/view/screens/Storybook/Toasts.tsx')
| -rw-r--r-- | src/view/screens/Storybook/Toasts.tsx | 89 |
1 files changed, 72 insertions, 17 deletions
diff --git a/src/view/screens/Storybook/Toasts.tsx b/src/view/screens/Storybook/Toasts.tsx index 98d5b05e3..319f88e21 100644 --- a/src/view/screens/Storybook/Toasts.tsx +++ b/src/view/screens/Storybook/Toasts.tsx @@ -2,74 +2,129 @@ import {Pressable, View} from 'react-native' import {show as deprecatedShow} from '#/view/com/util/Toast' import {atoms as a} from '#/alf' -import * as toast from '#/components/Toast' -import {Toast} from '#/components/Toast/Toast' +import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe' +import * as Toast from '#/components/Toast' +import {Default} from '#/components/Toast/Toast' import {H1} from '#/components/Typography' +function ToastWithAction({type = 'default'}: {type?: Toast.ToastType}) { + return ( + <Toast.Outer type={type}> + <Toast.Icon icon={GlobeIcon} /> + <Toast.Text>This toast has an action button</Toast.Text> + <Toast.Action + label="Action" + onPress={() => console.log('Action clicked!')}> + Action + </Toast.Action> + </Toast.Outer> + ) +} + +function LongToastWithAction({type = 'default'}: {type?: Toast.ToastType}) { + return ( + <Toast.Outer type={type}> + <Toast.Icon icon={GlobeIcon} /> + <Toast.Text> + This is a longer message to test how the toast handles multiple lines of + text content. + </Toast.Text> + <Toast.Action + label="Action" + onPress={() => console.log('Action clicked!')}> + Action + </Toast.Action> + </Toast.Outer> + ) +} + export function Toasts() { return ( <View style={[a.gap_md]}> <H1>Toast Examples</H1> <View style={[a.gap_md]}> + <View style={[a.gap_md, {marginHorizontal: a.px_xl.paddingLeft * -1}]}> + <Pressable + accessibilityRole="button" + onPress={() => Toast.show(<ToastWithAction />)}> + <ToastWithAction /> + </Pressable> + <Pressable + accessibilityRole="button" + onPress={() => Toast.show(<LongToastWithAction />)}> + <LongToastWithAction /> + </Pressable> + <Pressable + accessibilityRole="button" + onPress={() => Toast.show(<ToastWithAction type="success" />)}> + <ToastWithAction type="success" /> + </Pressable> + <Pressable + accessibilityRole="button" + onPress={() => Toast.show(<ToastWithAction type="error" />)}> + <ToastWithAction type="error" /> + </Pressable> + </View> + <Pressable accessibilityRole="button" - onPress={() => toast.show(`Hey I'm a toast!`)}> - <Toast content="Hey I'm a toast!" /> + onPress={() => Toast.show(`Hey I'm a toast!`)}> + <Default content="Hey I'm a toast!" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`This toast will disappear after 6 seconds`, { + Toast.show(`This toast will disappear after 6 seconds`, { duration: 6e3, }) }> - <Toast content="This toast will disappear after 6 seconds" /> + <Default content="This toast will disappear after 6 seconds" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show( + Toast.show( `This is a longer message to test how the toast handles multiple lines of text content.`, ) }> - <Toast content="This is a longer message to test how the toast handles multiple lines of text content." /> + <Default content="This is a longer message to test how the toast handles multiple lines of text content." /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`Success! Yayyyyyyy :)`, { + Toast.show(`Success! Yayyyyyyy :)`, { type: 'success', }) }> - <Toast content="Success! Yayyyyyyy :)" type="success" /> + <Default content="Success! Yayyyyyyy :)" type="success" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`I'm providing info!`, { + Toast.show(`I'm providing info!`, { type: 'info', }) }> - <Toast content="I'm providing info!" type="info" /> + <Default content="I'm providing info!" type="info" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`This is a warning toast`, { + Toast.show(`This is a warning toast`, { type: 'warning', }) }> - <Toast content="This is a warning toast" type="warning" /> + <Default content="This is a warning toast" type="warning" /> </Pressable> <Pressable accessibilityRole="button" onPress={() => - toast.show(`This is an error toast :(`, { + Toast.show(`This is an error toast :(`, { type: 'error', }) }> - <Toast content="This is an error toast :(" type="error" /> + <Default content="This is an error toast :(" type="error" /> </Pressable> <Pressable @@ -80,7 +135,7 @@ export function Toasts() { 'exclamation-circle', ) }> - <Toast + <Default content="This is a test of the deprecated API" type="warning" /> |