acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Extract core component, use platform-specific wrappers

Browse Source
This commit is contained in:
Eric Bailey
2025-07-30 11:39:56 -05:00
parent 25752f8a2e
commit 65930094a0
5 changed files with 143 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Toast/Toast.tsx
+78
View File
@@ -0,0 +1,78 @@
import {createContext, useContext, useMemo} from 'react'
import {View} from 'react-native'
import {atoms as a, useTheme} from '#/alf'
import {getToastTypeStyles, TOAST_TYPE_TO_ICON} from '#/components/Toast/style'
import {type ToastType} from '#/components/Toast/types'
import {Text} from '#/components/Typography'
type ContextType = {
type: ToastType
}
const Context = createContext<ContextType>({
type: 'default',
})
export function Toast({
type,
content,
}: {
type: ToastType
content: React.ReactNode
}) {
const t = useTheme()
const toastTypeStyles = getToastTypeStyles(t)
const styles = toastTypeStyles[type]
const Icon = TOAST_TYPE_TO_ICON[type]
return (
<Context.Provider value={useMemo(() => ({type}), [type])}>
<View
style={[
a.py_lg,
a.pl_xl,
a.pr_2xl,
a.rounded_md,
a.border,
a.flex_row,
a.gap_sm,
t.atoms.shadow_sm,
{
backgroundColor: styles.backgroundColor,
borderColor: styles.borderColor,
},
]}>
<Icon size="md" fill={styles.iconColor} />
<View style={[a.flex_1]}>
{typeof content === 'string' ? (
<ToastText>{content}</ToastText>
) : (
content
)}
</View>
</View>
</Context.Provider>
)
}
export function ToastText({children}: {children: React.ReactNode}) {
const t = useTheme()
const toastTypeStyles = getToastTypeStyles(t)
const {type} = useContext(Context)
const styles = toastTypeStyles[type]
return (
<Text
style={[
a.text_md,
a.font_bold,
a.leading_snug,
{
color: styles.textColor,
},
]}>
{children}
</Text>
)
}
src/components/Toast/index.tsx
+6 -49
View File
@@ -1,5 +1,5 @@
import {useEffect, useMemo, useRef, useState} from 'react'
import {AccessibilityInfo, View} from 'react-native'
import {AccessibilityInfo} from 'react-native'
import {
Gesture,
GestureDetector,
@@ -19,14 +19,10 @@ import RootSiblings from 'react-native-root-siblings'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {atoms as a, useTheme} from '#/alf'
import {
getToastTypeStyles,
TOAST_ANIMATION_CONFIG,
TOAST_TYPE_TO_ICON,
} from '#/components/Toast/style'
import {atoms as a} from '#/alf'
import {TOAST_ANIMATION_CONFIG} from '#/components/Toast/style'
import {Toast as BaseToast} from '#/components/Toast/Toast'
import {type ToastType} from '#/components/Toast/types'
import {Text} from '#/components/Typography'
const TIMEOUT = 2e3
@@ -54,16 +50,11 @@ function Toast({
type: ToastType
destroy: () => void
}) {
const t = useTheme()
const {top} = useSafeAreaInsets()
const isPanning = useSharedValue(false)
const dismissSwipeTranslateY = useSharedValue(0)
const [cardHeight, setCardHeight] = useState(0)
const toastStyles = getToastTypeStyles(t)
const colors = toastStyles[type]
const IconComponent = TOAST_TYPE_TO_ICON[type]
// for the exit animation to work on iOS the animated component
// must not be the root component
// so we need to wrap it in a view and unmount the toast ahead of time
@@ -175,43 +166,9 @@ function Toast({
accessibilityLabel={message}
accessibilityHint=""
onAccessibilityEscape={hideAndDestroyImmediately}
style={[
a.flex_1,
{backgroundColor: colors.backgroundColor},
a.shadow_sm,
{borderColor: colors.borderColor, borderWidth: 1},
a.rounded_sm,
animatedStyle,
]}>
style={[a.flex_1, animatedStyle]}>
<GestureDetector gesture={panGesture}>
<View style={[a.flex_1, a.px_md, a.py_lg, a.flex_row, a.gap_md]}>
<View
style={[
a.flex_shrink_0,
a.rounded_full,
{width: 32, height: 32},
a.align_center,
a.justify_center,
{
backgroundColor: colors.backgroundColor,
},
]}>
<IconComponent fill={colors.iconColor} size="sm" />
</View>
<View
style={[
a.h_full,
a.justify_center,
a.flex_1,
a.justify_center,
]}>
<Text
style={[a.text_md, a.font_bold, {color: colors.textColor}]}
emoji>
{message}
</Text>
</View>
</View>
<BaseToast content={message} type={type} />
</GestureDetector>
</Animated.View>
)}
src/components/Toast/index.web.tsx
+17 -95
View File
@@ -3,14 +3,13 @@
*/
import {useEffect, useState} from 'react'
import {Pressable, StyleSheet, Text, View} from 'react-native'
import {Pressable, View} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {atoms as a, useTheme} from '#/alf'
import {
getToastTypeStyles,
getToastWebAnimationStyles,
TOAST_TYPE_TO_ICON,
} from '#/components/Toast/style'
import {atoms as a, web} from '#/alf'
import {getToastWebAnimationStyles} from '#/components/Toast/style'
import {Toast} from '#/components/Toast/Toast'
import {type ToastType} from '#/components/Toast/types'
const DURATION = 3500
@@ -20,16 +19,12 @@ interface ActiveToast {
type: ToastType
}
type GlobalSetActiveToast = (_activeToast: ActiveToast | undefined) => void
// globals
// =
let globalSetActiveToast: GlobalSetActiveToast | undefined
let toastTimeout: NodeJS.Timeout | undefined
// components
// =
type ToastContainerProps = {}
export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
const {_} = useLingui()
const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
const [isExiting, setIsExiting] = useState(false)
@@ -48,17 +43,6 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
}
}, [activeToast])
const t = useTheme()
const toastTypeStyles = getToastTypeStyles(t)
const toastStyles = activeToast
? toastTypeStyles[activeToast.type]
: toastTypeStyles.default
const IconComponent = activeToast
? TOAST_TYPE_TO_ICON[activeToast.type]
: TOAST_TYPE_TO_ICON.default
const animationStyles = getToastWebAnimationStyles()
return (
@@ -66,44 +50,23 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
{activeToast && (
<View
style={[
styles.container,
a.fixed,
{
backgroundColor: toastStyles.backgroundColor,
borderColor: toastStyles.borderColor,
left: a.px_xl.paddingLeft,
bottom: a.px_xl.paddingLeft,
width: web(`calc(100% - ${a.px_xl.paddingLeft * 2})`),
maxWidth: 380,
...(isExiting
? animationStyles.exiting
: animationStyles.entering),
},
]}>
<View
style={[
styles.iconContainer,
{
backgroundColor: 'transparent',
},
]}>
<IconComponent
fill={toastStyles.iconColor}
size="sm"
style={styles.icon}
/>
</View>
<Text
style={[
styles.text,
a.text_sm,
a.font_bold,
{color: toastStyles.textColor},
]}>
{activeToast.text}
</Text>
<Toast content={activeToast.text} type={activeToast.type} />
<Pressable
style={styles.dismissBackdrop}
accessibilityLabel="Dismiss"
style={[a.absolute, a.inset_0]}
accessibilityLabel={_(msg`Dismiss toast`)}
accessibilityHint=""
onPress={() => {
setActiveToast(undefined)
}}
onPress={() => setActiveToast(undefined)}
/>
</View>
)}
@@ -111,9 +74,6 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
)
}
// methods
// =
export function show(text: string, type: ToastType = 'default') {
if (toastTimeout) {
clearTimeout(toastTimeout)
@@ -124,41 +84,3 @@ export function show(text: string, type: ToastType = 'default') {
globalSetActiveToast?.(undefined)
}, DURATION)
}
const styles = StyleSheet.create({
container: {
// @ts-ignore web only
position: 'fixed',
left: 20,
bottom: 20,
// @ts-ignore web only
width: 'calc(100% - 40px)',
maxWidth: 380,
padding: 20,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 10,
borderWidth: 1,
},
dismissBackdrop: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
iconContainer: {
width: 32,
height: 32,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
},
icon: {
flexShrink: 0,
},
text: {
marginLeft: 10,
},
})
src/view/screens/Storybook/Toasts.tsx
+40 -84
View File
@@ -1,64 +1,11 @@
import {Pressable, View} from 'react-native'
import {show as deprecatedShow} from '#/view/com/util/Toast'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {show} from '#/components/Toast'
import {getToastTypeStyles, TOAST_TYPE_TO_ICON} from '#/components/Toast/style'
import {type ToastType} from '#/components/Toast/types'
import {H1, Text} from '#/components/Typography'
function ToastPreview({message, type}: {message: string; type: ToastType}) {
const t = useTheme()
const toastStyles = getToastTypeStyles(t)
const colors = toastStyles[type as keyof typeof toastStyles]
const IconComponent =
TOAST_TYPE_TO_ICON[type as keyof typeof TOAST_TYPE_TO_ICON]
return (
<Pressable
accessibilityRole="button"
onPress={() => show(message, type)}
style={[
{backgroundColor: colors.backgroundColor},
a.shadow_sm,
{borderColor: colors.borderColor},
a.rounded_sm,
a.border,
a.px_sm,
a.py_sm,
a.flex_row,
a.gap_sm,
a.align_center,
]}>
<View
style={[
a.flex_shrink_0,
a.rounded_full,
{width: 24, height: 24},
a.align_center,
a.justify_center,
{
backgroundColor: colors.backgroundColor,
},
]}>
<IconComponent fill={colors.iconColor} size="xs" />
</View>
<View style={[a.flex_1]}>
<Text
style={[
a.text_sm,
a.font_bold,
a.leading_snug,
{color: colors.textColor},
]}
emoji>
{message}
</Text>
</View>
</Pressable>
)
}
import {Toast} from '#/components/Toast/Toast'
import {H1} from '#/components/Typography'
export function Toasts() {
return (
@@ -66,35 +13,44 @@ export function Toasts() {
<H1>Toast Examples</H1>
<View style={[a.gap_md]}>
<View style={[a.gap_xs]}>
<ToastPreview message="Default Toast" type="default" />
</View>
<View style={[a.gap_xs]}>
<ToastPreview
message="Operation completed successfully!"
type="success"
<Pressable
accessibilityRole="button"
onPress={() => show('Default toast', 'default')}>
<Toast content="Default toast" type="default" />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() =>
show(
'This is a longer message to test how the toast handles multiple lines of text content.',
'default',
)
}>
<Toast
content="This is a longer message to test how the toast handles multiple lines of text content."
type="default"
/>
</View>
<View style={[a.gap_xs]}>
<ToastPreview message="Something went wrong!" type="error" />
</View>
<View style={[a.gap_xs]}>
<ToastPreview message="Please check your input" type="warning" />
</View>
<View style={[a.gap_xs]}>
<ToastPreview message="Here's some helpful information" type="info" />
</View>
<View style={[a.gap_xs]}>
<ToastPreview
message="This is a longer message to test how the toast handles multiple lines of text content."
type="info"
/>
</View>
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() => show('Success toast', 'success')}>
<Toast content="Success toast" type="success" />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() => show('Info toast', 'info')}>
<Toast content="Info" type="info" />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() => show('Warning toast', 'warning')}>
<Toast content="Warning" type="warning" />
</Pressable>
<Pressable
accessibilityRole="button"
onPress={() => show('Error toast', 'error')}>
<Toast content="Error" type="error" />
</Pressable>
<Button
label="Deprecated toast example"
src/view/screens/Storybook/index.tsx
+2 -1
View File
@@ -91,6 +91,8 @@ function StorybookInner() {
</Button>
</View>
<Toasts />
<Button
variant="solid"
color="primary"
@@ -123,7 +125,6 @@ function StorybookInner() {
<Breakpoints />
<Dialogs />
<Admonitions />
<Toasts />
<Settings />
<Button