Bluesky app fork with some witchin' additions 💫

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.fm and committed by GitHub db7bdae5 ee7f5087

Changed files
+62 -16
src
+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
··· 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
··· 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)