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

add burnt

Browse Source
This commit is contained in:
Samuel Newman
2025-03-08 12:15:54 +00:00
parent d155b718b5
commit 1c91f0b7b9
16 changed files with 375 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.web.tsx
+2 -2
View File
@@ -51,7 +51,6 @@ import {Provider as TrendingConfigProvider} from '#/state/trending-config'
import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoWebContext'
import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
import * as Toast from '#/view/com/util/Toast'
import {ToastContainer} from '#/view/com/util/Toast.web'
import {Shell} from '#/view/shell/index'
import {ThemeProvider as Alf} from '#/alf'
import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
@@ -60,6 +59,7 @@ import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
import {Provider as PortalProvider} from '#/components/Portal'
import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
import {Toaster} from './components/Toast/Toaster'
/**
* Begin geolocation ASAP
@@ -149,7 +149,7 @@ function InnerApp() {
</StatsigProvider>
</ComposerProvider>
</QueryProvider>
<ToastContainer />
<Toaster />
</React.Fragment>
</ActiveVideoProvider>
</VideoVolumeProvider>
src/components/Toast/LegacyToast.tsx
+207
View File
@@ -0,0 +1,207 @@
import {useEffect, useMemo, useRef, useState} from 'react'
import {AccessibilityInfo, View} from 'react-native'
import {
Gesture,
GestureDetector,
GestureHandlerRootView,
} from 'react-native-gesture-handler'
import Animated, {
FadeInUp,
FadeOutUp,
runOnJS,
useAnimatedReaction,
useAnimatedStyle,
useSharedValue,
withDecay,
withSpring,
} from 'react-native-reanimated'
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 {Text} from '#/components/Typography'
import {IconName, ToastIcon} from './ToastIcon'
const TIMEOUT = 2e3
/**
* NOTE: This is the JS version of the toast component, used for android
*/
export function show(message: string, icon: IconName = 'check') {
if (process.env.NODE_ENV === 'test') return
AccessibilityInfo.announceForAccessibility(message)
const item = new RootSiblings(
<Toast message={message} icon={icon} destroy={() => item.destroy()} />,
)
}
function Toast({
message,
icon,
destroy,
}: {
message: string
icon: IconName
destroy: () => void
}) {
const t = useTheme()
const {top} = useSafeAreaInsets()
const isPanning = useSharedValue(false)
const dismissSwipeTranslateY = useSharedValue(0)
const [cardHeight, setCardHeight] = useState(0)
// 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
const [alive, setAlive] = useState(true)
const hideAndDestroyImmediately = () => {
setAlive(false)
setTimeout(() => {
destroy()
}, 1e3)
}
const destroyTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
const hideAndDestroyAfterTimeout = useNonReactiveCallback(() => {
clearTimeout(destroyTimeoutRef.current)
destroyTimeoutRef.current = setTimeout(hideAndDestroyImmediately, TIMEOUT)
})
const pauseDestroy = useNonReactiveCallback(() => {
clearTimeout(destroyTimeoutRef.current)
})
useEffect(() => {
hideAndDestroyAfterTimeout()
}, [hideAndDestroyAfterTimeout])
const panGesture = useMemo(() => {
return Gesture.Pan()
.activeOffsetY([-10, 10])
.failOffsetX([-10, 10])
.maxPointers(1)
.onStart(() => {
'worklet'
if (!alive) return
isPanning.set(true)
runOnJS(pauseDestroy)()
})
.onUpdate(e => {
'worklet'
if (!alive) return
dismissSwipeTranslateY.value = e.translationY
})
.onEnd(e => {
'worklet'
if (!alive) return
runOnJS(hideAndDestroyAfterTimeout)()
isPanning.set(false)
if (e.velocityY < -100) {
if (dismissSwipeTranslateY.value === 0) {
// HACK: If the initial value is 0, withDecay() animation doesn't start.
// This is a bug in Reanimated, but for now we'll work around it like this.
dismissSwipeTranslateY.value = 1
}
dismissSwipeTranslateY.value = withDecay({
velocity: e.velocityY,
velocityFactor: Math.max(3500 / Math.abs(e.velocityY), 1),
deceleration: 1,
})
} else {
dismissSwipeTranslateY.value = withSpring(0, {
stiffness: 500,
damping: 50,
})
}
})
}, [
dismissSwipeTranslateY,
isPanning,
alive,
hideAndDestroyAfterTimeout,
pauseDestroy,
])
const topOffset = top + 10
useAnimatedReaction(
() =>
!isPanning.get() &&
dismissSwipeTranslateY.get() < -topOffset - cardHeight,
(isSwipedAway, prevIsSwipedAway) => {
'worklet'
if (isSwipedAway && !prevIsSwipedAway) {
runOnJS(destroy)()
}
},
)
const animatedStyle = useAnimatedStyle(() => {
const translation = dismissSwipeTranslateY.get()
return {
transform: [
{
translateY: translation > 0 ? translation ** 0.7 : translation,
},
],
}
})
return (
<GestureHandlerRootView
style={[a.absolute, {top: topOffset, left: 16, right: 16}]}
pointerEvents="box-none">
{alive && (
<Animated.View
entering={FadeInUp}
exiting={FadeOutUp}
style={[a.flex_1]}>
<Animated.View
onLayout={evt => setCardHeight(evt.nativeEvent.layout.height)}
accessibilityRole="alert"
accessible={true}
accessibilityLabel={message}
accessibilityHint=""
onAccessibilityEscape={hideAndDestroyImmediately}
style={[
a.flex_1,
t.name === 'dark' ? t.atoms.bg_contrast_25 : t.atoms.bg,
a.shadow_lg,
t.atoms.border_contrast_medium,
a.rounded_sm,
a.border,
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:
t.name === 'dark'
? t.palette.black
: t.palette.primary_50,
},
]}>
<ToastIcon icon={icon} size="sm" />
</View>
<View style={[a.h_full, a.justify_center, a.flex_1]}>
<Text style={a.text_md} emoji>
{message}
</Text>
</View>
</View>
</GestureDetector>
</Animated.View>
</Animated.View>
)}
</GestureHandlerRootView>
)
}
src/components/Toast/ToastIcon.tsx
+83
View File
@@ -0,0 +1,83 @@
import {useMemo} from 'react'
import {Props as FontAwesomeProps} from '@fortawesome/react-native-fontawesome'
import type {SFSymbol} from 'sf-symbols-typescript'
import {useTheme} from '#/alf'
import {Props as SVGIconProps} from '#/components/icons/common'
import {CircleCheck_Stroke2_Corner0_Rounded} from '../icons/Check'
import {CircleInfo_Stroke2_Corner0_Rounded} from '../icons/CircleInfo'
import {Clipboard_Stroke2_Corner2_Rounded} from '../icons/Clipboard'
import {TimesLarge_Stroke2_Corner0_Rounded} from '../icons/Times'
import {Warning_Stroke2_Corner0_Rounded} from '../icons/Warning'
export type IconName = 'check' | 'error' | 'warning' | 'info' | 'copied'
export type LegacyIconName = Extract<
FontAwesomeProps['icon'],
'xmark' | 'check' | 'clipboard-check' | 'warning' | 'info'
>
/**
* Get new icon name from legacy fontawesome icon
*/
export const compat_convertLegacyIcon = (icon?: LegacyIconName): IconName => {
switch (icon) {
case undefined:
case 'check':
return 'check'
case 'xmark':
return 'error'
case 'clipboard-check':
return 'copied'
case 'warning':
return 'warning'
case 'info':
return 'info'
default:
throw new Error(`Unknown icon: ${icon}`)
}
}
function getComponent(name: IconName) {
switch (name) {
case 'check':
return CircleCheck_Stroke2_Corner0_Rounded
case 'error':
return TimesLarge_Stroke2_Corner0_Rounded
case 'warning':
return Warning_Stroke2_Corner0_Rounded
case 'info':
return CircleInfo_Stroke2_Corner0_Rounded
case 'copied':
return Clipboard_Stroke2_Corner2_Rounded
default:
throw new Error(`Unknown icon: ${name}`)
}
}
export function ToastIcon({
icon,
style,
...props
}: {icon: IconName} & SVGIconProps) {
const t = useTheme()
const Component = useMemo(() => getComponent(icon), [icon])
return <Component style={[t.atoms.text_contrast_medium, style]} {...props} />
}
export function getSfSymbol(name: IconName): SFSymbol {
switch (name) {
case 'check':
return 'checkmark.circle.fill'
case 'error':
return 'xmark.circle.fill'
case 'warning':
return 'exclamationmark.triangle.fill'
case 'info':
return 'info.circle.fill'
case 'copied':
return 'doc.on.clipboard.fill'
default:
throw new Error(`Unknown icon: ${name}`)
}
}
src/components/Toast/Toaster.tsx
+3
View File
@@ -0,0 +1,3 @@
export function Toaster() {
return null
}
src/components/Toast/Toaster.web.tsx
+14
View File
@@ -0,0 +1,14 @@
import {Toaster as BurntToaster} from 'burnt/web'
import {useBreakpoints, useTheme} from '#/alf'
export function Toaster() {
const t = useTheme()
const {gtMobile} = useBreakpoints()
return (
<BurntToaster
theme={t.scheme}
position={gtMobile ? 'bottom-left' : 'top-center'}
/>
)
}
src/components/Toast/index.android.ts
+9
View File
@@ -0,0 +1,9 @@
import {ToastProps} from './index.types'
import * as LegacyToast from './LegacyToast'
export * as Icon from './ToastIcon'
export function toast({message, icon}: ToastProps) {
if (process.env.NODE_ENV === 'test') return
LegacyToast.show(message, icon)
}
src/components/Toast/index.e2e.ts
+5
View File
@@ -0,0 +1,5 @@
import {ToastProps} from './index.types'
export * as Icon from './ToastIcon'
export function toast(_: ToastProps) {}
src/components/Toast/index.tsx
+18
View File
@@ -0,0 +1,18 @@
import {toast as burnt} from 'burnt'
import {ToastProps} from './index.types'
import {getSfSymbol, ToastIcon} from './ToastIcon'
export * as Icon from './ToastIcon'
export function toast({message, icon = 'check'}: ToastProps) {
if (process.env.NODE_ENV === 'test') return
burnt({
title: message,
icon: {
web: <ToastIcon icon={icon} size="sm" />,
ios: {name: getSfSymbol(icon), color: 'systemBlue'},
},
preset: 'custom',
})
}
src/components/Toast/index.types.ts
+6
View File
@@ -0,0 +1,6 @@
import {IconName} from './ToastIcon'
export interface ToastProps {
message: string
icon?: IconName
}
src/components/icons/Check.tsx
+4
View File
@@ -7,3 +7,7 @@ export const Check_Stroke2_Corner0_Rounded = createSinglePathSVG({
export const CheckThick_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M21.474 2.98a2.5 2.5 0 0 1 .545 3.494l-10.222 14a2.5 2.5 0 0 1-3.528.52L2.49 16.617a2.5 2.5 0 0 1 3.018-3.986l3.75 2.84L17.98 3.525a2.5 2.5 0 0 1 3.493-.545Z',
})
export const CircleCheck_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.633-3.274a1 1 0 0 1 .141 1.407l-4.5 5.5a1 1 0 0 1-1.481.074l-2-2a1 1 0 1 1 1.414-1.414l1.219 1.219 3.8-4.645a1 1 0 0 1 1.407-.141Z',
})
src/view/com/util/Toast.e2e.tsx
-1
View File
@@ -1 +0,0 @@
export function show() {}
src/view/com/util/Toast.tsx
+3 -213
View File
@@ -1,215 +1,5 @@
import {useEffect, useMemo, useRef, useState} from 'react'
import {AccessibilityInfo, View} from 'react-native'
import {
Gesture,
GestureDetector,
GestureHandlerRootView,
} from 'react-native-gesture-handler'
import Animated, {
FadeInUp,
FadeOutUp,
runOnJS,
useAnimatedReaction,
useAnimatedStyle,
useSharedValue,
withDecay,
withSpring,
} from 'react-native-reanimated'
import RootSiblings from 'react-native-root-siblings'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {
FontAwesomeIcon,
Props as FontAwesomeProps,
} from '@fortawesome/react-native-fontawesome'
import {Icon, toast} from '#/components/Toast'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography'
const TIMEOUT = 2e3
export function show(
message: string,
icon: FontAwesomeProps['icon'] = 'check',
) {
if (process.env.NODE_ENV === 'test') {
return
}
AccessibilityInfo.announceForAccessibility(message)
const item = new RootSiblings(
<Toast message={message} icon={icon} destroy={() => item.destroy()} />,
)
}
function Toast({
message,
icon,
destroy,
}: {
message: string
icon: FontAwesomeProps['icon']
destroy: () => void
}) {
const t = useTheme()
const {top} = useSafeAreaInsets()
const isPanning = useSharedValue(false)
const dismissSwipeTranslateY = useSharedValue(0)
const [cardHeight, setCardHeight] = useState(0)
// 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
const [alive, setAlive] = useState(true)
const hideAndDestroyImmediately = () => {
setAlive(false)
setTimeout(() => {
destroy()
}, 1e3)
}
const destroyTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
const hideAndDestroyAfterTimeout = useNonReactiveCallback(() => {
clearTimeout(destroyTimeoutRef.current)
destroyTimeoutRef.current = setTimeout(hideAndDestroyImmediately, TIMEOUT)
})
const pauseDestroy = useNonReactiveCallback(() => {
clearTimeout(destroyTimeoutRef.current)
})
useEffect(() => {
hideAndDestroyAfterTimeout()
}, [hideAndDestroyAfterTimeout])
const panGesture = useMemo(() => {
return Gesture.Pan()
.activeOffsetY([-10, 10])
.failOffsetX([-10, 10])
.maxPointers(1)
.onStart(() => {
'worklet'
if (!alive) return
isPanning.set(true)
runOnJS(pauseDestroy)()
})
.onUpdate(e => {
'worklet'
if (!alive) return
dismissSwipeTranslateY.value = e.translationY
})
.onEnd(e => {
'worklet'
if (!alive) return
runOnJS(hideAndDestroyAfterTimeout)()
isPanning.set(false)
if (e.velocityY < -100) {
if (dismissSwipeTranslateY.value === 0) {
// HACK: If the initial value is 0, withDecay() animation doesn't start.
// This is a bug in Reanimated, but for now we'll work around it like this.
dismissSwipeTranslateY.value = 1
}
dismissSwipeTranslateY.value = withDecay({
velocity: e.velocityY,
velocityFactor: Math.max(3500 / Math.abs(e.velocityY), 1),
deceleration: 1,
})
} else {
dismissSwipeTranslateY.value = withSpring(0, {
stiffness: 500,
damping: 50,
})
}
})
}, [
dismissSwipeTranslateY,
isPanning,
alive,
hideAndDestroyAfterTimeout,
pauseDestroy,
])
const topOffset = top + 10
useAnimatedReaction(
() =>
!isPanning.get() &&
dismissSwipeTranslateY.get() < -topOffset - cardHeight,
(isSwipedAway, prevIsSwipedAway) => {
'worklet'
if (isSwipedAway && !prevIsSwipedAway) {
runOnJS(destroy)()
}
},
)
const animatedStyle = useAnimatedStyle(() => {
const translation = dismissSwipeTranslateY.get()
return {
transform: [
{
translateY: translation > 0 ? translation ** 0.7 : translation,
},
],
}
})
return (
<GestureHandlerRootView
style={[a.absolute, {top: topOffset, left: 16, right: 16}]}
pointerEvents="box-none">
{alive && (
<Animated.View
entering={FadeInUp}
exiting={FadeOutUp}
style={[a.flex_1]}>
<Animated.View
onLayout={evt => setCardHeight(evt.nativeEvent.layout.height)}
accessibilityRole="alert"
accessible={true}
accessibilityLabel={message}
accessibilityHint=""
onAccessibilityEscape={hideAndDestroyImmediately}
style={[
a.flex_1,
t.name === 'dark' ? t.atoms.bg_contrast_25 : t.atoms.bg,
a.shadow_lg,
t.atoms.border_contrast_medium,
a.rounded_sm,
a.border,
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:
t.name === 'dark'
? t.palette.black
: t.palette.primary_50,
},
]}>
<FontAwesomeIcon
icon={icon}
size={16}
style={t.atoms.text_contrast_medium}
/>
</View>
<View style={[a.h_full, a.justify_center, a.flex_1]}>
<Text style={a.text_md} emoji>
{message}
</Text>
</View>
</View>
</GestureDetector>
</Animated.View>
</Animated.View>
)}
</GestureHandlerRootView>
)
export function show(message: string, legacyIcon: Icon.LegacyIconName) {
toast({message, icon: Icon.compat_convertLegacyIcon(legacyIcon)})
}
src/view/com/util/Toast.web.tsx
-104
View File
@@ -1,104 +0,0 @@
/*
* Note: the dataSet properties are used to leverage custom CSS in public/index.html
*/
import React, {useEffect, useState} from 'react'
import {Pressable, StyleSheet, Text, View} from 'react-native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
Props as FontAwesomeProps,
} from '@fortawesome/react-native-fontawesome'
const DURATION = 3500
interface ActiveToast {
text: string
icon: FontAwesomeProps['icon']
}
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 [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
useEffect(() => {
globalSetActiveToast = (t: ActiveToast | undefined) => {
setActiveToast(t)
}
})
return (
<>
{activeToast && (
<View style={styles.container}>
<FontAwesomeIcon
icon={activeToast.icon}
size={20}
style={styles.icon as FontAwesomeIconStyle}
/>
<Text style={styles.text}>{activeToast.text}</Text>
<Pressable
style={styles.dismissBackdrop}
accessibilityLabel="Dismiss"
accessibilityHint=""
onPress={() => {
setActiveToast(undefined)
}}
/>
</View>
)}
</>
)
}
// methods
// =
export function show(text: string, icon: FontAwesomeProps['icon'] = 'check') {
if (toastTimeout) {
clearTimeout(toastTimeout)
}
globalSetActiveToast?.({text, icon})
toastTimeout = setTimeout(() => {
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: 350,
padding: 20,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#000c',
borderRadius: 10,
},
dismissBackdrop: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
icon: {
color: '#fff',
flexShrink: 0,
},
text: {
color: '#fff',
fontSize: 18,
marginLeft: 10,
},
})