🔧 chore: add id to allow singular toast deletion

This commit is contained in:
Andre H 2024-02-22 14:59:12 +07:00
parent fffc370d40
commit 5be29a9745
2 changed files with 14 additions and 12 deletions

View File

@ -17,13 +17,15 @@ interface CtaProps extends ButtonBaseProps, ButtonTheme {
buttonLabel: string; buttonLabel: string;
} }
export interface SimpleToastProps extends ToastProps { export interface SimpleToastProps extends ToastProps {
id: string;
title: string; title: string;
variant?: SimpleToastTheme['variant']; variant?: SimpleToastTheme['variant'];
cta?: CtaProps[]; cta?: CtaProps[];
onDismiss: (id?: string) => void; onDismiss: (toastId: string) => void;
} }
export const SimpleToast = ({ export const SimpleToast = ({
id,
className, className,
title, title,
variant = 'success', variant = 'success',
@ -62,11 +64,11 @@ export const SimpleToast = ({
const renderCloseButton = useMemo( const renderCloseButton = useMemo(
() => ( () => (
<div onClick={() => onDismiss(props.id)} className={closeIconCls()}> <div onClick={() => onDismiss(id)} className={closeIconCls()}>
<CrossIcon className="h-3 w-3" /> <CrossIcon className="h-3 w-3" />
</div> </div>
), ),
[], [id],
); );
return ( return (

View File

@ -11,7 +11,7 @@ export const Toaster = ({}: ToasterProps) => {
const renderToasts = useMemo( const renderToasts = useMemo(
() => () =>
toasts.map(({ id, ...props }) => ( toasts.map(({ id, ...props }) => (
<SimpleToast key={id} {...(props as SimpleToastProps)} /> <SimpleToast key={id} {...(props as SimpleToastProps)} id={id} />
)), )),
[toasts], [toasts],
); );