robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge pull request #8744 from internet-development/@APiligrim/update-toast
hot fix: imports for toast and alignment
+41
-26
+14
-4
src/view/com/util/Toast.style.tsx
+14
-4
src/view/com/util/Toast.style.tsx
···
1
-
import {type Theme, select} from '#/alf'
1
+
import {select, type Theme} from '#/alf'
2
+
import {Check_Stroke2_Corner0_Rounded as SuccessIcon} from '#/components/icons/Check'
3
+
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
2
4
import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
3
5
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
4
-
import {Check_Stroke2_Corner0_Rounded as SuccessIcon} from '#/components/icons/Check'
5
-
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
6
6
7
-
export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
7
+
export type ToastType =
8
+
| 'default'
9
+
| 'success'
10
+
| 'error'
11
+
| 'warning'
12
+
| 'info'
13
+
| 'xmark'
14
+
| 'exclamation-circle'
15
+
| 'check'
16
+
| 'clipboard-check'
17
+
| 'circle-exclamation'
8
18
9
19
export const TOAST_ANIMATION_CONFIG = {
10
20
duration: 300,
+9
-7
src/view/com/util/Toast.tsx
+9
-7
src/view/com/util/Toast.tsx
···
17
17
} from 'react-native-reanimated'
18
18
import RootSiblings from 'react-native-root-siblings'
19
19
import {useSafeAreaInsets} from 'react-native-safe-area-context'
20
+
20
21
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
21
-
import {atoms as a, useTheme} from '#/alf'
22
-
import {Text} from '#/components/Typography'
23
22
import {
24
-
type ToastType,
25
-
TOAST_TYPE_TO_ICON,
26
23
getToastTypeStyles,
27
24
TOAST_ANIMATION_CONFIG,
28
-
} from './Toast.style'
25
+
TOAST_TYPE_TO_ICON,
26
+
type ToastType,
27
+
} from '#/view/com/util/Toast.style'
28
+
import {atoms as a, useTheme} from '#/alf'
29
+
import {Text} from '#/components/Typography'
29
30
30
31
const TIMEOUT = 2e3
31
32
···
56
57
const [cardHeight, setCardHeight] = useState(0)
57
58
58
59
const toastStyles = getToastTypeStyles(t)
59
-
const colors = toastStyles[type]
60
-
const IconComponent = TOAST_TYPE_TO_ICON[type]
60
+
const colors = toastStyles[type as keyof typeof toastStyles]
61
+
const IconComponent =
62
+
TOAST_TYPE_TO_ICON[type as keyof typeof TOAST_TYPE_TO_ICON]
61
63
62
64
// for the exit animation to work on iOS the animated component
63
65
// must not be the root component
+8
-7
src/view/com/util/Toast.web.tsx
+8
-7
src/view/com/util/Toast.web.tsx
···
4
4
5
5
import {useEffect, useState} from 'react'
6
6
import {Pressable, StyleSheet, Text, View} from 'react-native'
7
-
import {atoms as a, useTheme} from '#/alf'
7
+
8
8
import {
9
-
type ToastType,
10
-
TOAST_TYPE_TO_ICON,
11
9
getToastTypeStyles,
12
10
getToastWebAnimationStyles,
11
+
TOAST_TYPE_TO_ICON,
13
12
TOAST_WEB_KEYFRAMES,
14
-
} from './Toast.style'
13
+
type ToastType,
14
+
} from '#/view/com/util/Toast.style'
15
+
import {atoms as a, useTheme} from '#/alf'
15
16
16
17
const DURATION = 3500
17
18
···
62
63
63
64
const toastTypeStyles = getToastTypeStyles(t)
64
65
const toastStyles = activeToast
65
-
? toastTypeStyles[activeToast.type]
66
+
? toastTypeStyles[activeToast.type as keyof typeof toastTypeStyles]
66
67
: toastTypeStyles.default
67
68
68
69
const IconComponent = activeToast
69
-
? TOAST_TYPE_TO_ICON[activeToast.type]
70
+
? TOAST_TYPE_TO_ICON[activeToast.type as keyof typeof TOAST_TYPE_TO_ICON]
70
71
: TOAST_TYPE_TO_ICON.default
71
72
72
73
const animationStyles = getToastWebAnimationStyles()
···
146
147
maxWidth: 380,
147
148
padding: 20,
148
149
flexDirection: 'row',
149
-
alignItems: 'flex-start',
150
+
alignItems: 'center',
150
151
borderRadius: 10,
151
152
borderWidth: 1,
152
153
},
+10
-8
src/view/screens/Storybook/Toasts.tsx
+10
-8
src/view/screens/Storybook/Toasts.tsx
···
1
-
import {View, Pressable} from 'react-native'
1
+
import {Pressable, View} from 'react-native'
2
2
3
-
import {atoms as a, useTheme} from '#/alf'
4
-
import {Text, H1} from '#/components/Typography'
3
+
import * as Toast from '#/view/com/util/Toast'
5
4
import {
6
-
type ToastType,
7
-
TOAST_TYPE_TO_ICON,
8
5
getToastTypeStyles,
6
+
TOAST_TYPE_TO_ICON,
7
+
type ToastType,
9
8
} from '#/view/com/util/Toast.style'
10
-
import * as Toast from '#/view/com/util/Toast'
9
+
import {atoms as a, useTheme} from '#/alf'
10
+
import {H1, Text} from '#/components/Typography'
11
11
12
12
function ToastPreview({message, type}: {message: string; type: ToastType}) {
13
13
const t = useTheme()
14
14
const toastStyles = getToastTypeStyles(t)
15
-
const colors = toastStyles[type]
16
-
const IconComponent = TOAST_TYPE_TO_ICON[type]
15
+
const colors = toastStyles[type as keyof typeof toastStyles]
16
+
const IconComponent =
17
+
TOAST_TYPE_TO_ICON[type as keyof typeof TOAST_TYPE_TO_ICON]
17
18
18
19
return (
19
20
<Pressable
21
+
accessibilityRole="button"
20
22
onPress={() => Toast.show(message, type)}
21
23
style={[
22
24
{backgroundColor: colors.backgroundColor},