From ba5b9bf015c6830c221c8e77516abe9b7a063f0d Mon Sep 17 00:00:00 2001 From: literat Date: Fri, 24 May 2024 14:08:01 +0200 Subject: [PATCH] fixup! Feat(web-react): Add Message and Link for ToastBar #DS-1213 --- .../src/components/Toast/ToastContext.tsx | 57 ++++++------------- 1 file changed, 17 insertions(+), 40 deletions(-) diff --git a/packages/web-react/src/components/Toast/ToastContext.tsx b/packages/web-react/src/components/Toast/ToastContext.tsx index 3f0265e7ff..34f60546e8 100644 --- a/packages/web-react/src/components/Toast/ToastContext.tsx +++ b/packages/web-react/src/components/Toast/ToastContext.tsx @@ -19,22 +19,20 @@ export interface ToastItem { content: ReactNode; } +type ShowPayloadOptions = { + autoCloseInterval?: number; + color?: ToastColorType; + enableAutoClose?: boolean; + hasIcon?: boolean; + iconName?: string; + isDismissible?: boolean; +}; + export interface ToastContextType extends ToastState { clear: () => void; hide: (id: string) => void; setQueue: (newQueue: ToastItem[]) => void; - show: ( - content: ReactNode, - id: string, - options?: { - autoCloseInterval?: number; - color?: ToastColorType; - enableAutoClose?: boolean; - hasIcon?: boolean; - iconName?: string; - isDismissible?: boolean; - }, - ) => void; + show: (content: ReactNode, id: string, options?: ShowPayloadOptions) => void; } const defaultToastContext: ToastContextType = { @@ -53,14 +51,7 @@ type ActionType = payload: { content: ReactNode; toastId: string; - options?: { - autoCloseInterval?: number; - color?: ToastColorType; - enableAutoClose?: boolean; - hasIcon?: boolean; - iconName?: string; - isDismissible?: boolean; - }; + options?: ShowPayloadOptions; }; } | { type: 'hide'; payload: { id: string } } @@ -123,26 +114,12 @@ export const ToastProvider: FC = ({ children }) => { dispatch({ type: 'clear', payload: null }); }, []); - const show = useCallback( - ( - content: string | JSX.Element, - toastId: string, - options?: { - autoCloseInterval?: number; - color?: ToastColorType; - enableAutoClose?: boolean; - hasIcon?: boolean; - iconName?: string; - isDismissible?: boolean; - }, - ) => { - dispatch({ type: 'show', payload: { content, toastId, options } }); - - options?.enableAutoClose && - delayedCallback(() => hide(toastId), options?.autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL); - }, - [], - ); + const show = useCallback((content: ReactNode, toastId: string, options?: ShowPayloadOptions) => { + dispatch({ type: 'show', payload: { content, toastId, options } }); + + options?.enableAutoClose && + delayedCallback(() => hide(toastId), options?.autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL); + }, []); const setQueue = useCallback((newQueue: ToastItem[]) => { dispatch({ type: 'clear', payload: null });