diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/view/com/util/Toast.style.tsx | 38 | ||||
-rw-r--r-- | src/view/com/util/Toast.tsx | 27 | ||||
-rw-r--r-- | src/view/com/util/Toast.web.tsx | 13 |
3 files changed, 62 insertions, 16 deletions
diff --git a/src/view/com/util/Toast.style.tsx b/src/view/com/util/Toast.style.tsx index 8b952fd00..3869e6890 100644 --- a/src/view/com/util/Toast.style.tsx +++ b/src/view/com/util/Toast.style.tsx @@ -4,18 +4,42 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo' import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' -export type ToastType = - | 'default' - | 'success' - | 'error' - | 'warning' - | 'info' +export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' + +export type LegacyToastType = | 'xmark' | 'exclamation-circle' | 'check' | 'clipboard-check' | 'circle-exclamation' +export const convertLegacyToastType = ( + type: ToastType | LegacyToastType, +): ToastType => { + switch (type) { + // these ones are fine + case 'default': + case 'success': + case 'error': + case 'warning': + case 'info': + return type + // legacy ones need conversion + case 'xmark': + return 'error' + case 'exclamation-circle': + return 'warning' + case 'check': + return 'success' + case 'clipboard-check': + return 'success' + case 'circle-exclamation': + return 'warning' + default: + return 'default' + } +} + export const TOAST_ANIMATION_CONFIG = { duration: 300, damping: 15, @@ -165,7 +189,7 @@ export const TOAST_WEB_KEYFRAMES = ` opacity: 1; } } - + @keyframes toastFadeOut { from { opacity: 1; diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx index 4c999ca2a..54ef7042d 100644 --- a/src/view/com/util/Toast.tsx +++ b/src/view/com/util/Toast.tsx @@ -20,7 +20,9 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import { + convertLegacyToastType, getToastTypeStyles, + type LegacyToastType, TOAST_ANIMATION_CONFIG, TOAST_TYPE_TO_ICON, type ToastType, @@ -30,14 +32,30 @@ import {Text} from '#/components/Typography' const TIMEOUT = 2e3 -export function show(message: string, type: ToastType = 'default') { +// Use type overloading to mark certain types as deprecated -sfn +// https://stackoverflow.com/a/78325851/13325987 +export function show(message: string, type?: ToastType): void +/** + * @deprecated type is deprecated - use one of `'default' | 'success' | 'error' | 'warning' | 'info'` + */ +export function show(message: string, type?: LegacyToastType): void +export function show( + message: string, + type: ToastType | LegacyToastType = 'default', +): void { if (process.env.NODE_ENV === 'test') { return } AccessibilityInfo.announceForAccessibility(message) const item = new RootSiblings( - <Toast message={message} type={type} destroy={() => item.destroy()} />, + ( + <Toast + message={message} + type={convertLegacyToastType(type)} + destroy={() => item.destroy()} + /> + ), ) } @@ -57,9 +75,8 @@ function Toast({ const [cardHeight, setCardHeight] = useState(0) 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] + 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 diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx index 1abbaa003..6b99b30bf 100644 --- a/src/view/com/util/Toast.web.tsx +++ b/src/view/com/util/Toast.web.tsx @@ -6,8 +6,10 @@ import {useEffect, useState} from 'react' import {Pressable, StyleSheet, Text, View} from 'react-native' import { + convertLegacyToastType, getToastTypeStyles, getToastWebAnimationStyles, + type LegacyToastType, TOAST_TYPE_TO_ICON, TOAST_WEB_KEYFRAMES, type ToastType, @@ -63,11 +65,11 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => { const toastTypeStyles = getToastTypeStyles(t) const toastStyles = activeToast - ? toastTypeStyles[activeToast.type as keyof typeof toastTypeStyles] + ? toastTypeStyles[activeToast.type] : toastTypeStyles.default const IconComponent = activeToast - ? TOAST_TYPE_TO_ICON[activeToast.type as keyof typeof TOAST_TYPE_TO_ICON] + ? TOAST_TYPE_TO_ICON[activeToast.type] : TOAST_TYPE_TO_ICON.default const animationStyles = getToastWebAnimationStyles() @@ -125,12 +127,15 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => { // methods // = -export function show(text: string, type: ToastType = 'default') { +export function show( + text: string, + type: ToastType | LegacyToastType = 'default', +) { if (toastTimeout) { clearTimeout(toastTimeout) } - globalSetActiveToast?.({text, type}) + globalSetActiveToast?.({text, type: convertLegacyToastType(type)}) toastTimeout = setTimeout(() => { globalSetActiveToast?.(undefined) }, DURATION) |