An ATproto social media client -- with an independent Appview.
Convert old toast types to new ones, mark as deprecated (#8746)
* convert old types to new types
* add depreciation warning for old warnings
* rm as consts
authored by
Samuel Newman
and committed by
GitHub
db7bdae5
ee7f5087
+62
-16
+31
-7
src/view/com/util/Toast.style.tsx
+31
-7
src/view/com/util/Toast.style.tsx
···
4
4
import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
5
5
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
6
6
7
-
export type ToastType =
8
-
| 'default'
9
-
| 'success'
10
-
| 'error'
11
-
| 'warning'
12
-
| 'info'
7
+
export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
8
+
9
+
export type LegacyToastType =
13
10
| 'xmark'
14
11
| 'exclamation-circle'
15
12
| 'check'
16
13
| 'clipboard-check'
17
14
| 'circle-exclamation'
15
+
16
+
export const convertLegacyToastType = (
17
+
type: ToastType | LegacyToastType,
18
+
): ToastType => {
19
+
switch (type) {
20
+
// these ones are fine
21
+
case 'default':
22
+
case 'success':
23
+
case 'error':
24
+
case 'warning':
25
+
case 'info':
26
+
return type
27
+
// legacy ones need conversion
28
+
case 'xmark':
29
+
return 'error'
30
+
case 'exclamation-circle':
31
+
return 'warning'
32
+
case 'check':
33
+
return 'success'
34
+
case 'clipboard-check':
35
+
return 'success'
36
+
case 'circle-exclamation':
37
+
return 'warning'
38
+
default:
39
+
return 'default'
40
+
}
41
+
}
18
42
19
43
export const TOAST_ANIMATION_CONFIG = {
20
44
duration: 300,
···
165
189
opacity: 1;
166
190
}
167
191
}
168
-
192
+
169
193
@keyframes toastFadeOut {
170
194
from {
171
195
opacity: 1;
+22
-5
src/view/com/util/Toast.tsx
+22
-5
src/view/com/util/Toast.tsx
···
20
20
21
21
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
22
22
import {
23
+
convertLegacyToastType,
23
24
getToastTypeStyles,
25
+
type LegacyToastType,
24
26
TOAST_ANIMATION_CONFIG,
25
27
TOAST_TYPE_TO_ICON,
26
28
type ToastType,
···
30
32
31
33
const TIMEOUT = 2e3
32
34
33
-
export function show(message: string, type: ToastType = 'default') {
35
+
// Use type overloading to mark certain types as deprecated -sfn
36
+
// https://stackoverflow.com/a/78325851/13325987
37
+
export function show(message: string, type?: ToastType): void
38
+
/**
39
+
* @deprecated type is deprecated - use one of `'default' | 'success' | 'error' | 'warning' | 'info'`
40
+
*/
41
+
export function show(message: string, type?: LegacyToastType): void
42
+
export function show(
43
+
message: string,
44
+
type: ToastType | LegacyToastType = 'default',
45
+
): void {
34
46
if (process.env.NODE_ENV === 'test') {
35
47
return
36
48
}
37
49
38
50
AccessibilityInfo.announceForAccessibility(message)
39
51
const item = new RootSiblings(
40
-
<Toast message={message} type={type} destroy={() => item.destroy()} />,
52
+
(
53
+
<Toast
54
+
message={message}
55
+
type={convertLegacyToastType(type)}
56
+
destroy={() => item.destroy()}
57
+
/>
58
+
),
41
59
)
42
60
}
43
61
···
57
75
const [cardHeight, setCardHeight] = useState(0)
58
76
59
77
const toastStyles = getToastTypeStyles(t)
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]
78
+
const colors = toastStyles[type]
79
+
const IconComponent = TOAST_TYPE_TO_ICON[type]
63
80
64
81
// for the exit animation to work on iOS the animated component
65
82
// must not be the root component
+9
-4
src/view/com/util/Toast.web.tsx
+9
-4
src/view/com/util/Toast.web.tsx
···
6
6
import {Pressable, StyleSheet, Text, View} from 'react-native'
7
7
8
8
import {
9
+
convertLegacyToastType,
9
10
getToastTypeStyles,
10
11
getToastWebAnimationStyles,
12
+
type LegacyToastType,
11
13
TOAST_TYPE_TO_ICON,
12
14
TOAST_WEB_KEYFRAMES,
13
15
type ToastType,
···
63
65
64
66
const toastTypeStyles = getToastTypeStyles(t)
65
67
const toastStyles = activeToast
66
-
? toastTypeStyles[activeToast.type as keyof typeof toastTypeStyles]
68
+
? toastTypeStyles[activeToast.type]
67
69
: toastTypeStyles.default
68
70
69
71
const IconComponent = activeToast
70
-
? TOAST_TYPE_TO_ICON[activeToast.type as keyof typeof TOAST_TYPE_TO_ICON]
72
+
? TOAST_TYPE_TO_ICON[activeToast.type]
71
73
: TOAST_TYPE_TO_ICON.default
72
74
73
75
const animationStyles = getToastWebAnimationStyles()
···
125
127
// methods
126
128
// =
127
129
128
-
export function show(text: string, type: ToastType = 'default') {
130
+
export function show(
131
+
text: string,
132
+
type: ToastType | LegacyToastType = 'default',
133
+
) {
129
134
if (toastTimeout) {
130
135
clearTimeout(toastTimeout)
131
136
}
132
137
133
-
globalSetActiveToast?.({text, type})
138
+
globalSetActiveToast?.({text, type: convertLegacyToastType(type)})
134
139
toastTimeout = setTimeout(() => {
135
140
globalSetActiveToast?.(undefined)
136
141
}, DURATION)