diff --git a/src/components/Toast/const.ts b/src/components/Toast/const.ts new file mode 100644 index 0000000000..034d0a2fce --- /dev/null +++ b/src/components/Toast/const.ts @@ -0,0 +1 @@ +export const DEFAULT_TOAST_DURATION = 3000 diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx index 31135ed69f..46d73d7736 100644 --- a/src/components/Toast/index.tsx +++ b/src/components/Toast/index.tsx @@ -20,10 +20,10 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {atoms as a} from '#/alf' +import {DEFAULT_TOAST_DURATION} from '#/components/Toast/const' import {Toast} from '#/components/Toast/Toast' import {type ToastApi, type ToastType} from '#/components/Toast/types' -const TIMEOUT = 2e3 const TOAST_ANIMATION_DURATION = 300 export function ToastContainer() { @@ -44,6 +44,7 @@ export const toast: ToastApi = { type={props.type} content={props.content} a11yLabel={props.a11yLabel} + duration={props.duration ?? DEFAULT_TOAST_DURATION} destroy={() => item.destroy()} /> ), @@ -55,11 +56,13 @@ function AnimatedToast({ type, content, a11yLabel, + duration, destroy, }: { type: ToastType content: React.ReactNode a11yLabel: string + duration: number destroy: () => void }) { const {top} = useSafeAreaInsets() @@ -82,7 +85,7 @@ function AnimatedToast({ const destroyTimeoutRef = useRef>() const hideAndDestroyAfterTimeout = useNonReactiveCallback(() => { clearTimeout(destroyTimeoutRef.current) - destroyTimeoutRef.current = setTimeout(hideAndDestroyImmediately, TIMEOUT) + destroyTimeoutRef.current = setTimeout(hideAndDestroyImmediately, duration) }) const pauseDestroy = useNonReactiveCallback(() => { clearTimeout(destroyTimeoutRef.current) diff --git a/src/components/Toast/index.web.tsx b/src/components/Toast/index.web.tsx index 82c38f8d1c..92a6b79d56 100644 --- a/src/components/Toast/index.web.tsx +++ b/src/components/Toast/index.web.tsx @@ -8,10 +8,10 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {atoms as a, web} from '#/alf' +import {DEFAULT_TOAST_DURATION} from '#/components/Toast/const' import {Toast} from '#/components/Toast/Toast' import {type ToastApi, type ToastType} from '#/components/Toast/types' -const DURATION = 3500 const TOAST_ANIMATION_STYLES = { entering: { animation: 'toastFadeIn 0.3s ease-out forwards', @@ -97,6 +97,6 @@ export const toast: ToastApi = { toastTimeout = setTimeout(() => { globalSetActiveToast?.(undefined) - }, DURATION) + }, props.duration || DEFAULT_TOAST_DURATION) }, } diff --git a/src/components/Toast/types.ts b/src/components/Toast/types.ts index 5d03b05938..2bd36b042c 100644 --- a/src/components/Toast/types.ts +++ b/src/components/Toast/types.ts @@ -5,5 +5,6 @@ export type ToastApi = { type: ToastType content: React.ReactNode a11yLabel: string + duration?: number }) => void } diff --git a/src/view/screens/Storybook/Toasts.tsx b/src/view/screens/Storybook/Toasts.tsx index 7c92b8348c..8fc6f095f7 100644 --- a/src/view/screens/Storybook/Toasts.tsx +++ b/src/view/screens/Storybook/Toasts.tsx @@ -24,6 +24,18 @@ export function Toasts() { }> + + toast.show({ + type: 'default', + content: 'Default toast, 6 seconds', + a11yLabel: 'Default toast, 6 seconds', + duration: 6e3, + }) + }> + +